CodeYourFuture · katarzynakaz · Apr 19, 2025 · Apr 19, 2025 · Apr 19, 2025 · Apr 19, 2025
diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
@@ -3,13 +3,17 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
-    <script defer src="quotes.js"></script>
+    <title>Quote generator</title>
+    <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <h1>hello there</h1>
-    <p id="quote"></p>
-    <p id="author"></p>
-    <button type="button" id="new-quote">New quote</button>
+    <div id="container">
+      <h1 id="greeting">Check out your quote of the day</h1>
+      <p id="quote"></p>
+      <p id="author"></p>
+      <button type="button" id="new-quote">New quote</button>
+    </div>
+
+    <script src="quotes.js"></script>
   </body>
 </html>
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
@@ -1,3 +1,20 @@
+const quote = document.getElementById("quote");
+const author = document.getElementById("author");
+const button = document.getElementById("new-quote");
+
+// generate and show to user
+const generateQuote = () => {
+  const selectedQuote = pickFromArray(quotes);
+  quote.innerHTML = selectedQuote.quote;
+  author.innerHTML = selectedQuote.author;
+  // change greeting
+  document.getElementById("greeting").innerHTML = "Your quote is:";
+  document.getElementById("greeting").style.fontSize = "1rem";
+};
+
+//show to user on click of new quote
+button.addEventListener("click", generateQuote);
+
 // DO NOT EDIT BELOW HERE
 
 // pickFromArray is a function which will return one item, at

diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
@@ -1 +1,50 @@
-/** Write your CSS in here **/
+html {
+  background-color: aliceblue;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#container {
+  background-color: #e0fff8aa;
+  padding: 20px;
+  border-radius: 5px;
+  border: solid 1px #75758d;
+  box-shadow: 0px 0px 3px #b1b1b8;
+  margin-top: 3rem;
+  max-width: 600px;
+}
+
+#greeting {
+  font-size: 2rem;
+  color: #4a4a4a;
+  font-weight: 600;
+}
+
+#quote {
+  font-size: 1.5rem;
+  color: #4a4a4a;
+  font-weight: 400;
+  font-style: italic;
+}
+
+#author {
+  font-size: 1rem;
+  color: #676767;
+  font-weight: 300;
+}
+
+button {
+  background-color: #4a4a4a;
+  color: white;
+  padding: 10px 20px;
+  border-radius: 12px;
+  font-size: 1rem;
+  cursor: pointer;
+  font-weight: 500;
+  margin-top: 1rem;
+}
+
+button:hover {
+  background-color: #050404;
+}
diff --git a/Sprint-3/slideshow/assets/cute-cat-d.jpg b/Sprint-3/slideshow/assets/cute-cat-d.jpg
diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html
@@ -3,12 +3,27 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
-    <script defer src="slideshow.js"></script>
+    <title>Image Carousel</title>
+    <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>
+    <div class="container">
+      <img
+        id="carousel-img"
+        src="./assets/cute-cat-a.png"
+        alt="cat-pic"
+        style="height: 400px; width: 200px; object-fit: contain"
+      />
+      <button type="button" id="backward-btn">Backwards</button>
+      <button type="button" id="forward-btn">Forward</button>
+    </div>
+    <button type="button" class="small" id="auto-forward-bt">
+      Auto forward
+    </button>
+    <button type="button" class="small" id="stop-btn">Stop</button>
+    <button type="button" class="small" id="auto-backward-btn">
+      Auto backward
+    </button>
+    <script src="slideshow.js"></script>
   </body>
 </html>
diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js
@@ -1,8 +1,62 @@
 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",
+  "./assets/cute-cat-d.jpg",
 ];
 
+// Write your code here
+const carouselImg = document.getElementById("carousel-img");
+const prevBtn = document.getElementById("backward-btn");
+const nextBtn = document.getElementById("forward-btn");
+const autoForwardBtn = document.getElementById("auto-forward-btn");
+const stopBtn = document.getElementById("stop-btn");
+const autoBackwardBtn = document.getElementById("auto-backward-btn");
 
-// Write your code here
+let currentImageIndex = 0;
+
+const updatePicture = () => {
+  //make pics the same size
+  carouselImg.style.width = "400px";
+  carouselImg.style.height = "400px";
+  carouselImg.style.objectFit = "contain";
+  //swap to next
+  carouselImg.src = images[currentImageIndex];
+};
+
+const back = () => {
+  if (currentImageIndex === 0) {
+    currentImageIndex = images.length - 1;
+  } else {
+    currentImageIndex = currentImageIndex - 1;
+  }
+};
+//add event listeners to buttons
+prevBtn.addEventListener("click", () => {
+  back();
+  updatePicture();
+});
+
+const forward = () => {
+  if (currentImageIndex === images.length - 1) {
+    currentImageIndex = 0;
+  } else {
+    currentImageIndex = currentImageIndex + 1;
+  }
+};
+
+nextBtn.addEventListener("click", () => {
+  forward();
+  updatePicture();
+});
+
+//automated slideshow button event listeners
+autoForwardBtn.addEventListener("click", () => setInterval(forward, 1500));
+
+autoBackwardBtn.addEventListener("click", () => setInterval(back, 1500));
+
+//stop button event listener
+// refresh page
+stopBtn.addEventListener("click", () => {
+  autoSlideInterval = null;
+});
diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css
@@ -1 +1,13 @@
 /** Write your CSS in here **/
