From 828a53705406764b45c4965deb2dd8e31fcda508 Mon Sep 17 00:00:00 2001
From: Brandon Sarazin <bsarazin1@gmail.com>
Date: Tue, 24 May 2022 19:32:24 -0400
Subject: [PATCH 1/3] lab07

---
 code/Brandon/javascript/lab07/index.html | 24 ++++++++++++++
 code/Brandon/javascript/lab07/script.js  | 40 ++++++++++++++++++++++++
 2 files changed, 64 insertions(+)
 create mode 100644 code/Brandon/javascript/lab07/index.html
 create mode 100644 code/Brandon/javascript/lab07/script.js
diff --git a/code/Brandon/javascript/lab07/index.html b/code/Brandon/javascript/lab07/index.html
new file mode 100644
index 00000000..ce57322a
--- /dev/null
+++ b/code/Brandon/javascript/lab07/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script src="https://unpkg.com/vue@3"></script>
+    <script src="script.js" defer></script>
+    <script src="secrets.js"></script>
+    <title>Weather Alerts</title>
+</head>
+<body>
+    <div id="app">
+        <h1>Weather Alerts</h1>
+        <button @click="getAlerts()">Click for Alerts</button>
+        <!-- <p>{{ alerts }}</p> -->
+        <ul v-for="item in alerts">
+            <li>***{{ item.properties.areaDesc }}*** 
+                <br> {{ item.properties.description }}</li>
+        </ul>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/code/Brandon/javascript/lab07/script.js b/code/Brandon/javascript/lab07/script.js
new file mode 100644
index 00000000..1a609f17
--- /dev/null
+++ b/code/Brandon/javascript/lab07/script.js
@@ -0,0 +1,40 @@
+axios({
+  url: "https://api.weather.gov/",
+  method: "get",
+  header: {
+    Accept: "application/json",
+  },
+}).then((res) => console.log(res.data));
+
+const App = {
+  data() {
+    return {
+      alerts: "",
+      baseUrl: "https://api.weather.gov/",
+    };
+  },
+
+  created() {
+    this.getAlerts();
+  },
+
+  methods: {
+    getAlerts() {
+      console.log({ "this in getAlerts": this });
+      axios({
+        url: this.baseUrl + "alerts",
+        headers: {
+          Accept: "application/json",
+        },
+        method: "get",
+      }).then((res) => {
+        console.log({ "this in .then": this });
+        this.alerts = res.data.features;
+      });
+    },
+  },
+};
+
+const app = Vue.createApp(App);
+
+app.mount("#app");

From d3a8abe0957bfbc31e96ba70b3ebbf3f26eba9fa Mon Sep 17 00:00:00 2001
From: Brandon Sarazin <bsarazin1@gmail.com>
Date: Wed, 25 May 2022 19:32:43 -0400
Subject: [PATCH 2/3] lab07

---
 code/Brandon/javascript/lab07/index.html | 65 ++++++++++++++++++++++--
 code/Brandon/javascript/lab07/script.js  | 20 ++++++--
 2 files changed, 79 insertions(+), 6 deletions(-)

diff --git a/code/Brandon/javascript/lab07/index.html b/code/Brandon/javascript/lab07/index.html
index ce57322a..665a2722 100644
--- a/code/Brandon/javascript/lab07/index.html
+++ b/code/Brandon/javascript/lab07/index.html
@@ -13,12 +13,71 @@
 <body>
     <div id="app">
         <h1>Weather Alerts</h1>
-        <button @click="getAlerts()">Click for Alerts</button>
+        <button @click="getAlerts()">Click for Latest Alerts across the US</button>
+        <br>
+        <div>
+        <button @click="getState()">Click for Alerts</button>
+        <select v-model="searchTerm" id="country-state" name="country-state" default="Choose a State">
+            <option selected disabled>Select a State</option>
+            <option value="AL">Alabama</option>
+            <option value="AK">Alaska</option>
+            <option value="AZ">Arizona</option>
+            <option value="AR">Arkansas</option>
+            <option value="CA">California</option>
+            <option value="CO">Colorado</option>
+            <option value="CT">Connecticut</option>
+            <option value="DE">Delaware</option>
+            <option value="FL">Florida</option>
+            <option value="GA">Georgia</option>
+            <option value="HI">Hawaii</option>
+            <option value="ID">Idaho</option>
+            <option value="IL">Illinois</option>
+            <option value="IN">Indiana</option>
+            <option value="IA">Iowa</option>
+            <option value="KS">Kansas</option>
+            <option value="KY">Kentucky</option>
+            <option value="LA">Louisiana</option>
+            <option value="ME">Maine</option>
+            <option value="MD">Maryland</option>
+            <option value="MA">Massachusetts</option>
+            <option value="MI">Michigan</option>
+            <option value="MN">Minnesota</option>
+            <option value="MS">Mississippi</option>
+            <option value="MO">Missouri</option>
+            <option value="MT">Montana</option>
+            <option value="NE">Nebraska</option>
+            <option value="NV">Nevada</option>
+            <option value="NH">New Hampshire</option>
+            <option value="NJ">New Jersey</option>
+            <option value="NM">New Mexico</option>
+            <option value="NY">New York</option>
+            <option value="NC">North Carolina</option>
+            <option value="ND">North Dakota</option>
+            <option value="OH">Ohio</option>
+            <option value="OK">Oklahoma</option>
+            <option value="OR">Oregon</option>
+            <option value="PA">Pennsylvania</option>
+            <option value="PR">Puerto Rico</option>
+            <option value="RI">Rhode Island</option>
+            <option value="SC">South Carolina</option>
+            <option value="SD">South Dakota</option>
+            <option value="TN">Tennessee</option>
+            <option value="TX">Texas</option>
+            <option value="UT">Utah</option>
+            <option value="VT">Vermont</option>
+            <option value="VA">Virginia</option>
+            <option value="WA">Washington</option>
+            <option value="WV">West Virginia</option>
+            <option value="WI">Wisconsin</option>
+            <option value="WY">Wyoming</option>
+        </select>
         <!-- <p>{{ alerts }}</p> -->
