Birmingham | 26-ITP-Sep | Wyatt Lee | Sprint 3 | JavaScript Challenges

challenges/challenge-cowsay-two/solution1.js

@@ -7,6 +7,11 @@
 // 1. Accept arguments
 
 // how will you accept arguments?
+if (process.argv.length<3) {
+    console.error(`Usage: ${process.argv[0].split("/").slice(-1)} ${process.argv[1].split("/").slice(-1)} STRING`);
+    console.error(` e.g.: ${process.argv[0].split("/").slice(-1)} ${process.argv[1].split("/").slice(-1)} 'Mooooo'`);
+    process.exit(1);
+}
 
 // 2. Make supplies for our speech bubble
 
@@ -18,13 +23,23 @@ let saying = '';
 
 function cowsay(saying) {
 // how will you make the speech bubble contain the text?
+    saying = (saying=="" ? "Mooooo" : saying);
+    console.log(` ${topLine.repeat(saying.length+2)} `);
+    console.log(`< ${saying} >`);
+    console.log(` ${bottomLine.repeat(saying.length+2)} `);
 
 // where will the cow picture go?
+    console.log("        \\   ^__^            ");
+    console.log("         \\  (oo)\\_______    ");
+    console.log("            (__)\\       )\\/\\");
+    console.log("                ||----w |   ");
+    console.log("                ||     ||   ");
 
 // how will you account for the parameter being empty?
-
+    console.log('');
 }
 
 //4. Pipe argument into cowsay function and return a cow
 
 // how will you log this to the console?
+cowsay(process.argv.slice(2).join(" "));

challenges/challenge-cowsay-two/solution2.js

@@ -5,14 +5,37 @@
 // =================
 
 // 1. Make  a command line interface.
+import readline from 'node:readline';
+
+const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+});
 
 // 2. Make supplies for our speech bubble
+let topLine = '_';
+let bottomLine = '-';
+let saying = '';
 
 // 3. Make a cow that takes a string
 
 const cow = (saying) => {
     // how did you make the cow before?
+    saying = (saying=="" ? "Mooooo" : saying);
+    console.log(` ${topLine.repeat(saying.length+2)} `);
+    console.log(`< ${saying} >`);
+    console.log(` ${bottomLine.repeat(saying.length+2)} `);
+    console.log("        \\   ^__^            ");
+    console.log("         \\  (oo)\\_______    ");
+    console.log("            (__)\\       )\\/\\");
+    console.log("                ||----w |   ");
+    console.log("                ||     ||   ");
+    console.log('');
 }
 
 // 4. Use readline to get a string from the terminal 
-// (with a prompt so it's clearer what we want)
+// (with a prompt so it's clearer what we want)
+rl.question("What does the cow say? ", answer => {
+    cow(answer);
+    rl.close();
+});

challenges/challenge-weather-app/assets/globals.css

