diff --git a/README.md b/README.md index 8af81ac2..79e5c2f1 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,18 @@ 1. Replace `` with your Github username in the link - - [DEMO LINK](https://.github.io/js_gallery_DOM/) + - [DEMO LINK](https://Stan0men.github.io/js_gallery_DOM/) 2. Follow [this instructions](https://mate-academy.github.io/layout_task-guideline/) - - Run `npm run test` command to test your code; - - Run `npm run test:only -- -n` to run fast test ignoring linter; - - Run `npm run test:only -- -l` to run fast test with additional info in console ignoring linter. + - Run `npm run test` command to test your code; + - Run `npm run test:only -- -n` to run fast test ignoring linter; + - Run `npm run test:only -- -l` to run fast test with additional info in console ignoring linter. ### Task: Create a gallery Create an image gallery where the main image changes by the click on a thumbnail. **Requirements:** + - A click can be either on a small `img` image or on `a` outside of it. `event.target` - will be, respectively, either `img` or `a`. + will be, respectively, either `img` or `a`. **Notes:** @@ -19,4 +20,5 @@ Create an image gallery where the main image changes by the click on a thumbnail - You must only modify the file `src/scripts/main.js`. ### Gif of result + ![Gif example](./src/images/example.gif) diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7..9df5eb1a 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,30 @@ 'use strict'; + +const thumbsList = document.getElementById('thumbs'); +const largeImage = document.getElementById('largeImg'); + +if (thumbsList && largeImage) { + thumbsList.addEventListener('click', (evt) => { + const link = evt.target.closest('a'); + + if (!link || !thumbsList.contains(link)) { + return; + } + + evt.preventDefault(); + + const imageUrl = link.href; + + if (!imageUrl) { + return; + } + + largeImage.src = imageUrl; + + const title = link.getAttribute('title'); + + if (title) { + largeImage.alt = title; + } + }); +}