diff --git a/00-prep/lab/1-ES6-practice/arrow-functions/app.js b/00-prep/lab/1-ES6-practice/arrow-functions/app.js index 362aab2..eb3003d 100644 --- a/00-prep/lab/1-ES6-practice/arrow-functions/app.js +++ b/00-prep/lab/1-ES6-practice/arrow-functions/app.js @@ -7,7 +7,7 @@ const theOldWay = function(course) { }; // TODO: Uncomment the following line of code to see the output in the browser console -// console.log('The old way:', theOldWay('Code 301')); +console.log('The old way:', theOldWay('Code 301')); // STEP 2 @@ -18,7 +18,7 @@ const theNewWay = (course) => { }; // TODO: Uncomment the following line of code to see the output in the browser console -// console.log('The new way:', theNewWay('Code 301')); +console.log('The new way:', theNewWay('Code 301')); // STEP 3 @@ -28,7 +28,7 @@ const withoutParens = course => { }; // TODO: Uncomment the following line of code to see the output in the browser console -// console.log('Without parens:', withoutParens('Code 301')); +console.log('Without parens:', withoutParens('Code 301')); // STEP 4 @@ -38,7 +38,7 @@ const withoutParens = course => { const oneLiner = course => `I cam currently enrolled in ${course}`; // TODO: Uncomment the following line of code to see the output in the browser console -// console.log('As a one-liner:', oneLiner('Code 301')); +console.log('As a one-liner:', oneLiner('Code 301')); // STEP 5 @@ -49,7 +49,7 @@ const add = function(num1, num2) { }; // TODO: Uncomment the following line of code to see the output in the browser console -// console.log('Let\'s do some math:', add(4, 5)); +console.log('Let\'s do some math:', add(4, 5)); // STEP 6 @@ -58,7 +58,7 @@ const add = function(num1, num2) { const addOneLiner = (num1, num2) => `${num1} + ${num2} = ${num1 + num2}`; // TODO: Uncomment the following line of code to see the output in the browser console -// console.log('Add as a one-liner:', addOneLiner(4, 5)); +console.log('Add as a one-liner:', addOneLiner(4, 5)); // STEP 7 @@ -70,7 +70,7 @@ const multiLiner = word => { }; // TODO: Uncomment the following line of code to see the output in the browser console -// console.log('Multi-line arrow function:', multiLiner('hello')); +console.log('Multi-line arrow function:', multiLiner('hello')); // STEP 8 @@ -85,7 +85,7 @@ const oldObject = function(array) { }; // TODO: Uncomment the following line of code to see the output in the browser console -// console.log('Hello from the old object function', oldObject(['hi', 'hello', 'are you there?'])); +console.log('Hello from the old object function', oldObject(['hi', 'hello', 'are you there?'])); // STEP 9 @@ -98,44 +98,40 @@ const newObject = array => ({ }); // TODO: Uncomment the following line of code to see the output in the browser console -// console.log('Hello from the new object function', newObject(['hi', 'hello', 'are you there?'])); +console.log('Hello from the new object function', newObject(['hi', 'hello', 'are you there?'])); // STEP 10 // Uncomment the console.log lines to view the output of each function in the browser console. // Refactor each function into an arrow function. -// Write your solutions on a single line wherever possible. +// Write your solutions on a single line wherever possible. -let sum = function(a, b, c, d) { - return a + b + c + d; -}; +let sum = (a, b, c, d) => ( a + b + c + d); // TODO: Uncomment the following line of code to see the output in the browser console -// console.log(sum(1, 2, 3, 4)); +console.log(sum(1, 2, 3, 4)); -let objectLit = function() { - return { - key1: 'value1', - key2: 'value2', - key3: 'value3', - }; -}; +let objectLit = () => ({ + key1: 'value1', + key2: 'value2', + key3: 'value3' +}); // TODO: Uncomment the following line of code to see the output in the browser console -// console.log(objectLit()); +console.log(objectLit()); -let sumAndProduct = function(a, b) { +let sumAndProduct = (a, b) => { let sum = a + b; let product = a * b; return [sum, product]; }; // TODO: Uncomment the following line of code to see the output in the browser console -// console.log(sumAndProduct(3, 9)); +console.log(sumAndProduct(3, 9)); let message = function(name) { @@ -143,7 +139,7 @@ let message = function(name) { }; // TODO: Uncomment the following line of code to see the output in the browser console -// console.log(message('Allie')); +console.log(message('Allie')); let Student = function(name, age, hometown) { @@ -156,7 +152,7 @@ let joe = new Student('Joe', 'Schmoe', 100); // TODO: Uncomment the following line of code to see the output in the browser console // Note that the arrow function will cause this code to break! -// console.log(joe); +console.log(joe); Student.prototype.greeting = function() { @@ -165,15 +161,13 @@ Student.prototype.greeting = function() { // TODO: Uncomment the following line of code to see the output in the browser console // Note that the arrow function will cause this method to break! -// console.log(joe.greeting()); +console.log(joe.greeting()); -Student.courseName = function() { - return 'This student is enrolled in Code 301.'; -}; +Student.courseName = () => ('This student is enrolled in Code 301.'); // TODO: Uncomment the following line of code to see the output in the browser console -// console.log(Student.courseName()); +console.log(Student.courseName()); @@ -184,17 +178,17 @@ Student.prototype.scope = function() { }; // TODO: Uncomment the following line of code to see the output in the browser console -// console.log(joe.scope()); +console.log(joe.scope()); Student.prototype.scopeArrow = () => console.log(this); // TODO: Uncomment the following line of code to see the output in the browser console -// console.log(joe.scopeArrow()); +console.log(joe.scopeArrow()); // TODO: Write a COMMENT below to answer the following questions. // 1. What is "this" when joe.scope() is invoked? -// +//"this" is an object when joe.scope() is invoked; it is the student object with properties of name, age, and hometoown // 2. What is "this" when joe.scopeArrow() is invoked? -// +//"this" is undefined with joe.scopeArrow() becuase arrow functions do not bind "this" so the context of "this" goes up to global window object // 3. Explain why "this" is different when an arrow function is used. -// +//arrow functions do not bind this so "this" is becomes part of global window object and in that setting, the variable "this" is not defined diff --git a/00-prep/lab/1-ES6-practice/let-const/js/app.js b/00-prep/lab/1-ES6-practice/let-const/js/app.js index eacd903..0a217ba 100644 --- a/00-prep/lab/1-ES6-practice/let-const/js/app.js +++ b/00-prep/lab/1-ES6-practice/let-const/js/app.js @@ -1,24 +1,24 @@ 'use strict'; -var names = ['bag', 'banana', 'bathroom', 'boots', 'breakfast', 'bubblegum', 'chair', 'cthulhu', 'dog-duck', 'dragon', 'pen', 'pet-sweep', 'scissors', 'shark', 'sweep', 'tauntaun', 'unicorn', 'usb', 'water-can', 'wine-glass']; +const names = ['bag', 'banana', 'bathroom', 'boots', 'breakfast', 'bubblegum', 'chair', 'cthulhu', 'dog-duck', 'dragon', 'pen', 'pet-sweep', 'scissors', 'shark', 'sweep', 'tauntaun', 'unicorn', 'usb', 'water-can', 'wine-glass']; -var leftImage = document.getElementById('left'); -var centerImage = document.getElementById('center'); -var rightImage = document.getElementById('right'); +const leftImage = document.getElementById('left'); +const centerImage = document.getElementById('center'); +const rightImage = document.getElementById('right'); -var allProducts = []; -var container = document.getElementById('image_container'); -var viewed = []; -var labels = []; -var pics = [leftImage, centerImage, rightImage]; -var list = document.getElementById('productlist'); -var totalClicks = 0; -var views = []; -var votes = []; +let allProducts = []; +const container = document.getElementById('image_container'); +const viewed = []; +const labels = []; +const pics = [leftImage, centerImage, rightImage]; +const list = document.getElementById('productlist'); +let totalClicks = 0; +const views = []; +const votes = []; function Product(name) { this.name = name; - this.path = 'img/' + name + '.jpg'; + this.path = `img ${name} .jpg`; this.votes = 0; this.views = 0; allProducts.push(this); @@ -30,18 +30,17 @@ function makeRandom() { function displayPics(){ while(viewed.length < 6){ - var rando = makeRandom(); + const rando = makeRandom(); while(!viewed.includes(rando)){ viewed.push(rando); } } - console.log(rando); - // TODO: In a sentence or two, explain why the previous line of code threw an error when we changed the variable declaration from `var to `let`. - // PUT YOUR RESPONSE IN THIS COMMENT + // TODO: In a sentence or two, explain why the previous line of code threw an error when we changed the variable declaration from `const to `const`. + // The variable const is scoped to a local code block and is not defined outside of the function displayPics(); console.log(viewed); - for (var i = 0; i < 3; i++){ - var temp = viewed.shift(); + for (let i = 0; i < 3; i++){ + const temp = viewed.shift(); pics[i].src = allProducts[temp].path; pics[i].id = allProducts[temp].name; allProducts[temp].views += 1; @@ -59,10 +58,10 @@ function handleClick(event) { showList(); makeChart(); } - for(var i = 0; i < names.length; i++){ + for(let i = 0; i < names.length; i++){ if(event.target.id === allProducts[i].name) { allProducts[i].votes += 1; - console.log(event.target.id + ' has ' + allProducts[i].votes + ' votes in ' + allProducts[i].views + ' views'); + console.log(`${event.target.id} has ${allProducts[i].votes} votes in ${allProducts[i].views} views`); } } localStorage.busmall = JSON.stringify(allProducts); @@ -71,9 +70,9 @@ function handleClick(event) { } function showList() { - for(var i = 0; i < allProducts.length; i++) { - var liEl = document.createElement('li'); - liEl.textContent = allProducts[i].name + ' has ' + allProducts[i].votes + ' votes in ' + allProducts[i].views + ' views'; + for(let i = 0; i < allProducts.length; i++) { + const liEl = document.createElement('li'); + liEl.textContent = `${allProducts[i].name} has ${allProducts[i].votes} votes in ${allProducts[i].views} views`; list.appendChild(liEl); } } @@ -88,7 +87,7 @@ function makeChartData(){ function makeChart(){ makeChartData(); - var ctx = document.getElementById('chartypants').getContext('2d'); + const ctx = document.getElementById('chartypants').getContext('2d'); new Chart(ctx, { //eslint-disable-line type: 'bar', data: { @@ -128,7 +127,7 @@ if(localStorage.busmall){ allProducts = JSON.parse(localStorage.busmall); } else { console.log('There is no local storage data; initialize app by creating instances'); - for(var i = 0; i < names.length; i++) { + for(let i = 0; i < names.length; i++) { new Product(names[i]); } } diff --git a/00-prep/lab/2-SMACSS-practice/starter-code/index.html b/00-prep/lab/2-SMACSS-practice/starter-code/index.html index ea323c0..8b419df 100644 --- a/00-prep/lab/2-SMACSS-practice/starter-code/index.html +++ b/00-prep/lab/2-SMACSS-practice/starter-code/index.html @@ -4,7 +4,11 @@ Choco Pizza - + + + + +
diff --git a/00-prep/lab/2-SMACSS-practice/starter-code/styles/base.css b/00-prep/lab/2-SMACSS-practice/starter-code/styles/base.css new file mode 100644 index 0000000..1d407f8 --- /dev/null +++ b/00-prep/lab/2-SMACSS-practice/starter-code/styles/base.css @@ -0,0 +1,57 @@ +@import url('https://fonts.googleapis.com/css?family=Abel|Oswald:700|Yellowtail|Patrick+Hand'); +* { + font-family: times; + } + + body { + background: #fff; + } + + h2 { + font-family: 'Oswald', sans-serif; + font-size: 2.5em; + } + + hr { + background-image: url('img/hr-img.gif'); + } + + main p { + color: #333; + font-size: 1.2em; + line-height: 1.3em; + text-indent: 30px; + } + + input { + font-family: 'Patrick Hand', cursive; + } + + aside h3 { + font-size: 1.6em; + color: #555; + } + + aside p { + text-indent: 0; + } + + aside button { + font-family: 'Abel', sans-serif; + text-transform: uppercase; + background: #b8705a; + color: #fff; + font-size: 1.2em; + border: none; + } + + section hr { + border-bottom: 1px solid #eee; + } + + + footer section p{ + line-height: 1.5em; + text-align: center; + color: #aaa; + } \ No newline at end of file diff --git a/00-prep/lab/2-SMACSS-practice/starter-code/styles/layout.css b/00-prep/lab/2-SMACSS-practice/starter-code/styles/layout.css new file mode 100644 index 0000000..d09d6e6 --- /dev/null +++ b/00-prep/lab/2-SMACSS-practice/starter-code/styles/layout.css @@ -0,0 +1,53 @@ + + nav, article, aside, footer section { + margin: 0 auto; + width: 900px; + } + + nav { + margin-top: 25px; + } + + h2 { + margin-top: 50px; + } + + hr { + clear: both; + border: 0; + height: 13px; + } + main p { + margin: 20px 0px; + } + aside { + padding-top: 30px; + padding-bottom: 60px + } + + aside img { + float: left; + } + + aside h3 { + padding-left: 100px; + padding-bottom: 10px; + } + + aside p { + padding-left: 100px; + width: 65%; + margin: 0; + } + + aside button { + float: right; + padding: 15px 40px; + } + section hr { + height: 0; + } + + footer section p{ + padding: 50px 0; + } \ No newline at end of file diff --git a/00-prep/lab/2-SMACSS-practice/starter-code/styles/modules.css b/00-prep/lab/2-SMACSS-practice/starter-code/styles/modules.css new file mode 100644 index 0000000..7258f5a --- /dev/null +++ b/00-prep/lab/2-SMACSS-practice/starter-code/styles/modules.css @@ -0,0 +1,75 @@ +#logo { + float: left; + padding-bottom: 25px; + color: black; + text-decoration: none; + } +#logo img { + float: left; + } + + #logo h1 { + padding-left: 50px; + font-family: 'Yellowtail', cursive; + font-size: 2.4em; + } + + #slogan { + width: 250px; + padding-left: 55px; + color: #a3a4a2; + font-family: 'Abel', sans-serif; + font-size: .65em; + text-transform: uppercase; + } + + nav ul { + float: right; + } + + nav li { + float: left; + padding-right: 2px; + } + + +.print, .date { + color: #a9a8a5; + font-family: 'Abel', sans-serif; + font-size: .8em; + margin: 0; + text-transform: uppercase; + margin-top: 10px; + margin-bottom: 33px; +} + + +.date { + float: left; +} +.print { + text-decoration: none; + padding-left: 30px; + float: right; + } + + .print img { + margin-right: 3px; + } + + .recipe { + letter-spacing: .1em; + font-family: 'Patrick Hand', cursive; + color: #666a42; + background-image: url("img/list-bg.png"); + height: 260px; + padding: 37px 0 0 60px; + margin: 40px 0; + } + + .recipe li { + float: left; + width: 40%; + font-size: 1.3em; + line-height: 31px; + } \ No newline at end of file diff --git a/00-prep/lab/2-SMACSS-practice/starter-code/styles/style.css b/00-prep/lab/2-SMACSS-practice/starter-code/styles/style.css deleted file mode 100644 index c144261..0000000 --- a/00-prep/lab/2-SMACSS-practice/starter-code/styles/style.css +++ /dev/null @@ -1,170 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Abel|Oswald:700|Yellowtail|Patrick+Hand'); - -* { - font-family: times; -} - -body { - background: #fff; -} - -nav, article, aside, footer section { - margin: 0 auto; - width: 900px; -} - -nav { - margin-top: 25px; -} - -#logo { - float: left; - padding-bottom: 25px; - color: black; - text-decoration: none; -} - -#logo img { - float: left; -} - -#logo h1 { - padding-left: 50px; - font-family: 'Yellowtail', cursive; - font-size: 2.4em; -} - -#slogan { - width: 250px; - padding-left: 55px; - color: #a3a4a2; - font-family: 'Abel', sans-serif; - font-size: .65em; - text-transform: uppercase; -} - -nav ul { - float: right; -} - -nav li { - float: left; - padding-right: 2px; -} - -hr { - clear: both; - border: 0; - height: 13px; - background-image: url('img/hr-img.gif'); -} - -h2 { - margin-top: 50px; - font-family: 'Oswald', sans-serif; - font-size: 2.5em; -} - -.print, .date { - color: #a9a8a5; - font-family: 'Abel', sans-serif; - font-size: .8em; - margin: 0; - text-transform: uppercase; - margin-top: 10px; - margin-bottom: 33px; -} - -.date { - float: left; -} - -.print { - text-decoration: none; - padding-left: 30px; - float: right; -} - -.print img { - margin-right: 3px; -} - -main p { - color: #333; - font-size: 1.2em; - line-height: 1.3em; - text-indent: 30px; - margin: 20px 0px; -} - -input { - font-family: 'Patrick Hand', cursive; -} - -.recipe { - letter-spacing: .1em; - font-family: 'Patrick Hand', cursive; - color: #666a42; - background-image: url("img/list-bg.png"); - height: 260px; - padding: 37px 0 0 60px; - margin: 40px 0; -} - -.recipe li { - float: left; - width: 40%; - font-size: 1.3em; - line-height: 31px; -} - -aside { - padding-top: 30px; - padding-bottom: 60px -} - -aside img { - float: left; -} - -aside h3 { - padding-left: 100px; - font-size: 1.6em; - padding-bottom: 10px; - color: #555; -} - -aside p { - padding-left: 100px; - width: 65%; - margin: 0; - text-indent: 0; - -} - -aside button { - float: right; - font-family: 'Abel', sans-serif; - text-transform: uppercase; - padding: 15px 40px; - background: #b8705a; - color: #fff; - font-size: 1.2em; - border: none; -} - -section hr { - border-bottom: 1px solid #eee; - height: 0; -} - - -footer section p{ - padding: 50px 0; - line-height: 1.5em; - text-align: center; - color: #aaa; -} - - -} diff --git a/01-smacss-media-queries/challenges/challenges-01.test.js b/01-smacss-media-queries/challenges/challenges-01.test.js index f9ca403..098e3c1 100644 --- a/01-smacss-media-queries/challenges/challenges-01.test.js +++ b/01-smacss-media-queries/challenges/challenges-01.test.js @@ -9,13 +9,14 @@ Then, write a function named speaker that takes in a string and a callback funct ------------------------------------------------------------------------------------------------ */ const greeting = (word) => { - // Solution code here... -} +// Solution code here... + return word.toUpperCase(); +}; const speaker = (message, callback) => { - // Solution code here... -} - +// Solution code here... + return callback(message); + }; /* ------------------------------------------------------------------------------------------------ CHALLENGE 2 @@ -133,7 +134,6 @@ 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!'); diff --git a/01-smacss-media-queries/lab/base.css b/01-smacss-media-queries/lab/base.css new file mode 100644 index 0000000..fc12b7d --- /dev/null +++ b/01-smacss-media-queries/lab/base.css @@ -0,0 +1,27 @@ +body{ + background-color: lightblue; +} +nav{ + background-color: white; +} +aside { + background-color: grey; +} +.section-container { + background-color: pink; +} +section { + background-color:purple; +} +.four-boxes { + background-color: blue; +} +article { + background-color: yellow; +} +.four-boxes article { + background-color: white; +} +footer { + background-color: green; +} \ No newline at end of file diff --git a/01-smacss-media-queries/lab/index.html b/01-smacss-media-queries/lab/index.html new file mode 100644 index 0000000..8e41f73 --- /dev/null +++ b/01-smacss-media-queries/lab/index.html @@ -0,0 +1,23 @@ + + + + + + Page Title + + + + + + + +
c
+
d
+
e
+
f
+
g
+
h
+ + + + \ No newline at end of file diff --git a/01-smacss-media-queries/lab/layout.css b/01-smacss-media-queries/lab/layout.css new file mode 100644 index 0000000..169ea56 --- /dev/null +++ b/01-smacss-media-queries/lab/layout.css @@ -0,0 +1,54 @@ +body{ + width: 100%; +} +@media(min-width: 768px){ + nav{ + width:100%; + height:100px; + } + aside { + width: 20%; + height: 600px; + float: left; + } + article { + width: 40%; + height: 200px; + float: left; + } + section { + width: 20%; + height: 250px; + float: left; + } + footer { + width: 80%; + height: 150px; + float: left; + } +} + +@media(max-width: 768px) { + nav{ + height: 75px; + } + aside { + width: 100%; + height: 150px; + } + article { + width: 50%; + height: 250px; + float:left; + } + section { + width: 50%; + height: 125px; + float:left; +} + footer { + width: 100%; + height: 150px; + float: left; + } +} \ No newline at end of file