Scribd
Upload
59 views

Weather - HTML:: Doctype HTML Head Meta Meta Meta Link Title Title Head Body h1 h1 P Input P Button Button h2 h2

This document contains the HTML and CSS code for a weather forecast web page. The HTML includes elements for the page header, a search bar to input a city, buttons to trigger weather data loading, and containers to display current weather conditions and a 7 day forecast. The CSS styles these elements and sets rules for layout, colors, fonts and responsive design for mobile screens.

Uploaded by

Rasuri Sandeep
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
59 views

Weather - HTML:: Doctype HTML Head Meta Meta Meta Link Title Title Head Body h1 h1 P Input P Button Button h2 h2

This document contains the HTML and CSS code for a weather forecast web page. The HTML includes elements for the page header, a search bar to input a city, buttons to trigger weather data loading, and containers to display current weather conditions and a 7 day forecast. The CSS styles these elements and sets rules for layout, colors, fonts and responsive design for mobile screens.

Uploaded by

Rasuri Sandeep
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

weather.

html:

<!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">
    <link rel="stylesheet" href="weather.css">
    <title>Major Project</title>
</head>
<body onload="DefaultScreen()">
    <center>
        <h1 id="Para1">7 Days Weather Forecast</h1>
        <p id="inputContainer">City: <input type="text" id="cityInput"></p>
        <button type="button" onclick="GetInfo()">Click Me</button>        
        <h2 id="cityName">---Delhi---</h2>
    </center>
   
    <div class="time" id="time">
        12:30 <span id="am-pm">PM</span>
      </div>
      <div class="date" id="date">
        Monday, 25 May
      </div>
      <div class="current-info">
        <div class="current-info">humidity</div>
        <div class="weather-item"></div>
     </div>
     
    <!-- <div id = "weatherContainer"> -->
    <div class="future-forecast">
        <div id="iconsContainer">  
            <div class="today">  
            <div class = "icons">
                <p class="weather" id="day1"></p>
                <div class="image"><img src="dots.png" class="imgClass"
id="img1"></div>
                <p class="minValues" id="day1Min">Loading...</p>
                <p class="maxValues" id="day1Max">Loading...</p>
            </div>
            </div>

            <div class = "icons">


                <p class="weather" id="day2"></p>
                <div class="image"><img src="dots.png" class="imgClass"
id="img2"></div>
                <p class="minValues" id="day2Min">Loading...</p>
                <p class="maxValues" id="day2Max">Loading...</p>
            </div>
            <div class = "icons">
                <p class="weather" id="day3"></p>
                <div class="image"><img src="dots.png" class="imgClass"
id="img3"></div>
                <p class="minValues" id="day3Min">Loading...</p>
                <p class="maxValues" id="day3Max">Loading...</p>
            </div>
            <div class = "icons">
                <p class="weather" id="day4"></p>
                <div class="image"><img src="dots.png" class="imgClass"
id="img4"></div>
                <p class="minValues" id="day4Min">Loading...</p>
                <p class="maxValues" id="day4Max">Loading...</p>
            </div>
            <div class = "icons">
                <p class="weather" id="day5"></p>
                <div class="image"><img src="dots.png" class="imgClass"
id="img5"></div>
                <p class="minValues" id="day5Min">Loading...</p>
                <p class="maxValues" id="day5Max">Loading...</p>
            </div>
            <div class = "icons">
                <p class="weather" id="day6"></p>
                <div class="image"><img src="dots.png" class="imgClass"
id="img6"></div>
                <p class="minValues" id="day6Min">Loading...</p>
                <p class="maxValues" id="day6Max">Loading...</p>
            </div>
            <div class = "icons">
                <p class="weather" id="day7"></p>
                <div class="image"><img src="dots.png" class="imgClass"
id="img7"></div>
                <p class="minValues" id="day7Min">Loading...</p>
                <p class="maxValues" id="day7Max">Loading...</p>
            </div>
            <div class = "icons">
                <p class="weather" id="day8"></p>
                <div class="image"><img src="dots.png" class="imgClass"
id="img8"></div>
                <p class="minValues" id="day8Min">Loading...</p>
                <p class="maxValues" id="day8Max">Loading...</p>
            </div>
        </div>
    </div>
        <script src="weather.js"></script>
        <center><footer><i>Thank you!</i></footer></center>
</body>
</html>

weather.css:
*{/*overall body*/
    color: rgb(9, 15, 17);
    /*background: rgb(7, 243, 113);*/
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    box-sizing: border-box;
    margin:0;
    padding:0;    
}

