Webleb - Snippet di Codice -

Apri nell'Editor Pubblica il Tuo Codice Hai bisogno di un sito web?

Consigliato

19 November 2024

Mostra testo al passaggio del mouse

25 March 2025

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

Consigliato

Mostra testo al passaggio del mouse

Caricamento URL

Un codice di ashimadison8

HTML

CSS

JS

Consigliato

Mostra testo al passaggio del mouse

Caricamento URL

Un codice di ashimadison8

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS