+
diff --git a/Sprint-3/slideshow/readme.md b/Sprint-3/slideshow/readme.md
index a0c06e4ff..e4b492bb3 100644
--- a/Sprint-3/slideshow/readme.md
+++ b/Sprint-3/slideshow/readme.md
@@ -64,9 +64,9 @@ Make your buttons work to navigate forwards and backwards, manually.
Add the following buttons:
-- auto-forward
-- stop
-- auto-backwards
+- auto-forward
+- stop
+- auto-backwards
These should allow automatic navigation through the images, say every 5 seconds.
@@ -74,8 +74,8 @@ These should allow automatic navigation through the images, say every 5 seconds.
Congratulations, you've finished the basics!
-- Make sure you can access it and play with it on a smartphone!
-- Celebrate!
+- Make sure you can access it and play with it on a smartphone!
+- Celebrate!
## Further work
diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js
index 063ceefb5..ac0d51ec4 100644
--- a/Sprint-3/slideshow/slideshow.js
+++ b/Sprint-3/slideshow/slideshow.js
@@ -1,8 +1,75 @@
-const images = [
+window.images = [
"./assets/cute-cat-a.png",
"./assets/cute-cat-b.jpg",
"./assets/cute-cat-c.jpg",
];
+// Write your code here
+let currentIndex = 0;
+let intervalId = null;
-// Write your code here
\ No newline at end of file
+// Manual movement of carousel
+function moveFrontOnce(forward) {
+ const images = window.images;
+ console.log("moveFrontOnce called, forward = ", forward); // Trying to troubleshoot
+ if (forward === true) {
+ currentIndex = (currentIndex + 1) % images.length; // If forward is true adds 1 to the index
+ // and wraps with % images.length in case we are in the last index
+ } else {
+ currentIndex = (currentIndex - 1 + images.length) % images.length; // Same here if backward it deducts one index
+ //making sure it wraps back to last image in case we were at index[0]
+ }
+ const image = document.getElementById("carousel-img");
+ image.setAttribute("src", images[currentIndex]); // Changed the approach while trying to pass the tests
+ console.log("Image src is set to:", image.src); // Tests shows that my img src is undefined
+}
+
+// Auto movement of carousel forward
+function startAutoForward() {
+ stopAuto(); // Function to stop the autoslide before we start
+ intervalId = setInterval(() => moveFrontOnce(true), 2000); // Starts the autoslide forward every 2"
+ toggleButtons(true); // Auto-forward button active
+}
+
+// Auto movement of carousel backwards
+function startAutoBackward() {
+ stopAuto(); // Stop the autoslide before we start
+ intervalId = setInterval(() => moveFrontOnce(false), 2000); // Starts the autoslide backwards
+ toggleButtons(true); // Auto-backward button active
+}
+
+// Stops automatic slideshow
+function stopAuto() {
+ if (intervalId !== null) {
+ clearInterval(intervalId);
+ intervalId = null;
+ }
+ toggleButtons(false);
+}
+
+// Enables/disables buttons based on if autoslideshow is running
+function toggleButtons(isRunning) {
+ document.getElementById("auto-forward").disabled = isRunning; // When the auto slideshow is on auto-forward button is unclickable
+ document.getElementById("auto-backward").disabled = isRunning; // When auto slideshow is on auto-backward button is unclicable
+ document.getElementById("stop").disabled = !isRunning; // Stop button is disabled only when auto slideshow is off, so when autoslideshow is running
+ //stop is the only button we can click
+}
+
+// Activate (call) the buttons
+document.addEventListener("DOMContentLoaded", () => {
+ document
+ .getElementById("forward-btn")
+ .addEventListener("click", () => moveFrontOnce(true));
+ document
+ .getElementById("backward-btn")
+ .addEventListener("click", () => moveFrontOnce(false));
+ document
+ .getElementById("auto-forward")
+ .addEventListener("click", () => startAutoForward());
+ document
+ .getElementById("auto-backward")
+ .addEventListener("click", () => startAutoBackward());
+ document.getElementById("stop").addEventListener("click", () => stopAuto());
+ // Disable stop button initially when autoslideshow is not running yet
+ document.getElementById("stop").disabled = true;
+});
diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css
index 63cedf2d2..9a1521f3b 100644
--- a/Sprint-3/slideshow/style.css
+++ b/Sprint-3/slideshow/style.css
@@ -1 +1,28 @@
/** Write your CSS in here **/
+body {
+ background-color: rgb(242, 106, 106);
+}
+#carousel-img {
+ width: 745px;
+ height: 559px;
+ object-fit: cover; /* ensures the image covers the area without distortion */
+ display: block; /* removes any inline whitespace below image */
+ margin: 0 auto; /* center horizontally if needed */
+}
+
+#button-container {
+ display: flex;
+ justify-content: center; /* Justify in horizontal axis*/
+ gap: 10px;
+ margin-top: 20px;
+}
+
+.button {
+ background-color: bisque;
+ font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif
+ font-size: Verdana, Geneva, Tahoma, sans-serif
+ font-style: oblique;
+ border-radius: 8px;
+ padding: 10px 20px;
+ cursor: pointer;
+}
diff --git a/prep/exercise-1.js b/prep/exercise-1.js
new file mode 100644
index 000000000..be0bc25ea
--- /dev/null
+++ b/prep/exercise-1.js
@@ -0,0 +1,14 @@
+// Can you fix this code?
+function doubleAllNumbers(numbers) {
+ let doubledNumbers = [];
+
+ for (let n of numbers) {
+ doubledNumbers.push(n * 2);
+ }
+
+ return doubledNumbers;
+}
+
+const myNums = [10, 20, 30];
+const double = doubleAllNumbers(myNums);
+console.log(double);
diff --git a/prep/exercise-1.test.js b/prep/exercise-1.test.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/prep/exercise-2.js b/prep/exercise-2.js
new file mode 100644
index 000000000..fa228871a
--- /dev/null
+++ b/prep/exercise-2.js
@@ -0,0 +1,13 @@
+// Write a function which takes an array as a parameter
+// and swaps the first element with the last element
+
+function swapFirstAndLast(arr) {
+ const first = arr[0]; //Indivates the first digit location of the array
+ const last = arr[arr.length - 1]; //Indicates the lst digit location of the array
+ arr[0] = last; //Because I can't reassign a new value to a const and we want the first position to hold the value of the last
+ arr[arr.length - 1] = first;
+}
+
+const myArray = [5, 2, 3, 4, 1];
+swapFirstAndLast(myArray);
+console.log(myArray); // what output should we expect?
diff --git a/prep/exercise-2.test.js b/prep/exercise-2.test.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/prep/mean.js b/prep/mean.js
new file mode 100644
index 000000000..f9ec4bdae
--- /dev/null
+++ b/prep/mean.js
@@ -0,0 +1,20 @@
+function calculateMean(list) {
+ let total = 0;
+ for (const item of list) {
+ total += item;
+ }
+}
+
+function calculateMedian(list) {
+ const middleIndex = Math.floor(list.length / 2);
+ const median = list.splice(middleIndex, 1)[0];
+
+ return median;
+}
+
+const list = [10, 20, 30];
+const copy = list;
+copy.push(60, 70);
+
+console.log(list);
+console.log(copy);
diff --git a/prep/mean.test.js b/prep/mean.test.js
new file mode 100644
index 000000000..7a057e17d
--- /dev/null
+++ b/prep/mean.test.js
@@ -0,0 +1,6 @@
+test("calculates the median of a list of odd length", () => {
+ const list = [10, 20, 30, 50, 60];
+ const currentOutput = calculateMedian(list);
+ const targetOutput = 30;
+ expect(currentOutput).toEqual(targetOutput);
+});
-
-
-
+
+
+
+