diff --git a/code/Brandon/javascript/lab07/index.html b/code/Brandon/javascript/lab07/index.html new file mode 100644 index 00000000..54e89258 --- /dev/null +++ b/code/Brandon/javascript/lab07/index.html @@ -0,0 +1,88 @@ + + + + + + + + + + + + Weather Alerts + + +
+

Weather Alerts

+
+ +
+

Select a State:

+ + +
+
+ +

10 latest weather alerts for {{ searchTerm }}

+ +
+ +
+ + \ 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..b3f9e674 --- /dev/null +++ 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");