diff --git a/class-01/lab-a/starter-code/js/app.js b/class-01/lab-a/starter-code/js/app.js index 774ab98..0ca544c 100644 --- a/class-01/lab-a/starter-code/js/app.js +++ b/class-01/lab-a/starter-code/js/app.js @@ -1,20 +1,20 @@ '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; @@ -30,18 +30,18 @@ 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 letiable declaration from `var to `let`. + //Answer:rando is the block variable and context for rando expires after the block and hence not accessible. 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 +59,11 @@ 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,8 +72,8 @@ function handleClick(event) { } function showList() { - for(var i = 0; i < allProducts.length; i++) { - var liEl = document.createElement('li'); + 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 +89,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 +129,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]); } }