Challenge01for each

01-smacss-media-queries/for-each/challenges-01.test.js

@@ -0,0 +1,227 @@
+'use strict';
+
+/* ------------------------------------------------------------------------------------------------
+CHALLENGE 1
+
+Write a function named greeting that takes in a string and returns the string in all uppercase letters.
+
+Then, write a function named speaker that takes in a string and a callback function. The speaker function should return the string in all uppercase letters only by invoking the callback.
+------------------------------------------------------------------------------------------------ */
+
+const greeting = word => {
+  return word.toUpperCase();
+};
+
+
+
+const speaker = (message, callback) => {
+  return callback(message);
+};
+
+/* ------------------------------------------------------------------------------------------------
+CHALLENGE 2
+
+Write a function named addValues that takes in an array and a value and pushes the value into the array. This function does not need a return statement.
+
+Then, write a function named addNumbers that takes in four arguments:
+  - A number to be added to an array
+  - An array into which the number should be added
+  - The number of times the number should be added
+  - A callback function to use to add the numbers to the array (Hint: you already defined it)
+
+Within the addNumbers function, invoke the callback function as many times as necessary, based on the third argument of the addNumbers function.
+
+Return the modified array.
+------------------------------------------------------------------------------------------------ */
+
+const addValues = (arr, value) => {
+  arr.push(value);
+};
+
+const addNumbers = (num, arr, times, callback) => {
+  for(let i=0; i< times; i++){
+    callback(arr,num)
+  }
+  return arr
+}
+
+/* ------------------------------------------------------------------------------------------------
+CHALLENGE 3
+
+Write a function named removeOne that takes in a number and an array. If the number divided by three has a remainder of two, pop one element off of the array.
+
+Hint: you may want to look into the modulo operation.
+
+Then, write a function named removeElements that takes in an array and a callback. This function should use a for loop to iterate over the array and invoke the callback once for each element in the array.
+
+Return the modified array.
+------------------------------------------------------------------------------------------------ */
+
+const removeOne = (num, arr) => {
+  // Solution code here...
+  if(num % 3 === 2) {
+    arr.pop()
+  }
+}
+
+const removeElements = (arr, callback) => {
+  // Solution code here...
+  for(let i = 0; i < arr.length; i++) {
+    callback(arr[i],arr)
+  }
+  return arr
+}
+
+/* ------------------------------------------------------------------------------------------------
+CHALLENGE 4
+
+Write a function named removeWithForEach that produces the same output as challenge 3, but uses forEach.
+------------------------------------------------------------------------------------------------ */
+
+const removeWithForEach = (arr, callback) => {
+  // Solution code here...
+  arr.forEach((val) => {callback(val,arr)})
+  return arr
+}
+
+/* ------------------------------------------------------------------------------------------------
+CHALLENGE 5
+
+Write a function named removeWithAnon that produces the same output as challenges 3 and 4.
+
+This function should use forEach again, but rather than taking in a callback as an argument, define an anonymous function as the argument to forEach.
+
+This anonymous function should accept up to three arguments(not needed): the element, the index, and the array.
+------------------------------------------------------------------------------------------------ */
+
+const removeWithAnon = (arr) => {
+  // Solution code here...
+  arr.forEach((val) => {
+    if(val % 3 === 2){
+      arr.pop()
+    }
+  })
+  return arr
+}
+
+/* ------------------------------------------------------------------------------------------------
+CHALLENGE 6
+
+Write a function named createList that takes in an array of the current store intentory.
+
+The inventory is formatted like this:
+[
+  { name: 'apples', available: true },
+  { name: 'pears', available: true },
+  { name: 'oranges', available: false },
+  { name: 'bananas', available: true },
+  { name: 'blueberries', available: false }
+]
+
+This function should use forEach to populate your grocery list based on the store's inventory. If the item is available, add it to your list. Return the final list.
+------------------------------------------------------------------------------------------------ */
+
+const createList = (availableItems) => {
+  // Solution code here...
+  let list = []
+  availableItems.forEach(val =>{
+    if(val.available) {
+      list.push(val.name)
+    }
+  })
+  return list
+}
+
+/* ------------------------------------------------------------------------------------------------
+CHALLENGE 7
+
+Write a function named fizzbuzz that takes in an array of numbers.
+
+Iterate over the array using forEach to determine the output based on several rules:
+  - If a number is divisible by 3, add the word "Fizz" to the output array.
+  - If the number is divisible by 5, add the word "Buzz" to the output array.
+  - If the number is divisible by both 3 and 5, add the phrase "Fizz Buzz" to the output array.
+  - Otherwise, add the number to the output array.
+
+Return the resulting output array.
+------------------------------------------------------------------------------------------------ */
+
+const fizzbuzz = (arr) => {
+  // Solution code here...
+  let finalArr = []
+  arr.forEach(val => {
+    if(val % 15 === 0) {
+      finalArr.push('Fizz Buzz')
+    } else if(val % 5 === 0) {
+      finalArr.push('Buzz')
+    } else if(val % 3 === 0) {
+      finalArr.push('Fizz')
+    } else {
+      finalArr.push(val)
+    }
+  })
+  return finalArr
+}
+
+/* ------------------------------------------------------------------------------------------------
+TESTS
+
+All the code below will verify that your functions are working to solve the challenges.
+
+DO NOT CHANGE any of the below code.
+
+Run your tests from the console: jest challenges-01.test.js
+
+------------------------------------------------------------------------------------------------ */
+
+describe('Testing challenge 1', () => {
+  test('It should return the message with all uppercase characters', () => {
+    expect(speaker('hello 301 students!', greeting)).toStrictEqual('HELLO 301 STUDENTS!');
+  });
+});
+
+describe('Testing challenge 2', () => {
+  test('It should add the number 8 to the array five times', () => {
+    expect(addNumbers(8, [], 5, addValues)).toStrictEqual([8, 8, 8, 8, 8]);
+    expect(addNumbers(8, [], 5, addValues).length).toStrictEqual(5);
+  });
+});
+
+describe('Testing challenge 3', () => {
+  test('It should remove three elements from the array', () => {
+    expect(removeElements([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], removeOne)).toStrictEqual([1, 2, 3, 4, 5, 6, 7]);
+    expect(removeElements([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], removeOne).length).toStrictEqual(7);
+  });
+});
+
+describe('Testing challenge 4', () => {
+  test('It should remove three elements from the array', () => {
+    expect(removeWithForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], removeOne)).toStrictEqual([1, 2, 3, 4, 5, 6, 7]);
+    expect(removeWithForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], removeOne).length).toStrictEqual(7);
+  });
+});
+
+describe('Testing challenge 5', () => {
+  test('It should remove three elements from the array', () => {
+    expect(removeWithAnon([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])).toStrictEqual([1, 2, 3, 4, 5, 6, 7]);
+    expect(removeWithAnon([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]).length).toStrictEqual(7);
+  });
+});
+
+describe('Testing challenge 6', () => {
+  const inventory = [{ name: 'apples', available: true }, { name: 'pears', available: true }, { name: 'oranges', available: false }, { name: 'bananas', available: true }, { name: 'blueberries', available: false }];
+
+  test('It should only add the available items to the list', () => {
+    expect(createList(inventory)).toStrictEqual(['apples', 'pears', 'bananas']);
+    expect(createList(inventory).length).toStrictEqual(3);
+  });
+});
+
+describe('Testing challenge 7', () => {
+  const inputs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
+
+  test('It should print out messages or numbers', () => {
+    expect(fizzbuzz(inputs)).toStrictEqual([1, 2, 'Fizz', 4, 'Buzz', 'Fizz', 7, 8, 'Fizz', 'Buzz', 11, 'Fizz', 13, 14, 'Fizz Buzz', 16]);
+    expect(fizzbuzz(inputs).length).toStrictEqual(16);
+  });
+});

