PdxCodeGuild · ShaineWarren · May 26, 2022
diff --git a/code/shaine/javascript/lab07/index.html b/code/shaine/javascript/lab07/index.html
@@ -0,0 +1,46 @@
+<!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">
+    <title>Weather App</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Open+Sans&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://unpkg.com/vue@3"></script>
+</head>
+<body>
+    <div class="card" id="app">
+        <div class="search">
+            <input type="text" class="search-bar" placeholder="Search by City Name" v-model="searchInput" @keyup.enter="search">
+            <button class="search" @click="search"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1.5em" width="1.5em" xmlns="http://www.w3.org/2000/svg"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></button>
+        </div>
+        <div class="weather loading">
+            <h2 class="city">Weather in Portland</h2>
+            <h1>
+                <span class="temp" v-if="metric">{{ f[0] }}°F</span>
+                <span v-if="!metric">{{ c[0] }}°C</span>
+            </h1>
+            <div class="flex">
+                <img src="https://openweathermap.org/img/wn/04d.png" alt="" class="icon">
+                <div class="description">Cloudy</div>
+            </div>
+            <div class="humidity">Humidity: 60%</div>
+            <div>
+                <span class="wind" v-if="metric">Wind speed: {{mph[0]}} mph</span>
+                <span v-if="!metric">Wind speed: {{kph[0]}} kph</span>
+            </div>
+            <div class="metric">
+               <small>Switch to:  <button class="switch" @click="toggleMetric">
+                <span v-if="metric">Metric</span>
+                <span v-if="!metric">Imperial</span>
+            </button></small> 
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+
+</body>
+</html>
diff --git a/code/shaine/javascript/lab07/script.js 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
@@ -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;
+}