Ada-C19 · laughtivity · Jun 8, 2023 · Jun 8, 2023 · Jun 8, 2023 · Jun 9, 2023
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,4 @@
 .vscode
 .DS_Store
 node_modules
-.cache
+.cache
diff --git a/assets/.keep b/assets/.keep
diff --git a/index.html b/index.html
@@ -1,16 +1,77 @@
 <!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">
+  <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="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" />
-</head>
-<body>
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
+      crossorigin="anonymous"
+    />
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
+  </head>
+
+  <body>
+    </section>
+      <h1> Raina and Gloria's Weather Report </h1>
+    <section>
+    <section class="feature-container" id="temp-container">
+      <h2>Temperature</h2>
+      <p id="increase-temp">⬆️</p>
+      <p id="display-temp">0</p>
+      <p id="decrease-temp">⬇️</p>
+    </section>
+    <section class="feature-container" id="sky-container">
+      <h2>Sky</h2>
+      <label>
+        <select id="sky-dropdown">
+          Select Sky
+          <option value="sunny">Sunny</option>
+          <option value="cloudy">Cloudy</option>
+          <option value="rainy">Rainy</option>
+          <option value="snowy">Snowy</option>
+      </select>
+      </label>
+    </section>
+    <section class="feature-container" id="city-name-container">
+      <h2>City</h2>
+      <h2 id="city-name">Realtime Text City</h2>
+      <input type="text" id="city-input" id="form1" class="form-control" placeholder="Enter City Name"/>
+        <button id="reset-button" type="button" class="btn btn-primary">
+          <i class="fas fa-search"></i>
+          <h4>Reset</h4>
+        </button>
+        <button id="search-button" type="button" class="btn btn-primary">
+          <i class="fas fa-search"></i>
+          <h4>Search</h4>
+        </button>
+      </div>
+    </section>
+    <section class="feature-container" id="weather-garden">
+      <h2>Weather Garden</h2>
+      <p id="sky">Sky emojis</p>
+      <br>
+      <p id="air"> </p>
+      <br>
+      <p id="landscape">Landscape emojis</p>
+    </section>
+
+    <script src="./node_modules/axios/dist/axios.min.js"></script>
     <script src="./src/index.js"></script>
     <script src="./node_modules/axios/dist/axios.min.js"></script>
