Skip to content

Commit

Permalink
Create 5day.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@curiousaswin
curiousaswin authored Mar 5, 2023
1 parent 6d4b1f2 commit 02cb11a
Showing 1 changed file with 201 additions and 0 deletions.
201 changes: 201 additions & 0 deletions weather/5day.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,201 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather App</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<style>
#citytemp{
font-size:36pt;
}
#weatherdesc{
font-size:24pt;
}
#weatherdata{
text-align:Center;
}
.Date{
font-weight:bold;
background-color:black;
text-align:center;
color:white;
}
.desc{
font-weight:bold;
font-size:28pt;
font-family:Comic Sans MS;
}
i{
font-size:28pt;
}
</style>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://kit.fontawesome.com/3e2a93553e.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="#">WeatherStar</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/aswinappsbeta/weather.html">Current</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hourly</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">5 day</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Alerts</a>
</li>
</ul>
</nav>
<input type="text" id="city" class="form-control" placeholder="Enter City Name"><button type="btn" class="btn-success form-control" onclick="findkey()">Get Weather</button>
<div class="day1 jumbotron">
<div class="Date" id="day1date"></div>
<h4>Day:</h4>
<div id="day1max" style="font-size:25pt;"></div>
<div class="desc" id="day1day"></div>
<i class="" id="day1icon"></i>
<div class="descmain" id="day1daymain"></div>
<div id="day1probd"></div>
<h4>Night:</h4>
<div id="day1min" style="font-size:25pt;"></div>
<div id="day1night" class="desc"></div>
<div id="day1prob"></div>
</div>
<div class="day2 jumbotron">
<div class="Date" id="day2date"></div>
<h4>Day:</h4>
<div id="day2max" style="font-size:25pt;"></div>
<div id="day2day" class="desc"></div>
<i class="" id="day2icon"></i>
<div class="descmain" id="day2daymain"></div>
<div id="day2probd"></div>
<h4>Night:</h4>
<div id="day2min" style="font-size:25pt;"></div>
<div id="day2night" class="desc"></div>
<i class="" id="day1icon"></i>
<div id="day2prob"></div>
</div>
<div class="day3 jumbotron">
<div class="Date" id="day3date"></div>
<h4>Day:</h4>
<div id="day3max" style="font-size:25pt;"></div>
<div id="day3day" class="desc"></div>
<i class="" id="day3icon"></i>
<div class="descmain" id="day3daymain"></div>
<div id="day3probd"></div>
<h4>Night:</h4>
<div id="day3min" style="font-size:25pt;"></div>
<div id="day3night" class="desc"></div>
<div id="day3prob"></div>
</div>
<div class="day4 jumbotron">
<div class="Date" id="day4date"></div>
<h4>Day:</h4>
<div id="day4max" style="font-size:25pt;"></div>

<div id="day4day" class="desc"></div>
<div class="descmain" id="day4daymain"></div>
<i class="" id="day4icon"></i>
<div id="day4probd"></div>
<h4>Night:</h4>
<div id="day4min" style="font-size:25pt;"></div>
<div id="day4night" class="desc"></div>
<div id="day4prob"></div>
</div>
<div class="day5 jumbotron ">
<div class="Date" id="day5date"></div>
<h4>Day:</h4>
<div id="day5max" style="font-size:25pt;"></div>
<div id="day5day" class="desc"></div>
<i class="" id="day5icon"></i>
<div class="descmain" id="day5daymain"></div>
<div id="day5probd"></div>
<h4>Night:</h4>
<div id="day5min" style="font-size:25pt;"></div>
<div id="day5night" class="desc"></div>
<div id="day5prob"></div>
</div>
<script>
var lockey= null;
function findkey(){
var city=document.getElementById('city').value;
fetch('https://dataservice.accuweather.com/locations/v1/cities/search?apikey=MqX8AO5ER51bQES8vBEMhzKueEX9xsWs&q='+city)
.then(response => response.json())
.then(data => {
var key= data[0].Key;
alert(key)
lockey=key;
setTimeout(loadweather,1)
} )
}
function loadweather(){


fetch('https://dataservice.accuweather.com/forecasts/v1/daily/5day/'+lockey+'?apikey=MqX8AO5ER51bQES8vBEMhzKueEX9xsWs&details=true')
.then(response => response.json())
.then(data => {

for (let i = 0; i <5; i++){
var dailymin= data.DailyForecasts[i].Temperature.Minimum.Value;
var dailymax=data.DailyForecasts[i].Temperature.Maximum.Value;
var probofprecipn = data.DailyForecasts[i].Night.PrecipitationProbability;
var probofprecipd = data.DailyForecasts[i].Day.PrecipitationProbability;
var dayphrase=data.DailyForecasts[i].Day.IconPhrase;
var nightphrase=data.DailyForecasts[i].Night.IconPhrase;
var dayshortphrase=data.DailyForecasts[i].Day.ShortPhrase;
document.getElementById('day'+[i+1]+'min').innerHTML = dailymin;
document.getElementById('day'+[i+1]+'max').innerHTML = dailymax;
document.getElementById('day'+[i+1]+'day').innerHTML = dayphrase;
document.getElementById('day'+[i+1]+'night').innerHTML = nightphrase;
document.getElementById('day'+[i+1]+'daymain').innerHTML = dayshortphrase;
document.getElementById('day'+[i+1]+'prob').innerHTML="Chance of Precipitation:"+probofprecipn+"%";
document.getElementById('day'+[i+1]+'probd').innerHTML="Chance of Precipitation:"+probofprecipd+"%";
//if statement
if(dayphrase==="Mostly cloudy"){
document.getElementById('day'+[i+1]+'icon').className="fa-solid fa-cloud-sun";
} else if(dayphrase==="Partly Cloudy"){
document.getElementById('day'+[i+1]+'icon').className="fa-solid fa-cloud-sun";
}else if(dayphrase==="Cloudy"){
document.getElementById('day'+[i+1]+'icon').className="fa-solid fa-cloud";
}else if(dayphrase==="Intermittent clouds"){
document.getElementById('day'+[i+1]+'icon').className="fa-solid fa-cloud-sun";
}else if(dayphrase==="Rain and snow"){
document.getElementById('day'+[i+1]+'icon').className="fa-solid fa-snowflake";
}else if(dayphrase==="Snow"){
document.getElementById('day'+[i+1]+'icon').className="fa-solid fa-snowflake";
}else if(dayphrase==="Flurries"){
document.getElementById('day'+[i+1]+'icon').className="fa-solid fa-snowflake";
}else if(dayphrase==="Mostly sunny"){
document.getElementById('day'+[i+1]+'icon').className="fa-solid fa-sun";
}else if(dayphrase==="Rain"){
document.getElementById('day'+[i+1]+'icon').className="fa-solid fa-cloud-rain";
}else if(dayphrase.includes('t-storms')){
document.getElementById('day'+[i+1]+'icon').className="fa-solid fa-cloud-bolt";
}else if(dayphrase.includes('Showers')){
document.getElementById('day'+[i+1]+'icon').className="fa-solid fa-cloud-showers-heavy";
}
const d = new Date();
document.getElementById('day'+[i+1]+'date').innerHTML = (d.getMonth()*1+1)+"/"+(d.getDate()+i);;
}
} )
}




</script>
</body>
</html>

0 comments on commit 02cb11a

Please sign in to comment.