From bfb7e797b299f3c0615af012ec2defd22b0151b2 Mon Sep 17 00:00:00 2001 From: Greg Hsieh Date: Tue, 9 Oct 2018 19:35:16 -0400 Subject: [PATCH 1/3] lab-responsive design --- 01-smacss-media-queries/lab/demo.css | 69 +++++++++++++++++++++++++++ 01-smacss-media-queries/lab/demo.html | 24 ++++++++++ 2 files changed, 93 insertions(+) create mode 100644 01-smacss-media-queries/lab/demo.css create mode 100644 01-smacss-media-queries/lab/demo.html diff --git a/01-smacss-media-queries/lab/demo.css b/01-smacss-media-queries/lab/demo.css new file mode 100644 index 0000000..163e8e5 --- /dev/null +++ b/01-smacss-media-queries/lab/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; + } +} \ No newline at end of file diff --git a/01-smacss-media-queries/lab/demo.html b/01-smacss-media-queries/lab/demo.html new file mode 100644 index 0000000..585bfff --- /dev/null +++ b/01-smacss-media-queries/lab/demo.html @@ -0,0 +1,24 @@ + + + + + + Page Title + + + + + + + +
+
Article1
+
Article2
+ sports1 + sports2 + sports3 + sports4 +
footer
+
+ + \ No newline at end of file From c792497bc76b444f3521541b6beaf2660aa9f6bd Mon Sep 17 00:00:00 2001 From: Greg Hsieh Date: Tue, 9 Oct 2018 19:37:03 -0400 Subject: [PATCH 2/3] lab work and daily --- .../for-each/challenges-01.test.js | 190 ++++++++++++++++++ 1 file changed, 190 insertions(+) create mode 100644 01-smacss-media-queries/for-each/challenges-01.test.js diff --git a/01-smacss-media-queries/for-each/challenges-01.test.js b/01-smacss-media-queries/for-each/challenges-01.test.js new file mode 100644 index 0000000..a5b1bd3 --- /dev/null +++ b/01-smacss-media-queries/for-each/challenges-01.test.js @@ -0,0 +1,190 @@ +'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) => { + // Solution code here... +} + +const addNumbers = (num, arr, times, callback) => { + // Solution code here... +} + +/* ------------------------------------------------------------------------------------------------ +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... +} + +const removeElements = (arr, callback) => { + // Solution code here... +} + +/* ------------------------------------------------------------------------------------------------ +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... +} + +/* ------------------------------------------------------------------------------------------------ +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: the element, the index, and the array. +------------------------------------------------------------------------------------------------ */ + +const removeWithAnon = (arr) => { + // Solution code here... +} + +/* ------------------------------------------------------------------------------------------------ +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... +} + +/* ------------------------------------------------------------------------------------------------ +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... +} + +/* ------------------------------------------------------------------------------------------------ +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); + }); +}); From a034749fa460ed16ba026b8b0a172b73624b75a1 Mon Sep 17 00:00:00 2001 From: Greg Hsieh Date: Tue, 9 Oct 2018 20:49:58 -0400 Subject: [PATCH 3/3] working on challenge 01 --- .../{challenges-01.test.js => challenges-01X.test.js} | 0 .../for-each/challenges-01.test.js | 11 ++++++----- 2 files changed, 6 insertions(+), 5 deletions(-) rename 01-smacss-media-queries/challenges/{challenges-01.test.js => challenges-01X.test.js} (100%) diff --git a/01-smacss-media-queries/challenges/challenges-01.test.js b/01-smacss-media-queries/challenges/challenges-01X.test.js similarity index 100% rename from 01-smacss-media-queries/challenges/challenges-01.test.js rename to 01-smacss-media-queries/challenges/challenges-01X.test.js diff --git a/01-smacss-media-queries/for-each/challenges-01.test.js b/01-smacss-media-queries/for-each/challenges-01.test.js index a5b1bd3..63fd0c1 100644 --- a/01-smacss-media-queries/for-each/challenges-01.test.js +++ b/01-smacss-media-queries/for-each/challenges-01.test.js @@ -15,8 +15,7 @@ const greeting = word => { const speaker = (message, callback) => { - return callback(message); - + return callback(message); }; /* ------------------------------------------------------------------------------------------------ @@ -36,11 +35,13 @@ Return the modified array. ------------------------------------------------------------------------------------------------ */ const addValues = (arr, value) => { - // Solution code here... + return arr[value]; } const addNumbers = (num, arr, times, callback) => { - // Solution code here... + callback(num); + callback(arr); + callback(times); } /* ------------------------------------------------------------------------------------------------ @@ -80,7 +81,7 @@ Write a function named removeWithAnon that produces the same output as challenge 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: the element, the index, and the array. +This anonymous function should accept up to three arguments(not needed): the element, the index, and the array. ------------------------------------------------------------------------------------------------ */ const removeWithAnon = (arr) => {