-</body>
-</html>
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
+      crossorigin="anonymous"
+    ></script>
+  </body>
+</html>
diff --git a/project_notes.txt b/project_notes.txt
@@ -0,0 +1,28 @@
+- [x ] Temperature count
+    - [x ] Text Color Change
+        - [ ] Red: >= 80
+        - [ ] Orange: >= 70 && <= 79
+        - [ ] Yellow: >= 60 && <= 69
+        - [ ] Green: >= 50 && <= 59
+        - [ ] Teal: <= 49
+    - [x] Lanscape Change (Sky and Ground)
+        - [ ] >= 80
+        - [ ] >= 70 && <= 79
+        - [ ] >= 60 && <= 69
+        - [ ] <= 59
+- [X ] Up Arrow
+    - [X ] Click increase count
+- [X] Down Arrow
+    - [ X] Click decrease count
+
+- [ ] Sky Changes container
+    - [X] drop down 
+        ---> changes temp too
+        - [X] Sunny
+        - [X] Cloudy
+        - [X] Rainy
+        - [X] Sunny
+- [ ] City Name 
+    - [x ] Default City
+    - [ ] Search Input linked to header
+    - [x] Reset City Name ---- Atlanta or blank?
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,160 @@
+const state = {
+    lat: 33.7488,
+    lon: 84.3877,
+    city: "Seattle"
+};
+
+document.addEventListener("DOMContentLoaded", function () {
+    // ------------- wave 2: increase and decrease temp ------------------
+    const increaseTemp = document.querySelector("#increase-temp");
+    const decreaseTemp = document.querySelector("#decrease-temp");
+    const displayTemp = document.querySelector("#display-temp");
+    const resetButton = document.querySelector("#reset-button"); 
+    const searchButton = document.querySelector("#search-button");
+    const cityName = document.getElementById("city-name");
+    const cityInput = document.getElementById("city-input");
+    const selectSky = document.querySelector("#sky-dropdown");
+    const result = document.querySelector("#sky");
+    const landscape = document.querySelector("#landscape");
+
+
+    // ----- changes temp(converted to fahr) -> landscape -> text color ------
+    let temperature = 65;
+    let lands = "🌾🌾   🍃 🪨    🛤  🌾🌾🌾  🍃";
+
+    const convert = () => {
+        temperature = ((temperature - 273.15) * 9/5 + 32)
+    }
+    const updateTemp = (temperature) =>  {
+        displayTemp.textContent = temperature;
+        updateTempColor(temperature);
+        updateLandscape(temperature);
+        landscape.textContent = lands;
+    }
+    const updateTempColor = (temperature) => {
+        if (temperature >= 80) {
+        displayTemp.style.color = "red";
+        } else if (temperature >= 70 && temperature <= 79) {
+        displayTemp.style.color = "orange";
+        } else if (temperature >= 60 && temperature <= 69) {
+        displayTemp.style.color = "yellow";
+        } else if (temperature >= 50 && temperature <= 59) {
+        displayTemp.style.color = "green";
+        } else {
+        displayTemp.style.color = "teal";
+        }
+    }
+    const updateLandscape = (temperature) => {
+        if (temperature >= 80) {
+        lands = "🌵   🐍 🦂 🌵🌵  🐍 🏜 🦂";
+        } else if (temperature >= 70 && temperature <= 79) {
+        lands = "🌸🌿🌼  🌷🌻🌿 ☘️🌱 🌻🌷";
+        } else if (temperature >= 60 && temperature <= 69) {
+        lands = "🌾🌾   🍃 🪨 🛤 🌾🌾🌾 🍃";
+        } else if (temperature <= 59) {
+        lands = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲";
+        }
+    }
+    const increaseTemperature = () => {
+        temperature++;
+        updateTemp(temperature);
+    }
+    const decreaseTemperature = () => {
+        temperature--;
+        updateTemp(temperature);
+    }  
+
+    increaseTemp.addEventListener("click", increaseTemperature);
+    decreaseTemp.addEventListener("click", decreaseTemperature);
+    updateTemp(temperature);
+
+    // ------------- wave 3 naming the city ------------------
+    // Realtime Text City info will come from input value of cityInput
+    const updateCityName = () => {
+        cityName.textContent = cityInput.value;
+    }
+
+    // event listener to listen for input
+    cityInput.addEventListener("input", updateCityName);
+
+    // ------------- wave 5 selecting sky ------------------
+    result.textContent = "🌦 🌈  ☁️☁️☁️  ❄️ 🌨 ☁️"
+    selectSky.addEventListener("change", (event) => {
+        let newSky = event.target.value
+        if (newSky == 'sunny') {
+            result.textContent = "☁️ ☁️ ☁️ ☀️ ☁️ ☁️"
+        } else if (newSky == 'cloudy'){
+            result.textContent = "☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️"
+        } else if (newSky == 'rainy'){
+            result.textContent = "🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧"
+        } else if (newSky == 'snowy'){
+            result.textContent = "🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨"
+        } else {
+            result.textContent = "🧨 🧨 🧨 🧨 🧨 🧨"
+        }
+    })
+
+    // -------- wave 6    reset button event listener ---------
+    cityName.textContent = state.city
+    resetButton.addEventListener("click", function () {
+        cityInput.value = state.city; 
+        cityName.textContent = state.city;
+        updateTemp("65")
+    } )
+
+    // -------- wave 4    calls API  ---------
+    const findLatitudeAndLongitude = async () => {
+        // let latitude, longitude;
+        await axios.get('http://127.0.0.1:5000/location',
+        {
+            params: {
+                q:cityInput.value,
+                format: 'json'
+            }
+        })
+        .then( (response) => {
+            state.lat= response.data[0].lat;
+            state.lon= response.data[0].lon;
+        })
+        .catch( (error) => {
+            console.log('error in findLatitudeAndLongitude!');
+        });
+        return {
+            cityLat: state.lat,
+            cityLon: state.lon
+        }
+    }
+
+    const findTemp = async (latitude, longitude) => {
+        await axios.get('http://127.0.0.1:5000/weather',
+        {
+            params: {
+                format: 'json',
+                lat: latitude,
+                lon: longitude
+            }
+        })
+        .then( (response) => {
+            temperature = response.data.main.temp;
+            return temperature;
+        })
+        .catch( (error) => {
+            console.log('error in findLocation!');
+        });
+    }
+
+    const findWeather = async () => {
+        const cityCoordinates = await findLatitudeAndLongitude();
+        await findTemp(cityCoordinates.cityLat, cityCoordinates.cityLon);
+    }
+
+// -------------------    search button    ---------------------
+    searchButton.addEventListener("click", async (event) => {
+        await findWeather();
+        convert()
+        temperature = Math.round(temperature)
+        updateTemp(temperature)
+
+    });
+
+});