Technigo · Maryyy-ux · Sep 29, 2024 · Sep 29, 2024 · Sep 29, 2024 · Sep 30, 2024
diff --git a/NewYork.jpg b/NewYork.jpg
diff --git 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
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;
+    }
+}