MariusSMA/calculator-app

A simple calculator application developed with HTML, CSS & JavaScript, based on The Odin Project's curriculum.

Calculator App

A simple calculator application developed with HTML, CSS & JavaScript, based on The Odin Project's curriculum.

Table of contents

• Overview
  • Attribution
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

Attribution

• The application design is inspired from Lucia Scott and Google's Calculator app. Below in the Links section you can access the design file from Figma and check out the work I've done!
• The functionality and the way the calculator works is inspired from Microsoft's calculator app.

The challenge

Users should be able to:

• Use all the features of a simple calculator
• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page

Links

• Solution URL
• Live Site URL
• Design - Figma

My process

Built with

• Semantic HTML5
• Mobile-first workflow
• JavaScript
• Flexbox & Grid
• Design System Package (Adobe XD)
• Figma

What I learned

• To implement a Design System Package (with the Adobe XD extension available in Visual Studio Code) in order to be more consistent in the process and to familiarize with these tools.

• To create the logic of a basic calculator (followed the practices used by Microsoft for their calculator app) and to manipulate the DOM to show the desired outcome.

Author

• GitHub - @MariusSMA
• Frontend Mentor - @MariusSMA
• Twitter - @Marius S.