-        <ul v-for="item in alerts">
+        <h2>10 latest weather alerts in {{ searchTerm }}</h2>
+        <ul v-for="item in alerts.slice(0, 10)">
             <li>***{{ item.properties.areaDesc }}*** 
-                <br> {{ item.properties.description }}</li>
+                <br>{{ item.properties.description }}</li>
         </ul>
     </div>
+    </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/code/Brandon/javascript/lab07/script.js b/code/Brandon/javascript/lab07/script.js
index 1a609f17..ed698f7f 100644
--- a/code/Brandon/javascript/lab07/script.js
+++ b/code/Brandon/javascript/lab07/script.js
@@ -10,13 +10,13 @@ const App = {
   data() {
     return {
       alerts: "",
+      searchTerm: "",
+      state: "",
       baseUrl: "https://api.weather.gov/",
     };
   },
 
-  created() {
-    this.getAlerts();
-  },
+  created() {},
 
   methods: {
     getAlerts() {
@@ -32,6 +32,20 @@ const App = {
         this.alerts = res.data.features;
       });
     },
+
+    getState() {
+      console.log({ "this in getAlerts": this });
+      axios({
+        url: this.baseUrl + "alerts/active",
+        headers: {
+          Accept: "application/json",
+        },
+        params: { area: this.searchTerm },
+      }).then((res) => {
+        console.log({ "this in .then": this });
+        this.alerts = res.data.features;
+      });
+    },
   },
 };
 

From 0058fdfa6b6ca1146bbd7374c24a1ef8bcd935b1 Mon Sep 17 00:00:00 2001
From: Brandon Sarazin <bsarazin1@gmail.com>
Date: Thu, 26 May 2022 19:04:13 -0400
Subject: [PATCH 3/3] lab07

---
 code/Brandon/javascript/lab07/index.html | 27 ++++++++++++++----------
 code/Brandon/javascript/lab07/script.js  |  1 +
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/code/Brandon/javascript/lab07/index.html b/code/Brandon/javascript/lab07/index.html
index 665a2722..54e89258 100644
--- a/code/Brandon/javascript/lab07/index.html
+++ b/code/Brandon/javascript/lab07/index.html
@@ -8,16 +8,17 @@
     <script src="https://unpkg.com/vue@3"></script>
     <script src="script.js" defer></script>
     <script src="secrets.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
     <title>Weather Alerts</title>
 </head>
-<body>
-    <div id="app">
-        <h1>Weather Alerts</h1>
-        <button @click="getAlerts()">Click for Latest Alerts across the US</button>
+<body class="bg-slate-100">
+    <div id="app" class="bg-slate-100">
+        <h1 class="text-7xl font-medium text-center bg-slate-500 my-5 py-10 text-orange-200	">Weather Alerts</h1>
+        <div class="bg-slate-100 rounded-lg font-medium m-2 border-purple-900 text-center">
+        <button @click="getAlerts()" class="rounded-lg font-medium m-10 border-2 border-slate-400 border-solid bg-sky-200 p-4">Click for Latest Alerts in the US</button>
         <br>
-        <div>
-        <button @click="getState()">Click for Alerts</button>
-        <select v-model="searchTerm" id="country-state" name="country-state" default="Choose a State">
+        <h3>Select a State:</h3>
+        <select v-model="searchTerm" id="country-state" name="country-state" class="border-black font-large">
             <option selected disabled>Select a State</option>
             <option value="AL">Alabama</option>
             <option value="AK">Alaska</option>
@@ -71,13 +72,17 @@ <h1>Weather Alerts</h1>
             <option value="WI">Wisconsin</option>
             <option value="WY">Wyoming</option>
         </select>
+        <button @click="getState()" class="rounded-lg font-medium m-5 border-2 border-slate-400 border-solid bg-sky-200 p-1">Click for Alerts</button>
+    </div>
+    <div class="mx-80">
         <!-- <p>{{ alerts }}</p> -->
-        <h2>10 latest weather alerts in {{ searchTerm }}</h2>
-        <ul v-for="item in alerts.slice(0, 10)">
-            <li>***{{ item.properties.areaDesc }}*** 
+        <h2 class="text-lg text-center">10 latest weather alerts for {{ searchTerm }}</h2>
+        <ul class="flex border-4 border-slate-500 font-large m-5 p-12 rounded-md mb-5 bg-slate-200 " v-for="item in alerts.slice(0, 10)">
+            <li class="text-xl text-center ">***{{ item.properties.areaDesc }}*** 
                 <br>{{ item.properties.description }}</li>
-        </ul>
+            </ul>
     </div>
+    
     </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/code/Brandon/javascript/lab07/script.js b/code/Brandon/javascript/lab07/script.js
index ed698f7f..b3f9e674 100644
--- a/code/Brandon/javascript/lab07/script.js
+++ b/code/Brandon/javascript/lab07/script.js
@@ -30,6 +30,7 @@ const App = {
       }).then((res) => {
         console.log({ "this in .then": this });
         this.alerts = res.data.features;
+        this.searchTerm = "the US";
       });
     },
 
