project-7-weather-app #425
Conversation
There was a problem hiding this comment.
Great job with this project!
You are on the right track and have implemented the first features in a good way.
The searchbar is a stretch goal so I suggest not to focus on that at the moment.
The only thing that is missing to meet the requirements is the weather forecast
Try to follow that section in the instructions:
Feature: Weather forecast 📅
Show a forecast for the next 4 days. You can choose how to display the forecast - perhaps you want to show the min and max temperature for each day, or perhaps you want to show the temperature from the middle of the day, or the humidity, what it feels like and so on. Just make sure to make it all fit nicely with your chosen design.https://api.openweathermap.org/data/2.5/forecast?q=Stockholm,Sweden&units=metric&APPID=YOUR_API_KEY
The API gives us the next 4-5 days but for every third hour. So a good idea could be to only use the weather data from the same time every day. You can filter the forecast list array to only get the info from 12:00 each day for example.Read the endpoint documentation for the forecast.
Also don't forget to check previous questions and solutions to this on Stack Overflow. Many students have been struggling with this in previos cohorts too.
https://stackoverflowteams.com/c/technigo/questions/tagged/55
code/script.js
Outdated
| const searchInput = document.getElementById("city-input"); | ||
| const searchButton = document.getElementById("btn-city-input"); | ||
|
|
||
|
|
||
| /* Add event listener for the button click */ | ||
| searchButton.addEventListener("click", function() { | ||
| cityWeather = searchInput.value; | ||
|
|
||
| console.log('Search query:', cityWeather); | ||
|
|
||
| }); | ||
|
|
||
|
|
||
| // Trigger the search when the Enter key is pressed | ||
| searchInput.addEventListener('keypress', function(event) { | ||
| if (event.key === 'Enter') { | ||
| // Prevent the default action of the Enter key (form submission, etc.) | ||
| event.preventDefault(); | ||
|
|
||
| // Get the value from the search input field | ||
| cityWeather = searchInput.value; | ||
|
|
||
| // Log the search query | ||
| console.log('Search query (Enter pressed):', cityWeather); | ||
| } | ||
| }); |
There was a problem hiding this comment.
I think you need to comment this out as well, because right now it's broken 👀
Netlify link: https://project-7-weather-app.netlify.app/