diff --git a/NewYork.jpg b/NewYork.jpg new file mode 100644 index 000000000..1c06a445b Binary files /dev/null and b/NewYork.jpg differ diff --git a/README.md b/README.md index f8b15f4cb..e8bd6a4a0 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,11 @@ # Weather App -Replace this readme with your own information about your project. - -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +Seven weeks project. As it is a worldwide forecast app, its required to search the name on the bar. ## The problem -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +There was a challennging project but I really enjoyed finding out the solutions. The API page was awesome because I learned so much on there. I have received a secury message form GitHub so this is my second pull (just in case). ## View it live -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +(https://cute-selkie-735cdb.netlify.app) diff --git a/WorldWeatherApp.png b/WorldWeatherApp.png new file mode 100644 index 000000000..464f7368c Binary files /dev/null and b/WorldWeatherApp.png differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..844b1fa5a --- /dev/null +++ b/index.html @@ -0,0 +1,34 @@ + + + +
+ + +Temperature: -- °C
+Description: --
+Sunrise: --
+Sunset: --
+${new Date(forecast.dt * 1000).toLocaleDateString()}
+Temp: ${forecast.main.temp.toFixed(1)} °C
+Min: ${forecast.main.temp_min.toFixed(1)} °C
+Max: ${forecast.main.temp_max.toFixed(1)} °C
+ `; + forecastContainer.appendChild(forecastElement); + }); +} + +// Call functions on page load // Llamar a las funciones al cargar la página +getWeatherData('Stockholm,Sweden') + .then(data => console.log(data)) + .catch(error => console.error('Error:', error)); + +getForecastData('Stockholm,Sweden') + .then(data => console.log(data)) + .catch(error => console.error('Error:', error)); + diff --git a/style.css b/style.css new file mode 100644 index 000000000..03d730a51 --- /dev/null +++ b/style.css @@ -0,0 +1,62 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + background-color: rgb(215, 215, 241); + color: #333; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + padding: 20px; +} + +.container { + max-width: 600px; + width: 100%; + background-color: #fff; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding: 20px; + text-align: center; +} + +h1 { + margin-bottom: 20px; +} + +.weather-info { + margin-bottom: 20px; +} + +#forecast-container { + display: flex; + justify-content: space-between; +} + +.forecast-day { + background-color: #e3f2fd; + padding: 10px; + border-radius: 5px; + width: 22%; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.forecast-day p { + font-size: 0.9em; +} + +@media (max-width: 600px) { + #forecast-container { + flex-direction: column; + } + + .forecast-day { + width: 100%; + margin-bottom: 10px; + } +} \ No newline at end of file