Weather app

Open In Editor Publish Your Code

<!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); 
    }
}

JS

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();

Weather app

Recommended

Apple Liquid Glass HTML CSS Effect

download app card

App Website Template

HTML

CSS

JS

Recommended

Apple Liquid Glass HTML CSS Effect

download app card

App Website Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS