100xdevs-cohort-3 assignments

week-2/week-2-async-js/solutions/easy/1-counter.js

@@ -1,9 +1,13 @@
 let counter = 0; 
 
+// const updateCounter = () => {
+//   counter++; 
+//   console.log(counter);
+// };
 
-const updateCounter = () => {
+function updateCounter() {
   counter++; 
   console.log(counter);
-};
+}
 
 setInterval(updateCounter, 1000);

week-2/week-2-async-js/solutions/easy/2-counter.js

@@ -1,10 +1,16 @@
 let counter = 0; 
 
-const updateCounter = () => {
-  counter++; 
-  console.log(counter); 
+// const updateCounter = () => {
+//   counter++; 
+//   console.log(counter); 
+
+//   setTimeout(updateCounter, 1000);
+// };
 
+function updateCounter() {
+  counter++; 
+  console.log(counter);
   setTimeout(updateCounter, 1000);
-};
+}
 
 updateCounter();

week-2/week-2-async-js/solutions/easy/example.txt

@@ -1 +1 @@
-Hello, world!!!
+Hello, world!

week-2/week-2-async-js/solutions/hard/1-promisify-setTimeout.js

@@ -7,4 +7,14 @@ function wait(n) {
     return p;
 }
 
-module.exports = wait;
+module.exports = wait;
+
+function randomAfter3S(resolve, n) {
+  setTimeout(resolve, n*1000);
+}
+
+function callbackAfter3S() {
+  console.log("promise succeeded after 3 seconds!")
+}
+p = new Promise((resolve) => randomAfter3S(resolve, 3));
+p.then(callbackAfter3S);

week-2/week-2-async-js/solutions/hard/2-sleep-completely.js

@@ -6,4 +6,16 @@ function sleep(milliseconds) {
     });
 }
 
-module.exports = sleep;
+module.exports = sleep;
+
+function randomAfterSleep(resolve, n) {
+  let startTime = new Date().getTime();
+  while (new Date().getTime() < startTime + n*1000);
+  resolve();
+}
+
+function callbackAfterSleep() {
+  console.log("promise succeeded after sleeping for 3 seconds!")
+}
+p = new Promise((resolve) => randomAfterSleep(resolve, 3));
+p.then(callbackAfterSleep);

week-2/week-2-async-js/solutions/hard/3-promise-all.js

@@ -25,5 +25,53 @@ function wait1(t) {
     return totalTime;
   }
 
-  module.exports = calculateTime;
-
+module.exports = calculateTime;
+
+
+// function randomAfter1S(resolve, n) {
+//   setTimeout(resolve, n*1000);
+// }
+
+function callbackAfter1S() {
+  console.log("promise succeeded after 1 seconds!")
+}
+let p1 = new Promise((resolve) => randomAfterNS(resolve, 1));
+p1.then(callbackAfter1S);
+
+
+
+// function randomAfter2S(resolve, n) {
+//   setTimeout(resolve, n*1000);
+// }
+
+function callbackAfter2S() {
+  console.log("promise succeeded after 2 seconds!")
+}
+let p2 = new Promise((resolve) => randomAfterNS(resolve, 2));
+p2.then(callbackAfter2S);
+
+
+
+// function randomAfter3S(resolve, n) {
+//   setTimeout(resolve, n*1000);
+// }
+
+function callbackAfter3S() {
+  console.log("promise succeeded after 3 seconds!")
+}
+let p3 = new Promise((resolve) => randomAfterNS(resolve, 3));
+p3.then(callbackAfter3S);
+
+console.log("hello")
+
+function randomAfterNS(resolve, n) {
+  setTimeout(resolve, n*1000);
+}
+
+const startTime = Date.now();
+
+function callback() {
+  console.log("all promises succeeded after " + (Date.now() - startTime)/1000 + " seconds!")
+}
+
+Promise.all([p1, p2, p3]).then(callback);

week-2/week-2-async-js/solutions/hard/4-promise-chain.js

@@ -32,4 +32,93 @@ function call(t1, t2, t3) {
         });
 }
 
-module.exports = calculateTime;
+module.exports = calculateTime;
+
+// function randomAfter1S(resolve, n) {
+//   setTimeout(resolve, n*1000);
+// }
+
+function callbackAfter1S() {
+  console.log("promise succeeded after 1 seconds!")
+}
+let p1 = new Promise((resolve) => randomAfterNS(resolve, 1));
+// p1.then(callbackAfter1S);
+
+
+
+// function randomAfter2S(resolve, n) {
+//   setTimeout(resolve, n*1000);
+// }
+
+function callbackAfter2S() {
+  console.log("promise succeeded after 2 seconds!")
+}
+// let p2 = new Promise((resolve) => randomAfterNS(resolve, 2));
+// p2.then(callbackAfter2S);
+
+
+
+// function randomAfter3S(resolve, n) {
+//   setTimeout(resolve, n*1000);
+// }
+
+function callbackAfter3S() {
+  console.log("promise succeeded after 3 seconds!")
+}
+// let p3 = new Promise((resolve) => randomAfterNS(resolve, 3));
+// p3.then(callbackAfter3S);
+
+console.log("hello")
+
+function randomAfterNS(resolve, n) {
+  setTimeout(resolve, n*1000);
+}
+
+const startTime = Date.now();
+
+function callback() {
+  console.log("all promises succeeded after " + (Date.now() - startTime)/1000 + " seconds!")
+}
+
+p1
+  .then(() => {
+    callbackAfter1S();
+    return new Promise((resolve) => randomAfterNS(resolve, 2));
+  })
+  .then(() => {
+    callbackAfter2S();
+    return new Promise((resolve) => randomAfterNS(resolve, 3));
+  })
+  .then(() => {
+    callbackAfter3S();
+    callback();
+  });
+
+
+p1 = new Promise((resolve) => randomAfterNS(resolve, 1));
+p1.then(() => {
+    callbackAfter1S();
+    p2 = new Promise((resolve) => randomAfterNS(resolve, 2));
+    p2.then(() => {
+      callbackAfter2S();
+      p3 = new Promise((resolve) => randomAfterNS(resolve, 3));
+      p3.then(() => {
+        callbackAfter3S();
+        callback();
+     })
+    })
+  })
+
+  async function solve() {
+    await new Promise((resolve) => randomAfterNS(resolve, 1));
+    callbackAfter1S();
+    await new Promise((resolve) => randomAfterNS(resolve, 2));
+    callbackAfter2S();
+    await new Promise((resolve) => randomAfterNS(resolve, 3));
+    callbackAfter3S();
+    callback();
+  }
+
+  solve()
+
+  console.log("whatsup")

