Unit04 Home Improvement Calculator

Overview

Create a web application that allows customers to easily calculate how much paint and carpet they need to remodel a room.

Vocabulary

Web Application

A Web application is a program that is stored on a server and delivered over the Internet to a browser.

Home Screen

A home screen consists of a grid of application links or shortcuts that can often be arranged over multiple pages.

Favicon

A favorite icon (favicon) is a small graphic displayed on the browser tab and bookmark list. Typically it is a small version of the site logo. Originally it was a 16px x 16px .ico file but now is a series of graphics saved as .png in various sizes. The larger file sizes are used an icon on a mobile device home screens.

Tools

• Add a shortcut to the Home Screen on iPhone or iPad
• Add apps, shortcuts & widgets to your Android Home Screen
• Use this Favorite Icon Generator for your home screen icon

Objectives

At the end of this module, you should be able to...

• Demonstrate a Arrow function
• Implement the createElement method
• Implement the appendChild method
• Implement the addEventListener method
• Demonstrate the innerHTML property
• Practice the equality algorithms
• Practice the comparison operator
• Implement the Number constructor
• Demonstrate the Math Ceiling function
• Use the textContent property
• Use the value property
• Use the text property
• Practice using string concatenation
• Practice using template literals
• Practice using arithmetic operators (multiplication, addition, division)

Tasks

• Build and deploy a home improvement calculator
• Add a Home Screen link
• Download the start file for this unit.

Watch

• Unit Lectures
• Watch 1720_04a Home Improvement Calculator Overview
• Watch 1720_04b Add the HTML
• Watch 1720_04c Grab the Values
• Watch 1720_04d Calculate Supplies to the Console
• Watch 1720_04e Feedback to User
• Watch 1720_04f Simplify with a Function
• Watch 1720_04g Finishing Shopping List
• Watch 1720_04h Styling with CSS
• Watch 1720_04i Solving Problems
• Watch 1720_04j Creating an Application Icon

Reflection Questions

Read How To Improve And Measure Your Progress Learning Web Design by Shane Hudcon

• There are over a half dozen ideas on how to measure your progress as a web designer. Please pick two and describe how you will implement them in your studies.

Assignment Example

• View the small screen version
• View the medium screen version
• View the large screen version

Assignment Checklist

Unit04 Home Improvement Calculator (10 pts)

Build and Deploy a Home Improvement Calculator

Page Header

Using the heading tag display the following

• Application name

User Entry Section

Allow the user to enter the following items

• Room Width using a label tag and input type of number
• Room Depth using a label tag and input type of number
• Wall Height using a label tag and input type of number
• Paint Quality using a label tag and select with 4 options
• First option should be selected and disabled
• Remaining options should have a value assigned
• Styled calculate button

User Feedback Section

Display the following information to the user in two separate areas

• How much primer is required
• How much ceiling paint is required
• How much wall paint is required
• How many yards of carpet is required
• How much tackstrip is required
• How much carpet padding is required
• This list should be two columns on medium screens

Page Footer

Display the following in the footer

• Your Name
• Assignment Name

Overall Styling

Use CSS to create a good user experience

• Good form design
• Calculate button meets minimum size for touch

Home Screen Icon

Build an icon for your app

• Follow Apple's recommendations for app icons
• Create a favorite icon set
• Add the icon links to your header
• Create an link on your phones home screen

Overall Page Requirements

Your page needs to meet these requirements

• Link to a normailze.css file (this creates a common starting point for all browsers)
• Link to a small.css file
• Link to a medium.css file
• Link to a large.css file
• Link to an external Google Font of your choice
• Media Queries are included in the medium and large css files
• Demonstrate the design principles of Contrast, Proximity, Alignment, Hierachy, Wayfinding, and Visual Tangent.
• Passes the HTML5 validation test.
• Passes the CSS3 validation test.
• Upload your assignemnt to GitHub
• Change your repository to private
• Publish the GitHub repository to Netlify using the name that they provide

Grade

In order to receive a grade for this assignment you must earn 90% of the points listed above.

• Pass
• Fail