დღევანდელ გაკვეთილში 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();
შეისწავლეთ ვებდეველოპმენტის ენები სრულიად უფასოდ, ისეთები როგორებიცაა Javascript, HTML, CSS და კიდევ სხვა მრავალი ენა
ქვემოთ მოცემულია უახლესი 3 ბლოგი პროგრამირების თემატიკასთან დაკავშირებით