week-3/easy/The-Pokémon/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>index</title>
+</head>
+
+<body>
+  Hello world
+  <button id="start-btn">Start Pokemon</button>
+  <div id="input"></div>
+  <div id="pokemon-list"></div>
+  <script type="module" src="script.js"></script>
+</body>
+
+</html>

week-3/easy/The-Pokémon/script.js

@@ -0,0 +1,50 @@
+let score = 0;
+
+function startPokemon() {
+  document.querySelector("#input").innerHTML = ""
+  document.querySelector("#pokemon-list").innerHTML = ""
+  document.querySelector("#input").appendChild(submitPokemonId())
+}
+
+function submitPokemonId() {
+  const div = document.createElement("div");
+  const form = document.createElement("form");
+  const label = document.createElement("label");
+  const input = document.createElement("input");
+  const button = document.createElement("button");
+  label.setAttribute("for", "pokemonId")
+  label.innerHTML = "Enter pokemon id"
+  input.setAttribute("id", "pokemonId")
+  input.setAttribute("placeholder", "Enter pokemon id")
+  button.innerHTML = "Submit"
+  button.type = "button";
+  button.addEventListener("click", () => pokemonComponent(input.value));
+  form.appendChild(label)
+  form.appendChild(input)
+  form.appendChild(button)
+  div.appendChild(form)
+  return div
+}
+
+async function pokemonComponent(id) {
+  console.log(id)
+  document.querySelector("#pokemon-list").innerHTML = ""
+    try {
+    const response = await fetch("https://pokeapi.co/api/v2/pokemon-form/" + id + "/");
+    const pokemonData = await response.json();  // <-- JSON stored here
+    const h1 = document.createElement("h1");
+    const imgFront = document.createElement("img");
+    const imgBack = document.createElement("img");
+    h1.innerHTML = pokemonData.pokemon.name;
+    imgFront.setAttribute("src", pokemonData.sprites.front_default)
+    imgBack.setAttribute("src", pokemonData.sprites.back_default)
+    document.querySelector("#pokemon-list").appendChild(h1)
+    document.querySelector("#pokemon-list").appendChild(imgFront)
+    document.querySelector("#pokemon-list").appendChild(imgBack)
+  } catch (err) {
+    console.error("Error fetching Pokémon data:", err);
+  }  
+}
+
+// Attach event listener in JavaScript (module-safe)
+document.getElementById("start-btn").addEventListener("click", startPokemon);

week-3/easy/bg-color-changer/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>index</title>
+  <link href="style.css" rel="stylesheet" type="text/css" />
+</head>
+
+<body>
+  Hello world
+  <input type="text" placeholder="Enter a todo">
+  <button onclick="changeBackground('red')">Red</button>
+  <button onclick="changeBackground('blue')">Blue</button>
+  <button onclick="changeBackground('green')">Green</button>
+  <div id="todo-list">hellooooo</div>
+  <script src="script.js"></script>
+</body>
+
+</html>

week-3/easy/bg-color-changer/script.js

@@ -0,0 +1,12 @@
+function changeBackground(colour) {
+  document.querySelector("body").style.backgroundColor = colour
+  render();
+}
+
+// react
+function render() {
+
+}
+
+// THIS makes the default appear immediately
+render();

week-3/easy/quiz-app/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>index</title>
+</head>
+
+<body>
+  Hello world
+    <!-- <div class="question-group">
+    <p>Which language runs in a web browser?</p>
+    <form>
+      <label for="a">
+        <input type="radio" name="selection" value="a"> Java
+      </label><br>
+      <label for="b">
+        <input type="radio" name="selection" value="b"> C
+      </label><br>
+      <label for="c">
+        <input type="radio" name="selection" value="c"> Python
+      </label><br>
+      <label for="d">
+        <input type="radio" name="selection" value="d"> JavaScript
+      </label><br>
+      <button onclick="submitAnswer() type="button">Submit</button>
+    </form>
+    </div> -->
+  <!-- <button onclick="startQuiz()">Start Quiz</button> -->
+  <button id="start-btn">Start Quiz</button>
+  <div id="quiz-list"></div>
+  <script type="module" src="script.js"></script>
+  <script type="module" src="data.js"></script>
+</body>
+
+</html>