Ada-C19 · hamsurtado · Jun 12, 2023 · Jun 12, 2023 · Jun 13, 2023 · Jun 13, 2023
diff --git a/assets/60_degree_outfit.jpeg b/assets/60_degree_outfit.jpeg
diff --git a/assets/80_degree_outfit.jpeg b/assets/80_degree_outfit.jpeg
diff --git a/assets/cardigan_and_jeans.jpeg b/assets/cardigan_and_jeans.jpeg
diff --git a/assets/cold_outfit.jpeg b/assets/cold_outfit.jpeg
diff --git a/assets/icons/arrow_point_left.png b/assets/icons/arrow_point_left.png
diff --git a/assets/icons/arrow_point_right.png b/assets/icons/arrow_point_right.png
diff --git a/assets/icons/moon_icon_two.png b/assets/icons/moon_icon_two.png
diff --git a/assets/icons/search_icon.png b/assets/icons/search_icon.png
diff --git a/assets/icons/spring_outfit.jpeg b/assets/icons/spring_outfit.jpeg
diff --git a/assets/icons/weather_icon.jpeg b/assets/icons/weather_icon.jpeg
diff --git a/assets/icons/winter_outfit.jpeg b/assets/icons/winter_outfit.jpeg
diff --git a/assets/skies/cloudy_sky.jpeg b/assets/skies/cloudy_sky.jpeg
diff --git a/assets/skies/rainy_sky.jpeg b/assets/skies/rainy_sky.jpeg
diff --git a/assets/skies/snowy_sky.jpeg b/assets/skies/snowy_sky.jpeg
diff --git a/assets/skies/starry_purple_sky.jpeg b/assets/skies/starry_purple_sky.jpeg
diff --git a/assets/skies/starry_sky_blue.jpeg b/assets/skies/starry_sky_blue.jpeg
diff --git a/assets/skies/sunny_sky.jpeg b/assets/skies/sunny_sky.jpeg
diff --git a/index.html b/index.html
@@ -1,16 +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">
     <title>Weather Report</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="styles/index.css" />
+    <link rel="stylesheet" href="styles/index.css">
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 </head>
+
 <body>
-    <script src="./src/index.js"></script>
+
+    <header>
+        <h1 id="page-title">Your Weather ✨Fashion✨ Report</h1>
+    </header>
+
+    <main>
+        <section id="grid_space_one" class="grid-item">
+            <section id="city-space">
+                    <section id="city-name-section">
+                        <h2 id="city_name">Seattle</h2>
+                    </section>
+
+                    <section class="search">
+                        <input id="city_input" type="text" placeholder="enter city name" spellcheck="true">
+                    </section>
+
+                    <section>
+                        <button id="reset-button"> Reset City</button>
+                    </section>
+
+            </section>
+        </section>
+
+        <section id="grid_space_two" class="grid-item">
+                <section id="weather-and-buttons">
+                <button id="decrease_temp"><img id="arrow" src="assets/icons/arrow_point_left.png"></button>
+                <h1 id="temp" class="temp_style">
+                    <span id="temp_no">65</span> ° F
+                </h1>
+                <button id="increase_temp"><img id="arrow" src="assets/icons/arrow_point_right.png"></button>
+                </section>
+
+                <section>
+                    <button id="weather-button">Get Realtime Weather</button>
+                </section>
+
+
+        </section>
+
+
+        <section id="grid_space_three" class="grid-item">
+            <section id="landscape">
+                    <h2>Fashion Landscape</h2>
+                    <h1> ✨Look Inspiration✨</h1>
+
+                    <section class="fashion-image-container">
+                    <img id="fashion_landscape" src="assets/80_degree_outfit.jpeg">
+                    </section>
+            </section>
+        </section>
+
+        <section id="grid_space_four" class="grid-item">
+            <section>
+                <h2> The Sky Today</h2>
+            </section\>
+
+            <select id="sky_selector"> 
+                <option selected disabled>Choose the Sky</option>
+                <option value="skySunny">Sunny</option>
+                <option value="skyCloudy">Cloudy</option>
+                <option value="skyRainy">Rainy</option>
+                <option value="skySnowy">Snowy</option>
+                <option value="skyStarry">Starry</option>
+            </select>
+            <section class="sky">
+                <img id="pinterest-sky" src="assets/skies/sunny_sky.jpeg">
+             </section>
+        </section>
+
+</main>
+
     <script src="./node_modules/axios/dist/axios.min.js"></script>
+    <script src="./src/index.js"></script>
 </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "axios": "^1.2.1"
