Scribd
Upload
57 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
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
57 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
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