Lab: Salmon Cookies

Read this lab assignment in its entirety before beginning your lab. You may want to open it in a new tab.

Problem Domain

Your friend Pat has come up with a business idea by combining his love for sweets and his passion for healthy ecosystems. Pat has developed a recipe for a coffee-time confection called Salmon Cookies. These cookies made into the shape of a salmon and are suitable for both humans and salmon to enjoy.

Pat needs some help with the branding of the business, as well as some help with internal data management for the company, and has enlisted your assistance because of your extensive and proven work in developing web applications.

Pat’s Salmon Cookies, soon with franchises internationally, needs a proof of concept application to calculate the number of cookies each location must make every day so that it can manage its supplies inventory and baking schedule. The number of cookies to make depends on the hours of operation (6:00 AM to 8:00 PM for all locations) and a few factors unique to each location:

Because we are early in the life of this business, we will need to build an application that is adaptable. Pat will need to be able to add and remove locations from the daily projections report, and Pat will also need to be able to easily modify the input numbers for each location based on day of the week, special events, and other factors. Pat would like to see these numbers with nice formatting in a web application.

Pat needs you to take a leading role in implementing the design work and construction of a public-facing page as well. The design team has created a logo image (below), and the framework for the look and feel of the website including the color scheme, fonts, and additional images for the public facing site.

A salmon

So, in addition to building an application that calculates daily sales projections for each location (on a page called sales.html), you also need to create a public-facing page (on the homepage index.html) that matches the mock-up created by the design team, and includes the required information and assets.

You’ve got a lot to do. Plan your work, and work your plan.

Home Page

Mockup - Home Page

Sales Page (Initial Version)

Mockup - Sales Page

Sales Page (Final Version)

Mockup - Sales Page

Instructions

Before you begin, create a new repository within GitHub called “cookie-stand”. Make sure that this repository is properly set up with a license and a readme. Clone this repo down to your local machine.

Create two new pages within your project. One for Sales Data (sales.html) and another for the homepage (index.html). You’ll also need to create at least one JavaScript file. Example: app.js.

Sales Data

Within your javascript file, create separate JS object literals for each shop location. Each location will be responsible for generating sales data and providing output on an html document. You should be able to perform the following tasks in your javascript file:

  1. Store the min/max hourly customers, and the average cookies per customer, in object properties.
  2. Generate a random number of customers that can be used to simulate hourly sales, using Objects/Math/random
  3. Calculate and store the simulated amounts of cookies purchased for each hour at each location using average cookies purchased and the random number of customers generated.
  4. Store the results for each location in a separate array… perhaps as a property of the object representing that location.
  5. Display the values of each array as unordered lists in the browser.

  6. Calculating the sum of these hourly totals; your output for each location should look like this:

    Seattle

Display the lists on sales.html as shown in the “Sales Data - Initial” wireframe. We will be adding features to this application and working with its layout in the upcoming labs.

Here are the starting numbers that you’ll need to build these objects:

Location Min / Cust Max / Cust Avg Cookie / Sale
Seattle 23 65 6.3
Tokyo 3 24 1.2
Dubai 11 38 3.7
Paris 20 38 2.3
Lima 2 16 4.6

These numbers are simply Pat’s estimates for now, but eventually, once there has been some history collected that provides more accurate numbers, we’ll want the ability to update these numbers for each location, and to add/remove locations. But we’ll not build all of that today. Make sure to make each location is its own JavaScript object.

Home Page

Read below for the requirements of your index.html page.

Note: Everything listed below is a stretch goal for lab 06. All of these requirements will be required for the final submission of the project, so start implementing these early.

In addition to the provided picture of the fish, your index.html file should contain:

  1. Our custom sans-serif Google Font for use in heading tags (<h# />) called “Righteous”
  2. A specified standard sans-serif web font for sales data (such as Arial, Verdana, or Helvetica).
  3. A specified standard serif web font for text (such as Georgia, Times).
  4. Specified different font colors for all three font uses.
  5. Header background: Black
  6. Header Navigation: Salmon background, black link text
  7. Page Background: White
  8. Be thorough in your implementation of the designed layout and overall organization of the page.
  9. Run a Lighthouse Accessibility report. In this module, push to achieve a score between 65-80. Add the screenshot of your score to your README.md.
  10. Include all of the typical stuff that you’ll find on the home page of a business: locations, hours, contact information, some text about how awesome the business is, etc. Be creative, and again, think about what is meaningful to a typical end user.

Developer Style Guide

In addition to the requirements listed above, please ensure that your project also contains the following according to our style guide:

  1. For every lab within this project, you will be creating a new branch for every day. Create a new branch name that follows the following format class##-feature (example: class06-Objects).
  2. Within your local version of your repo, add your .gitignore and .eslintrc.json.
  3. While working within your non-main branch, conduct regular commits within git.
  4. All properties/values and methods should be correctly constructed and given meaningful names.
  5. Functions and methods should follow the single-responsibility principle.
  6. Use template literals in your JS logic to render the stores as lists on the sales page.

Stretch Goals

  1. Readthis article and this article on the differences between low-fidelity and high-fidelity wireframes. Based on these readings, draw conclusions about what you would want in your own low-fidelity and high-fidelity wireframes.*
  2. Create a low-fidelity wireframe of what you want the page to look like.
  3. Create a high-fidelity wireframe of what you want your page to look like.

Resources

Submission Instructions