Weather website

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="name">
                <figcaption>London</figcaption> 
                <img src="https://flagsapi.com/GB/shiny/32.png">
            </figure>

<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 = '';
        })
}
const initApp = () => {
    valueSearch.value = 'Washington';
    searchWeather();
}
initApp();

Weather website

Recommended

Dating Website Landing Page HTML CSS

WEBSITE

Portfolio Website HTML CSS Template

HTML

CSS

JS

Recommended

Dating Website Landing Page HTML CSS

WEBSITE

Portfolio Website HTML CSS Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS