bes-bastet/meditation-trainer

A very guidance-light lesson designed to teach building an app from a drawing

Meditation Trainer

Now that you have solid experience in HTML, CSS, and JavaScript, we're going to give you a taste of the real world. It's entirely likely that, as programming becomes a part of your career, someone will come to you with a taco sauce- smeared napkin complete with a drawing of the app they want to build. In that spirit, build this app:

Objectives

1. Identify necessary elements and behaviors from the product owner's description
2. Use HTML, CSS and JavaScript to build a "Meditation Trainer" app

Instructions

Meditation is popular these days as a way to achieve mindfulness and reduce the stress of day-to-day life. We want to build an app that helps people increase the lengths of their breaths. We've "interviewed" the product owner and gotten their description of the app, just the way they said it:

We'd like a button that says "START INHALE". You click it and in a neat little box next to it to types a small instruction like "Nice and easy, through the nose" or "Think of your mantra." Oh, the button should change its text. Oh and we only ever want one button, nice and simple. Anyway, you get to the top of the breath, lungs all full and they click the button that says, like, "Inhale done" or "stop breathing." They then click the button again and start an exhale. Button text should change, instructions too. Then click the button to mark all done and WHABAM! That breath should be added to a BREATH LOG. Also stats should be run on the BREATH LOG. Put some statsy stuff in there, mean, medium, mode, sigma, stuff like that.

Part of the objective of this lab is learning to think like a developer and learning to read between the lines of what people want. Start by identifying the necessary elements. From this description, we know we'll need a button that starts and ends inhales and exhales. We know we'll need a "Breath Log" and statistics. We know how to create these elements in HTML and style them with CSS. Then we'll figure out what behaviors we need so that we can code the appropriate JavaScript. For example, we need the button text and instructions on the page to change with each click.

Now you're on your way. If this seems like a big project, don't worry! You've got this. Take a few deep breaths and jump in.