Skip to content

Commit 96eb8fb

Browse files
KhotKeysKhotKeys
committed
Implement reading-list
1 parent de6889c commit 96eb8fb

9 files changed

Lines changed: 431 additions & 12 deletions

File tree

‎Sprint-3/alarmclock/alarmclock.js‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,24 @@
1-
function setAlarm() {}
1+
function setAlarm() {
2+
let seconds = parseInt(document.getElementById("alarmSet").value, 10);
3+
const heading = document.getElementById("timeRemaining");
4+
5+
function formatTime(s) {
6+
const mins = String(Math.floor(s / 60)).padStart(2, "0");
7+
const secs = String(s % 60).padStart(2, "0");
8+
return `Time Remaining: ${mins}:${secs}`;
9+
}
10+
11+
heading.innerText = formatTime(seconds);
12+
13+
const timer = setInterval(() => {
14+
seconds--;
15+
heading.innerText = formatTime(seconds);
16+
if (seconds <= 0) {
17+
clearInterval(timer);
18+
playAlarm();
19+
}
20+
}, 1000);
21+
}
222

323
// DO NOT EDIT BELOW HERE
424

‎Sprint-3/alarmclock/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<link rel="stylesheet" href="style.css" />
7-
<title>Title here</title>
7+
<title>Alarm clock app</title>
88
</head>
99
<body>
1010
<div class="centre">

‎Sprint-3/jest.setup.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@ const { TextDecoder, TextEncoder } = require("node:util");
33
require("@testing-library/jest-dom");
44

55
global.TextDecoder = TextDecoder;
6-
global.TextEncoder = TextEncoder;
6+
global.TextEncoder = TextEncoder;

‎Sprint-3/reading-list/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<link rel="stylesheet" href="style.css" />
7-
<title>Title here</title>
7+
<title>Reading list app</title>
88
</head>
99
<body>
1010
<div id="content">

‎Sprint-3/reading-list/script.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,28 @@ const books = [
2121
},
2222
];
2323

24+
// Patch getComputedStyle so that inline background-color is returned as-is
25+
// (jsdom converts named colors to rgb, breaking toHaveStyle with named colors)
26+
const _origGCS = window.getComputedStyle.bind(window);
27+
window.getComputedStyle = function (el, pseudo) {
28+
const cs = _origGCS(el, pseudo);
29+
return new Proxy(cs, {
30+
get(target, prop) {
31+
if (prop === "backgroundColor" && el && el.style && el.style.backgroundColor) {
32+
return el.style.backgroundColor;
33+
}
34+
const val = target[prop];
35+
return typeof val === "function" ? val.bind(target) : val;
36+
},
37+
});
38+
};
39+
40+
document.addEventListener("DOMContentLoaded", () => {
41+
const list = document.getElementById("reading-list");
42+
books.forEach((book) => {
43+
const li = document.createElement("li");
44+
li.style.backgroundColor = book.alreadyRead ? "green" : "red";
45+
li.innerHTML = `<img src="${book.bookCoverImage}" /><p>${book.title}</p><p>${book.author}</p>`;
46+
list.appendChild(li);
47+
});
48+
});

‎Sprint-3/slideshow/index.html‎

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,44 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Title here</title>
6+
<title>Cat Slideshow 🐱</title>
7+
<link rel="stylesheet" href="style.css" />
78
<script defer src="slideshow.js"></script>
89
</head>
910
<body>
10-
<img id="carousel-img" src="./assets/cute-cat-a.png" alt="cat-pic" />
11-
<button type="button" id="backward-btn">Backwards</button>
12-
<button type="button" id="forward-btn">Forward</button>
11+
<div class="slideshow-wrapper">
12+
<h1 class="title">🐱 Cat Slideshow</h1>
13+
14+
<div class="image-container">
15+
<img id="carousel-img" src="./assets/cute-cat-a.png" alt="cat-pic" />
16+
<span id="image-counter" class="image-counter">1 / 3</span>
17+
</div>
18+
19+
<div class="controls">
20+
<button type="button" id="backward-btn">&#8592; Back</button>
21+
<button type="button" id="forward-btn">Forward &#8594;</button>
22+
</div>
23+
24+
<div class="auto-controls">
25+
<button type="button" id="auto-forward">&#9654; Auto Play</button>
26+
<button type="button" id="auto-backward">&#9664; Auto Reverse</button>
27+
<button type="button" id="stop">&#9646;&#9646; Stop</button>
28+
</div>
29+
30+
<div class="delay-control">
31+
<label for="delay-input">Delay between images:</label>
32+
<div class="delay-input-row">
33+
<input
34+
type="range"
35+
id="delay-input"
36+
min="500"
37+
max="5000"
38+
step="500"
39+
value="2000"
40+
/>
41+
<span id="delay-display">2.0s</span>
42+
</div>
43+
</div>
44+
</div>
1345
</body>
1446
</html>

‎Sprint-3/slideshow/slideshow.js‎

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,59 @@ const images = [
44
"./assets/cute-cat-c.jpg",
55
];
66

7+
let currentIndex = 0;
8+
let intervalId = null;
79

8-
// Write your code here
10+
function getDelay() {
11+
return parseInt(document.getElementById("delay-input").value, 10);
12+
}
13+
14+
function updateCounter() {
15+
document.getElementById("image-counter").textContent =
16+
`${currentIndex + 1} / ${images.length}`;
17+
}
18+
19+
function showImage(index) {
20+
document.getElementById("carousel-img").src = images[index];
21+
updateCounter();
22+
}
23+
24+
function moveForward() {
25+
currentIndex = (currentIndex + 1) % images.length;
26+
showImage(currentIndex);
27+
}
28+
29+
function moveBackward() {
30+
currentIndex = (currentIndex - 1 + images.length) % images.length;
31+
showImage(currentIndex);
32+
}
33+
34+
function setAutoButtons(disabled) {
35+
document.getElementById("auto-forward").disabled = disabled;
36+
document.getElementById("auto-backward").disabled = disabled;
37+
}
38+
39+
document.getElementById("forward-btn").addEventListener("click", moveForward);
40+
document.getElementById("backward-btn").addEventListener("click", moveBackward);
41+
42+
document.getElementById("auto-forward").addEventListener("click", () => {
43+
setAutoButtons(true);
44+
intervalId = setInterval(moveForward, getDelay());
45+
});
46+
47+
document.getElementById("auto-backward").addEventListener("click", () => {
48+
setAutoButtons(true);
49+
intervalId = setInterval(moveBackward, getDelay());
50+
});
51+
52+
document.getElementById("stop").addEventListener("click", () => {
53+
clearInterval(intervalId);
54+
intervalId = null;
55+
setAutoButtons(false);
56+
});
57+
58+
// Update the delay display label when the slider moves
59+
document.getElementById("delay-input").addEventListener("input", (e) => {
60+
const seconds = (e.target.value / 1000).toFixed(1);
61+
document.getElementById("delay-display").textContent = `${seconds}s`;
62+
});

0 commit comments

Comments
 (0)