+.container {
+  display: block;
+  text-align: center;
+}
+
+button {
+  display: block;
+  margin: 1rem;
+  padding: 1rem;
+  font-size: 16px;
+  cursor: pointer;
+}
diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html
@@ -3,16 +3,18 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title>To Do</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <form>
+    <form class="list-div">
       <div>
-        <input type="text" placeholder="New todo..." />
+        <h1>My tasks</h1>
+        <input type="text" placeholder="New todo..." id="todo-input" />
       </div>
       <div>
-        <button type="submit">Add Todo</button>
+        <ul id="todo-list"></ul>
+        <button type="submit" id="add">Add Todo</button>
         <button
           type="button"
           id="remove-all-completed"

diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js
@@ -1,14 +1,41 @@
+let todos = [];
+
 function populateTodoList(todos) {
   let list = document.getElementById("todo-list");
-  // Write your code to create todo list elements with completed and delete buttons here, all todos should display inside the "todo-list" element.
-}
 
-// These are the same todos that currently display in the HTML
-// You will want to remove the ones in the current HTML after you have created them using JavaScript
-let todos = [
-  { task: "Wash the dishes", completed: false },
-  { task: "Do the shopping", completed: false },
-];
+  //clear old items
+  list.innerHTML = "";
+
+  //loop through array and display tasks to user
+  todos.forEach((todoObject) => {
+    //create new li
+    const li = document.createElement("li");
+
+    //create checkox toggle
+    const checkbox = document.createElement("input");
+    checkbox.type = "checkbox";
+    checkbox.checked = todoObject.completed;
+
+    // clicked, toggle competed or not completed
+    checkbox.addEventListener("change", () => {
+      todoObject.completed = checkbox.checked;
+      //refresh
+      populateTodoList(todos);
+    });
+
+    //add task to li
+    li.innerHTML = `${todoObject.task}`;
+    li.appendChild(checkbox);
+
+    //when user marks task as completed, add line through
+    if (todoObject.completed === true) {
+      li.style.textDecoration = "line-through";
+    }
+
+    //append li element to list
+    list.appendChild(li);
+  });
+}
 
 populateTodoList(todos);
 
@@ -17,9 +44,38 @@ function addNewTodo(event) {
   // The code below prevents the page from refreshing when we click the 'Add Todo' button.
   event.preventDefault();
   // Write your code here... and remember to reset the input field to be blank after creating a todo!
+  //grab input from input field
+  const input = document.getElementById("todo-input");
+
+  //if input is empty do nothing
+  if (input.value === "") {
+    return;
+  } else {
+    //create new todo object
+    const newTask = {
+      task: input.value,
+      completed: false,
+    };
+    //add new task to list
+    todos.push(newTask);
+
+    //refresh
+    populateTodoList(todos);
+
+    //clear user input after adding
+    input.value = "";
+
+    return newTask;
+  }
 }
 
+//add event listener to button
+document.getElementById("add").addEventListener("click", addNewTodo);
+
+//ignore this part
+// nope :) :)
 // Advanced challenge: Write a fucntion that checks the todos in the todo list and deletes the completed ones (we can check which ones are completed by seeing if they have the line-through styling applied or not).
-function deleteAllCompletedTodos() {
-  // Write your code here...
-}
+// function deleteAllCompletedTodos() {
+// remove all completed todos fro the array
+// filter and replace children
+// }
diff --git a/Sprint-3/todo-list/style.css b/Sprint-3/todo-list/style.css
@@ -1 +1,42 @@
+@import url("https://fonts.googleapis.com/css2?family=Orbitron:[email protected]&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 
+form {
+  background-color: #cfc7f6;
+  color: #3a3a3a;
+  font-family: "Poppins", sans-serif;
+  font-weight: 300;
+  width: 400px;
+  padding: 1rem;
+  padding-bottom: 3rem;
+  border-radius: 4px;
+}
+
+li {
+  list-style: none;
+  line-height: 1.6;
+  font-size: 1rem;
+}
+
+button {
+  color: #6254cd;
+  border: none;
+  padding: 0.5rem;
+  border-radius: 8px;
+  font-weight: 600;
+}
+
+button:hover {
+  background-color: #6254cd;
+  color: #fff;
+  cursor: pointer;
+}
+
+input {
+  border-radius: 4px;
+  padding: 0.5rem;
+}
+
+#todo-list {
+  padding-left: 0;
+  margin-left: 0;
+}