Skip to content

emmaclarem/javascript-calculator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

About

While in the depths of studying JS fundamentals, I was itching to make a real project with JS that was interactive and actually worked. This is the product of that: a basic JavaSript calculator which I made by piecing together bits of several YouTube tutorials. Although I understand what about 90% of the JS is doing in restrospect, I definitely wouldn't have been able to code it without some guidance at this point (07/17/2022). However as I've begun learning how to manipulate the DOM this week, I've found it useful to have this experience to relate my learnings back to. Someday soon I aim to re-write all the JS code from scratch without guidance. I will update this ReadMe once that's been done.

View Live Site

JS calculator mockup

Project Requirements

  • Aesthetic neuomorphic look
  • Fully functioning calculator
  • All Clear and Backspace buttons
  • Dark mode (to-do)

What I Learned

  1. Using shadows and inset shadows to create neuomorphic buttons which appear to be physically pressed when clicked
  2. Solidified understanding and confidence with CSS grid for layouts
  3. Creating JS event listeners
  4. Creating JS functions for a real-world project involving HTML and CSS

Continued Development

Some areas I'd like to work on are:

  1. Adding a Dark Mode to the calculator
  2. Re-writing all the JS code from scratch myself without guidance from a tutorial
  3. Making it mobile-responsive
  4. Accepting keyboard input

Resources

About

A calculator built using JavaScript, HTML, and CSS

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published