- Π‘ΠΎΠ·Π΄Π°Π½ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΉ
goit-js-hw-11
. - ΠΡΠΈ ΡΠ΄Π°ΡΠ΅ Π΄ΠΎΠΌΠ°ΡΠ½Π΅ΠΉ ΡΠ°Π±ΠΎΡΡ Π΅ΡΡΡ Π΄Π²Π΅ ΡΡΡΠ»ΠΊΠΈ: Π½Π° ΠΈΡΡ
ΠΎΠ΄Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ ΠΈ ΡΠ°Π±ΠΎΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π°
GitHub Pages
. - ΠΡΠΈ ΠΏΠΎΡΠ΅ΡΠ΅Π½ΠΈΠΈ ΠΆΠΈΠ²ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ Π·Π°Π΄Π°Π½ΠΈΡ, Π² ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ Π½Π΅ΡΡ ΠΎΡΠΈΠ±ΠΎΠΊ ΠΈ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠΉ.
- ΠΡΠΎΠ΅ΠΊΡ ΡΠΎΠ±ΡΠ°Π½ Ρ ΠΏΠΎΠΌΠΎΡΡΡ parcel-project-template.
- ΠΠ»Ρ HTTP Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Π° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° axios.
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ async/await. ΠΠ»Ρ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Π° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° notiflix.
- ΠΠΎΠ΄ ΠΎΡΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½
Prettier
.
Π‘ΠΎΠ·Π΄Π°ΠΉ ΡΡΠΎΠ½ΡΠ΅Π½Π΄ ΡΠ°ΡΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠΈΡΠΊΠ° ΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠΌΡ ΡΠ»ΠΎΠ²Ρ. ΠΠΎΠ±Π°Π²Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°. ΠΠΎΡΠΌΠΎΡΡΠΈ Π΄Π΅ΠΌΠΎ Π²ΠΈΠ΄Π΅ΠΎ ΡΠ°Π±ΠΎΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
Π€ΠΎΡΠΌΠ° ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π΅ΡΡΡ Π² HTML Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π±ΡΠ΄Π΅Ρ Π²Π²ΠΎΠ΄ΠΈΡΡ ΡΡΡΠΎΠΊΡ Π΄Π»Ρ ΠΏΠΎΠΈΡΠΊΠ° Π² ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ»Π΅, Π° ΠΏΡΠΈ ΡΠ°Π±ΠΌΠΈΡΠ΅ ΡΠΎΡΠΌΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ HTTP-Π·Π°ΠΏΡΠΎΡ.
<form class="search-form" id="search-form">
<input
type="text"
name="searchQuery"
autocomplete="off"
placeholder="Search images..."
/>
<button type="submit">Search</button>
</form>
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π±ΡΠΊΠ΅Π½Π΄Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉ ΠΏΡΠ±Π»ΠΈΡΠ½ΡΠΉ API ΡΠ΅ΡΠ²ΠΈΡΠ° Pixabay. ΠΠ°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΠΉΡΡ, ΠΏΠΎΠ»ΡΡΠΈ ΡΠ²ΠΎΠΉ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΠΊΠ»ΡΡ Π΄ΠΎΡΡΡΠΏΠ° ΠΈ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡΡΡ Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ.
Π‘ΠΏΠΈΡΠΎΠΊ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² ΡΡΡΠΎΠΊΠΈ Π·Π°ΠΏΡΠΎΡΠ° ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ΅Π±Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠ°Π·Π°ΡΡ:
-
key
- ΡΠ²ΠΎΠΉ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΠΊΠ»ΡΡ Π΄ΠΎΡΡΡΠΏΠ° ΠΊ API. -
q
- ΡΠ΅ΡΠΌΠΈΠ½ Π΄Π»Ρ ΠΏΠΎΠΈΡΠΊΠ°. Π’ΠΎ, ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π²Π²ΠΎΠ΄ΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. -
image_type
- ΡΠΈΠΏ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡ Ρ ΠΎΡΠΈΠΌ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ Π·Π°Π΄Π°ΠΉ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅photo
. -
orientation
- ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ. ΠΠ°Π΄Π°ΠΉ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅horizontal
. -
safesearch
- ΡΠΈΠ»ΡΡΡ ΠΏΠΎ Π²ΠΎΠ·ΡΠ°ΡΡΡ. ΠΠ°Π΄Π°ΠΉ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅true
. Π ΠΎΡΠ²Π΅ΡΠ΅ Π±ΡΠ΄Π΅Ρ ΠΌΠ°ΡΡΠΈΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠ΄ΠΎΠ²Π»Π΅ΡΠ²ΠΎΡΠΈΠ²ΡΠΈΡ ΠΊΡΠΈΡΠ΅ΡΠΈΡΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² Π·Π°ΠΏΡΠΎΡΠ°. ΠΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠΌ, ΠΈΠ· ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠ΅Π±Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°: -
webformatURL
- ΡΡΡΠ»ΠΊΠ° Π½Π° ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠΏΠΈΡΠΊΠ° ΠΊΠ°ΡΡΠΎΡΠ΅ΠΊ. -
largeImageURL
- ΡΡΡΠ»ΠΊΠ° Π½Π° Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. -
tags
- ΡΡΡΠΎΠΊΠ° Ρ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ Π΄Π»Ρ Π°ΡΡΠΈΠ±ΡΡΠ°alt
. -
likes
- ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π»Π°ΠΉΠΊΠΎΠ². -
views
- ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠΎΠ². -
comments
- ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π². -
downloads
- ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π·Π°Π³ΡΡΠ·ΠΎΠΊ.
ΠΡΠ»ΠΈ Π±ΡΠΊΠ΅Π½Π΄ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΠΏΡΡΡΠΎΠΉ ΠΌΠ°ΡΡΠΈΠ², Π·Π½Π°ΡΠΈΡ Π½ΠΈΡΠ΅Π³ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠ΅Π³ΠΎ Π½Π°ΠΉΠ΄Π΅Π½ΠΎ Π½Π΅Π±ΡΠ»ΠΎ. Π ΡΠ°ΠΊΠΎΠΌ ΡΠ»ΡΡΠ°Π΅
ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΠΉ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠ΅ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ
"Sorry, there are no images matching your search query. Please try again."
. ΠΠ»Ρ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ notiflix.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ div.gallery
ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π΅ΡΡΡ Π² HTML Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅, ΠΈ Π² Π½Π΅Π³ΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ΅Π½Π΄Π΅ΡΠΈΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ
ΠΊΠ°ΡΡΠΎΡΠ΅ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΡΠΈ ΠΏΠΎΠΈΡΠΊΠ΅ ΠΏΠΎ Π½ΠΎΠ²ΠΎΠΌΡ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠΌΡ ΡΠ»ΠΎΠ²Ρ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΎΡΠΈΡΠ°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅
Π³Π°Π»Π΅ΡΠ΅ΠΈ, ΡΡΠΎΠ±Ρ Π½Π΅ ΡΠΌΠ΅ΡΠΈΠ²Π°ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ.
<div class="gallery">
<!-- ΠΠ°ΡΡΠΎΡΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ -->
</div>
Π¨Π°Π±Π»ΠΎΠ½ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ Π³Π°Π»Π΅ΡΠ΅ΠΈ.
<div class="photo-card">
<img src="" alt="" loading="lazy" />
<div class="info">
<p class="info-item">
<b>Likes</b>
</p>
<p class="info-item">
<b>Views</b>
</p>
<p class="info-item">
<b>Comments</b>
</p>
<p class="info-item">
<b>Downloads</b>
</p>
</div>
</div>
Pixabay API ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΏΠ°Π³ΠΈΠ½Π°ΡΠΈΡ ΠΈ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ page
ΠΈ per_page
. Π‘Π΄Π΅Π»Π°ΠΉ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ
Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΎΡΠ²Π΅ΡΠ΅ ΠΏΡΠΈΡ
ΠΎΠ΄ΠΈΠ»ΠΎ 40 ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ 20).
- ΠΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° page Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ 1.
- ΠΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ Π·Π°ΠΏΡΠΎΡΠ΅, Π΅Π³ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ Π½Π° 1.
- ΠΡΠΈ ΠΏΠΎΠΈΡΠΊΠ΅ ΠΏΠΎ Π½ΠΎΠ²ΠΎΠΌΡ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠΌΡ ΡΠ»ΠΎΠ²Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ page Π½Π°Π΄ΠΎ Π²Π΅ΡΠ½ΡΡΡ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ΅, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π±ΡΠ΄Π΅Ρ ΠΏΠ°Π³ΠΈΠ½Π°ΡΠΈΡ ΠΏΠΎ Π½ΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
Π HTML Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ ΡΠΆΠ΅ Π΅ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ Π·Π°ΠΏΡΠΎΡ Π·Π° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ Π³ΡΡΠΏΠΏΠΎΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΠΊ ΡΠΆΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π³Π°Π»Π΅ΡΠ΅ΠΈ.
<button type="button" class="load-more">Load more</button>
- ΠΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΡΠΊΡΡΡΠ°.
- ΠΠΎΡΠ»Π΅ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ Π·Π°ΠΏΡΠΎΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π² ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ΅ ΠΏΠΎΠ΄ Π³Π°Π»Π΅ΡΠ΅Π΅ΠΉ.
- ΠΡΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠΌ ΡΠ°Π±ΠΌΠΈΡΠ΅ ΡΠΎΡΠΌΡ ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΠ½Π°ΡΠ°Π»Π° ΠΏΡΡΡΠ΅ΡΡΡ, Π° ΠΏΠΎΡΠ»Π΅ Π·Π°ΠΏΡΠΎΡΠ° ΠΎΠΏΡΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ.
Π ΠΎΡΠ²Π΅ΡΠ΅ Π±ΡΠΊΠ΅Π½Π΄ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ totalHits
- ΠΎΠ±ΡΠ΅Π΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ΄ΠΎΡΠ»ΠΈ ΠΏΠΎΠ΄
ΠΊΡΠΈΡΠ΅ΡΠΈΠΉ ΠΏΠΎΠΈΡΠΊΠ° (Π΄Π»Ρ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎΠ³ΠΎ Π°ΠΊΠΊΠ°ΡΠ½ΡΠ°). ΠΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΄ΠΎΡΠ΅Π» Π΄ΠΎ ΠΊΠΎΠ½ΡΠ° ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ, ΠΏΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ
ΠΈ Π²ΡΠ²ΠΎΠ΄ΠΈ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠ΅ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ "We're sorry, but you've reached the end of search results."
.
β οΈ ΠΠΠΠΠΠΠΠ ΠΡΠΎΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π» Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»Π΅Π½ ΠΏΡΠΈ ΡΠ΄Π°ΡΠ΅ Π·Π°Π΄Π°Π½ΠΈΡ, Π½ΠΎ Π±ΡΠ΄Π΅Ρ Ρ ΠΎΡΠΎΡΠ΅ΠΉ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΎΠΉ.
ΠΠΎΡΠ»Π΅ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ Π·Π°ΠΏΡΠΎΡΠ° ΠΏΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π½ΠΎΠ²ΠΎΠΌ ΠΏΠΎΠΈΡΠΊΠ΅ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠ΅ Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π±ΡΠ΄Π΅Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΎ ΡΠΊΠΎΠ»ΡΠΊΠΎ
Π²ΡΠ΅Π³ΠΎ Π½Π°ΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ (ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ totalHits
). Π’Π΅ΠΊΡΡ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΡ
"Hooray! We found totalHits images."
ΠΠΎΠ±Π°Π²ΠΈΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΠΎΠ»ΡΡΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ SimpleLightbox Π΄Π»Ρ ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΠΎΠΉ Π³Π°Π»Π΅ΡΠ΅ΠΈ.
- Π ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π±ΡΠ΄Π΅Ρ ΠΎΠ±Π΅ΡΠ½ΡΡΡ ΠΊΠ°ΠΆΠ΄ΡΡ ΠΊΠ°ΡΡΠΎΡΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΡΡΠ»ΠΊΡ, ΠΊΠ°ΠΊ ΡΠΊΠ°Π·Π°Π½ΠΎ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ.
- Π£ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π΅ΡΡΡ ΠΌΠ΅ΡΠΎΠ΄
refresh()
ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π½ΡΠΆΠ½ΠΎ Π²ΡΠ·ΡΠ²Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π· ΠΏΠΎΡΠ»Π΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π½ΠΎΠ²ΠΎΠΉ Π³ΡΡΠΏΠΏΡ ΠΊΠ°ΡΡΠΎΡΠ΅ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ CSS ΠΊΠΎΠ΄ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π² ΠΏΡΠΎΠ΅ΠΊΡ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠΌΠΏΠΎΡΡ, ΠΊΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΏΠΈΡΠ°Π½ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ.
// ΠΠΏΠΈΡΠ°Π½ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ import SimpleLightbox from "simplelightbox"; // ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΈΠΌΠΏΠΎΡΡ
ΡΡΠΈΠ»Π΅ΠΉ import "simplelightbox/dist/simple-lightbox.min.css";
Π‘Π΄Π΅Π»Π°ΡΡ ΠΏΠ»Π°Π²Π½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠΎΡΠ»Π΅ Π·Π°ΠΏΡΠΎΡΠ° ΠΈ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ Π³ΡΡΠΏΠΏΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠΎΡ ΡΠ΅Π±Π΅ ΠΊΠΎΠ΄ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ°, Π° ΡΠ°Π·Π±Π΅ΡΠΈΡΡ Π² Π½ΡΠΌ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ.
const { height: cardHeight } = document .querySelector(".gallery")
.firstElementChild.getBoundingClientRect();
window.scrollBy({ top: cardHeight \* 2, behavior: "smooth", });
ΠΠΌΠ΅ΡΡΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«Load moreΒ» ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠΌ ΡΠ΅Π±Π΅ ΠΏΠΎΠ»Π½ΡΡ ΡΠ²ΠΎΠ±ΠΎΠ΄Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ Π² ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ, ΠΌΠΎΠΆΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π»ΡΠ±ΡΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ.