Application météo

3,522 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Recommandé

28 August 2024

Site Web météo

20 June 2025

Interface utilisateur des icônes de lecteur et d'application CSS Glassmorphism

13 June 2025

Interface utilisateur de l'application Réveil et Chronomètre

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Andev Web</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main>
        <form>
            <input type="text" id="name" autocomplete="off">
            <button>
                <i class="fa-solid fa-magnifying-glass"></i>
            </button>
        </form>
        <section class="result">

<figure class="temperature">
                <img src="https://openweathermap.org/img/wn/10d@4x.png">
                <figcaption>
                    <span>31</span>
                    <sup>o</sup>
                </figcaption> 
            </figure>
            <p class="description">overcast clouds</p>
            <ul>
                <li>
                    <span>clouds</span>
                    <i class="fa-solid fa-cloud"></i>
                    <span id="clouds">98</span>%
                </li>
                <li>
                    <span>humidity</span>
                    <i class="fa-solid fa-droplet"></i>
                    <span id="humidity">98</span>%
                </li>
                <li>
                    <span>pressure</span>
                    <i class="fa-solid fa-gauge"></i>
                    <span id="pressure">1011</span>hPa
                </li>
            </ul>
        </section>
    </main>

CSS

body{
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: 
        linear-gradient(
            to bottom,
            #dcdcdc 50%,
            #e9e9e9 50%
        );
    font-family: sans-serif;
}
*{
    padding: 0;
    margin: 0;
}
main{
    width: 300px;
    height: max-content;
    min-height: 300px;
    background-color: #f7f7f7;
    border-radius: 30px;
    box-shadow: 0 30px 50px #5553;
    padding: 30px;
    box-sizing: border-box;
}
main form{
    border: 1px solid #5552;
    display: flex;
    border-radius: 30px;
    justify-content: space-between;
}
main form input, 
main form button{
    border: none;
    background-color: transparent;
    outline: none;
    padding: 10px;
    box-sizing: border-box;
}
main form i{
    opacity: 0.7;
}
main .result{
    padding-top: 20px;
    text-align: center;
}
main .result .name{
    font-weight: bold;
    font-size: large;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
main .temperature img{
    width: 150px;
    filter: drop-shadow(0 10px 50px #555);
}
main .temperature figcaption{
    font-size: 3em;
}
main .description{
    padding: 10px 0 30px;
}
main ul{
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
main li{
    background-color: #f78a55;
    color: #fff;
    border-radius: 10px;
    padding: 20px 10px;
    background-image: linear-gradient(
        to bottom,
        transparent 50%,
        #0003 50%
    );
    font-weight: bold;
    font-size: small;
}
main ul li i{
    font-size: 2em;
    margin: 20px 0;
    display: block!important;
}
main li:nth-child(2){
    background-color: #b56291;
}
main li:nth-child(3){
    background-color: #48567b;
}
main.error{
    animation: errorEffect 0.3s linear 1;
}
@keyframes errorEffect{
    0%{
        transform: translate(10px, 5px)
    }
    25%{
        transform: translate(-5px, 0)
    }
    50%{
        transform: translate(8px, 2px)
    }
    75%{
        transform: translate(-2px, 5px)
    }
    100%{
        transform: translate(0, 0); 
    }
}

clouds.innerText = data.clouds.all;
                humidity.innerText = data.main.humidity;
                pressure.innerText = data.main.pressure;
            }else{
                main.classList.add('error');
                setTimeout(() => {
                    main.classList.remove('error');
                }, 1000);
            }
            valueSearch.value = '';
        })
}
// search Default
const initApp = () => {
    valueSearch.value = 'Washington';
    searchWeather();
}
initApp();