Update of Weather App

s27288-pj · Jan 7, 2024 · 070c8b8 · 070c8b8
1 parent 7308607
commit 070c8b8
Show file tree

Hide file tree

Showing 16 changed files with 146 additions and 49 deletions.
diff --git a/images/001-meteorology.png b/images/001-meteorology.png
diff --git a/images/002-clear-sky-day.png b/images/002-clear-sky-day.png
diff --git a/images/003-clear-sky-night.png b/images/003-clear-sky-night.png
diff --git a/images/004-few-clouds-day.png b/images/004-few-clouds-day.png
diff --git a/images/005-few-clouds-night.png b/images/005-few-clouds-night.png
diff --git a/images/006-scattered-clouds.png b/images/006-scattered-clouds.png
diff --git a/images/007-broken-clouds.png b/images/007-broken-clouds.png
diff --git a/images/008-shower-rain.png b/images/008-shower-rain.png
diff --git a/images/009-rain-day.png b/images/009-rain-day.png
diff --git a/images/010-rain-night.png b/images/010-rain-night.png
diff --git a/images/011-thunderstorm.png b/images/011-thunderstorm.png
diff --git a/images/012-snow.png b/images/012-snow.png
diff --git a/images/013-mist.png b/images/013-mist.png
diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@
 
   <div id="header-container">
     <div id="weather-app-icon">
-      <img src="images/015-meteorology.png" alt="Weather App Icon">
+      <img src="images/001-meteorology.png" alt="Weather App Icon">
     </div>
     <div id="weather-app-title">
       <h1>Weather App</h1>
@@ -35,12 +35,21 @@ <h1>Weather App</h1>
     </div>    
   </div>
 
-  <div id="suggestions-list" style="display: block;"></div>
+  <div id="suggestions-list" style="display: none;"></div>
 
-  <div id="weather-container">
-    <div id="current-weather" style="display: none;"></div>
-    <h2 id="forecast-title" style="display: none;">Forecast</h2>
-    <div class="forecast-table-container">
+  <div id="current-weather-container" style="display: none;">
+    <div id="current-weather-title" style="display: none;"></div>
+    <div id="current-weather-box">
+      <div id="current-weather"></div>
+      <div id="current-weather-icon"></div>
+    </div>
+  </div>  
+  <div id="forecast-container" style="display: none;">
+    <div id="forecast-title" style="display: none;">
+      <h2 id="forecast-title-h2" style="display: none;">Forecast</h2>
+    </div>
+
+    <div id="forecast-table-container">
       <table id="forecast-table" class="forecast-table" style="display: none;">
         <thead>
           <tr>

diff --git a/scripts.js b/scripts.js
@@ -10,6 +10,10 @@ const mapboxToken = 'pk.eyJ1IjoiczI3Mjg4IiwiYSI6ImNscjI2cGZveTA5eGsyam1wd20zb2do
 // const apiKey = process.env.REACT_APP_OPENWEATHERMAPAPI;
 // const mapboxToken = process.env.REACT_APP_MAPBOXTOKEN;
 
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
 const modeSlider = document.getElementById('modeSlider');
 const modeText = document.getElementById('modeText');
 const MODE_KEY = 'websiteMode';
