Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

NW-6 | Fikret Ellek | JS2| [TECH ED] Slideshow-Extra| WEEK-4 #227

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

NW-6 | Fikret Ellek | JS2| [TECH ED] Slideshow-Extra| WEEK-4 #227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
bd73e06
level 1 implemented
fikretTest Jan 28, 2024
9906166
started for level 2, buttons added ın html
fikretTest Jan 28, 2024
5fad378
autoplay functions added
fikretTest Jan 28, 2024
a0eda2e
stop autoplay function added
fikretTest Jan 28, 2024
e24b044
editted css
fikretTest Jan 28, 2024
6f8f722
when clicked on the both autoplay buttons, overlaping bug detected. F…
fikretTest Jan 28, 2024
802abc8
css added, js updated
fikretTest Jan 29, 2024
9617c62
id conflict between test.js file is resolved. All tests passed
fikretTest Jan 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions week-3/slideshow/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,16 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title here</title>
<title>Image carousel</title>
<script defer src="slideshow.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img id="carousel-img" src="./assets/cute-cat-a.png" alt="cat-pic" />
<button type="button" id="backward-btn">Backwards</button>
<button type="button" id="forward-btn">Forward</button>
<button type="button" id="auto-backward">◀◀</button>
<button type="button" id="backward-btn">◀</button>
<button type="button" id="stop">■</button>
<button type="button" id="forward-btn">▶</button>
<button type="button" id="auto-forward">▶▶</button>
</body>
</html>
131 changes: 127 additions & 4 deletions week-3/slideshow/slideshow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,131 @@
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 = 0;

// Write your code here
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");

const stopBtn = document.getElementById("stop");

const autoBackwardBtn = document.getElementById("auto-backward");
const autoForwardBtn = document.getElementById("auto-forward");

btnContainer.append(
autoBackwardBtn,
backwardBtn,
stopBtn,
forwardBtn,
autoForwardBtn
);

let autoPlayBackward;
let autoPlayForward;

// Write your code here

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() {
++currentPhotoIndex;
if (currentPhotoIndex === 3) {
currentPhotoIndex = 0;
}
generatePhoto();
}

function previousPhoto() {
--currentPhotoIndex;
if (currentPhotoIndex === -1) {
currentPhotoIndex = 2;
}
generatePhoto();
}

backwardBtn.addEventListener("click", previousPhoto);
forwardBtn.addEventListener("click", nextPhoto);

autoBackwardBtn.addEventListener("click", () => {
autoPlayBackward = setInterval(() => {
previousPhoto();
}, 2000);
clearInterval(autoPlayForward);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I love this! it clears other intervals when you change the slide direction - such a thoughtful touch! Well done!

autoBackwardBtn.disabled = true;
autoForwardBtn.disabled = true;
});

autoForwardBtn.addEventListener("click", () => {
autoPlayForward = setInterval(() => {
nextPhoto();
}, 2000);
clearInterval(autoPlayBackward);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here!

autoBackwardBtn.disabled = true;
autoForwardBtn.disabled = true;
});

stopBtn.addEventListener("click", () => {
clearInterval(autoPlayBackward);
clearInterval(autoPlayForward);
autoBackwardBtn.disabled = false;
autoForwardBtn.disabled = false;
});

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);
Comment on lines +111 to +114
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here as I mentioned in the previous message, you created the element and then appended it to the DOM. Well done!

}

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();
});
78 changes: 78 additions & 0 deletions week-3/slideshow/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +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: 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;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice design, well done. Small note: you don't need to specify flex-direction: row; since the default value is already 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;
}