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 @@ + + + + + + + Weather App + + + + +
+

Weather App

+ +
+

City Name

+

Temperature: -- °C

+

Description: --

+

Sunrise: --

+

Sunset: --

+ Weather icon + +
+ +
+

4-Day Forecast

+
+
+
+ + + + + \ No newline at end of file diff --git a/scrypt.js b/scrypt.js new file mode 100644 index 000000000..c393377a1 --- /dev/null +++ b/scrypt.js @@ -0,0 +1,78 @@ +const apiKey = 'b96f5d1233fefd689026a287dc8fa6a9'; + +// Function to convert Unix time to hour time// Función para convertir tiempo Unix a formato de hora legible +function convertUnixTime(unixTime) { + const date = new Date(unixTime * 1000); + return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); +} + +//Weather data function// Función para obtener el weather data +async function getWeatherData(city) { + const url = `https://api.openweathermap.org/data/2.5/weather?q=Stockholm,Sweden&units=metric&appid=b96f5d1233fefd689026a287dc8fa6a9`; + + try { + const response = await fetch(url); + const data = await response.json(); + + // Check if the response data get 'main' property// Verifica si la respuesta contiene la propiedad 'main' + if (data.main) { + document.getElementById('city-name').textContent = data.name; + document.getElementById('temperature').textContent = `Temperature: ${data.main.temp.toFixed(1)} °C`; + document.getElementById('weather-description').textContent = `Description: ${data.weather[0].description} `; + + // Get the icon weather code// Obtener el código del icono del clima + const iconCode = data.weather[0].icon; + const iconUrl = `https://openweathermap.org/img/wn/${iconCode}@2x.png`; + + // Create or update the image icon on the DOM// Crear o actualizar la imagen del icono en el DOM + const iconImg = document.getElementById('weather-icon'); + iconImg.src = iconUrl; // Establece la URL de la imagen + iconImg.alt = data.weather[0].description; // Establece el texto alternativo + + document.getElementById('sunrise').textContent = `Sunrise: ${convertUnixTime(data.sys.sunrise)} `; + document.getElementById('sunset').textContent = `Sunset: ${convertUnixTime(data.sys.sunset)} `; + } else { + console.error("Error: No se encontraron datos de clima para la ciudad especificada."); + document.getElementById('temperature').textContent = 'No weather data available.'; + } + } catch (error) { + console.error('Error al obtener los datos del clima:', error); + } +} + + +// Function to get the 4 days forecast// Función para obtener el pronóstico de 4 días +async function getForecastData(city) { + const url = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&units=metric&APPID=${apiKey}`; + + const response = await fetch(url); + const data = await response.json(); + + const forecastContainer = document.getElementById('forecast-container'); + forecastContainer.innerHTML = ''; // Delete former formcast// Limpiar pronóstico anterior + + // Filter to only get information from 12:00 each day// Filtrar para obtener solo la información de las 12:00 cada día + const dailyForecasts = data.list.filter(forecast => forecast.dt_txt.includes('12:00:00')); + + dailyForecasts.slice(0, 4).forEach(forecast => { + const forecastElement = document.createElement('div'); + forecastElement.classList.add('forecast-day'); + forecastElement.innerHTML = ` +

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