Web Dev Independent Project #3 – Temperature Calculator (Front-End)

Project: Building a Temperature Calculator

This project will take you off-platform and get you started in your own developer environment! Never done that before? Not to worry - we’ve shared some resources to help you down below. This project can be completed entirely on your own - or, you can join the #web-dev-buddies in the Codecademy Pro Learner community on Slack and find someone to work with! Jump to the community support section to hear more about this.

The project is broken down into a set of user stories for you to follow. User stories are likely something you will see more and more of as you progress in your journey as a developer. They are short, simple descriptions of a feature told from the perspective of the individual using that feature. The goal of each user story is to describe to you, the developer, what the feature or application needs to do while providing you with enough flexibility to determine the best way to make that happen.

Overview

Objective

You’ve been tasked with building a static web page that will calculate temperature conversions between Kelvin and Celsius and display the 10 most recent conversions in a table categorized by symbols.

Pre-requisites

In order to complete this project, we suggest that you have familiarity with the content in the following courses or lessons on the Codecademy platform:

  1. Learn HTML
  2. Learn CSS
  3. Getting Started With Javascript

Suggested Technologies

Depending on where you are on your Path, there may be multiple technology options you can use to complete this project - we suggest the following:

  1. Flexbox and/or
  2. CSS Grid and/or
  3. Media Queries
  4. Font Awesome Library
  5. Javascript & DOM

Project Tasks

Get started - hosting your project

Since you won’t be completing this project in the Codecademy learning environment, you’ll need to find somewhere else to host your project! We’ve listed our recommendations below. For more specific information on the set-up involved with either of these resources - visit our forums guide.

  • Repl.it: If you’re not quite ready to get into all of the nitty gritty details of setting up your own local developer environment, Repl.it is an amazing online tool that can help you spin one up a web-based development environment with the click of a button. For this project, you’ll need a Repl.it environment that supports HTML, CSS and JavaScript.
  • Visual Studio Code: If you’re excited & ready to set-up your own local environment, we’ve got your back too. Visual Studio Code is a popular open source text editor that you will set-up & configure on your own device and can be used to develop websites and applications locally before pushing to production.

Basic Requirements

JavaScript

  • User Story: As a user I want all inputs and outputs to be rounded to the nearest degree.

HTML

  • Feature: Markup an area that will accept a numeric INPUT.
  • Feature: Markup a CALCULATE button that will calculate the INPUT on click.
  • Feature: Markup an area for the OUTPUT of the conversion that dynamically updates the OUTPUT when the CALCULATE button is clicked.

CSS

  • Feature: Style the input, CALCULATE button and the OUTPUT distinctly so it is clear what role each of them plays on the webpage.

Additional Challenges

Intermediate challenges

JavaScript

  • User Story: As a user, I want to be able to view the 10 most recent calculations.
  • User Story: As a user, I want to be alerted if I attempt to convert an input that is not valid (i.e non-integer inputs).
  • User Story: As a user, I want the conversion to take place as I enter the input and update the webpage accordingly.

HTML

  • Feature: Markup a table that stores the 10 most recent calculations with a column for INPUT, OUTPUT, and SYMBOL

CSS

  • Feature: The symbol column of the history table should display the following icons based on the OUTPUT of the 10 most recent calculations:
Output Temperature Symbol
< -9℃ Snow Icon
-9℃ < Output Temperature < 15℃ Rainy Icon
15℃< Output Temperature < 22℃ Cloud Icon
> 22℃ Sun Icon

Advanced challenges

JavaScript

  • User Story: As a user, I want to be able to be able to convert between any combination of Fahrenheit, Celsius, and Kelvin.

HTML

  • Feature: The history table should update the symbols regardless of the OUTPUT scale to match the temperature equivalent of the table above.

CSS

  • Feature: Integrate a CSS library (i.e Bootstrap) and alert the user of a non-numeric input using a flash.

Resources & Support

Project-specific resources

  1. Recommended process:

  2. Begin with creating a wireframe on a piece of paper or an online tool to create a proof of concept.

  3. Start with creating the HTML markup before adding in CSS styles or making the page dynamic with Javascript.

  4. Use the Device Toolbar in Chrome’s developer tools to inspect the responsiveness of the webpage when viewed on various mobile devices.

  5. For accessibility, research HTML5 ARIA controls.

  6. For storing the calculation use Session state

  7. Javascript Glossary

  8. Google Fonts

  9. Kelvin Weather Project

General Resources

  1. How to get set-up for coding on your computer
  2. What you need to know about Git, GitHub & Coding in Teams
  3. How developer teams work
  4. First steps in tackling a group project
  5. Resource on writing pseudocode to get started with off-platform projects
  6. Video on how to use Chrome dev tools
  7. Resource on writing pseudocode to get started with off-platform projects

Community Support

Looking for additional help or someone to work with (or somewhere to brag about your finished project)? Join our Codecademy Pro Learner Community on Slack to meet other learners like yourself!

Once you’re done…

Share on the Slack & in the Forums