Read the document in its entirety before beginning your lab. To view this lab assignment in its own tab, click HERE
Odd Duck Product Co is trying to decide which project from their R&D department they should invest in next to sell. They asked you to make a web page that they can run at a kiosk at the front entrance of their campus. Whenever an employee walks by, the employee can vote for 1 of the 3 products displayed that they think should be the next new product brought to market. After a week of collecting data, they would like some nice graphs to visualize the results.
To make this data collection project maximally effective, Odd Duck wants you to build an app that displays three potential products side-by-side-by-side, without favoring any single product. You’ll need to manage the size and the aspect ratio of the images.
As the app’s purpose is to have the staff members choose which product, of the three displayed images, that they would be most interested in seeing as a new creation, you will need to store each anonymous vote, calculate totals, and visually display the results.
To keep the product selection process as untainted as possible, you have been instructed to not allow any results to be shown to users until there have been a total of 25 selections made.
The marketing team is not only interested in the total number of clicks, but also the percentage of times that an item was clicked when it was shown. So, you’ll also need to keep track of how many times each image is displayed and do the calculations.
You are also responsible for the look and feel of the app, so don’t forget a custom font, color palette, layout with semantic HTML, and so on.
User stories are a device commonly used in software development to identify what the functionality and design of a product should be by considering the interests and motivations of people with varied multiple points of view. They are presented in the manner of
As a __, I want, so that __
This layout allows a client to communicate to a team what type of behavior they are looking for and allow the developer team to think up a solution that best fits the clients need.
The development team will then create sub-bullets called Feature Tasks which are individual tasks that must be completed by the developer to accomplish the user story. Once all of the feature tasks for an individual user story is completed, so is the story.
Below are your lab requirements in this format. Try and think up what the feature tasks would be for each story, once your done, or you get stuck, review the provided feature tasks to see what the actual tasks are for each story.
As a user, I would like to display three unique products by chance so that the viewers can pick a favorite.
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.
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.
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.
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.
NOTE: Displayed product names should match the file name for the product. Example: the product represented with
dog-duck.jpgshould 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.
<img> tagsThe assets for this lab can be found in your class11/lab/assets folder of your daily class repo.
Provided in your class repo is a suggested wireframe to follow while building out your Odd Duck Products application.
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.
main.main.