Skip to content

About

Basic Arithmetic calculator - CA 1.3

Resources

Stars

0 stars

Watchers

0 watching

Forks

Latest commit

 

History

1 Commit

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 

Repository files navigation

yo yo yo yo, this is a read me for a bsaic arithmatic calulator. It allows the user to eprform basic arithmetic operation (add, multiple, divide)

How I created it

Step 1 HTML structure (index.html) I started with defining the page structure using HTML: -Added a heading with the tite "A Basic Calculator". -Created two input fields using input type number sot he user can enter their numbers -Added four buttons - one for each arithmetic operation - inside a fiv container -Added a result section using a div with a span inside to display the calculated answer -Added a paragraph to display error message when validation fails -Linked the exeternal CSS file (style.css) in the head and the JavaScript file (script.js) at the bottom of the body

Step 2 - CSS styling (style.css) I then styled the fuck out the page to make it look clean and user friendly: -Set the page background to light grey and centred the calculattor using Flexbox -Styled the caldulatr card with a white background, padding, rounded corner, and a shadow -Styled the inpur fields with a border and consistent sizing -Arrranged the four buttons ina. 2x2 grid using CSS Grid and gave them a blue background with white text -Styled the result area with a light grey background and displayed the answer in re bold text -Styled error messages in red so they stand out like david bowie

Stepp 3 - JavaScript Logic (script.js) I wrote a single calculate() function that:

  1. Reads the values from both input fields.
  2. Validates the input (see step 4 below)
  3. Ises if/ else if statements to eprform the correct operation (add, subtract, multiply or divide).
  4. Displays the result in the result section with a smiley face on the end

Step 4 - Data validation Before calculating, the script checks: -Empmty fields - alerts the user if either input is blank -Invalid numbers - uses isNaN() to check if the input is actually a number. -Division by zero - prevents the user from dividing by zero and shows an error

Files index.html | Page structure - inputs, buttons, result area style.css | visual styling for all elements script.js | Arithemetic logic and input validation Readme.md | documents this bad boy

How to run

  1. Open the project folder
  2. DOuble click index.html - it will open in your web browser
  3. Enter two number, click an operation button and see what happens

I used HTML5, CSS3 and JavaScript

About

Basic Arithmetic calculator - CA 1.3

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages