diff options
| author | Ekaitz Zarraga <ekaitz@elenq.tech> | 2023-01-29 22:27:23 +0100 |
|---|---|---|
| committer | Ekaitz <ekaitz@elenq.tech> | 2023-01-30 11:42:41 +0100 |
| commit | 9cd41b9d510030b3618c42183a0250acccc32a12 (patch) | |
| tree | d081e7fc4cb04c458453f72de0142e519e729fcb | |
| parent | 01a48de05d2c02f24c81dfbe607bd18145f59983 (diff) | |
Add JavaScript backend and adjust style accordignly
| -rw-r--r-- | css/style.css | 10 | ||||
| -rw-r--r-- | index.html | 39 | ||||
| -rw-r--r-- | js/index.js | 123 |
3 files changed, 142 insertions, 30 deletions
diff --git a/css/style.css b/css/style.css index b3a5a60..6e22d00 100644 --- a/css/style.css +++ b/css/style.css @@ -16,11 +16,9 @@ body{ .day-forecast { border-radius: 5px; border: 1px solid lightgrey; - background: right/contain content-box border-box no-repeat url('/media/examples/rain.svg') white; } -.day-forecast > h2, -.day-forecast > p { +.day-forecast > h2 { margin: 0.2rem; font-size: 1rem; } @@ -29,12 +27,16 @@ body{ display: flex; flex-wrap: wrap; justify-content: space-between; + align-items: center; } .day-forecast-text{ min-width: 200px; + margin: 0 2rem; } .day-forecast-image{ - padding: 1em; + padding: 1rem; + margin: 0 2rem; + font-size: 60pt; } footer{ @@ -24,44 +24,31 @@ <meta name="description" content="Una pequeña aplicación meteorológica"> <!-- Iconos --> - <link rel="icon" href="/favicon.ico"> - <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <!-- Hoja de estilos --> <link rel="stylesheet" href="css/style.css"> + <script src="js/index.js" defer></script> </head> <body> <article class="forecast"> - <h1>Weather forecast for Seattle</h1> + <h1>Weather forecast for Bilbao</h1> + <!-- Esta es la plantilla aproximada que se va a generar con + Javascript <article class="day-forecast"> <div class="day-forecast-text"> - <h2>03 March 2018</h2> - <p>Heavy rain.</p> - </div> - <div class="day-forecast-image"> - <img src="img/lluvia.png"/> - </div> - </article> - <article class="day-forecast"> - <div class="day-forecast-text"> - <h2>04 March 2018</h2> - <p>Heavy rain.</p> - </div> - <div class="day-forecast-image"> - <img src="img/lluvia.png"/> - </div> - </article> - <article class="day-forecast"> - <div class="day-forecast-text"> - <h2>05 March 2018</h2> - <p>Heavy rain.</p> - </div> - <div class="day-forecast-image"> - <img src="img/lluvia.png"/> + <h2><time datetime="2023-01-28">28 de Enero de 2023</h2> + <p>Soleado</p> + <ul> + <li>Max: 19C</li> + <li>Min: 1C</li> + </ul> </div> + + <span class="day-forecast-image" title="Sunny">☀</span> </article> + --> </article> <footer> diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..5d34903 --- /dev/null +++ b/js/index.js @@ -0,0 +1,123 @@ +"use strict"; +const LATITUDE = 43.26271; +const LONGITUDE = -2.92528; +const TIMEZONE = "Europe/Madrid"; +const WEATHERS = [ + "CLEAR_SKY", + "MAINLY_CLEAR", + "FOG", + "DRIZZLE", + "FREEZING_DRIZZLE", + "RAIN", + "FREEZING_RAIN", + "SNOW_FALL", + "SNOW_GRAINS", + "RAIN_SHOWERS", + "SNOW_SHOWERS", + "THUNDERSTORM", + "THUNDERSTORM_HAIL" +]; +// We can use some symbols from here: +// https://www.alt-codes.net/weather-symbols.php +const WEATHER2ICON = { + CLEAR_SKY: "$#x2600;", + MAINLY_CLEAR: "🌤", + FOG: "🌫", + DRIZZLE: "🌦", + FREEZING_DRIZZLE: "🌦", + RAIN: "🌧", + FREEZING_RAIN: "🌧", + SNOW_FALL: "🌨", + SNOW_GRAINS: "🌨", + RAIN_SHOWERS: "🌧", + SNOW_SHOWERS: "⛇", + THUNDERSTORM: "⛈", + THUNDERSTORM_HAIL: "⛈", +}; +const WMO_CONVERTER = { + 0: "CLEAR_SKY", + 1: "MAINLY_CLEAR", + 2: "MAINLY_CLEAR", + 3: "MAINLY_CLEAR", + 45: "FOG", + 48: "FOG", + 51: "DRIZZLE", + 53: "DRIZZLE", + 55: "DRIZZLE", + 56: "FREEZING_DRIZZLE", + 57: "FREEZING_DRIZZLE", + 61: "RAIN", + 63: "RAIN", + 65: "RAIN", + 66: "FREEZING_RAIN", + 67: "FREEZING_RAIN", + 71: "SNOW_FALL", + 73: "SNOW_FALL", + 75: "SNOW_FALL", + 77: "SNOW_GRAINS", + 80: "RAIN_SHOWERS", + 81: "RAIN_SHOWERS", + 82: "RAIN_SHOWERS", + 85: "SNOW_SHOWERS", + 86: "SNOW_SHOWERS", + 95: "THUNDERSTORM", + 96: "THUNDERSTORM_HAIL", + 99: "THUNDERSTORM_HAIL" +}; + +function makeDay(date, t_max, t_min, weather){ + console.log(Array.from(arguments)); + + let weather_desc = weather2description(weather); + + let week_container = document.querySelector(".forecast"); + + let day_element = document.createElement("article"); + day_element.setAttribute("class", "day-forecast"); + day_element.innerHTML = ` + <div class="day-forecast-text"> + <h2><time datetime="${date}">${(new Date(date)).toLocaleString()}</h2> + <p>${weather_desc}</p> + <ul> + <li>Max: ${t_max}C</li> + <li>Min: ${t_min}C</li> + </ul> + </div> + <span class="day-forecast-image" title="${weather_desc}">${WEATHER2ICON[weather]}</span>` + + week_container.appendChild(day_element); + +} + +function weather2description(weather){ + let str = weather.replaceAll("_"," ").toLowerCase(); + return str.charAt(0).toUpperCase() + str.slice(1); +} + +function processResponse( response_obj ) { + console.log(response_obj); + let data = response_obj.daily; + + // Our variables are here: + let time = data.time; + let temp_max = data.temperature_2m_max; + let temp_min = data.temperature_2m_min; + let code = data.weathercode; + + for(let i = 0; i < time.length; i++){ + makeDay(time[i], temp_max[i], temp_min[i], WMO_CONVERTER[code[i]]); + } +} + +function dailyURL(){ + return `https://api.open-meteo.com/v1/forecast`+ + `?latitude=${LATITUDE}` + + `&longitude=${LONGITUDE}` + + `&timezone=${TIMEZONE}` + + `&daily=temperature_2m_max,temperature_2m_min,weathercode` +} + +fetch( dailyURL() ) + .then((r)=>r.json()) + .then(processResponse) + .catch((err)=>console.error(err)); |