@@ -37,7 +37,8 @@ body {
   font-size: 14px;
   background: center center no-repeat;
   background-size: contain;
-  color: #333;
+  background-color: #333;
+  color: #ccc;
 }
 
 a {

challenges/challenge-weather-app/index.html

@@ -44,6 +44,61 @@ <h1 class="title">
   </main>
 
   <!-- JS goes here -->
+  <script>
+    async function request() {
+      // Use the input field that lets us see what the weather is like in other cities
+      const city = window.location.search.split("=")[1];
+
+      // Use fetch to retrieve the weather for a single day
+      const weatherUrl = `http://api.openweathermap.org/data/2.5/weather?q=${(city===undefined || city=="" ? "london" : city.toLowerCase())}&APPID=`+process.env.APP_ID;
+      const weatherResponse = await fetch(weatherUrl);
+      const weatherJson = await weatherResponse.json();
+
+      // Once you've retrieved the weather data, use its description property to get matching images from Unsplash
+      const unsplashUrl = `https://api.unsplash.com/search/photos?query=${weatherJson.weather[0].description.replaceAll(" ", "+")}&client_id=`+process.env.ACCESS_KEY;
+      const unsplashResponse = await fetch(unsplashUrl);
+      const unsplashJson = await unsplashResponse.json();
+
+      unsplashJson._query = weatherJson.weather[0].description;
+
+      return unsplashJson;
+    };
+
+    const promise = request()
+      .then((json) => {
+        // Display the images as a gallery of clickable thumbnails (clicking loads the main image)
+        for (let i=0; i<json.results.length; i++) {
+          let thumbImg = new Image();
+          thumbImg.src = json.results[i].urls.thumb;
+          thumbImg.alt = json.results[i].alt_description;
+          thumbImg.name = json.results[i].user.name;
+          thumbImg.id = json.results[i].user.links.html;
+          thumbImg.classList.add("thumb");
+          thumbImg.addEventListener("click", function thumbnailClickHandler() {
+            let photoImg = new Image();
+            photoImg.src = this.src.slice(0, -3)+"1080";
+            photoImg.alt = this.alt;
+            document.getElementById("photo").replaceChildren();
+            document.getElementById("photo").appendChild(photoImg);
+            // Display photographer credits in bottom right hand corner with link to their portfolio on Unsplash
+            document.getElementById("credit-user").innerHTML = this.name;
+            document.getElementById("credit-user").href = (this.id==null ? "#" : this.id);
+            // Display white border around thumbnail of image currently displayed as main image using active class
+            for (const child of document.getElementById("thumbs").children) {
+              child.classList.remove("active");
+            }
+            this.classList.add("active");
+          });
+          document.getElementById("thumbs").appendChild(thumbImg);
+        }
+
+        // Add a feature of your choice
+        document.getElementById("conditions").innerHTML = json._query.toUpperCase();
+      })
+      .catch((error) => {
+        console.error(error.message);
+      });
+  </script>
 </body>
 
 </html>

challenges/dog-photo-gallery/index.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dog photo gallery</title>
+</head>
+
+<body>
+    <button id="btn-append">Append</button>
+    <button id="btn-dequeue">Dequeue</button>
+    <ul id="list-dog"></ul>
+
+    <script>
+        async function request() {
+            const url = "https://dog.ceo/api/breeds/image/random";
+            const response = await fetch(url);
+            const json = await response.json();
+
+            return json;
+        };
+
+        document.getElementById("btn-append").addEventListener("click", function appendClickHandler() {
+            const promise = request()
+                .then((json) => {
+                    let li = document.createElement("li");
+                    let img = new Image();
+
+                    img.src = json.message;
+                    li.appendChild(img);
+                    document.getElementById("list-dog").appendChild(li);
+                })
+                .catch((error) => {
+                    console.error(error.message);
+                });
+        });
+
+        document.getElementById("btn-dequeue").addEventListener("click", function dequeueClickHandler() {
+            let ul = document.getElementById("list-dog");
+
+            if (ul.firstChild) {
+                ul.removeChild(ul.firstChild);
+            }
+        });
+    </script>
+</body>
+</html>

challenges/unit-testing/katas-tdd/calculator/calculator.js

@@ -0,0 +1,24 @@
+function add(numbers) {
+    let nums = numbers.split(",");
+    let negs = [];
+    let sum = 0;
+
+    for (let i=0; i<nums.length; i++) {
+        let num = Number(nums[i]);
+
+        if (num<0) {
+            negs.push(nums[i]);
+        }
+        else {
+            sum = sum+(num>1000 ? 0 : num);
+        }
+    }
+
+    if (negs.length>0) {
+        throw new Error(`negatives not allowed: ${negs.join(",")}`);
+    }
+
+    return sum;
+}
+
+module.exports = add;

challenges/unit-testing/katas-tdd/calculator/calculator.test.js

@@ -0,0 +1,30 @@
+let add = require("./calculator");
+
+test("for an empty string it will return 0", function () {
+    expect(add("")).toEqual(0);
+});
+
+test("for single number string it will return the number", function () {
+    expect(add("5")).toEqual(5);
+    expect(add("0")).toEqual(0);
+});
+
+test("for an unknown amount of numbers string it will return the sum of them", function () {
+    expect(add("3,6")).toEqual(9);
+    expect(add("3,5,0,6")).toEqual(14);
+});
+
+test("for numbers bigger than 1000 string it should be ignored", function () {
+    expect(add("2,1001")).toEqual(2);
+    expect(add("1001,1001")).toEqual(0);
+});
+
+test("with a negative number string it will throw an error", function () {
+    expect(() => {add("1,4,-1");}).toThrow(new Error("negatives not allowed: -1"));
+    expect(() => {add("1,-4,1");}).toThrow(new Error("negatives not allowed: -4"));
+    expect(() => {add("-1,4,1");}).toThrow(new Error("negatives not allowed: -1"));
+    expect(() => {add("1,-4,-1");}).toThrow(new Error("negatives not allowed: -4,-1"));
+    expect(() => {add("-1,-4,1");}).toThrow(new Error("negatives not allowed: -1,-4"));
+    expect(() => {add("-1,4,-1");}).toThrow(new Error("negatives not allowed: -1,-1"));
+    expect(() => {add("-1,-4,-1");}).toThrow(new Error("negatives not allowed: -1,-4,-1"));
+});

challenges/unit-testing/katas-tdd/password-verifier/password-verifier.js

@@ -0,0 +1,17 @@
+function verify(password) {
+    const uppercases = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
+    const numbers = "0123456789".split("");
+    let hasUppercase = false;
+    let hasNumber = false;
+
+    if (password!=null && password.length>=8) {
+        for (let i=0; i<password.length; i++) {
+            hasUppercase = hasUppercase || uppercases.includes(password[i]);
+            hasNumber = hasNumber || numbers.includes(password[i]);
+        }
+    }
+
+    return `Password ${(hasUppercase && hasNumber ? "accepted" : "rejected")}`;
+}
+
+module.exports = verify;

challenges/unit-testing/katas-tdd/password-verifier/password-verifier.test.js

@@ -0,0 +1,20 @@
+let verify = require("./password-verifier");
+
+test("If the password is null, the function should reject", function () {
+    expect(verify(null)).toEqual("Password rejected");
+});
+
+test("If the password is less than 8 characters, the function should reject", function () {
+    expect(verify("")).toEqual("Password rejected");
+    expect(verify("ABCD567")).toEqual("Password rejected");
+    expect(verify("ABCD5678")).toEqual("Password accepted");
+    expect(verify("ABCD56789")).toEqual("Password accepted");
+});
+
+test("If the password does not have at least 1 uppercase letter, the function should reject", function () {
+    expect(verify("abcd5678")).toEqual("Password rejected");
+});
+
+test("If the password does not have at least 1 number, the function should reject", function () {
+    expect(verify("ABCDefgh")).toEqual("Password rejected");
+});

challenges/unit-testing/katas-tdd/roman-numerals/convert-to-new-roman.js

@@ -1,3 +1,45 @@
-function convertToNewRoman(n) {}
+function convertToNewRoman(n) {
+    let roman = "";
+
+    roman += "M".repeat(Math.floor(n/1000));
+    n = n%1000;
+    if (n>=900) {
+        roman += "CM";
+        n = n-900;
+    }
+    roman += "D".repeat(Math.floor(n/500));
+    n = n%500;
+    if (n>=400) {
+        roman += "CD";
+        n = n-400;
+    }
+    roman += "C".repeat(Math.floor(n/100));
+    n = n%100;
+    if (n>=90) {
+        roman += "XC";
+        n = n-90;
+    }
+    roman += "L".repeat(Math.floor(n/50));
+    n = n%50;
+    if (n>=40) {
+        roman += "XL";
+        n = n-40;
+    }
+    roman += "X".repeat(Math.floor(n/10));
+    n = n%10;
+    if (n>=9) {
+        roman += "IX";
+        n = n-9;
+    }
+    roman += "V".repeat(Math.floor(n/5));
+    n = n%5;
+    if (n>=4) {
+        roman += "IV";
+        n = n-4;
+    }
+    roman += "I".repeat(Math.floor(n));
+
+    return roman;
+}
 
 module.exports = convertToNewRoman;

challenges/unit-testing/katas-tdd/roman-numerals/convert-to-new-roman.test.js

@@ -4,4 +4,37 @@ test("returns I if passed 1 as an argument", function () {
   // Arrange
   // Act
   // Assert
+    expect(convertToNewRoman(1)).toEqual("I");
+    expect(convertToNewRoman(2)).toEqual("II");
+    expect(convertToNewRoman(3)).toEqual("III");
+    expect(convertToNewRoman(4)).toEqual("IV");
+    expect(convertToNewRoman(5)).toEqual("V");
+    expect(convertToNewRoman(6)).toEqual("VI");
+    expect(convertToNewRoman(7)).toEqual("VII");
+    expect(convertToNewRoman(8)).toEqual("VIII");
+    expect(convertToNewRoman(9)).toEqual("IX");
+    expect(convertToNewRoman(10)).toEqual("X");
+    expect(convertToNewRoman(20)).toEqual("XX");
+    expect(convertToNewRoman(30)).toEqual("XXX");
+    expect(convertToNewRoman(40)).toEqual("XL");
+    expect(convertToNewRoman(50)).toEqual("L");
+    expect(convertToNewRoman(60)).toEqual("LX");
+    expect(convertToNewRoman(70)).toEqual("LXX");
+    expect(convertToNewRoman(80)).toEqual("LXXX");
+    expect(convertToNewRoman(90)).toEqual("XC");
+    expect(convertToNewRoman(100)).toEqual("C");
+    expect(convertToNewRoman(200)).toEqual("CC");
+    expect(convertToNewRoman(300)).toEqual("CCC");
+    expect(convertToNewRoman(400)).toEqual("CD");
+    expect(convertToNewRoman(500)).toEqual("D");
+    expect(convertToNewRoman(600)).toEqual("DC");
+    expect(convertToNewRoman(700)).toEqual("DCC");
+    expect(convertToNewRoman(800)).toEqual("DCCC");
+    expect(convertToNewRoman(900)).toEqual("CM");
+    expect(convertToNewRoman(1000)).toEqual("M");
+    expect(convertToNewRoman(2000)).toEqual("MM");
+    expect(convertToNewRoman(3000)).toEqual("MMM");
+    expect(convertToNewRoman(1234)).toEqual("MCCXXXIV");
+    expect(convertToNewRoman(2444)).toEqual("MMCDXLIV");
+    expect(convertToNewRoman(2999)).toEqual("MMCMXCIX");
 });