PdxCodeGuild · bsarazin1 · May 17, 2022 · May 18, 2022 · May 20, 2022 · May 24, 2022
diff --git a/code/Brandon/javascript/lab07/index.html b/code/Brandon/javascript/lab07/index.html
@@ -0,0 +1,88 @@
+<!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>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Weather Alerts</title>
+</head>
+<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>
+        <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>
+            <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>
+        <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 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>
+    </div>
+
+    </div>
+</body>
+</html>
diff --git a/code/Brandon/javascript/lab07/script.js b/code/Brandon/javascript/lab07/script.js
@@ -0,0 +1,55 @@
+axios({
+  url: "https://api.weather.gov/",
+  method: "get",
+  header: {
+    Accept: "application/json",
+  },
+}).then((res) => console.log(res.data));
+
+const App = {
+  data() {
+    return {
+      alerts: "",
+      searchTerm: "",
+      state: "",
+      baseUrl: "https://api.weather.gov/",
+    };
+  },
+
+  created() {},
+
+  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;
+        this.searchTerm = "the US";
+      });
+    },
+
+    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;
+      });
+    },
+  },
+};
+
+const app = Vue.createApp(App);
+
+app.mount("#app");