From bd73e06ab4d4ff9079e57ac2c41d99142101a1c0 Mon Sep 17 00:00:00 2001 From: fikret ellek Date: Sun, 28 Jan 2024 16:52:45 +0000 Subject: [PATCH 1/8] level 1 implemented --- week-3/slideshow/index.html | 3 ++- week-3/slideshow/slideshow.js | 39 +++++++++++++++++++++++++++++++---- week-3/slideshow/style.css | 5 +++++ 3 files changed, 42 insertions(+), 5 deletions(-) diff --git a/week-3/slideshow/index.html b/week-3/slideshow/index.html index 50f2eb1c..1546d46b 100644 --- a/week-3/slideshow/index.html +++ b/week-3/slideshow/index.html @@ -3,8 +3,9 @@ - Title here + Image carousel + cat-pic diff --git a/week-3/slideshow/slideshow.js b/week-3/slideshow/slideshow.js index 063ceefb..d3e8694d 100644 --- a/week-3/slideshow/slideshow.js +++ b/week-3/slideshow/slideshow.js @@ -1,8 +1,39 @@ const images = [ - "./assets/cute-cat-a.png", - "./assets/cute-cat-b.jpg", - "./assets/cute-cat-c.jpg", + "./assets/cute-cat-a.png", + "./assets/cute-cat-b.jpg", + "./assets/cute-cat-c.jpg", ]; +let currentPhotoIndex = 1; -// Write your code here \ No newline at end of file +const image = document.getElementById("carousel-img"); + +const backwardBtn = document.getElementById("backward-btn"); +const forwardBtn = document.getElementById("forward-btn"); + +// Write your code here + +function generatePhoto() { + image.setAttribute("src", images[currentPhotoIndex]); +} + +function nextPhoto() { + ++currentPhotoIndex; + if (currentPhotoIndex === 3) { + currentPhotoIndex = 0; + } + generatePhoto(); +} + +function previousPhoto() { + --currentPhotoIndex; + if (currentPhotoIndex === -1) { + currentPhotoIndex = 2; + } + generatePhoto(); +} + +backwardBtn.addEventListener("click", previousPhoto); +forwardBtn.addEventListener("click", nextPhoto); + +window.onload = generatePhoto; diff --git a/week-3/slideshow/style.css b/week-3/slideshow/style.css index 63cedf2d..99e4b71e 100644 --- a/week-3/slideshow/style.css +++ b/week-3/slideshow/style.css @@ -1 +1,6 @@ /** Write your CSS in here **/ + +#carousel-img { + width: 300px; + height: auto; +} From 99061660153fabbfda0ff98c9af556248b4aee63 Mon Sep 17 00:00:00 2001 From: fikret ellek Date: Sun, 28 Jan 2024 17:59:36 +0000 Subject: [PATCH 2/8] =?UTF-8?q?started=20for=20level=202,=20buttons=20adde?= =?UTF-8?q?d=20=C4=B1n=20html?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week-3/slideshow/index.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/week-3/slideshow/index.html b/week-3/slideshow/index.html index 1546d46b..d8b2c8a2 100644 --- a/week-3/slideshow/index.html +++ b/week-3/slideshow/index.html @@ -9,7 +9,10 @@ cat-pic + + + From 5fad3788da305cf0c992179e7fc5ac9630ccdacb Mon Sep 17 00:00:00 2001 From: fikret ellek Date: Sun, 28 Jan 2024 18:10:39 +0000 Subject: [PATCH 3/8] autoplay functions added --- week-3/slideshow/slideshow.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/week-3/slideshow/slideshow.js b/week-3/slideshow/slideshow.js index d3e8694d..70207fe4 100644 --- a/week-3/slideshow/slideshow.js +++ b/week-3/slideshow/slideshow.js @@ -11,6 +11,14 @@ const image = document.getElementById("carousel-img"); const backwardBtn = document.getElementById("backward-btn"); const forwardBtn = document.getElementById("forward-btn"); +const stopBtn = document.getElementById("stop-btn"); + +const autoBackwardBtn = document.getElementById("auto-backward-btn"); +const autoForwardBtn = document.getElementById("auto-forward-btn"); + +let autoPlayBackward; +let autoPlayForward; + // Write your code here function generatePhoto() { @@ -36,4 +44,18 @@ function previousPhoto() { backwardBtn.addEventListener("click", previousPhoto); forwardBtn.addEventListener("click", nextPhoto); +autoBackwardBtn.addEventListener("click", () => { + autoPlayBackward = setInterval(() => { + previousPhoto(); + }, 1000); +}); + +autoForwardBtn.addEventListener("click", () => { + autoPlayForward = setInterval(() => { + nextPhoto(); + }, 1000); +}); + +stopBtn.addEventListener("click", () => {}); + window.onload = generatePhoto; From a0eda2e5f621ecf167563f22efccccae3872714a Mon Sep 17 00:00:00 2001 From: fikret ellek Date: Sun, 28 Jan 2024 18:12:25 +0000 Subject: [PATCH 4/8] stop autoplay function added --- week-3/slideshow/slideshow.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/week-3/slideshow/slideshow.js b/week-3/slideshow/slideshow.js index 70207fe4..31ac99d5 100644 --- a/week-3/slideshow/slideshow.js +++ b/week-3/slideshow/slideshow.js @@ -56,6 +56,9 @@ autoForwardBtn.addEventListener("click", () => { }, 1000); }); -stopBtn.addEventListener("click", () => {}); +stopBtn.addEventListener("click", () => { + clearInterval(autoPlayBackward); + clearInterval(autoPlayForward); +}); window.onload = generatePhoto; From e24b044875de3d7ea6505300eec0e9c850fc152c Mon Sep 17 00:00:00 2001 From: fikret ellek Date: Sun, 28 Jan 2024 19:05:34 +0000 Subject: [PATCH 5/8] editted css --- week-3/slideshow/style.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/week-3/slideshow/style.css b/week-3/slideshow/style.css index 99e4b71e..b5fcb121 100644 --- a/week-3/slideshow/style.css +++ b/week-3/slideshow/style.css @@ -1,6 +1,7 @@ /** Write your CSS in here **/ #carousel-img { - width: 300px; - height: auto; + width: auto; + height: 400px; + display: block; } From 6f8f7222a86e77c3b543718e3f21da92ea90502c Mon Sep 17 00:00:00 2001 From: fikret ellek Date: Sun, 28 Jan 2024 19:11:27 +0000 Subject: [PATCH 6/8] when clicked on the both autoplay buttons, overlaping bug detected. Fixed --- week-3/slideshow/slideshow.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/week-3/slideshow/slideshow.js b/week-3/slideshow/slideshow.js index 31ac99d5..cf9abd04 100644 --- a/week-3/slideshow/slideshow.js +++ b/week-3/slideshow/slideshow.js @@ -48,12 +48,14 @@ autoBackwardBtn.addEventListener("click", () => { autoPlayBackward = setInterval(() => { previousPhoto(); }, 1000); + clearInterval(autoPlayForward); }); autoForwardBtn.addEventListener("click", () => { autoPlayForward = setInterval(() => { nextPhoto(); }, 1000); + clearInterval(autoPlayBackward); }); stopBtn.addEventListener("click", () => { From 802abc85e4567c6d45de6a70da06e388e3469649 Mon Sep 17 00:00:00 2001 From: fikret ellek Date: Mon, 29 Jan 2024 00:05:41 +0000 Subject: [PATCH 7/8] css added, js updated --- week-3/slideshow/index.html | 10 ++--- week-3/slideshow/slideshow.js | 61 +++++++++++++++++++++++++- week-3/slideshow/style.css | 80 +++++++++++++++++++++++++++++++++-- 3 files changed, 141 insertions(+), 10 deletions(-) diff --git a/week-3/slideshow/index.html b/week-3/slideshow/index.html index d8b2c8a2..69707744 100644 --- a/week-3/slideshow/index.html +++ b/week-3/slideshow/index.html @@ -9,10 +9,10 @@ cat-pic - - - - - + + + + + diff --git a/week-3/slideshow/slideshow.js b/week-3/slideshow/slideshow.js index cf9abd04..54ccb6f7 100644 --- a/week-3/slideshow/slideshow.js +++ b/week-3/slideshow/slideshow.js @@ -4,10 +4,19 @@ const images = [ "./assets/cute-cat-c.jpg", ]; -let currentPhotoIndex = 1; +let currentPhotoIndex = 0; const image = document.getElementById("carousel-img"); +const imgContainer = document.createElement("div"); +imgContainer.setAttribute("id", "img-container"); + +image.before(imgContainer); +imgContainer.appendChild(image); + +const btnContainer = document.createElement("div"); +btnContainer.classList.add("btn-container"); + const backwardBtn = document.getElementById("backward-btn"); const forwardBtn = document.getElementById("forward-btn"); @@ -16,6 +25,14 @@ const stopBtn = document.getElementById("stop-btn"); const autoBackwardBtn = document.getElementById("auto-backward-btn"); const autoForwardBtn = document.getElementById("auto-forward-btn"); +btnContainer.append( + autoBackwardBtn, + backwardBtn, + stopBtn, + forwardBtn, + autoForwardBtn +); + let autoPlayBackward; let autoPlayForward; @@ -23,6 +40,19 @@ let autoPlayForward; function generatePhoto() { image.setAttribute("src", images[currentPhotoIndex]); + if (currentPhotoIndex === 0) { + document.getElementById("img0").style.backgroundColor = "grey"; + document.getElementById("img1").style.backgroundColor = "black"; + document.getElementById("img2").style.backgroundColor = "black"; + } else if (currentPhotoIndex === 1) { + document.getElementById("img0").style.backgroundColor = "black"; + document.getElementById("img1").style.backgroundColor = "grey"; + document.getElementById("img2").style.backgroundColor = "black"; + } else if (currentPhotoIndex === 2) { + document.getElementById("img0").style.backgroundColor = "black"; + document.getElementById("img1").style.backgroundColor = "black"; + document.getElementById("img2").style.backgroundColor = "grey"; + } } function nextPhoto() { @@ -64,3 +94,32 @@ stopBtn.addEventListener("click", () => { }); window.onload = generatePhoto; + +// extra img navigate buttons + +const navContainer = document.createElement("div"); +navContainer.classList.add("nav"); + +for (let i = 0; i < images.length; i++) { + const imgBtn = document.createElement("button"); + imgBtn.classList.add(`img${i}`); + imgBtn.setAttribute("id", `img${i}`); + imgBtn.classList.add("navBtn"); + navContainer.appendChild(imgBtn); +} + +imgContainer.after(navContainer); +navContainer.after(btnContainer); + +navContainer.addEventListener("click", (event) => { + const target = event.target; + if (target.classList.contains("img0")) { + currentPhotoIndex = 0; + } else if (target.classList.contains("img1")) { + currentPhotoIndex = 1; + } else if (target.classList.contains("img2")) { + currentPhotoIndex = 2; + } + + generatePhoto(); +}); diff --git a/week-3/slideshow/style.css b/week-3/slideshow/style.css index b5fcb121..7b229c46 100644 --- a/week-3/slideshow/style.css +++ b/week-3/slideshow/style.css @@ -1,7 +1,79 @@ /** Write your CSS in here **/ - +* { + margin: 0px; + padding: 0px; + border: none; +} +body { + height: 80vh; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + margin: 5vh 5vw; + border-radius: 27px; + border: solid 3px black; + padding: 5vh 5vw; + background-color: rgb(206, 206, 206); +} +#img-container { + width: 80vw; + height: 60vh; + border-radius: 15px; + border: solid 3px black; +} #carousel-img { - width: auto; - height: 400px; - display: block; + width: 100%; + height: 100%; + object-fit: cover; + z-index: -1; + border-radius: 12px; +} + +.nav { + display: flex; + flex-direction: row; + gap: 10px; +} + +.navBtn { + padding: 10px 10px; + border-radius: 999px; + background-color: black; +} + +.btn-container { + display: flex; + flex-direction: row; + gap: 10px; +} + +.btn-container button { + padding: 5px 10px 6px; + border-radius: 999px; + background-color: black; + color: white; + font-size: 17px; +} +.btn-container button:hover { + background-color: grey; +} +#auto-backward-btn { + padding-right: 14px; +} +#backward-btn { + padding-right: 14px; +} +#auto-forward-btn { + padding-left: 14px; +} +#forward-btn { + padding-left: 14px; +} +#auto-backward-btn { + padding-right: 14px; +} +#stop-btn { + padding-right: 15px; + padding-left: 15px; } From 9617c62fd67175649504c2bc31ebd028a072a3d0 Mon Sep 17 00:00:00 2001 From: fikret ellek Date: Mon, 29 Jan 2024 00:46:02 +0000 Subject: [PATCH 8/8] id conflict between test.js file is resolved. All tests passed --- week-3/slideshow/index.html | 6 +++--- week-3/slideshow/slideshow.js | 16 +++++++++++----- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/week-3/slideshow/index.html b/week-3/slideshow/index.html index 69707744..b87e1a1d 100644 --- a/week-3/slideshow/index.html +++ b/week-3/slideshow/index.html @@ -9,10 +9,10 @@ cat-pic - + - + - + diff --git a/week-3/slideshow/slideshow.js b/week-3/slideshow/slideshow.js index 54ccb6f7..1c3b68c7 100644 --- a/week-3/slideshow/slideshow.js +++ b/week-3/slideshow/slideshow.js @@ -20,10 +20,10 @@ btnContainer.classList.add("btn-container"); const backwardBtn = document.getElementById("backward-btn"); const forwardBtn = document.getElementById("forward-btn"); -const stopBtn = document.getElementById("stop-btn"); +const stopBtn = document.getElementById("stop"); -const autoBackwardBtn = document.getElementById("auto-backward-btn"); -const autoForwardBtn = document.getElementById("auto-forward-btn"); +const autoBackwardBtn = document.getElementById("auto-backward"); +const autoForwardBtn = document.getElementById("auto-forward"); btnContainer.append( autoBackwardBtn, @@ -77,20 +77,26 @@ forwardBtn.addEventListener("click", nextPhoto); autoBackwardBtn.addEventListener("click", () => { autoPlayBackward = setInterval(() => { previousPhoto(); - }, 1000); + }, 2000); clearInterval(autoPlayForward); + autoBackwardBtn.disabled = true; + autoForwardBtn.disabled = true; }); autoForwardBtn.addEventListener("click", () => { autoPlayForward = setInterval(() => { nextPhoto(); - }, 1000); + }, 2000); clearInterval(autoPlayBackward); + autoBackwardBtn.disabled = true; + autoForwardBtn.disabled = true; }); stopBtn.addEventListener("click", () => { clearInterval(autoPlayBackward); clearInterval(autoPlayForward); + autoBackwardBtn.disabled = false; + autoForwardBtn.disabled = false; }); window.onload = generatePhoto;