Web Dev Independent Project #4 – Temperature Calculator (Back-End)

Projects Personal Projects
1

Project: Building a backend for 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-development channel in our Community Discord 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

Build an API for a temperature calculator. If you have done the Off Platform Project: Building a Temperature Calculator you will have created a static web page calculator. Likely you have a lot of Javascript code written that is updating the DOM and handling calculations. You’ve been tasked with creating a weather log application that will convert the current weather in Kelvin to Celsius and store this information in a database. You must also generate a report of all the entries that have been recorded with the option to edit and delete individual entries.

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. Off Platform Project: Building a Temperature Calculator
  2. Learn Express

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. Node
  2. Create-Express-Application to get up and running with Express with minimal configuration

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 Express.
  • 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

  1. Create an express application using create-express-application.

  2. Setup a database with one WEATHER table:

  3. UID int

  4. Output Scale varchar(30)

  5. Output Temperature double

  6. DateOfEntry DateTime

  7. Calculations Page

  8. Clicking 0 - 9 appends to the INPUT which is 0 by default

  9. Clicking C clears the INPUT to 0 K

  10. Clicking = calculates the input in Kelvin to Celsius and updates the OUTPUT

  11. Clicking = initiates a POST request inserting the OUTPUT Temperature and the Output Scale to the CALCULATIONS table.

  12. History Page

  13. GET request that gets all records in WEATHER table

  14. EDIT button makes the Output temperature editable

1. If clicked the EDIT button is replaced with a SAVE button
2. Clicking the SAVE button will initiate a PUT request updated the WEATHER table with the new Output Temperature value
3. Clicking the SAVE button will make the output temperature read-only again and bring back the EDIT button
  1. DELETE button will initiate a DELETE request to delete that entry from the WEATHER table.

HTML

  1. Calculate page

  2. 9 buttons numbered 1 - 9 arranged in a 3 x 3

  3. 1 button numbered 0

  4. 1 button labeled =

  5. 1 button labeled C

  6. INPUT field that takes up the length of 3 buttons

  7. OUTPUT field that takes up the length of 3 buttons

Rough Sketch:

I N P U T

7 8 9

4 5 6

1 2 3

0 C =

O U T P U T

  1. History Page - GET request for all records in CALCULATIONS table

  2. Display records in a readonly table, each record will have a

  3. Date Of Entry

  4. Output Temperature

  5. EDIT button for each entry

  6. DELETE button for each entry

CSS

  1. Use to CSS animate the transition between the EDIT and SAVE button.

Resources & Support

Project-specific resources

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 Community Discord to meet other learners like yourself!

Once you’re done…

Share in the Forums for feedback and to see some other ways of solving this problem!

3 Likes