Brussels | ITP-2025-1 | Daniela Fajardo | Sprint 3 | alarmclock app

Sprint-2/debug/address.js

@@ -1,5 +1,6 @@
 // Predict and explain first...
-
+// the const is an object, not an array, so [0] in the console log isn't correc
+t
 // This code should log out the houseNumber from the address object
 // but it isn't working...
 // Fix anything that isn't working
@@ -9,7 +10,7 @@ const address = {
   street: "Imaginary Road",
   city: "Manchester",
   country: "England",
-  postcode: "XYZ 123",
+  postcode: "xyz 123",
 };
 
-console.log(`My house number is ${address[0]}`);
+console.log(`my house number is ${address.houseNumber}`);

Sprint-2/debug/author.js

@@ -1,5 +1,5 @@
 // Predict and explain first...
-
+// we should take the object and access to the values through dotation.
 // This program attempts to log out all the property values in the object.
 // But it isn't working. Explain why first and then fix the problem
 
@@ -11,6 +11,6 @@ const author = {
   alive: true,
 };
 
-for (const value of author) {
+for (const value of Object.values(author)) {
   console.log(value);
 }

Sprint-2/debug/recipe.js

@@ -10,6 +10,6 @@ const recipe = {
   ingredients: ["olive oil", "tomatoes", "salt", "pepper"],
 };
 
-console.log(`${recipe.title} serves ${recipe.serves}
-  ingredients:
-${recipe}`);
+console.log(`${recipe.title}`);
+console.log(`serves: ${recipe.serves}`);
+recipe.ingredients.forEach(i => console.log("-"+i));

Sprint-2/implement/contains.js

@@ -1,3 +1,23 @@
-function contains() {}
+function contains(obj, prop) {
+
+    if (typeof obj !== "object" && obj === null ) { //typeof to check if the key is an object
+        return false;
+    } else if (Array.isArray(obj)) { //array.isarray to check that the obj is an array, so we throw an error message
+        throw new Error ("invalid input"); 
+    }
+
+    return prop in obj; //in method to check if a property is in the object
+
+}
+console.log(contains({ a: 1, b: 2 }, "a"));
+console.log(contains({ a: 1, b: 2 }, "c"));
+console.log(contains({}));
+console.log(contains({undefined},"b"));
+
+try {
+    console.log(contains([1, 2, 3], "3")); 
+}  catch (E) {
+    console.log(E.message);
+}
 
 module.exports = contains;

Sprint-2/implement/lookup.js

@@ -1,5 +1,19 @@
-function createLookup() {
-  // implementation here
-}
+function createLookup(codePairs) {
+
+  if (!Array.isArray(codePairs)) {
+    return null;
+  }
+
+  return Object.fromEntries(codePairs); //convert the code pairs arrays into object
+
+} 
+
+    const countryCurrency = [
+     ["US", "USD"],
+     ["CA", "CAD"],
+   ];
+
+const result = createLookup(countryCurrency);
+console.log(result);
 
 module.exports = createLookup;

Sprint-2/implement/querystring.js

@@ -6,11 +6,12 @@ function parseQueryString(queryString) {
   const keyValuePairs = queryString.split("&");
 
   for (const pair of keyValuePairs) {
-    const [key, value] = pair.split("=");
+    const [key, ...rest] = pair.split("="); //split the first = from the key 
+    const value = rest.join("="); //join the value
     queryParams[key] = value;
-  }
+  } 
 
   return queryParams;
-}
+} 
 
 module.exports = parseQueryString;

Sprint-2/implement/querystring.test.js

@@ -10,3 +10,15 @@ test("parses querystring values containing =", () => {
     "equation": "x=y+1",
   });
 });
+
+test("multiple key-value pairs", () => {
+  expect(parseQueryString("a=1&b=2")).toEqual({ a: "1", b: "2" });
+});
+
+test("only = character", () => {
+  expect(parseQueryString("=")).toEqual({ "": "" });
+});
+
+test("empty key with value", () => {
+  expect(parseQueryString("=value")).toEqual({ "": "value" });
+});

Sprint-2/implement/tally.js

@@ -1,3 +1,27 @@
-function tally() {}
+function tally(arr) {
+
+    if (!Array.isArray(arr)) {
+      throw new TypeError("Input must be an array");
+    }  
+
+    const counts = {}; //store the result as an object 
+
+      for (const items of arr) { //for... of loop to count the items 
+        if (counts[items]) {
+          counts[items] += 1;
+        } else {
+          counts[items] = 1;
+        }
+      }  
+
+    return counts;
+
+}
+
+console.log(tally(["a","a","c"]));
+console.log(tally(["a", "5", "5"]));
+console.log(tally([]));
+console.log(tally("hello world"));
+
 
 module.exports = tally;

Sprint-2/interpret/invert.js

@@ -10,20 +10,34 @@ function invert(obj) {
   const invertedObj = {};
 
   for (const [key, value] of Object.entries(obj)) {
-    invertedObj.key = value;
+    invertedObj[value] = key;
   }
 
   return invertedObj;
 }
 
-// a) What is the current return value when invert is called with { a : 1 }
+// a) What is the current return value when invert is called with { a : 1 } = { key : 1}
 
-// b) What is the current return value when invert is called with { a: 1, b: 2 }
+// b) What is the current return value when invert is called with { a: 1, b: 2 } = { key : 2}
 
