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

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 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>

id="img2"></div>
</div>
id="img3"></div>
</div>
id="img4"></div>
</div>
id="img5"></div>
</div>
id="img6"></div>
</div>
id="img7"></div>
</div>
id="img8"></div>
</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);
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);
}
.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);
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;
margin: 10px 0;
border: 1px solid #eee;
text-align:right;
}
.current-info .others .weather-item{/**/

display: flex;
}
.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;
overflow-y: hidden;
}
.future-forecast .today{/*today info &bg*/

display: flex;
justify-content: center;
padding:25px;
padding-right: 40px;
background: rgba(0,0,0,0.2)
}
/* .future-forecast .today .day{
padding: 5px 15px;
background: #3c3c44;
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;
justify-content: center;
margin: 0 10px;
padding: 15px;
background: rgba(0,0,0,0.2)
}
.weather-forecast .weather-forecast-item .day{

padding: 5px 15px;
background: #3C3C44;
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{
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{
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>Wind Speed</div>
<div>${wind_speed}</div>
</div>
<div>Sunrise</div>
<div>${window.moment(sunrise * 1000).format('HH:mm a')}</div>
</div>
<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[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("img1").src = "http://openweathermap.org/img/w/"+
data.list[0].weather[0].icon
+".png";
document.getElementById("img2").src = "http://openweathermap.org/img/w/"+
+".png";
+".png";
+".png";
+".png";*/
/*
document.getElementById("day1").innerHTML = weekday[CheckDay(0)];
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";*/

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

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

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

Uploaded by

Copyright:

Available Formats

weather.

<div class = "icons">

#cityInput, #cityName, #inputContainer{

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

.weather{/*day name bgcolor*/

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

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

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

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

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

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

.future-forecast .today .temp{

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

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

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

.future-forecast .today .temp{

.current-info .others .weather-item{

//Getting Weather Icons

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

const API_KEY ='f02d68936905fe8381426343096ae320';

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

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

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

You might also like

.image{/min-max text alignment/

.weather{/day name bgcolor/

.maxValues{/max alignment up&down/

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

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

.future-forecast{/black strip in weatherApp/

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