@@ -130,18 +134,76 @@ async function getForecastData(latitude, longitude) {
 
 // Function to display current weather
 function displayCurrentWeather(weather, place_name) {
+  const currentWeatherTitle = document.getElementById('current-weather-title');
+  currentWeatherTitle.innerHTML = `<h2>Current Weather in ${place_name}</h2>`;
+
   const currentWeatherElement = document.getElementById('current-weather');
   currentWeatherElement.innerHTML = `
-    <h3>Current Weather in ${place_name}</h3>
-    <p>Temperature: ${weather.main.temp}°C</p>
-    <p>Feels Like: ${weather.main.feels_like}°C</p>
-    <p>Pressure: ${weather.main.pressure} hPa</p>
-    <p>Humidity: ${weather.main.humidity}%</p>
+    <p>Weather: ${capitalizeFirstLetter(weather.weather[0].description)}</p>
+    <p>Temperature: ${Math.round(weather.main.temp)}°C</p>
+    <p>Feels Like: ${Math.round(weather.main.feels_like)}°C</p>
+    <p>Humidity: ${Math.round(weather.main.humidity)}%</p>
+    <p>Wind Speed: ${Math.round(weather.wind.speed)} m/s</p>
+    <p>Sunrise: ${new Date(weather.sys.sunrise * 1000).toLocaleTimeString()}</p>
+    <p>Sunset: ${new Date(weather.sys.sunset * 1000).toLocaleTimeString()}</p>
   `;
-
+  // TODO: Set icon depending on weather
+  // const currentWeatherIcon = document.getElementById('current-weather-icon');
+  // const weatherID = weather.weather[0].id;
+  // TODO: Min max in a day
+  // TODO: Sunrise sunset
+  // TODO: info about weather weather.description
+  // TODO: changeBackgroundcolor for default(weatherID);
+
+  const currentWeatherIcon = document.getElementById('current-weather-icon');
+  const weatherIconID = weather.weather[0].icon;
+
+  if (weatherIconID === '01d') {
+    currentWeatherIcon.innerHTML = `<img src="images/002-clear-sky-day.png" alt="Current Weather Icon">`;
+  } else if (weatherIconID === '01n') {
+    currentWeatherIcon.innerHTML = `<img src="images/003-clear-sky-night.png" alt="Current Weather Icon">`;
+  } else if (weatherIconID === '02d') {
+    currentWeatherIcon.innerHTML = `<img src="images/004-few-clouds-day.png" alt="Current Weather Icon">`;
+  } else if (weatherIconID === '02n') {
+    currentWeatherIcon.innerHTML = `<img src="images/005-few-clouds-night.png" alt="Current Weather Icon">`;
+  } else if (weatherIconID === '03d') {
+    currentWeatherIcon.innerHTML = `<img src="images/006-scattered-clouds.png" alt="Current Weather Icon">`;
+  } else if (weatherIconID === '03n') {
+    currentWeatherIcon.innerHTML = `<img src="images/006-scattered-clouds.png" alt="Current Weather Icon">`;
+  } else if (weatherIconID === '04d') {
+    currentWeatherIcon.innerHTML = `<img src="images/007-broken-clouds.png" alt="Current Weather Icon">`;
+  } else if (weatherIconID === '04n') {
+    currentWeatherIcon.innerHTML = `<img src="images/007-broken-clouds.png" alt="Current Weather Icon">`;
+  } else if (weatherIconID === '09d') {
+    currentWeatherIcon.innerHTML = `<img src="images/008-shower-rain.png" alt="Current Weather Icon">`;
+  } else if (weatherIconID === '09n') {
+    currentWeatherIcon.innerHTML = `<img src="images/008-shower-rain.png" alt="Current Weather Icon">`;
+  } else if (weatherIconID === '10d') {
+    currentWeatherIcon.innerHTML = `<img src="images/009-rain-day.png" alt="Current Weather Icon">`;
+  } else if (weatherIconID === '10n') {
+    currentWeatherIcon.innerHTML = `<img src="images/010-rain-night.png" alt="Current Weather Icon">`;
+  } else if (weatherIconID === '11d') {
+    currentWeatherIcon.innerHTML = `<img src="images/011-thunderstorm.png" alt="Current Weather Icon">`;
+  } else if (weatherIconID === '11n') {
+    currentWeatherIcon.innerHTML = `<img src="images/011-thunderstorm.png" alt="Current Weather Icon">`;
+  } else if (weatherIconID === '13d') {
+    currentWeatherIcon.innerHTML = `<img src="images/012-snow.png" alt="Current Weather Icon">`;
+  } else if (weatherIconID === '13n') {
+    currentWeatherIcon.innerHTML = `<img src="images/012-snow.png" alt="Current Weather Icon">`;
+  } else if (weatherIconID === '50d') {
+    currentWeatherIcon.innerHTML = `<img src="images/013-mist.png" alt="Current Weather Icon">`;
+  } else if (weatherIconID === '50n') {
+    currentWeatherIcon.innerHTML = `<img src="images/013-mist.png" alt="Current Weather Icon">`;
+  } else {
+    currentWeatherIcon.innerHTML = `<img src="images/001-meteorology.png" alt="Current Weather Icon">`;
+  }
+  // TODO: Unknown weatherID icon
+
   // Display the current weather element
-  const currentWeather = document.getElementById('current-weather');
-  currentWeather.style.display = 'block';
+  currentWeatherTitle.style.display = 'block';
+
+  const currentWeatherContainer = document.getElementById('current-weather-container');
+  currentWeatherContainer.style.display = 'grid';
 }
 
 // Function to display forecast data in a table

diff --git a/styles.css b/styles.css
@@ -482,6 +482,7 @@
     list-style: none;
     border-radius: 8px;
     padding: 10px;
+    box-shadow: var(--default-box-shadow);
     margin: 0;
   }
   .default-mode #suggestions-list li {
