Ada-C18 · kalliegannon · Dec 10, 2022 · Dec 12, 2022 · Dec 22, 2022 · Jan 22, 2023
diff --git a/index.html b/index.html
@@ -4,9 +4,61 @@
     <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>
+    <title>Magic Weather Report</title>
+    <link rel="stylesheet" href="styles/index.css">
 </head>
-<body>
-
+
+
+    <header class="header__header">
+        <h1>Spooky Weather Report👻</h1>
+            <span id="headerCityName" class="header__city-name"></span>
+        </span>
+    </header>
+<section class="garden__section">
+        <span>Spooky Weather in:
+            <span id="weatherDisplayName" class="header__city-name"></span>
+        </span>
+        <div id="gardenContent" class="garden__content">
+            <div id="sky"></div>
+            <div id="landscape"></div>
+        </div>
+    </section>
+
+    <body>
+    <div class="sectionContainer">
+    <section class="temperature__section">
+        <h2>Temperature</h2>
+        <div class="temperature__content">
+            <div class="temperature__controls">
+                <h4>Make a weather wish</h4>
+                <a class='button temp' id="increaseTempControl">🔥hotter</a>
+                <a class='button temp' id="decreaseTempControl">❄️colder</a>
+            </div>
+            <span id="tempValue"></span>
+        </div>
+    </section>
+    <section class="sky__section">
+        <h2>Pick Sky</h2>
+        <select id="skySelect" class="inputsStyle">
+            <option>Sunny</option>
+            <option>Cloudy</option>
+            <option>Rainy</option>
+            <option>Snowy</option>
+        </select>
+    </section>
+
+    <section class="city-name__section">
+        <h2>City Name</h2>
+        <input value="Ann Arbor" type="text" id="cityNameInput" placeholder="Enter City" class="inputsStyle" name="search"/>
+        <a id="cityNameReset" class="button">Reset</a>
+        <a id="currentTempButton" class="button">Get Weather</a>
+        <div id="temp">
+            <h1 id="cityNameInput"></h1>
+        </div>
+    </section>
+    </div>
+    <script src="./node_modules/axios/dist/axios.min.js"></script>
+    <script src="src/index.js" type="text/javascript"></script>
 </body>
