├── src ├── css │ └── style.css └── js │ └── index.js └── index.html /src/css/style.css: -------------------------------------------------------------------------------- 1 | .albums-wrap { 2 | max-width: 500px; 3 | } 4 | .album-photos-wrap { 5 | max-width: calc(100% - 500px); 6 | } 7 | .album { 8 | cursor: pointer; 9 | } 10 | .card { 11 | margin: 20px; 12 | height: 150px; 13 | } 14 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | HW20-js-fetch 9 | 10 | 12 | 13 |
14 |
15 |

Альбомы:

16 | 17 |
18 |
19 |

20 |
21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | const resource = 'https://jsonplaceholder.typicode.com' 2 | const albumsContainer = document.getElementById('albums'); 3 | const albumPhotos = document.getElementById('albumPhotos'); 4 | const titlePhoto = document.getElementById('titlePhoto') 5 | 6 | function getAlbums() { 7 | return fetch(resource + '/albums') 8 | .then(res => res.json()) 9 | .catch(err => console.error(err)) 10 | } 11 | 12 | function getAlbum(id) { 13 | return fetch(resource + `/photos?albumId=${id}`) 14 | .then(res => res.json()) 15 | .catch(err => console.error(err)) 16 | } 17 | async function showAlbumPhotos(id, albumName) { 18 | await getAlbum(id) 19 | .then(res => { 20 | let photos = '' 21 | res.forEach(photo => { 22 | photos += `
${photo.title}
` 23 | }) 24 | titlePhoto.innerText = `Фото из альбома ${albumName}` 25 | albumPhotos.innerHTML = photos 26 | }) 27 | } 28 | 29 | function drawAlbums(data) { 30 | let albums = '' 31 | data.forEach(el => { 32 | albums += `
  • ${el.title}
    • ` 33 | }) 34 | albumsContainer.innerHTML = albums 35 | } 36 | 37 | getAlbums() 38 | .then(res => { 39 | drawAlbums(res) 40 | res[0] && showAlbumPhotos(res[0].id, res[0].title) 41 | }) 42 | albumsContainer.addEventListener('click', el => { 43 | if (el.target.nodeName === 'LI') { 44 | el.target.dataset.id && showAlbumPhotos(el.target.dataset.id, el.target.innerText) 45 | } 46 | }) --------------------------------------------------------------------------------