#cityInput, #cityName, #inputContainer{


margin: 3px;
padding:5px;
text-align:center;
font-size:18px;
font-weight:bold;
z-index: 5;
}
#inputContainer{/*city:background-color:*/
    background-color:burlywood;
}

button{/*button*/
margin: 3px;
padding:5px;
background-color: antiquewhite;
text-align:center;
font-size:20px;
font-weight:bold;
z-index:5;
}

#weatherContainer{/*first line*/
    position: absolute;
    top: 70%;
    left: 51.5%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    height: 300px;
    width: 1300px;
    border: 5px solid rgba(97, 95, 95, 0.829);    
    border-radius: 10px;
}

#iconsContainer{/*second line*/
    display: flex;
    position: absolute;
    background-color:  rgba(0,0,0,0.2);;
    top: 80%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    height: 240px;
    width: 1400px;    
    border: 5px solid rgb(31, 82, 82);    
    border-radius: 25px;
    justify-content: start;
        align-items: none;
        /* overflow-y: hidden; */
}

.icons{/*boxes*/
    display: inline-bock;
    float: left;
    height: 200px;
    width: 130px;
    margin: 20px;
    border: 5px solid rgb(48, 47, 47);
    border-radius: 10px;
}

.image{/*min-max text alignment*/


    height: 110px;
    width: 100%;
}

.imgClass{/*icons*/
    height: 140px;
    width: 100%;
}

.weather{/*day name bgcolor*/


    margin: 5px;
    background-color: rgb(31, 168, 168);
    border-radius: 15px;
    text-align: center;
    font-weight: bold;
}
.minValues{/*min alignment up&down*/
    color: white;
    text-align: center;
    display: inline-block;
    border-radius: 5px;
    height: 15px;
    width: 45px;
    margin: 0;
    margin-bottom: 5px;
    margin-left: 5px;
}

.maxValues{/*max alignment up&down*/


    color: white;
    text-align: center;
    display: inline-block;
    border-radius: 5px;
    height: 15px;
    width: 45px;
    margin: 0;
    margin-bottom: 5px;
    margin-left: 5px;
}

/*  */
@import url('https://fonts.googleapis.com/css2?
family=Poppins:wght@100;200;400;700&display=swap');

body{
    background:url('https://images.unsplash.com/photo-1621274403997-
37aace184f49?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-
1.2.1');
    background-repeat:round;
    background-size:cover;
    /* overflow:scroll; */
    height: 100vh;
    font-family: 'Poppins', sans-serif;
}

.container{/*moving time from left to towards right*/


    top: 20%;
    padding: 10px 70px;
    color:#fff;
}

.current-info{/*imp/current-info->co1.date-container,col2.place-container*/
    display: flex;
    padding: 20px 70px;
    justify-content: space-between;
    flex-wrap: wrap;
}
.date-container{/*date time font size*/
    font-weight: 600;
}
.date-container .time{/*time:12:30*/
    color: white;
    font-size: 170px;
}

.date-container #am-pm{/*am/pm*/
    color: white;
    font-size: 30px;
    margin-left: 20px;
}

.date-container .date{/*date*/
    color: white;
    font-size: 30px;
}

.place-container{/**/
    color: rgb(199, 25, 25);
    text-align: end;
}

 /*place-container*/.time-zone{/*Asia/Kolkatta*/
    color: white;
    text-align: right;
    font-size: 30px;
    font-weight: 100;
    text-align: right;
}

/*place-container*/ .country{/*latitudes and longitudes*/


    color: white;
    font-size: 12px;
    font-weight: 700;
    text-align: end;
}
 .time {/*time*/
     color:white;
     font-weight: bold;
     font-size: 20px;
 }
 #am-pm{/*am/pm*/
     color:white;
     font-weight: 700;
     font-size: 20px;
 }
 .date{/*date*/
     color:white;
 }
 
.current-info .others{/*imp*/
    display: flex;
    flex-direction: column;
    background: rgba(24,24,27, 0.6);
    padding:0px 70px;
    border-radius: 10px;
    margin: 10px 0;
    border: 1px solid #eee;
    text-align:right;
}

.current-info .others .weather-item{/**/


    display: flex;
    justify-content: space-between;
}

.future-forecast{/*black strip in weatherApp*/


    /* background: rgba(17, 17, 22, 0.8); */
    padding: 25px;
    position: fixed;
    bottom: 0;
    display: flex;
    color:white;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: space-between;
    overflow-y: hidden;
}

.future-forecast .today{/*today info &bg*/


    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    border-radius: 10px;
    padding:25px;
    padding-right: 40px;
    border-radius: 10px;
    background: rgba(0,0,0,0.2)
}
/* .future-forecast .today .day{
    padding: 5px 15px;
    background: #3c3c44;
    border-radius: 50px;
    text-align: center;
 }

.future-forecast .today .temp{


    font-size: 18px;
    padding-top: 15px;
}*/

.future-forecast .weather-forecast{
    display: flex;
}

.weather-forecast .weather-forecast-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 10px;
    background: rgba(0,0,0,0.2)
}

.weather-forecast .weather-forecast-item .day{


    padding: 5px 15px;
    background: #3C3C44;
    border-radius: 50px;
    text-align: center;
}

.weather-forecast .weather-forecast-item .temp{


    font-weight: 100;
    font-size: 12px;
}
.weather-item{
    padding: 75px;
}

@media only screen and  (max-width:730px){


   
    .container{
        padding: 20px;
    }
   
    .future-forecast{
        justify-content: start;
        align-items: none;
        overflow-y: scroll;
    }

    .future-forecast .today .temp{


        font-size: 16px;
    }

    .date-container .time{
        font-size: 50px;
    }

    .date-container #am-pm{
        font-size: 20px;
    }

    .date-container .date{
        font-size: 20px;
    }

   /* .place-container{
        text-align: end;
        margin-top: 15px;
    }
    .place-container .time-zone{
        font-size: 20px;
    }*/

    .current-info .others{
        padding: 12px;
    }

    .current-info .others .weather-item{


        font-size: 14px;
    }

}
@media only screen and (max-width: 1400px){
    .future-forecast{
        justify-content: start;
        align-items: none;
        overflow-x: scroll;
    }
}
weather.js:

function GetInfo()
{
   var newName = document.getElementById("cityInput");
   var cityName = document.getElementById("cityName");
   cityName.innerHTML = "--"+newName.value+"--";

  fetch('https://api.openweathermap.org/data/2.5/forecast?
q='+newName.value+'&appid=f02d68936905fe8381426343096ae320')
  .then(response => response.json())
  .then(data => {
   //Getting the min and max values for each day
   for(i = 0; i<8; i++)
   {
       document.getElementById("day" + (i+1) + "Min").innerHTML = "Min: " +
Number(data.list[i].main.temp_min - 273.15).toFixed(1)+ "°";
       //Number(1.3450001).toFixed(2); // 1.35
   }
   for(i = 0; i<8; i++)
   {
       document.getElementById("day" + (i+1) + "Max").innerHTML = "Max: " +
Number(data.list[i].main.temp_max - 273.15).toFixed(2) + "°";
   }
   //------------------------------------------------------------

   //Getting Weather Icons


    for(i = 0; i<8; i++)
    {
       document.getElementById("img" + (i+1)).src =
"http://openweathermap.org/img/wn/"+
       data.list[i].weather[0].icon
    +".png";
   }
   //------------------------------------------------------------
   console.log(data)
})
.catch(err => alert("Something Went Wrong: Try Checking Your Internet
Coneciton"))
}

/////
const timeEl = document.getElementById('time');
const dateEl = document.getElementById('date');
const currentWeatherItemsEl = document.getElementById('current-weather-
items');
const timezone = document.getElementById('time-zone');
const countryEl = document.getElementById('country');
const weatherForecastEl = document.getElementById('weather-forecast');
const currentTempEl = document.getElementById('current-temp');

const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',


'Friday', 'Saturday']
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',
'Oct', 'Nov', 'Dec'];

const API_KEY ='f02d68936905fe8381426343096ae320';

setInterval(() => {
   const time = new Date();
   const month = time.getMonth();
   const date = time.getDate();
   const day = time.getDay();
   const hour = time.getHours();
   const hoursIn12HrFormat = hour >= 13 ? hour %12: hour
   const minutes = time.getMinutes();
   const ampm = hour >=12 ? 'PM' : 'AM'

   timeEl.innerHTML = (hoursIn12HrFormat < 10? '0'+hoursIn12HrFormat :


hoursIn12HrFormat) + ':' + (minutes < 10? '0'+minutes: minutes)+ ' ' + `<span
id="am-pm">${ampm}</span>`

   dateEl.innerHTML = days[day] + ', ' + date+ ' ' + months[month]

}, 1000);

getWeatherData()
function getWeatherData()
{
   navigator.geolocation.getCurrentPosition((success) => {
       
       let {latitude, longitude } = success.coords;

       fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=$
{latitude}&lon=${longitude}&exclude=hourly,minutely&units=metric&appid=$
{API_KEY}`).then(res => res.json()).then(data => {

       console.log(data)
       showWeatherData(data);
       })

   })
}

function showWeatherData(data)
{
   let {humidity, pressure, sunrise, sunset, wind_speed} = data.current;

   timezone.innerHTML = data.timezone;
   countryEl.innerHTML = data.lat + 'N ' + data.lon+'E'

   currentWeatherItemsEl.innerHTML =
   `<div class="weather-item">
       <div>Humidity</div>
       <div>${humidity}%</div>
   </div>
   <div class="weather-item">
       <div>Pressure</div>
       <div>${pressure}</div>
   </div>
   <div class="weather-item">
       <div>Wind Speed</div>
       <div>${wind_speed}</div>
   </div>
   <div class="weather-item">
       <div>Sunrise</div>
       <div>${window.moment(sunrise * 1000).format('HH:mm a')}</div>
   </div>
   <div class="weather-item">
       <div>Sunset</div>
       <div>${window.moment(sunset*1000).format('HH:mm a')}</div>
   </div>
   `;

   
}
/////

function DefaultScreen()
{
   document.getElementById("cityInput").defaultValue = "Delhi";
   GetInfo();
   
}
//Getting and displaying the text for the upcoming five days of the week
var d = new Date();
var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday",
"Friday", "Saturday",];

//Function to get the correct integer for the index of the days array
function CheckDay(day)
{
   if(day + d.getDay() > 6)
   {
       return day + d.getDay() - 7;
   }
   else
   {
       return day + d.getDay();
   }
}

   for(i = 0; i<8; i++)


   {
       document.getElementById("day" + (i+1)).innerHTML =
weekday[CheckDay(i)];
   }
   //------------------------------------------------------------

/*document.getElementById("day1Min").innerHTML =
Math.round(data.list[0].main.temp_min - 273.15, -2);
document.getElementById("day2Min").innerHTML =
Math.round(data.list[1].main.temp_min - 273.15, -2);
document.getElementById("day3Min").innerHTML =
Math.round(data.list[2].main.temp_min - 273.15, -2);
document.getElementById("day4Min").innerHTML =
Math.round(data.list[3].main.temp_min - 273.15, -2);
document.getElementById("day5Min").innerHTML =
Math.round(data.list[4].main.temp_min - 273.15, -2);
document.getElementById("day6Min").innerHTML =
Math.round(data.list[5].main.temp_min - 273.15, -2);
document.getElementById("day7Min").innerHTML =
Math.round(data.list[6].main.temp_min - 273.15, -2);
document.getElementById("day8Min").innerHTML =
Math.round(data.list[7].main.temp_min - 273.15, -2);*/

/*document.getElementById("day1Max").innerHTML =
Math.round(data.list[0].main.temp_max - 273.15, -2);
document.getElementById("day2Max").innerHTML =
Math.round(data.list[0].main.temp_max - 273.15, -2);
document.getElementById("day3Max").innerHTML =
Math.round(data.list[0].main.temp_max - 273.15, -2);
document.getElementById("day4Max").innerHTML =
Math.round(data.list[0].main.temp_max - 273.15, -2);
document.getElementById("day5Max").innerHTML =
Math.round(data.list[0].main.temp_max - 273.15, -2);*/

/*document.getElementById("img1").src = "http://openweathermap.org/img/w/"+
data.list[0].weather[0].icon
+".png";
document.getElementById("img2").src = "http://openweathermap.org/img/w/"+
data.list[1].weather[0].icon
+".png";
document.getElementById("img3").src = "http://openweathermap.org/img/w/"+
data.list[2].weather[0].icon
+".png";
document.getElementById("img4").src = "http://openweathermap.org/img/w/"+
data.list[3].weather[0].icon
+".png";
document.getElementById("img5").src = "http://openweathermap.org/img/w/"+
data.list[4].weather[0].icon
+".png";*/
/*
document.getElementById("day1").innerHTML = weekday[CheckDay(0)];
document.getElementById("day2").innerHTML = weekday[CheckDay(1)];
document.getElementById("day3").innerHTML = weekday[CheckDay(2)];
document.getElementById("day4").innerHTML = weekday[CheckDay(3)];
document.getElementById("day5").innerHTML = weekday[CheckDay(4)];*/

/*weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";*/

You might also like