Hello wanderer, 
And welcome to My Codefellows Bus-Mall Lab!
- Create a constructor function that creates an object associated with each product,
- Create an algorithm that will randomly generate three unique product images from the images directory and display them side-by-side-by-side in the browser window.
- Ensure that no two same photos are presented at the same time.
- For each of the three images, increment its property of times it has been shown by one.
- Attach an event listener to the section of the HTML page where the images are going to be displayed.
- Once the users "click" a product, generate three new products for the user to pick from.
- User should be able to cast 25 votes. [Lab 11 Requirements]
- Update your algorithm to randomly generate three unique product images from the images directory.
- Update your algorithm so that new products are generated, confirm that these products are not duplicates from the immediate previous set.
- Using ChartJS (imported from CDN), display the vote totals and the number of times a product was viewed in a bar chart format. (hint: don’t forget about the
<canvas>tags) - Place the bar chart in the section located beneath your three product images.
- The bar charts should only appear after all voting data has been collected. [Lab 12 Requirements]
- Implement local storage into your current application.
- Make sure the data persists across both browser refreshes and resets. [Lab 13 Requirements]
"Try some additional charting types based off of some of the other data you collected and display them in addition to the required bar chart"
In Collaboration With Audrey/ TA Ron/Shelby / Lorenzo | pop method / while loop logic
This lab was a rollecoaster for me! It helped me develop a new strategy for learning:
Semper gumby = How can I remain Always flexible?
The main thing I am realizing is that developing tact in my code is very important. Tact in relationship to what is the standard for design and functionality and the intersections that will allowme to be creative.
The biggest hurdle I have had is with my naming conventions. Bus mall really drove this home with DOM rendering and labeling sections or containers etc. Mess those up and you may just have those fuddles follow you into the css. I have had moments where I though data was not populating only to find out that I never set any styling parameters to show my said data.
My ongoing strategy is to ease up on how I want to name things because sometimes what I want to call something poorly reflects what that something does.
Another sttrategy = This stuffs all hard = ask questions but even better dont be afraid to say you dont know what questions to ask. Just reach for some support.
Bus Mall Tutorial class guide
CSS reset Meyers Reset
Head over to jsdelivr for the charts script tag! 👇🏾select 👉🏾 github
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script> > This example returns a random integer between
the specified values. The value is no lower than
min (or the next integer greater than min if min
is not an integer), and is less than (but not equal to) max.
function getRandomInt(min, max) {
return Math.floor(Math.random() * all; //The maximum is exclusive and the minimum is inclusive
} > his method lets you determine whether
or not a string includes another string.
$ this method is case sensitive $
const sentence = 'The quick brown fox jumps over the lazy dog.';
const word = 'fox';
console.log(`The word "${word}" ${sentence.includes(word) ? 'is' : 'is not'} in the sentence`);
// expected output: "The word "fox" is in the sentence" > The pop method removes the last element from an array
and returns that value to the caller.
const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
console.log(plants.pop());
// expected output: "tomato"
console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]
plants.pop();
console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage"]The following code displays the myFish array before
and after removing its first element.
It also displays the removed element:
var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];
console.log('myFish before:', JSON.stringify(myFish));
// myFish before: ['angel', 'clown', 'mandarin', 'surgeon']
var shifted = myFish.shift();
console.log('myFish after:', myFish);
// myFish after: ['clown', 'mandarin', 'surgeon']
console.log('Removed this element:', shifted);
// Removed this element: angel//A Storage object which can be used to access the current origin's local storage space.
myStorage = window.localStorage;
// The following snippet accesses the current domain's local Storage object and adds
// a data item to it // using Storage.setItem().
localStorage.setItem('myCat', 'Tom');JSON.parse() | JSON.parse() Method
const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);
console.log(obj.count);
// expected output: 42
console.log(obj.result);
// expected output: true
// >>>> Using JSON.parse() <<<<
JSON.parse('{}'); // {}
JSON.parse('true'); // true
JSON.parse('"foo"'); // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null'); // nullJSON.stringify() | JSON.stringify Method
console.log(JSON.stringify({ x: 5, y: 6 }));
// expected output: "{"x":5,"y":6}"
console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));
// expected output: "[3,"false",false]"
console.log(JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }));
// expected output: "{"x":[10,null,null,null]}"
console.log(JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)));
// expected output: ""2006-01-02T15:04:05.000Z""
- February 15, 2021 WCAG 2.1 AA Level Web Accessibility Audit | Verdict : Compliant
- February 15, 2021 WAVE Web Accessibility Evaluation | Verdict : Compliant
This work by AL0YSI0US is licensed under a Creative Commons Attribution 4.0 International License.
This license lets others distribute, remix, adapt, and build upon your work, even commercially, as long as they credit you for the original creation. This is the most accommodating of licenses offered. Recommended for maximum dissemination and use of licensed materials.