fb pixel
გამოიწერე YouTube-ის არხიyoutube logoგამოწერა
val-do.com-ის ლოგო
კურსებიბლოგიხ.დ.კ.წესებიკონტაქტიკონვერტორები

კურსებიბლოგიხ.დ.კ.წესებიკონტაქტიკონვერტორები
შესვლა
  1. მთავარი
  2. კურსები
  3. JavaScript-ის DOM-ის კურსი
  4. ამინდის აპლიკაცია FETCH API-ის დახმარებით
ამინდის აპლიკაცია FETCH API-ის დახმარებით

ამინდის აპლიკაცია 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

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

  • Telegram
  • Discord

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

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

HTML, CSS-ის სა...

HTML, CSS-ის საწყისი კურსი, დამწყებთათვის (deprecated - მოძველებული)

ჯავასკრიპტის კუ...

ჯავასკრიპტის კურსი

JavaScript-ის D...

JavaScript-ის DOM-ის კურსი

TypeScript-ის კ...

TypeScript-ის კურსი

Angular-ის კურს...

Angular-ის კურსი

HTML, CSS-ის კუ...

HTML, CSS-ის კურსი

Reactjs-ის კურს...

Reactjs-ის კურსი დამწყებთათვის

ალგორითმები...

ალგორითმები

Node.js-ის კურს...

Node.js-ის კურსი

Dart-ის კურსი...

Dart-ის კურსი

C პროგრამირების...

C პროგრამირების ენის საფუძვლები

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

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

როგორ ინახება ი...

როგორ ინახება ინფორმაცია. რა არის Bit და Byte?

რატომ არის კომფ...

რატომ არის კომფორტული სამუშაო ოთახი აუცილებელი კოდის წერისა და პროდუქტიული მუშაობისთვის?

რატომ ვერ პოულო...

რატომ ვერ პოულობენ ჯუნიორები სამსახურს?

  • რა არის DOM ჯავასკრიპტში?
  • ჯავასკრიპტი ქართულად, querySelectors
  • ჯავასკრიპტის event listener-ები (eventListeners) ქართულად
  • JavaScript-ის defer ატრიბუტი
  • აკარდიონის აწყობა ჯავასკრიპტით
  • ამინდის აპლიკაცია FETCH API-ის დახმარებით
  • stopPropagation მეთოდი
პროგრამირების კურსები
HTML, CSSJavaScriptTypeScriptAngularReactJSNodeJSC
გამომყევი
mipov.net/valdo

© val-do.com 2026 წელი - ყველა უფლება დაცულია

ვერსია 0.1.55