5-Days Weather Application using Simple JavaScript | Weather Application
Vložit
- čas přidán 7. 09. 2024
- In this tutorial, you will learn how to create a 5-days Weather Application using Simple JavaScript. Build a Weather App with HTML, CSS & JavaScript
Download the code:
github.com/Ran...
Build COVID-19 Application: • Build a COVID-19 Track...
Build weather Application: • 5-Days Weather Applica...
Animated Text: • CSS Text Typing Animat...
JS console Methods: • Top useful JavaScript ...
Javascript Real-time- Projects: • JavaScript Real-Time P...
HTML CSS projects : • HTML and CSS Projects
JavaScript full: • JavaScript Tutorial fo...
Java Tutorial: • Core Java
C++ Tutorial : • C++ Tutorials
JavaScript Array Methods: • Complete Array Methods...
You will learn #WeatherApplication.
#5daysweatherapplication
#javascript
bro i wanna say thank you i learnt something from you that took my professor months to explain
I'm so glad that you liked my work..keep supporting
Has several issues, for example the method you used ain't accounting for the api giving us the temperature each day every 3 hours, so you are displaying the max and min temperature every 3 hours from 00:00 of the starting day, instead of the min and max temperature of each day.
async function getWeather(city) {
const response2 = await fetch(url2 + city + `&appid=${apiKey2}`)
const data2 = await response2.json()
console.log(data2)
let lists = data2.list
for (let i = 0; i < lists.length; i+=8) {
let a=lists[i].main.temp_min
document.getElementById("min"+(i+8)).innerHTML=a
}
}
function place5d() {
getWeather(input5d.value)
}
btn5d.addEventListener("click", place5d)
IT WILL PRINT 5 DAY MIN TEMP , ACCORDINGLY YOU CAN ALSO ACCESS MAX TEMP AND ICONS
IF ANY KIND OF CONFUSION/QUERY
TELEGRAM:-@M_Uzairshah
also in the (document.getElementById("min"+(i+8)).innerHTML=a) I HAVE GIVE THE MIN ELEMENTS THE ID OF MIN8,MIN16,MIN24,MIN32 ,MIN40 SO THAT IT WILL MEET THE FOR LOOP REQUIREMENTS AND ALSO IT WILL HELP TO ACCESS THE 5 DAY MIN TEMP
HERE IS THE HTML CODE:-
SEARCH
sunday
IMG
MIN:
MAX:
monday
IMG
MIN:
MAX:
tuesday
IMG
MIN:
MAX:
wednesday
IMG
MIN:
MAX:
thursday
IMG
MIN:
MAX:
same issue
You saved me! Thank you sir for your help!
I'm very greatful
Nice
Nice Video, But can you include the codes as well in your description.
I will do that ☺️
@@RanjanBeginnersGuide Thanks!!
Check the description for the source code
Check the description for the source code
the days arent accurate, its a forecast for every 3 hours, while 5 days forecast is whats needed.please correct my if im wrong
Will check
So the biggest problem I sed here is uncorrect min. temperature, sometimes minimum temperature is the same or higher than maximum. Why, what do you think?
I will have a look
@@RanjanBeginnersGuide However you did a good job still, maximum temperatures are pretty accurate, I added two more days, so there are 7 days now, I will give you a star on git.
How we can store this data into database
Using forEach is better or map which better instead of for loop
I agree
Hi, could you implement a cache to avoid api calls to openweathermap?
how can we do if we want to click the city from map and then open the forecast for 5 day not by search the city please help me
You have to add Google map API
@@RanjanBeginnersGuide I add svg map but how to call from svg map this weather forecast for example I want to select a city from the map that I have built it after clicking I want you to open 5 day weather forecast
@@RanjanBeginnersGuide if you have time I can show you on zoom by sharing screen
Anyone have a report on weather forecasting
Is it now working?
the tille u gave is "Weather Forcast" and in the end of video ur running some another file ,such that title is showing as "Document" titled file. Bro there are lot of bugs in the code.Kindly share the code link in the decription.
Ok I will
@@RanjanBeginnersGuide bruh I appreciate u for the whole content,but kindly make sure u post ur guthub link or code in the description, because I have spent more than 5 hours to debug the code
how to get same results for latitude and longitude ...?
Download the code from GitHub..link is in description
i want to take latitude and longitude as input for the same code as yours can you help
Did you follow my code
@@RanjanBeginnersGuide Yes . I tried to take latitude and longitude so I changed the new name variable to new latitude and added a new longitude variable and changes the api call to the latitude and longitude call which I got from open weather .
Could you have a look at the changes ?
tokoyo returned a result....we r doomed....
Lol
@@RanjanBeginnersGuide u think this is funny to misspell a city name and still get results?
@@tahzib1451 That's because there is a city called Tokoyo.
Plz include code in description
Definitely I'm going to do that
@@RanjanBeginnersGuide will wait thanks
Sure
@@RanjanBeginnersGuide I have tried this with Php but I am failed to get day lowest highest temperatures as it's show 40 records in json
I think it's hardest part to loop and get daily lowest and highest temperatures
Thanks
Check the description for the source code
How to I get a 7 day forecast instead of an 5 day forecast?
Look for an API that does that