01-smacss-media-queries/for-each/demo.css

@@ -0,0 +1,69 @@
+body{
+    width: 100%;
+}
+@media(min-width:768px){
+    nav{
+        width: 100%;
+        background-color: blueviolet;
+        height: 100px;
+    }
+    aside{
+        width: 20%;
+        height: 600px;
+        background-color: gold;
+        float: left;
+    }
+    .main{
+        width: 80%;
+        height: 600px;
+        float: left;
+    }
+    article{
+        width: 50%;
+        height: 200px;
+        float: left;
+        background-color: plum;
+    }
+    sports{
+        width: 25%;
+        height: 250px;
+        float: left;
+        background-color: lightsalmon;
+    }
+    footer{
+        width: 100%;
+        height: 150px;
+        float: left;
+        background-color: powderblue;
+    }
+}
+
+@media(max-width:768px){
+    nav{
+        width: 100%;
+        height: 75px;
+        background-color: blueviolet;
+    }
+    aside{
+        width: 100%;
+        height: 175px;
+        background-color: gold;
+    }
+    article{
+        width: 100%;
+        height: 125px;
+        background-color: plum;
+    }
+    sports{
+        width: 50%;
+        height: 250px;
+        float: left;
+        background-color: lightsalmon;
+    }
+    footer{
+        width: 100%;
+        height: 80px;
+        background-color: powderblue;
+        float: left;
+    }
+}

01-smacss-media-queries/for-each/demo.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Page Title</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" media="screen" href="demo.css" />
+    <script src="main.js"></script>
+</head>
+<body>
+    <nav>Nav</nav>
+    <aside>Aside</aside>
+    <div class="main">
+        <article>Article1</article>
+        <article>Article2</article>
+        <sports>sports1</sports>
+        <sports>sports2</sports>
+        <sports>sports3</sports>
+        <sports>sports4</sports>
+        <footer>footer</footer>
+    </div>
+</body>
+</html>