+    "axios": "^1.4.0"
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,157 @@
+const city = document.getElementById('city_name')
+let inputCity = document.getElementById('city_input')
-let inputCity = document.getElementById('city_input')
+const inputCity = document.getElementById('city_input')
-let inputCity = document.getElementById('city_input')
+const inputCity = document.getElementById('city_input')
+
+function changeCity(event) {
+    if (event.key === 'Enter') {
+        city.textContent = inputCity.value;
+    }
+}
+inputCity.addEventListener('keydown', changeCity)
+inputCity.addEventListener('keydown', updateWeather)
+
+
+
+const increaseTempButton = document.getElementById('increase_temp')
+const decreaseTempButton = document.getElementById('decrease_temp')
+
+
+function increaseTemp() {
+    const temperature = document.getElementById('temp_no');
+    let current_temp = Number(temperature.textContent)
+
+    temperature.textContent = current_temp + 1;
+    tempColor(current_temp + 1);
+    changeLandscape(current_temp + 1)
+}
+
+increaseTempButton.addEventListener('click', increaseTemp)
+
+function decreaseTemp() {       
+    const temperature = document.getElementById('temp_no');
+    let current_temp = Number(temperature.textContent)
+
+    temperature.textContent = current_temp - 1;
+    tempColor(current_temp - 1);
+    changeLandscape(current_temp + 1)
+}
+decreaseTempButton.addEventListener('click', decreaseTemp)
+
+function changeLandscape(temp) {
+    let landscape = document.getElementById('fashion_landscape');
+    if (temp < 60) {
+        landscape.src = "assets/cold_outfit.jpeg"
+    } else if (temp >= 60 && temp < 70) {
+        landscape.src = "assets/60_degree_outfit.jpeg"
+    } else if (temp >= 70 && temp < 80) {
+        landscape.src = "assets/cardigan_and_jeans.jpeg"
+    } else {
+        landscape.src = "assets/80_degree_outfit.jpeg"
+    }
+
+}
+
+function tempColor(temp) {
+    let temperature = document.getElementById('temp');
+    if (temp <= 49) {
+        temperature.className = 'freezing';
+    } else if (temp > 49 && temp < 60) {
+        temperature.className = 'cold';
+    } else if (temp >= 60 && temp < 70) {
+        temperature.className = 'chilly';
+    } else if (temp >= 70 && temp < 80) {
+        temperature.className = 'hot';
+    } else {
+        temperature.className = 'scorching';
+    }
+}
+
+let skySelector = document.getElementById('sky_selector');
+let skyImage = document.getElementById('pinterest-sky');
+
+skySelector.addEventListener('change', changeSkyImage);
+
+function changeSkyImage() {
+    let selectedSky = skySelector.value;
+    switch(selectedSky) {
+        case 'skySunny':
+            skyImage.src = 'assets/skies/sunny_sky.jpeg';
+            break;
+
+        case 'skyCloudy':
+            skyImage.src = 'assets/skies/cloudy_sky.jpeg';
+            break;
+
+        case 'skyRainy':
+            skyImage.src = 'assets/skies/rainy_sky.jpeg';
+            break;
+
+        case 'skySnowy':
+            skyImage.src = 'assets/skies/snowy_sky.jpeg';
+            break;
+
+        case 'skyStarry':
+            skyImage.src = 'assets/skies/starry_sky_blue.jpeg';
+            break;
+
+        default:
+            skyImage.src= 'assets/skies/starry_purple_sky.jpeg';
+}
+}
+
+async function getCoordinates(city) {
+    try{
+        const response = await axios.get('http://127.0.0.1:5000/location', {
+            params: {"q": city}
+    });
+
+    latitude = response.data[0].lat;
+    longitude = response.data[0].lon;
-    latitude = response.data[0].lat;
-    longitude = response.data[0].lon;
+    const latitude = response.data[0].lat;
+    const longitude = response.data[0].lon;
-    latitude = response.data[0].lat;
-    longitude = response.data[0].lon;
+    const latitude = response.data[0].lat;
+    const longitude = response.data[0].lon;
+    return {latitude, longitude};
+
+    }catch (error){
+        console.error(error);
+    }
+}
+
+async function getWeather(lat, lon) {
+    try{
+        const response = await axios.get('http://127.0.0.1:5000/weather', {
+            params: {"lat": lat, "lon": lon}
+        });
+
+        const temp = Math.round(1.8 * (response.data.main.temp - 273) + 32)
+
+        return temp;
+
+    }catch (error){
+        console.error(error);
+    }
+}
+
+async function updateWeather() {
+    const city = inputCity.value;
+    const { latitude, longitude } = await getCoordinates(city);
+    const temperature = await getWeather(latitude, longitude);
+    document.getElementById('temp_no').textContent = temperature;
+    tempColor(temperature)
+    changeLandscape(temperature)
+
+}
+
+function resetCity(){
+    const cityName = document.getElementById('city_name')
+    cityName.textContent = 'Seattle';
+    inputCity.value = 'Seattle';
+    updateWeather()
+
+}
+
+const weather_button = document.getElementById('weather-button')
+weather_button.addEventListener('click', updateWeather);
+
+const reset_button = document.getElementById('reset-button')
+reset_button.addEventListener('click', resetCity)
+
+
+
+