გამოიწერე YouTube-ის არხიyoutube logoგამოწერა

ამინდის აპლიკაცია FETCH API-ის დახმარებით

დღევანდელ გაკვეთილში FETCH API-ის დახმარებით ავაწყობ ამინიდის პროგნოზის აპლიკაციას

html

<div class="card-weather">
    <h3>Current location</h3>
    <h2>Tbilisi</h2>
    <div>
        <span class="comment"></span>
        <span class="temp">
            <span class="temp-number"></span>
            <span>C</span>
        </span>
    </div>
</div>

css

.container {
    padding-inline: 15px;
}

.card-weather {
    padding: 15px;
    background-color: purple;
    border-radius: 15px;
    color: white;
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: 15px;
    background-size: 80px;
    box-shadow: 10px 10px 10px #0000004a;
}

.card-weather > div {
    display: flex;
    justify-content: space-between;
}

javascript

// api endpoint https://weatherdbi.herokuapp.com/data/weather/tbilisi
const tempNumber = document.querySelector('.temp-number');
const comment = document.querySelector('.comment');
const cardWeather = document.querySelector('.card-weather');

const getWeather = async () => {
    const { currentConditions } = await fetch('https://weatherdbi.herokuapp.com/data/weather/tbilisi').then(_ => _.json());
    tempNumber.innerText = currentConditions.temp.c;
    comment.innerText = currentConditions.comment;
    cardWeather.style.backgroundImage = `url(${currentConditions.iconURL})`;
}

getWeather();

კურსში შემავალი თემები

🔗 js🔗 javascript🔗 DOM🔗 json🔗 HTML🔗 CSS🔗 flex

დამატებითი რესურსები

სხვა კატეგორიები

შეისწავლეთ ვებდეველოპმენტის ენები სრულიად უფასოდ, ისეთები როგორებიცაა Javascript, HTML, CSS და კიდევ სხვა მრავალი ენა

ბოლოს დაწერილი ბლოგები პროგრამირებაზე

ქვემოთ მოცემულია უახლესი 3 ბლოგი პროგრამირების თემატიკასთან დაკავშირებით