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:
- Reads the values from both input fields.
- Validates the input (see step 4 below)
- Ises if/ else if statements to eprform the correct operation (add, subtract, multiply or divide).
- 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
- Open the project folder
- DOuble click index.html - it will open in your web browser
- Enter two number, click an operation button and see what happens
I used HTML5, CSS3 and JavaScript