Unit06 Wellness Tracker

Overview

Create a Emotional Wellness Tracker that uses local storage

Vocabulary

Local Storage

The localStorage property allows you to set, read, and delete data on someones computer or device.

Term

Description

Objectives

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

• Use querySelector
• Use selectedIndex Value
• Use selectedIndex Text
• Implement the Web Storage API
• Implement setItem
• Implement getItem
• Implement removeItem
• Assign a className to an element
• Implement Location Reload

Tasks

• Build a Wellness tracker application
• Download the start file for this unit.

Watch

• Unit Lectures
• Watch 1720_06a Wellness-Overview
• Watch 1720_06b Wellness-HTML
• Watch 1720_06c Saving-the-Data
• Watch 1720_06d Display-the-Data
• Watch 1720_06e Delete-the-Data
• Watch 1720_06f Conditional-loading
• Watch 1720_06g Wellness-Styling

Reflection Questions

Read Cookies vs Local Storage vs Session Storage by Igor Irianto

• What is the difference between local storage and cookies?

Assignment Example

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

Assignment Checklist

Unit06 Wellness Tracker (10 pts)

You will create a modification of the wellness tracker using your own information

Page Header

• Use an h1 tag to describe your project

Data Gathering

For this you may NOT use emotions or feelings! Do something original.

• Gather at least two pieces of information from the user
• Have them pick something from a list of at least 4 items
• store that information using local storage
• Use a submit button to save the data to local storage

Data Displaying

• Display at least two pieces of information from the user saved to local storage
• Display an image and related text from local storage
• Provide a button to delete the local data

Switch

• Use classes assigned by JavaScript to show and hide the data gathering and data displaying sections of your application

Design

• Style your application with CSS so it looks nice. Adhere to all PARC design principles.

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