GDGC-MET · pratikderle · Oct 14, 2024
diff --git a/index.html b/index.html
@@ -4,14 +4,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Weather App</title>
-
     <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@600&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <div class="w-card">
-
         <div class="searchbox">
             <input type="text" placeholder="Enter city name" spellcheck="false">
             <button>Search</button>
@@ -24,7 +21,7 @@
             <img src="images/clouds.png" alt="" class="weather-icon">
             <h2 class="temperature" id="temp">22°c</h2>
             <h2 class="city" id="city-name">New Delhi</h2>
-            
+
             <div class="additional-details">
                 <div id="col1" class="column">
                     <img src="images/humidity.png" alt="" id="humidity-img">
@@ -41,11 +38,17 @@ <h2 class="city" id="city-name">New Delhi</h2>
                     </div>
                 </div>
             </div>
-
         </div>
-    </div>
 
-<script src="script.js"></script>
+        <!-- Section for 7-day forecast -->
+        <div class="forecast">
+            <h3>7-Day Forecast</h3>
+            <div class="forecast-container" id="forecast-container">
+                <!-- Forecast days will be injected here -->
+            </div>
+        </div>
+    </div>
 
+    <script src="script.js"></script>
 </body>
-</html>
+</html>
diff --git a/script.js b/script.js
@@ -1,70 +1,81 @@
-// Assigning all the variables and the api Key and Url
-
 const apiKey = "19f175c397782f927e89a4261b9f3ac5";
 const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";
+const forecastUrl = "https://api.openweathermap.org/data/3.0/onecall?";
 const searchBox = document.querySelector(".searchbox input");
-const searchBtn = document.querySelector(".searchbox button")
+const searchBtn = document.querySelector(".searchbox button");
 const weatherIcon = document.querySelector(".weather-icon");
+const forecastContainer = document.getElementById("forecast-container");
 
