Jessica Lazar || jvlazar

Age Calculator

Project Information

Project Title: Age Calculator

Project Languages: HTML, CSS, JavaScript (Vanilla)

Project Referenced From: Frontend Mentor - Age Calculator

Project Description:

This project calculates and displays the user's age after inputing their birth day, month, and year. Results are displayed in years, months, and days.

This project replicates the age calculator project from the design images and assets provided by Frontend Mentor.

Project Specifics

Things I Learned:

  • Basic principles of JavaScript (i.e. functions, variables, etc)
  • Learning the difference between the different "display" properties (i.e. flex vs. block)
  • Adding HTML elements depending on certain conditions using JavaScript
  • Changing HTML element properties with CSS through JavaScript
  • How to add background images to buttons and work with .svg files

Things I Enjoyed:

  • Learning basic JavasScript syntax and functionality
  • Trying to get the visual look of the calculator to be as close to the original as possible

Things I'd do Differently:

  • Before refactoring, I overcomplicated the calculations. Doing this again, I would first take a step back to properly thing over the math behind these calculations. Although they're technically simple, delving straight into it without a plan resulted in overthinking the problem and constantly refactoring the code

Challenges that were Faced:

  • Changing HTML elements based on certain conditions using JavaScript
  • Figuring out the cleanest way to write code to calculate the values (and having to rewrite code multiple times as a result)