Making a Calculator Website (Only Addition)

Vatsal Kumar
4 min readNov 6, 2022
Photo by charlesdeluvio on Unsplash

What’s a calculator?

A portable device known as an electronic calculator is used to carry out computations, from simple mathematics to basic arithmetic. Early in the 1960s, the first solid-state electronic calculator was developed.

What is a calculator used for?

A calculator is a tool used to compute mathematical operations on numbers. Simple calculators can only perform the mathematical operations of addition, subtraction, multiplication, and division.

What are the 3 types of calculators?

Calculators can be divided into three primary categories: business, basic, and scientific. In math studies in high school, it’s possible that you’ve previously used a simple calculator. You might have even used a business or graphing calculator in economics or business statistics classes.

What’s a website? (Only if you don’t know)

Photo by Markus Spiske on Unsplash

A website is a group of web pages and associated material published on at least one web server and granted a shared domain name. Well-known websites include Google, Facebook, Amazon, and Wikipedia. All publicly accessible websites are collectively referred to as the World Wide Web.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Today we’re going to make an app that will be able to help you to visit any website. We’re going to do this with the help of Codepen.

What is Codepen?

A social development environment is CodePen. Its core functionality is the ability to write code in the browser and view the results as you construct. An effective and free online code editor for developers of any experience level, but especially liberating for those just starting out with coding.

CodePen is a tool for collaboratively altering open-source code. As a SAAS-based browser-based alternative to traditional text editor software, CodePen provides front-end web designers. It’s also a great training tool for beginner developers because it helps you spot mistakes immediately in a group context.

With this tool, you can learn, create, execute, and test your Python script. After opening it locally, you can use this IDE to continue building the script. You can download local copies of the code and output.

We’ll start with the HTML part of the website.

What is HTML?

The coding that organizes a web page’s content is called HTML (HyperText Markup Language). Content may be organized using paragraphs, a list of bulleted points, graphics, and data tables, for instance.

In HTML, there are four necessary tags. HTML, title, head, and body are these. You can see the opening and closing tag, an explanation, and an example in the table below. These are the tags that go at the top and bottom of an HTML document.

Follow these steps to make your first calculator website.

Do this much code for HTML,

This is for CSS

And this is for JS

The result should be like this👇🏻

Thanks for reading. Please clap for me!

If you’re still here then you have the right to know why I put pics instead of writing because — (scroll down)

I am lazy!

Thanks for reading. Please clap for me!

--

--

Vatsal Kumar

Vatsal is a coding enthusiast, Youtuber and a horror story writer