Ada-C22 · momofAnAl · Dec 2, 2024 · Dec 2, 2024 · Dec 2, 2024 · Dec 2, 2024
diff --git a/index.html b/index.html
@@ -1,15 +1,59 @@
 <!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">
 </head>
+
 <body>
+    <header class="header__header">
+        <h1>Weather Report</h1>
+        <span>For the lovely city of 
+            <span id="headerCityName" class="header__city-name">Seattle</span></span>
+    </header>
+    <section class="temperature__section">
+        <h2>Temperature</h2>
+        <div class="temperature__content">
+            <div class="temperature__controls">
+                <span id="increaseTempControl">⬆️</span>
+                <span id="tempValue"></span>
+                <span id="decreaseTempControl">⬇️</span>
+            </div>
+            <button id="getRealTimeTempButton">Get Realtime Temperature</button>
+        </div>
+
+    </section>
+    <section class="sky__section">
+        <h2>Sky</h2>
+        <select id="skySelect">
+            <option value="sunny">Sunny</option>
+            <option value="cloudy">Cloudy</option>
+            <option value="rainy">Rainy</option>
+            <option value="snowy">Snowy</option>
+        </select>
+
+    </section>
+
+    <section class="city-name__section">
+        <h2>City Name</h2>
+        <input type="text" id="cityNameInput">
+        <button id="cityNameReset" class="city-name__reset-btn">Reset</button>
+    </section>
+
+    <section class="garden__section">
+        <h2>Weather Garden</h2>
+        <div id="gardenContent" class="garden__content">
+            <div id="skyDisplay">☁️ ☁️ ☁️ ☀️ ☁️ ☁️</div>
+            <div id="landscape"></div>
+        </div>
+    </section>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <script src="./src/index.js"></script>
 </body>
