Ada-C15 · Alli-Oops · Jun 16, 2021 · Jun 16, 2021 · Jun 16, 2021 · Jun 16, 2021
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 .vscode
-.DS_Store
+.DS_Store
+venv/
diff --git a/assets/98degrees.png b/assets/98degrees.png
diff --git a/assets/cloudy.png b/assets/cloudy.png
diff --git a/assets/cloudy_sky.png b/assets/cloudy_sky.png
diff --git a/assets/rainy.png b/assets/rainy.png
diff --git a/assets/rainy_sky.png b/assets/rainy_sky.png
diff --git a/assets/snowy.png b/assets/snowy.png
diff --git a/assets/snowy_sky.png b/assets/snowy_sky.png
diff --git a/assets/sunny.png b/assets/sunny.png
diff --git a/assets/sunny_sky.png b/assets/sunny_sky.png
diff --git a/assets/sunny_world.png b/assets/sunny_world.png
diff --git a/assets/world.png b/assets/world.png
diff --git a/index.html b/index.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html> 
+
+    <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="./styles/index.css" media="screen"/>
+    <script src="./scripts/script.js"></script>
+    <script src="./scripts/index.js"></script>
+    <title>Weather World</title>
+    </head>
+
+    <body>
+
+        <div class="live">
+            <div class="container">🌞 Weather World. Where Weather Lives.🌞<a target="_blank" href="https://weather.com/">OR go to a Site that Works!</a>
+            </div>
+        </div>
+
+<!-- SECTION 1 TOP-BANNER, PRIMARY AND INPUT OPTIONS-->
+        <section class="top-banner">
+            <div class="container">
+            <h1 class="heading">Weather World</h1>
+<!-- INPUT FORM DISPLAY -->                         <!-- WAVE 5:-->   <!--INPUT --> 
+            <form>
+                <input type="text" placeholder="Search for a city" autofocus id="citySearch">
+                <button id="submitButton">RESET</button>
+            </form>
+            <h6 class="text">Weather World Cities: <br> Sunnyville, Cloudvile, Rainville, or Snowville</h6>
+<!-- FUN HEADER -->                                 <!-- codecademy tutorial switch() -->
+                <header onclick="newStyle();"> 
+                    <h1 class="centered" id="colorwords">Weather Changes</h1>
+                </header>                   
+<!-- DEFAULT CITY DISPLAY -->
+                <nav class="city-default."> 
+                    <h2 class="city-name" id="cityName">Weather World Forecast</h2>
+                        <span class="city-temp" id="cityTemp">degrees<sup>°F</sup></span>
+                            <figure>
+                                <img class="city-icon" id="cityPic" src="./assets/world.png" height="110" width="100" alt="World"/>
+                                <figcaption>There's a 100% chance of Weather!</figcaption>
+                            </figure>
+                        </nav>
+<!-- TEMPERATURE DISPLAY -->                        <!-- WAVE 2: -->   <!--TEMPERATURE DISPLAY -->
+            <h2 class="heading">Temperature</h2>
+            <h2 id="givenTemp">70</h2>
+<!-- CLICKABLE TEMPERATURE BUTTONS -->              <!-- WAVE 2: -->   <!-- CLICK UP/DOWN TEMP -->
+            <article>
+                <button id="addDownButton">DOWN</button>
+                <button id="addUpButton">UP</button>  
+            </article>
+
+            </div>
+        </section>
+<!-- changed the button from type to id to use the getElementById() -->
+
+<!-- SECTION 2 --> <!-- CITY SUMMARY DISPLAYS -->
+<!-- WAVE 4 --> <!-- Element(s) that displays the city name(s) -->
+<!-- Element that contains a <input type="text"> element, used to rename the city -->
+        <section class="city-section">
+            <div class="container">
+            <ul class="cities">
+
+                <li class="city">
+                    <h2 class="city-name">Sunnyville</h2>
+                    <span class="city-temp">80<sup>°F</sup></span>
+                    <figure>
+                        <img class="city-icon" src="./assets/sunny.png" height="100" width="100" alt="Sunny"/>
+                        <figcaption>Sunny with Temperatures between 70-120°F</figcaption>
+                    </figure>
+                </li>
+
+                <li class="city">
+                    <h2 class="city-name">Rainville</h2>
+                    <span class="city-temp">55<sup>°F</sup></span>
+                    <figure>
+                        <img class="city-icon" src="./assets/rainy.png" height="100" width="100" alt="Rainy"/>
+                        <figcaption>Rainy with Temperatures between 40-65°F</figcaption>
+                    </figure>
+                </li>
+
+                <li class="city">
+                    <h2 class="city-name">Cloudville</h2>
+                    <span class="city-temp">50<sup>°F</sup></span>
+                    <figure>
+                        <img class="city-icon" src="./assets/cloudy.png" height="100" width="100" alt="Cloudy"/>
+                        <figcaption>Cloudy with Temperatures between 40-65°F</figcaption>
+                    </figure>
+                </li>
+
+                <li class="city">
+                    <h2 class="city-name">Snowville</h2>
+                    <span class="city-temp">30<sup>°F</sup></span>
+                    <figure>
+                        <img class="city-icon" src="./assets/snowy.png" height="100" width="100" alt="Snowy"/>
+                        <figcaption>Snowy with Temperatures between 0-40°F</figcaption>
+                    </figure>
+                </li>
+
+            </ul>
+
+            </div>
+        </section>
+
+
+<!-- SECTION 3 -->
+<!-- SKY DISPLAY SELECTOR -->                                   <!-- WAVE 3 -->  <!-- A <select> dropdown element to set the sky type --> <!-- An element that displays a sky -->
+    <section class="sky">
+        <label for="skies">Choose a sky:</label>
+
+        <select name="skies" id="skySelector">
+            <option value="./assets/world.png">World View</option>
+            <option value="./assets/sunny_sky.png">Sunny</option>
+            <option value="./assets/cloudy_sky.png">Cloudy</option>
+            <option value="./assets/rainy_sky.png">Rainy</option>
+            <option value="./assets/snowy_sky.png">Snowy</option>
+        </select>  
+
+
+        <img id="displaySky" class="sky_display" src="./assets/world.png" height="320" width="300" alt="Sky View"/>
+
+    </section>
+
+
+<!-- FOOTER -->
+        <footer class="page-footer">
+            <div class="container">
+            <small>I <span>❤</span> Ada</small> 
+            </div>
+        </footer>
+
+
+	</body>
+</html>
+
+
+
+
+
+
+<!-- Wave 2 -->
+<!-- An element that displays the temperature -->
+<!-- A clickable element to increase temperature -->
+<!-- A clickable element to decrease temperature -->
+
+
+<!-- An element that displays a landscape -->
+
+
+<!-- Wave 3 -->
+<!-- A <select> dropdown element to set the sky type -->
+
+
+<!-- An element that displays a sky -->
+
+
+<!-- Wave 4: -->
+<!-- An element that displays the city name -->
+
+
+<!-- An element that contains a <input type="text"> element, used to rename the city -->
+
+
+<!-- Wave 5: -->
+
+<!-- A clickable element to reset the city name -->
diff --git a/scripts/index.js b/scripts/index.js
@@ -0,0 +1,166 @@
+
+// HELPER FUNCTION //
+function numsChangeColor() {
+    let temp = document.querySelector('#givenTemp');
+
+    if (state.givenTemp >= 100) {
+        temp.style.color = "black"
+    } else if ((state.givenTemp < 100) && (state.givenTemp >= 70)) {
+        temp.style.color = "red"
+    } else if ((state.givenTemp < 70) && (state.givenTemp >= 60)) {
+        temp.style.color = "orange"
+    } else if ((state.givenTemp < 60) && (state.givenTemp >= 50)) {
+        temp.style.color = "yellow"
+    } else if ((state.givenTemp < 50) && (state.givenTemp >= 40)) {
+        temp.style.color = "green"
+    } else if ((state.givenTemp < 40) && (state.givenTemp >= 30)) {
+        temp.style.color = "blue"
+    } else {
+        temp.style.color = "purple"
+    }
+};
+
+////////////////////////////// WAVE 2 //////////////////////////////////
+////////////////// EVENT HANDLER (UP/DOWN TEMPERATURE)//////////////////
+// SELECT THE EVENT TARGET
+// document.getElementById('givenTemp') || document.querySelector("#givenTemp");
+
+////////////////////////////// WAVE 2 //////////////////////////////////
+/////////////// METHODS (UP/DOWN TEMPERATURE) BEHAVIORS ////////////////
+const state = {
+    givenTemp: 70
+};
+const addTemp = (event) =>  {       // Add temp UP Behavior
+    state.givenTemp += 1;
+    const tempUp = document.querySelector("#givenTemp");
+    tempUp.textContent = state.givenTemp;
+    numsChangeColor();
+}
+const subTemp = (event) => {        // Add temp DOWN Behavior
+    state.givenTemp -= 1;
+    const tempDown = document.querySelector("#givenTemp");
+    tempDown.textContent = state.givenTemp;
+    numsChangeColor();
+};
+
+// REGISTER ALL EVENTS // use the .registerEventHandler
+const registerEventHandlers = (event) => {              // EACH EVENT needs a .addEventListener - listens fot the event i.e. "click" then performs a function
+                                                        // WAVE 2 // reigster the upButton
+    const upButton = document.querySelector("#addUpButton");
+    upButton.addEventListener("click", addTemp);
+                                                        // WAVE 2 // reigster the downButton
+    const downButton = document.querySelector("#addDownButton");
+    downButton.addEventListener("click", subTemp);
+                                                        // WAVE 5 // register the reset / submit button
+    const submitButton = document.querySelector("#submitButton");
+    submitButton.addEventListener("click", switchCity);
+                                                        // WAVE 3 // register the skySelector
+    const skySelect = document.querySelector("#skySelector");
+    skySelect.addEventListener("change", changeDisplay);
+};
+///////////////////////////// WAVE 5 /////////////////////////////////
+//////////////////// METHOD (switchCity) BEHAVIOR ////////////////////
+
+// SELECT THE EVENT TARGET
+// NOPE document.getElementById('changeCity') || document.querySelector("#changeCity");
+// Needs to be the "citySearch" id BUT specifically the VALUE of the user input that triggers the change/reset of the display
+const switchCity = (event) =>  {
+    // change to different city Behavior // NOPE const rainville = document.getElementById('changeCity') // NOPE rainville.innerHTML = "<h2>Rainville</h2>\n<span>55<sup>°F</sup></span>\n<figure>\n<img class=\"city-icon\" src=\"./assets/rainy.png\" height=\"100\" width=\"100\" alt=\"Rainy\"/>\n<figcaption>Rainy with Temperatures between 40-65°F</figcaption></figure>"
+    const city = document.getElementById("citySearch").value; // THE USER INPUT** 
+    let cityNameText = "";
+    let cityTempText = "";
+    let cityPicSrc = "";
+
+    switch (city){
+        case "Sunnyville":
+            cityNameText = "Sunnyville";
+            cityTempText = "80°F";
+            cityPicSrc = "./assets/sunny.png";
+            break;
+        case "Rainville":
+            cityNameText = "Rainville";
+            cityTempText = "55°F";
+            cityPicSrc = "./assets/rainy.png";
+            break;
+        case "Cloudville":
+            cityNameText = "Cloudville";
+            cityTempText = "55°F";
+            cityPicSrc = "./assets/cloudy.png";
+            break;
+        case "Snowville":
+            cityNameText = "Snowville";
+            cityTempText = "30°F";
+            cityPicSrc = "./assets/snowy.png";
+            break;
+        default:
+            cityNameText = city + "? Type in a Weather World City";
+            cityTempText = "98°F";
+            cityPicSrc = "./assets/98degrees.png";
+            break;
+    }
+
+    const cityName = document.getElementById("cityName"); //STATE? - the thing to change
+    cityName.textContent = cityNameText;
+
+    const cityTemp = document.getElementById("cityTemp"); //STATE? - the thing to change
+    cityTemp.textContent = cityTempText;
+
+    const cityPic = document.getElementById("cityPic"); //STATE?  - the thing to change
+    cityPic.src = cityPicSrc;
+                                                    // preventDefault() - makes it stick with the change
+    event.preventDefault()
+}
+
+///////////////////////////// WAVE 4 //////////////////////////////////
+///////////// A dropdown element to select the sky display ////////////
+// SELECT THE EVENT TARGET
+// document.getElementById('changeCity') || document.querySelector("#changeCity");
+
+/////////////// METHOD (changeDisplay) BEHAVIOR ////////////////
+const changeDisplay = (event) => {
+    const displaySky = document.getElementById("displaySky");
+    displaySky.src = document.getElementById("skySelector").value; // USER INPUT ?? does this grab the option value?
+
+    event.preventDefault()
+}
+
+
+
+/* NOPE - need to import jQuery?
+$("#skySelector").on("change", function(){
+    let selection = $(this).val()
+    let changeSky = document.getElementById("displaySky")
+    changeSky.src = selection
+    // $("#displaySky").text(selection)
+});
+*/
+
+/*
+const changeSky = (event) =>  {
+    const sky = document.getElementById("skySelector").value;
+    const display = document.getElementById("displaySky");
+    .src
+    switch(sky) {
+        case "sunny":
+    }
+*/
+// REGISTER ALL EVENTS and LISTENERS //
+document.addEventListener("DOMContentLoaded", registerEventHandlers);
+
+
+///////////////////////////// WAVE 4 //////////////////////////////////
+///////////// A dropdown element to select the sky display ////////////
+// SELECT THE EVENT TARGET
+// document.getElementById('changeCity') || document.querySelector("#changeCity");
+
+
+
+// const form = document.querySelector(".top-banner form");
+// ^ this will return the form
+
+// form.addEventListener("submit",  => {
+
+// .then(response?)s
+// .catch(() => {
+//     msg.textContent = "Please search for a valid city 😩";
+// });
diff --git a/scripts/script.js b/scripts/script.js
@@ -0,0 +1,43 @@
+// FUN BONUS color change on click!! FLARE from Codecademy tutorial
+
+function newStyle() {
+    let newColor = '';
+    let newFont = ''; 
+    let x = Math.floor(Math.random()*7); 
+    switch (x){
+
+        case 0:
+            newColor = 'red';
+            newFont = 'Times New Roman'; 
+            break;
+        case 1: 
+            newColor = 'blue';
+            newFont = 'Florence, cursive'; 
+            break;
+        case 2:
+            newColor = 'yellow';
+            newFont = 'Verdana';
+            break; 
+        case 3:
+            newColor= 'purple';
+            newFont = 'Courier New';
+            break
+        case 4:
+            newColor = 'cyan';
+            newFont = 'Georgia'; 
+            break;
+        case 5:
+            newColor = 'maroon';
+            newFont = 'Palatino';
+            break;
+        case 6: 
+            newColor = 'lime';
+            newFont = 'Impact';
+            break;
+        }
+
+    let elem = document.getElementById('colorwords');
+    elem.style.color = newColor;
+    elem.style.fontFamily = newFont; 
+}
+