-// Function for the main task (getting the data from API and displaying it)
-
-async function checkWeather(city){
-
-
+// Function to fetch and display weather data
+async function checkWeather(city) {
     const response = await fetch(apiUrl + city + `&appid=${apiKey}`);
-    if(response.status == 404){
+    if (response.status == 404) {
         document.querySelector(".error").style.display = "block";
         document.querySelector(".weather").style.display = "none";
         searchBox.value = "";
-    }
-    else{
+    } else {
         document.querySelector(".error").style.display = "none";
     }
-    var data = await response.json();
+    const data = await response.json();
 
     document.querySelector(".city").innerHTML = data.name;
-
     document.querySelector(".temperature").innerHTML = Math.round(data.main.temp) + "°c";
-
     document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
-
     document.querySelector(".wind").innerHTML = data.wind.speed + " kmph";
 
-    // Conditions for to check and display relevant image according to the weather conditions
-
-    if(data.weather[0].main == "Clouds"){
+    if (data.weather[0].main == "Clouds") {
         weatherIcon.src = "images/clouds.png";
-    }
-    else if(data.weather[0].main == "Clear"){
+    } else if (data.weather[0].main == "Clear") {
         weatherIcon.src = "images/sun.png";
-    }
-    else if(data.weather[0].main == "Rain"){
+    } else if (data.weather[0].main == "Rain") {
         weatherIcon.src = "images/rain.png";
     }
-    else if(data.weather[0].main == "Haze"){
-        weatherIcon.src = "images/haze.png";
-    }
-    else if(data.weather[0].main == "Drizzle"){
-        weatherIcon.src = "images/drizzle.png";
-    }
-    else if(data.weather[0].main == "Mist"){
-        weatherIcon.src = "images/mist.png";
-    }
-
-    document.querySelector(".weather").style.display = "block";
 
-    // Making the searchBox's value empty once searched
+    document.querySelector(".weather").style.display = "block";
+
+    // Fetch and display 7-day forecast
+    getForecast(data.coord.lat, data.coord.lon);
     searchBox.value = "";
+}
 
+// Function to get 7-day forecast data
+async function getForecast(lat, lon) {
+    const forecastResponse = await fetch(forecastUrl + `lat=${lat}&lon=${lon}&exclude=current,minutely,hourly,alerts&units=metric&appid=${apiKey}`);
+    const forecastData = await forecastResponse.json();
+
+    forecastContainer.innerHTML = "";  // Clear previous forecast
+
+    // Display next 7 days forecast
+    forecastData.daily.slice(1, 8).forEach(day => {
+        const dayElement = document.createElement("div");
+        dayElement.classList.add("forecast-day");
+
+        const date = new Date(day.dt * 1000);
+        const options = { weekday: 'short' };
+        const dayName = date.toLocaleDateString('en-US', options);
+
+        let weatherIcon = "images/clouds.png";
+        if (day.weather[0].main == "Clear") {
+            weatherIcon = "images/sun.png";
+        } else if (day.weather[0].main == "Rain") {
+            weatherIcon = "images/rain.png";
+        }
+
+        dayElement.innerHTML = `
+            <p class="day-name">${dayName}</p>
+            <img src="${weatherIcon}" alt="Weather Icon" class="forecast-icon">
+            <p class="day-temp">${Math.round(day.temp.day)}°c</p>
+        `;
+
+        forecastContainer.appendChild(dayElement);
+    });
 }
 
 // Event listener for the button
-
-searchBtn.addEventListener("click", ()=>{
+searchBtn.addEventListener("click", () => {
     checkWeather(searchBox.value);
-})
+});
 
-// Enter button(keyCode = 13) event listener
 
 searchBox.addEventListener('keyup', function(event) {
     if (event.keyCode === 13) {

diff --git a/style.css b/style.css
@@ -1,15 +1,16 @@
-*{
+/* General styles */
+* {
     padding: 0;
     margin: 0;
     font-family: 'Josefin Sans', sans-serif;
     font-family: 'Roboto', sans-serif;
 }
 
-body{
+body {
     background-color: rgb(23, 23, 23);
 }
 
-.w-card{
+.w-card {
     width: 90%;
     max-width: 455px;
     background: linear-gradient(135deg, rgb(18, 28, 43), rgb(1, 46, 69));
@@ -20,14 +21,14 @@ body{
     text-align: center;
 }
 
-.searchbox{
+.searchbox {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
-
 }
-.searchbox input{
+
+.searchbox input {
     outline: none;
     border: none;
     background: lightcyan;
@@ -37,7 +38,7 @@ body{
     border-radius: 28px;
 }
 
-button{
+button {
     border: none;
     outline: none;
     background: lightcyan;
@@ -47,53 +48,91 @@ button{
     cursor: pointer;
     transition: 0.3s;
 }
-button:hover{
+
+button:hover {
     background-color: rgb(166, 254, 254);
 }
 
-.weather-icon{
+.weather-icon {
     width: 200px;
     margin-top: 20px;
 }
-#temp{
+
+#temp {
     font-size: 70px;
     font-weight: 500;
 }
-#city-name{
+
+#city-name {
     font-size: 56px;
     font-weight: 400;
 }
 
-.additional-details{
+.additional-details {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 4px 28px;
     margin-top: 45px;
 }
 
-.column{
+.column {
     display: flex;
     align-items: center;
     text-align: left;
 }
-.column img{
+
+.column img {
     width: 50px;
-    margin-right: 12px
+    margin-right: 12px;
 }
 
-.humidity, .wind{
+.humidity, .wind {
     font-size: 22px;
     font-weight: 500;
 }
 
-.weather{
+.weather {
     display: none;
 }
 
-.error{
+.error {
     font-size: 16px;
     text-align: left;
     margin: 8px 0px;
     display: none;
-}
+}
+
+/* Forecast section */
+.forecast {
+    margin-top: 30px;
+    color: white;
+}
+
+.forecast-container {
+    display: flex;
+    justify-content: space-between;
+    overflow-x: auto;
+    padding: 10px;
+}
+
+.forecast-day {
+    text-align: center;
+    margin: 10px;
+    flex: 1;
+    min-width: 80px;
+}
+
+.forecast-day img {
+    width: 50px;
+}
+
+.forecast-day .day-temp {
+    font-size: 18px;
+    font-weight: 500;
+}
+
+.forecast-day .day-name {
+    font-size: 16px;
+    font-weight: 400;
+}