+
 </html>
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "axios": "^0.27.2"
+    "axios": "^1.2.1"
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,167 @@
+const state = {
+    city: 'Ann Arbor',
+    lat: 42.279594,
+    long: -83.732124,
+    temp: 25,
+    displayName: 'Ann Arbor, MI',
+};
+
+const convertKtoF = (temp) => {
+    return (temp - 273.15) * (9 / 5) + 32;
+};
+
+const getLatLon = () => {
+    axios
+        .get('http://127.0.0.1:5000/location', {
+            params: {
+                q: state.city,
+        },
+    })
+    .then((response) => {
+        console.log(response.data[0]);
+        state.lat = response.data[0].lat;
+        state.long = response.data[0].lon;
+        state.displayName = response.data[0].display_name;
+        getWeather();
+    })
+    .catch((error) => {
+        console.log('Error finding the latitude and longitude:', error.response);
+    });
+};
+
+const getWeather = () => {
+    axios.get('http://127.0.0.1:5000/weather', {
+        params: {
+            lat: state.lat,
+            lon: state.long,
+            displayName: state.displayName,
+        },
+    })
+    .then((response) => {
+        console.log(response.data)
+        const weather = response.data;
+        state.temp = Math.round(convertKtoF(weather.main.temp));
+        formatTempAndGarden();
+    })
+    .catch((error) => {
+        console.log('Error getting the weather:', error);
+    });
+};
+
+const updateSky = () => {
+    const inputSky = document.getElementById('skySelect').value;
+    const skyContainer = document.getElementById('sky');
+    let sky = '';
+    let skyColor = '';
+    if (inputSky === 'Cloudy') {
+        sky = '☁️👽☁️ ☁️ ☁️👽☁️ ☁️ 🌤 ☁️ ☁️👽☁️';
+        skyColor = 'cloudy';
+    } else if (inputSky === 'Sunny') {
+        sky = '☁️  🤖   ☁️ 🤖 ☁️ ☀️ ☁️ 🤖 ☁️';
+        skyColor = 'sunny';
+    } else if (inputSky === 'Rainy') {
+        sky = '🧟‍♀️🌈⛈🌧🧟‍♀️💧⛈🌧🌦🧟‍♀️💧🌧🧟‍♀️';
+        skyColor = 'rainy';
+    } else if (inputSky === 'Snowy') {
+        sky = '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨';
+        skyColor = 'snowy';
+    }
+    skyContainer.textContent = sky;
+    const gardenContent = document.getElementById('gardenContent');
+    gardenContent.classList = `garden__content ${skyColor}`;
+};
+
+    const updateCityName = () => {
+        const inputName = document.getElementById('cityNameInput').value;
+        const headerCityName = document.getElementById('headerCityName');
+        state.city = inputName;
+        headerCityName.textContent = state.city;
+};
+
+const resetCityName = () => {
+    const cityNameInput = document.getElementById('cityNameInput');
+    cityNameInput.value = 'Ann Arbor';
+    updateCityName();
+};
+const updateDisplayName = () => {
+    let displayName = document.getElementById('weatherDisplayName');
+    displayName.textContent = state.displayName;
+};
+
+const resetDisplay = () => {
+    const cityNameInput = document.getElementById('weatherDisplayName');
+    cityNameInput.textContent = 'Ann Arbor, MI';
+    updateDisplayName();
+};
+
+
+const formatTempAndGarden = () => {
+    let temp = state.temp;
+    let color = 'red';
+    let landscape = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂';
+    if (temp > 80) {
+        color = 'red';
+        landscape = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂';
+    } else if (temp > 70) {
+        color = 'orange';
+        landscape = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷';
+    } else if (temp > 60) {
+        color = 'yellow';
+        landscape = '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃';
+    }   else if (temp > 50) {
+        color = 'green';
+        landscape = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲';
+    } else {
+        color = 'teal';
+        landscape = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲';
+    }
+
+    const newLandscape = document.getElementById('landscape');
+    newLandscape.textContent = landscape;
+    const temperature = document.getElementById('tempValue');
+    temperature.className = color;
+    temperature.textContent = String(state.temp);
+};
+
+const increaseTemp = () => {
+    state.temp += 1;
+    formatTempAndGarden();
+};
+
+const decreaseTemp = () => {
+    state.temp -= 1;
+    formatTempAndGarden();
+};
+
+const registerEventHandlers = () => {
+    formatTempAndGarden();
+
+    const currentTempButton = document.getElementById('currentTempButton');
+    currentTempButton.addEventListener('click', getLatLon);
+
+    const increaseTempControl = document.getElementById('increaseTempControl');
+    increaseTempControl.addEventListener('click', increaseTemp);
+
+    const decreaseTempControl = document.getElementById('decreaseTempControl');
+    decreaseTempControl.addEventListener('click', decreaseTemp);
+
+    updateCityName();
+    const cityNameInput = document.getElementById('cityNameInput');
+    cityNameInput.addEventListener('input', updateCityName);
+
+    const cityNameResetBtn = document.getElementById('cityNameReset');
+    cityNameResetBtn.addEventListener('click', resetCityName);
+
+    updateDisplayName();
+    const cityDisplayName = document.getElementById('currentTempButton');
+    cityDisplayName.addEventListener('click', updateDisplayName);
+
+    const cityDisplayNameReset = document.getElementById('cityNameReset');
+    cityDisplayNameReset.addEventListener('click', resetDisplay);
+
+    updateSky();
+    const skySelect = document.getElementById('skySelect');
+    skySelect.addEventListener('change', updateSky);
+};
+
+document.addEventListener('DOMContentLoaded', registerEventHandlers);
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,117 @@
+
+
+body {
+font-family:Georgia, 'Times New Roman', Times, serif;
+font-size: 22px;
+background-color: #e88feb;
+margin: 3rem;
+}
+
+.header__header {
+color: rgb(41, 6, 41);
+grid-column: span 3;
+display: flex;
+align-items: center;
+margin: 2rem auto 3rem 0;
+}
+
+.header__header > h1 {
+margin-right: 10rem;
+font-size: 3em;
+}
+
+.header__city-name {
+font-style: oblique;
+font-size: 2rem;
+}
+
+.header__city-name::before,
+.header__city-name::after {
+content: "✨";
+}
+
+.temperature__section,
+.sky__section,
+.city-name__section {
+border-radius: 8px;
+padding: 2rem;
+background-color: rgb(249, 237, 247);
+padding:initial
+}
+
+.sky__section {
+grid-row: 3;
+}
+
+.city-name__section {
+grid-row: 1;
+}
+
+.garden__section {
+grid-row: 2 / span 3;
+grid-column: 2;
+text-align: center;
+align-self: center;
+}
+
+.temperature__content {
+display: flex;
+flex-direction: row;
+justify-content: center;
+justify-content: center;
+}
+
+#tempValue {
+font-size: 4rem;
+margin-left: 1.5rem;
+padding-right: 1rem;
+margin-right: 1.5rem;
+}
+
+.temperature__controls {
+display: flex;
+color: #8f5e91;
+flex-direction: column;
+align-items: center;
+}
+
+
+.garden__content {
+min-height: 200px;
+max-width: fit-content;
+margin: auto;
+padding: 2rem;
+
+display: flex;
+flex-direction: column;
+justify-content: space-between;
+
+border-radius: 8px;
+font-size: 2.4em;
+}
+
+.cloudy {
+background-color: rgb(107, 106, 106);
+}
+
+.sunny {
+background-color: rgb(247, 239, 122);
+}
+
+.rainy {
+background-color: rgb(42, 170, 213);
+}
+
+.snowy {
+background-color: rgb(250, 252, 253);
+}
+
+.sky__section {
+grid-row: 2 / span 3;
+grid-column: 2;
+text-align: center;
+align-self: center;
+}
+
+
+