Read this lab assignment in its entirety before beginning your lab. You may want to open it in a new tab.
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.
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.
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
.
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:
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.
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:
<h# />
)
called “Righteous”In addition to the requirements listed above, please ensure that your project also contains the following according to our style guide:
class##-feature
(example: class06-Objects
)..gitignore
and .eslintrc.json
.