diff --git a/code/shaine/javascript/lab07/index.html b/code/shaine/javascript/lab07/index.html new file mode 100644 index 00000000..f4d0c395 --- /dev/null +++ b/code/shaine/javascript/lab07/index.html @@ -0,0 +1,46 @@ + + + + + + + Weather App + + + + + + + +
+
+ + +
+
+

Weather in Portland

+

+ {{ f[0] }}°F + {{ c[0] }}°C +

+
+ +
Cloudy
+
+
Humidity: 60%
+
+ Wind speed: {{mph[0]}} mph + Wind speed: {{kph[0]}} kph +
+
+ Switch to: +
+
+
+ + + + \ No newline at end of file diff --git a/code/shaine/javascript/lab07/script.js b/code/shaine/javascript/lab07/script.js new file mode 100644 index 00000000..f118f04c --- /dev/null +++ b/code/shaine/javascript/lab07/script.js @@ -0,0 +1,57 @@ +const app = Vue.createApp({ + data() { + return { + apiKey: "4c5d0a1cc7ce77b5205f548273305589", + searchInput: "", + metric: true, + f: [], + c: [], + mph: [], + kph: [], + roundKph: [], + } + }, + methods: { + toggleMetric() { + this.metric = !this.metric + }, + fetchWeather(city) { + fetch("https://api.openweathermap.org/data/2.5/weather?q=" + + city + + "&units=imperial&appid=" + + this.apiKey + ) + .then((response) => response.json()) + .then((data) => this.displayWeather(data)); + }, + displayWeather(data) { + const { name } = data; + const { icon, description } = data.weather[0]; + const { temp, humidity } = data.main; + const { speed } = data.wind; + document.querySelector(".city").innerText = "Weather in " + name; + document.querySelector(".icon").src = + "https://openweathermap.org/img/wn/" + icon + ".png"; + document.querySelector(".description").innerText = description; + this.f.splice(0,1,(Math.round(temp))); + this.c.splice(0,1,Math.round((temp-32)*.5556)); + document.querySelector(".temp").innerText = Math.floor(temp) + "°F"; + document.querySelector(".humidity").innerText = "Humidity: " + humidity + "%"; + document.querySelector(".wind").innerText = "Wind speed: " + speed + " mph"; + this.mph.splice(0,1,speed); + this.kph.splice(0,1,((speed*1.609344).toFixed(2))); + document.querySelector(".weather").classList.remove("loading"); + document.body.style.backgroundImage = "url('https://source.unsplash.com/1600x900/?" + name + "-landscape')"; + }, + search() { + this.fetchWeather(this.searchInput); + }, + + }, + beforeMount() { + this.fetchWeather("Sedona"); + }, + +}) + +app.mount('#app') diff --git a/code/shaine/javascript/lab07/style.css b/code/shaine/javascript/lab07/style.css new file mode 100644 index 00000000..43d1f764 --- /dev/null +++ b/code/shaine/javascript/lab07/style.css @@ -0,0 +1,102 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + font-family: 'Open Sans', sans-serif; + background: #222; + /* background-image: url('https://source.unsplash.com/1600x900/?nature-landscape'); */ + font-size: 120%; +} + +.card { + background: #000000d0; + color: white; + padding: 2em; + border-radius: 30px; + width: 100%; + max-width: 420px; + margin: 1em; +} +h1.temp { + margin: 0; + margin-bottom: 00.4em; +} + +.search { + display: flex; + align-items: center; + justify-content: center; +} +button.search { + margin: 0.5em; + border-radius: 50%; + border: none; + height: 44px; + width: 44px; + outline: none; + background: #7c7c7c2b; + color: white; + cursor: pointer; + transition: 0.2s ease-in-out; +} + +input.search-bar { + border: none; + outline: none; + padding: 0.4em 1em; + border-radius: 24px; + background: #7c7c7c2b; + color: white; + font-family: inherit; + font-size: 105%; + width: calc(100% - 100px); +} + +button:hover { + background: 7c7c7c6b; +} + +.flex { + display: flex; + align-items: center; +} + +.description { + text-transform: capitalize; + margin-left: 8px; +} + +.weather.loading { + visibility: hidden; + max-height: 20px; + position: relative; +} +.weather.loading { + visibility: visible; + content: "Loading..."; + color: white; + position: absolute; + top: 0; + left: 20px; +} + +button.switch { + /* margin: 0.5em; */ + border-radius: 5%; + border: none; + height: 25px; + width: 75px; + outline: none; + background: #7c7c7c2b; + color: gray; + cursor: pointer; + transition: 0.2s ease-in-out; + font-size: medium; + font-family: inherit; +} +.metric { + margin-top: 1em; + color: gray; +}