As a user, I would like to display three unique products by chance so that the viewers can pick a favorite.
Create a constructor function that creates an object associated with each product, and has the following properties:
As a user, I would like to track the selections made by viewers so that I can determine which products to begin production on.
In the constructor function define a property to hold the number of times a product has been clicked.
After every selection by the viewer, update the newly added property to reflect if it was clicked.
As a user, I would like to control the number of rounds a user is presented with so that I can control the voting session duration.
By default, the user should be presented with 25 rounds of voting before ending the session.
Keep the number of rounds in a variable to allow the number to be easily changed for debugging and testing purposes.
As a user, I would like to view a report of results after all rounds of voting have concluded so that I can evaluate which products were the most popular.
Create a property attached to the constructor function itself that keeps track of all the products that are currently being considered.
After voting rounds have been completed, remove the event listeners on the product.
Add a button with the text View Results, which when clicked displays the list of all the products followed by the votes received, and number of times seen for each. Example: banana had 3 votes, and was seen 5 times.
dog-duck.jpg should be displayed to the user as exactly “dog-duck” when the results are shown.Using Lighthouse in the Chrome DevTools, analyze the accessibility of your application.
In this module, try for a score higher than 80. Make necessary adjustments based on the report to achieve that score.
Add a screenshot of your score to your README.md file.
Developer Style Guide
Create a new repo for this multi-lab project called odd-duck.
Scaffold your repo with the usual README, CSS, JS, and HTML files, plus a img/ directory.
Include in your repository a .eslintrc.json file whose contents are copied from the eslintrc.json file in the class repository.
Retrieve the assets from the assets/ directory and place them in your image directory.
Do today’s work on a branch called lab11.
This is an individual assignment today, but you are free to collaborate with classmates if you want. Just be sure that if you do, be sure to make note of that collaboration in your README file.
// Global Variables
// elements, and counters, and state
const goatsContainer = document.getElementById("goats");
const reportContainer = document.getElementById("report");
// querySelectorAll = list of elements
// querySelector = 1 element
const image1 = document.querySelector('#goats img:first-child');
const image2 = document.querySelector('#goats img:nth-child(2)');
const button = document.getElementById("showResults");
// variable way:
// let numClicksSoFAr = 0;
// let numClicksAllowed = 5;
// let allGoats = [];
// The global "State" of the application
let state = {
numClicksSoFar: 0,
numClicksAllowed: 5,
allGoats: [],
};
// Constructor
function Goat( name, image ) {
this.name = name;
this.imageFile = image;
this.votes = 0;
this.views = 0;
state.allGoats.push(this);
}
// Helper Functions
function renderGoats() {
// pick 2 random goats from our array
function pickRandomGoat() {
return Math.floor( Math.random() * state.allGoats.length );
}
let goat1 = pickRandomGoat(); // 4
let goat2 = pickRandomGoat(); // 6
// If they are different to start with
while( goat1 === goat2 ) {
goat2 = pickRandomGoat();
}
// put the goats on screen
// <img src="" alt="" />
image1.src = state.allGoats[goat1].imageFile;
image1.alt = state.allGoats[goat1].name;
image2.src = state.allGoats[goat2].imageFile;
image2.alt = state.allGoats[goat2].name;
state.allGoats[goat1].views++;
state.allGoats[goat2].views++;
}
function renderResultsButton() {
button.style.display = "block";
}
function renderResults() {
console.log("Showing the results");
}
function handleClick(event) {
// Get the name from the alt tage of the image
let goatName = event.target.alt;
// Loop the array and find that goat, update the vote and stop
for ( let i = 0; i < state.allGoats.length; i++ ) {
if( goatName === state.allGoats[i].name ) {
state.allGoats[i].votes++;
break;
}
}
state.numClicksSoFar++;
if(state.numClicksSoFar >= state. numClicksAllowed) {
// remove the event handler
removeListener();
// show the button which would let you render the results
renderResultsButton();
} else {
renderGoats();
}
}
function setupListeners() {
// Old way = inline function
// goatsContainer.addEventListener('click", function(event) { });
// Better way: named callback
goatsContainer.addEventListener("click", handleClick);
button.addEventListener("click", renderResults)
// Alternatively: have an event listener oneach images
// image1.addEventListener("click", handleClick);
// image2.addEventListener("click", handleClick);
}
function removeListener() {
goatsContainer.removeEventListener("click", handleClick);
}
// Do I need to make these into variables????
// If not (hint), how can I do it without making them variables?
new Goat("Cruisin Goat", "images/cruisin-goat.jpg");
new Goat("Float Your Goat", "images/float-your-goat.jpg");
new Goat("Goat out of Hand", "images/goat-out-of-hand.jpg");
new Goat("Kissing Goat", "images/kissing-goat.jpg");
new Goat("Sassy!", "images/sassy-goat.jpg");
new Goat("Smiling Goat", "images/smiling-goat.jpg");
new Goat("Sweater Goat", "images/sweater-goat.jpg");
renderGoats();
setupListeners();a
// debugger;
Audio and Video implementations in semantic HTML.
<audio> and <video> elements are used to embed media files. Attributes such as src specify the source file, controls enable user interaction, and autoplay starts playback automatically.User stories in a development environment.
[user type], I want [an action] so that [benefit/value].” User stories help define the functionality from the user’s perspective and guide development teams in creating features that meet users’ needs.What is Object-Oriented Programming?
To use CSS Grid, the parent element (container) must have the display property set to what value?
display: gridThe Array method of push() adds one or more elements to the end of an array.
The Array method of pop() removes the last element from an array.
The Array method of shift() removes the first element from an array.
The Array method of unshift() adds one or more elements to the beginning of an array.
The Array method of splice() changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
Bookmark and Review: Images in HTML and Other Embedding Technologies
Statement on why this topic matter as it relates to what I’m studying in this module:
proprietary plugin-based tech which is software owned by a company and not open source that allows developers to create plugins for it that adds functionality. But those had security and accessibility issues so now video and <audio elements are used in HTML.src and controls attributes in the <video> element.src: specifies the path to the embedded video file, similar to the src used in <img>controls: enables users to manage video and audio playback. It allows controls like play, pause, and volume adjustments, which is a useful accessibility issue.<video> element?<video> so by using a <p> tag inside the <video>element it adds a direct link to the video file so the fallback is just an alternative way to access the video no matter the browser used.<audio> and <video> are characters.There were two siblings who both grew up to have incredible artistic talent. Audi was a singer and vidi was a painter and filmmaker but honestly whatever she could image she could visually create. They both worked together on projects and artwork that created an immersive experience with imagery from vidi and sound from audi.
Grid Layout: you can create complex layouts by defining rows and columns, and placing items into specific grid cells versus…
Flexbox: a method to layout items in rows or columns by distributing space along an axis or in containers
-
Grid Container: the parent element that holds all the grid items. Use display: grid; to an element, and it turns into a grid container. It creates a new grid formatting for its contents.Grid Item: the direct children of a grid container. They are the elements placed inside the grid cells. They can go across multiple rows and columns.Grid Line: the dividing lines that make up the structure of the grid. They separate the columns and rows and can be either horizontal (rows) or vertical (columns). Items can be placed on these grid lines or across multiple grid lines.<img> attributes srcset and sizes. Write an example of how they are used.srcset: gives you the option to specify multiple images with their widths in pixels using the w unit instead of px and the browser uses that extra information to choose which image is more compatible based on the user’s device.sizes:srcset more helpful for responsive images than CSS or JavaScript?Use these resources to learn how to create your personal-professional pitch. Aim for your pitch to be 30 to 60 seconds. Submit a written version.
How to create a professional pitch: Guide I and Guide II
Elevator Pitch Basics:
Crafting Your Pitch:
Putting It All Together:
Examples of Elevator Pitches:
Key Takeaways:
Be prepared to utilize your personal pitch on project demo day when introducing yourself. Use these questions to guide you as you write.
What were you doing before you decided to change careers?
Why did you decide to learn Software Development?
Ideal environment you’d use this skill?
Written Version
Hi there, I’m Xin Deng, and I’m starting an exciting journey from veterinary clinic team management to the forward-thinking world of software development. While working as a lead receptionist, I honed my multitasking and problem-solving skills. But, I felt stagnant and knew I needed a change to pursue a more fulfilling and stable career path that involved a lot more creativity and impact. I entered this field because it merges creativity with the potentials of technology. But what really motivates me is the opportunity to design user-friendly applications and be a part of pioneering innovations. I excel in environments where collaboration is central, and where progressive ideas come to life. My advantage lies in my background in client-facing roles, where I’ve come to understand the importance of seamless user interactions. I’m excited to apply this expertise in the tech industry. With strong problem-solving skills and effective communication abilities, I’m looking forward to making a valuable contribution to any software development team.
Write a brief reflection on your learning today, or use the prompt below to get started.
There’s an old saying: “Experience is what you get when you didn’t get what you wanted.” What strategies do you use for learning from disappointments (both big and small) so that the net experience becomes productive and positive?