-</html>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,145 @@
+let temperature = 48;
+
+const tempValue = document.getElementById('tempValue');
+const increaseTempControl = document.getElementById('increaseTempControl');
+const decreaseTempControl = document.getElementById('decreaseTempControl');
+const landScape = document.getElementById('landscape');
+const cityNameInput = document.getElementById('cityNameInput');
+const cityNameReset = document.getElementById('cityNameReset');
+const headerCityName = document.getElementById('headerCityName');
+const getRealTimeTempButton = document.getElementById('getRealTimeTempButton');
+
+//Update the sky options when we choose different sky and change the color background in garden
+const skyOptions = {
+    'sunny': {
+        'text': "☁️ ☁️ ☁️ ☀️ ☁️ ☁️",
+        'backgroundColor': "#DFFFFF",
+    },
+    'cloudy': {
+        'text': "☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️",
+        'backgroundColor': "#D3D3D3",
+    },
+    'rainy': {
+        'text': "🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧",
+        'backgroundColor': "#B0C3DF",
+    },
+    'snowy': {
+        'text': "🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨",
+        'backgroundColor': "#ADD9E6",
+    },
+};
+const skySelect = document.getElementById("skySelect");
+const skyDisplay = document.getElementById("skyDisplay")
+const gardenContent = document.getElementById("gardenContent")
+
+skySelect.addEventListener("change", (event) => {
+    const skySelected = event.target.value;
+    console.log("Selected sky:", skySelected);
+    updateSky(skySelected);
+});
+
+const updateSky = (sky) => {
+    const skySelectOption = skyOptions[sky]
+    console.log(skySelectOption)
+    if (skySelectOption) {
+        skyDisplay.textContent = skySelectOption.text;
+        gardenContent.style.backgroundColor = skySelectOption.backgroundColor;
+    }    
+};
+
+//Update the temperature and change font color and landscape when increase and decrease temperature
+const updateTemperature = () => {
+    tempValue.textContent = `${temperature}°F`;
+    tempValue.style.color = getFontColor(temperature);
+    landScape.textContent = getLandscape(temperature);
+};
+
+const getLandscape = (temp) => {
+    if (temp <= 59) return '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲';
+    if (temp <= 69) return '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃';
+    if (temp <= 79) return '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷';
+    return '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂';
+};
+
+const getFontColor = (temp) => {
+    if (temp <= 49) return 'teal';
+    if (temp <= 59) return 'green';
+    if (temp <= 69) return 'yellow';
+    if (temp <= 79) return 'orange';
+    return 'red';
+};
+
+increaseTempControl.addEventListener('click', () => {
+    temperature += 1;
+    updateTemperature();
+});
+
+decreaseTempControl.addEventListener('click', () => {
+    temperature -= 1;
+    updateTemperature();
+});
+updateTemperature();
+
+//getRealTimeTemp button updates the temperature when we update the city
+getRealTimeTempButton.addEventListener('click', () => {
+    const city = headerCityName.textContent;
+
+    getCityLocation (city)
+    .then(({ lat, lon }) => {
+        return getCityTemperature(lat,lon);
+    })
+    .catch((error) => {
+        console.log('Error data:', error);
+        tempValue.textContent = 'Unable to get temperature';
+    })
+});
+
+const getCityLocation = (city) => {
+    return axios
+    .get('https://ada-weather-report-proxy-server.onrender.com/location', {params:{'q': city}})
+    .then((locationResponse) => { 
+        console.log(locationResponse);
+        const lat = locationResponse.data[0].lat;
+        const lon = locationResponse.data[0].lon;  
+        console.log({ lat, lon });
+        return { lat, lon };     
+    })   
+    .catch((error) => {
+        console.log('Error data:', error);
+        throw error
+    });
+};
+
+const getCityTemperature = (lat, lon) => {
+    return axios
+    .get('https://ada-weather-report-proxy-server.onrender.com/weather', {params:{"lat": lat, "lon": lon}})
+    .then((tempResponse) => {
+        const kelvinTemp = tempResponse.data.main.temp;
+        const fahrenheitTemp = Math.floor(((kelvinTemp - 273.15) * 9) / 5 + 32);
+        tempValue.textContent = `${fahrenheitTemp}°F`;
+        tempValue.style.color = getFontColor(fahrenheitTemp);
+        landScape.textContent = getLandscape(fahrenheitTemp);
+    })
+    .catch((error) => {
+        console.log('Error data:', error);
+        throw error
+    });
+};
+
+//Update the city name when we input the city and headerCityName got update 
+//When we click reset, it comes back to our default setting
+const updateCityName = (updateCity) => {
+    headerCityName.textContent = updateCity;
+};
+
+cityNameInput.addEventListener('input', (event) => {
+    updateCityName(event.target.value);
+});
+
+cityNameReset.addEventListener('click', () => {
+    cityNameInput.value = '';
+    updateCityName('Seattle');
+});
+
+
+
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,164 @@
+h2 {
+    margin: 0 auto 2rem auto;
+}
+
+body {
+display: grid;
+grid-template-columns: 1fr 2fr;
+grid-template-rows: auto auto auto auto;
+grid-gap: 1rem;
+
+font-family: "Rubik", sans-serif;
+font-size: 18px;
+background-color: #1b69f9;
+margin: 2rem;
+}
+
+.header__header {
+color: white;
+grid-column: span 3;
+display: flex;
+align-items: center;
+margin: 2rem auto 3rem 0;
+}
+
+.header__header > h1 {
+margin-right: 2rem;
+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: white;
+}
+
+.temperature__section {
+grid-row: 2;
+}
+
+.temperature__section button {
+    background-color: #1b69f9;
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    border-radius: 10px
+}
+
+.sky__section {
+grid-row: 3;
+}
+
+.city-name__section {
+grid-row: 4;
+}
+
+.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: space-around;
+/* justify-content: center; */
+}
+
+#tempValue {
+font-size: 3rem;
+margin-left: 1.5rem;
+/* padding-right: 1rem; */
+/* margin-right: 1.5rem; */
+}
+
+.temperature__controls {
+display: flex;
+flex-direction: column;
+align-items: center;
+}
+
+.garden__section > h2 {
+color: white;
+}
+
+.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: 2em;
+background-color: #DFFFFF;
+transition: background-color 0.5s;
+}
+
+.city-name__reset-btn {
+border: 0;
+background-color: #1655cc;
+color: white;
+border-radius: 8px;
+padding: 1rem;
+font-family: "Rubik", sans-serif;
+}
+
+.red {
+color: red;
+}
+
+.orange {
+color: orange;
+}
+
+.yellow {
+color: gold;
+}
+
+.yellow-green {
+color: yellowgreen;
+}
+
+.green {
+color: green;
+}
+
+.teal {
+color: teal;
+}
+
+.cloudy {
+background-color: lightgrey;
+}
+
+.sunny {
+background-color: rgb(221, 255, 255);
+}
+
+.rainy {
+background-color: lightblue;
+}
+
+.snowy {
+background-color: lightsteelblue;
+}