-// c) What is the target return value when invert is called with {a : 1, b: 2}
+// c) What is the target return value when invert is called with {a : 1, b: 2} = { 1 : a, 2 : b}
 
-// c) What does Object.entries return? Why is it needed in this program?
+// c) What does Object.entries return? Why is it needed in this program? = returns an array of key, value pairs. It's important bc we can loop both, key and values.
 
-// d) Explain why the current return value is different from the target output
+// d) Explain why the current return value is different from the target output = because invertedObj.key is just setting a property called "key" 
+// we need to use the [] to access to the variable.
+
+// e) Fix the implementation of invert (and write tests to prove it's fixed!) 
+
+test("inverts object with numeric strings value", () => {
+  expect(invert({ a: 1, b: 2 })).toBe({ 1: a, 2: b });
+});
+
+test("inverts object with strings value", () => {
+  expect(invert({ a: "hello", b: "world" })).toBe({ "hello": a, "world": b });
+});
+
+test("inverts object with numeric strings value and literal strings value", () => {
+  expect(invert({ a: "hello", b: 5 })).toBe({ hello: a, 5 : b });
+});
 
-// e) Fix the implementation of invert (and write tests to prove it's fixed!)

Sprint-3/alarmclock/alarmclock.js

@@ -1,5 +1,45 @@
-function setAlarm() {}
+function setAlarm() {
+    //get elements from the html file
+    const input = document.querySelector("#alarmSet"); 
+    const heading = document.querySelector("#timeRemaining");
+    const pause = document.querySelector("#pause");
 
+    let totalSeconds = parseInt(input.value, 10); //converting the input into number values (input from html file are always strings)
+
+    if (isNaN(totalSeconds) || totalSeconds <= 0) {  //check if is not a number and if the number is 0 or less than 0 to return a message for invalid input
+      heading.innerText = "Please enter a valid number of seconds";
+      return;
+    }
+
+    //helper function 
+    function formatTime(seconds) {
+      const minutes = Math.floor(seconds / 60);
+      const secs = seconds % 60;
+      return `${minutes.toString().padStart(2, "0")}:${secs
+        .toString()
+        .padStart(2, "0")}`;
+    }
+
+    heading.innerText = `Time Remaining: ${formatTime(totalSeconds)}`; //updating heading
+
+    const timerId = setInterval(() => {  //countdown 
+      totalSeconds--; //decrements operator
+
+      heading.innerText = `Time Remaining: ${formatTime(totalSeconds)}`; //updating heading every second after the countdown runs
+
+      if (totalSeconds <= 0) {
+        clearInterval(timerId);
+        if (typeof playAlarm === "function") { //only runs if playAlarm is a function (safe code)
+          playAlarm();
+        }
+      }
+    }, 1000);
+
+
+
+
+
+}
 // DO NOT EDIT BELOW HERE
 
 var audio = new Audio("alarmsound.mp3");
@@ -12,6 +52,10 @@ function setup() {
   document.getElementById("stop").addEventListener("click", () => {
     pauseAlarm();
   });
+
+  document.getElementById("pause").addEventListener("click", () => {
+    pauseCountDown();
+  });
 }
 
 function playAlarm() {
@@ -22,4 +66,5 @@ function pauseAlarm() {
   audio.pause();
 }
 
+
 window.onload = setup;

Sprint-3/alarmclock/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" />
-    <title>Title here</title>
+    <title>Alarm Clock App</title>
   </head>
   <body>
     <div class="centre">
@@ -13,7 +13,7 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
       <input id="alarmSet" type="number" />
 
       <button id="set" type="button">Set Alarm</button>
-      <button id="stop" type="button">Stop Alarm</button>
+      <button id="stop" type="button">Stop Alarm</button>     
     </div>
     <script src="alarmclock.js"></script>
   </body>

Sprint-3/prep/exerciseprep.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <section>
+      <h3>Character limit</h3>
+      <label for="comment-input">
+        Please enter your comment in the text area below
+      </label>
+      <textarea
+        id="comment-input"
+        name="comment-input"
+        rows="5"
+        maxlength="200"
+      ></textarea>
+      <p id="character-limit-info">You have 200 characters remaining</p>
+    </section>
+    <script src="script.js"></script>
+  </body>
+</html>

Sprint-3/prep/script.js

@@ -0,0 +1,13 @@
+  //select the elements from the html file with query selector calling the id (#)
+  const textarea = document.querySelector("#comment-input");
+  const info = document.querySelector("#character-limit-info");
+//get the limit of characters 
+  const maxLength = Number(textarea.getAttribute("maxlength"));
+// add the event listener with the "input" for typing in a text field.
+  textarea.addEventListener("input", () => {
+    const typed = textarea.value.length;
+    const remaining = maxLength - typed;
+    //create the string and print the result of the remaining characters
+    info.textContent = `You have ${remaining} characters remaining`;
+  });
+

Sprint-3/slideshow/readme.md

@@ -6,8 +6,7 @@ First off, once you've branched off `main`, then update the title element in `in
 
 Make a website which allows the user to navigate a set of images (first manually, then with an auto-playing slideshow).
 
-[Try this live demo!](https://cyf-image-carousel.netlify.app/)
-
+[Try this live demo!]heck link in original repository
 # Level 1 Challenge
 
 Make forward and back buttons to move _manually_ in that direction through a list of at least 4 images.