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 ბლოგი პროგრამირების თემატიკასთან დაკავშირებით

Habit Tracker —...

Habit Tracker — პატარა ჩვევები, რომლებიც დიდ შედეგებს ქმნის

აკონტროლეთ თქვე...

აკონტროლეთ თქვენი ფული მარტივად და გააზრებულად

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

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

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

დიზაინ სისტემა

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

31 ივლისი, 2026, 16:35:42

ვერსია 0.4.54