@@ -496,6 +497,7 @@
     list-style: none;
     border-radius: 8px;
     padding: 10px;
+    box-shadow: var(--light-box-shadow);
     margin: 0;
   }
   .light-mode #suggestions-list li {
@@ -510,6 +512,7 @@
     list-style: none;
     border-radius: 8px;
     padding: 10px;
+    box-shadow: var(--dark-box-shadow);
     margin: 0;
   }
   .dark-mode #suggestions-list li {
@@ -520,55 +523,78 @@
     background-color: var(--dark-hover-color);
   }
 
-  .default-mode #current-weather {
-    background-color:var(--default-background-color);
-    border-radius: 8px;
-    padding: 10px;
-    color: var(--default-text-color);
-    box-shadow: var(--default-box-shadow);
+  .default-mode #current-weather-container {
     max-width: 100%;
-  }
-  .default-mode #current-weather h3 {
-    color: var(--default-text-color);
     margin-top: 0px;
-    text-align: center;
-  }
-  .default-mode #current-weather p {
-    color: var(--default-text-p-color);
+    margin-bottom: 0px;
+    border-radius: 8px;
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: auto auto;
+    gap: 5px 5px;
   }
 
-  .light-mode #current-weather {
-    background-color: var(--light-background-color);
+  .default-mode #current-weather-title {
+    background-color: var(--default-background-color);
+    box-shadow:var(--default-box-shadow);
+    padding: 5px;
     border-radius: 8px;
-    padding: 10px;
-    box-shadow: var(--light-box-shadow);
-    max-width: 100%;
+    max-height: auto;
+    align-items: center;
+    color: var(--default-text-color);
+    grid-column: 1;
+    grid-row: 1;
   }
-  .light-mode #current-weather h3 {
-    color: var(--light-text-color);
+  .default-mode #current-weather-title h2 {
     margin-top: 0px;
+    margin-bottom: 0px;
     text-align: center;
-  }
-  .light-mode #current-weather p {
-    color: var(--light-text-p-color);
+    padding: 5px;
+    height: fit-content;
   }
 
-  .dark-mode #current-weather {
-    background-color: var(--dark-background-color);
+  .default-mode #current-weather-box {
+    background-color:var(--default-background-color);
+    color: var(--default-text-color);
+    box-shadow:var(--default-box-shadow);
     border-radius: 8px;
-    padding: 10px;
-    box-shadow: var(--dark-box-shadow);
-    max-width: 100%;
+    padding: 5px;
+    width: auto; 
+    grid-column: 1;
+    grid-row: 2;
+    display: grid;
+    grid-template-columns: auto 120px;
+    grid-template-rows: auto;
   }
-
-  .dark-mode #current-weather h3 {
-    color: var(--dark-text-color);
+  .default-mode #current-weather {
+    background-color:var(--default-background-color);
+    color: var(--default-text-color);
+    width: 100%;
+    padding: 0px;
+    margin: 0px;
+    grid-column: 1;
+    grid-row: 1;
+    box-shadow: none;
+  }
+  .default-mode #current-weather p {
+    margin: 0px;
+    padding: 0px;
+    font-size: 13px;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    font-weight: bold;
+  }
+  .default-mode #current-weather-icon {
     margin-top: 0px;
-    text-align: center;
+    margin-right: 0px;
+    max-width: 120px;
+    color: var(--default-text-color);
+    grid-column: 2;
+    grid-row: 1;
   }
-
-  .dark-mode #current-weather p {
-    color: var(--dark-text-p-color);
+  .default-mode #current-weather-icon img {
+    margin-top: 5px;
+    height: 105px;
+    width: 105px;
   }
 
   .light-mode table {