Add files via upload

Maryyy-Ux Project-weather-app 7th week's project: World forecast app
Technigo · Maryyy-ux · Sep 29, 2024 · Sep 29, 2024 · Sep 29, 2024 · Sep 30, 2024
commit 0b50e983f5c49314d753744375f0c0013bc1434a
diff --git a/README.md b/README.md
@@ -1,12 +1,13 @@
 # Weather App
 
-This is the seven week's project. World forecast app. As it's worldwide, is required to filter by city name. Fetch, API's. 
+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.
 
 ## The problem
 
-If I had more time I would find out the main page styling but it is a secondary issue. 
+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?
 
 ## View it live
 
-Netlify: (https://66f9a6ffd3552144d0e5534c--cute-selkie-735cdb.netlify.app/)
+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.
diff --git a/index.html b/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Weather App</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="container">
+        <h1>Weather App</h1>
+
+        <div class="weather-info">
+            <h2 id="city-name">City Name</h2>
+            <p id="temperature">Temperature: -- °C</p>
+            <p id="weather-description">Description: --</p>
+            <p id="sunrise">Sunrise: --</p>
+            <p id="sunset">Sunset: --</p>
+            <img id="weather-icon" src="" alt="Weather icon">
+
+        </div>
+
+        <div class="forecast">
+            <h3>4-Day Forecast</h3>
+            <div id="forecast-container"></div>
+        </div>
+    </div>
+
+    <script src="scrypt.js"></script>
+</body>
+
+</html>
diff --git a/scrypt.js 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 = `
+            <p><strong>${new Date(forecast.dt * 1000).toLocaleDateString()}</strong></p>
+            <p>Temp: ${forecast.main.temp.toFixed(1)} °C</p>
+            <p>Min: ${forecast.main.temp_min.toFixed(1)} °C</p>
+            <p>Max: ${forecast.main.temp_max.toFixed(1)} °C</p>
+        `;
+        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
@@ -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;
+    }
+}