DEV Community

Cover image for Create a simple calculator using HTML, CSS and Javascript

Create a simple calculator using HTML, CSS and Javascript

Adam Nagy on October 26, 2021

In this tutorial we will create a fully working calculator using only HTML, CSS and vanilla Javascript. You'll learn about event handling, and DOM ...
Collapse
 
webreflection profile image
Andrea Giammarchi

imho, no beginner should ever prefer <div class="button"></div> over <button></button> ... ever!

Collapse
 
ibesarah profile image
Ibe-Sarah

yea, of course.

Collapse
 
bkilinc profile image
bkilinc

this isn't a form button, name could be "calcButton" etc.

Collapse
 
webreflection profile image
Andrea Giammarchi

This is button, with all accessibility concerns a button should have. A button exists with or without a form, and in this case it's the right tool for the job. With a form, it could work even without JS, by submitting value click after click.

Thread Thread
 
bkilinc profile image
bkilinc

Mostly, you are right. But a button may render differently accross browsers, needs reseting etc. May be, it is too much for a beginners article. I am not an advocate. Just exploring dev.to after a while.

Thread Thread
 
webreflection profile image
Andrea Giammarchi

A beginner should never ditch accessibility for layout that can be easily fixed ... layout is easy to fix, broken accessibility is a barrier.

Collapse
 
shine18 profile image
Aakash Ahmed

Awesome tutorial. Well written.
I've also written a tutorial in the topic but with more simplified approach easy to learn for beginners.
Create a simple calculator in javascript.

Collapse
 
sjackson1665767 profile image
sjackson1

Mit ein wenig Programmierkenntnissen ist das Erstellen eines einfachen online arbeitszeitrechner eine unkomplizierte Aufgabe. Sie können hierfür eine einfache Programmiersprache wie Python verwenden. Importieren Sie zunächst die erforderlichen Bibliotheken, z. B. Tkinter für die grafische Benutzeroberfläche (GUI). Definieren Sie dann die Funktionen für grundlegende Rechenoperationen: Addition, Subtraktion, Multiplikation und Division. Verwenden Sie die Tkinter-Bibliothek, um Schaltflächen für jede Zahl und Operation sowie einen Anzeigebildschirm zum Anzeigen der Eingabe und Ausgabe zu erstellen. Weisen Sie jeder Schaltfläche einen Befehl zu, der beim Klicken die jeweilige Funktion aufruft. Implementieren Sie abschließend eine Fehlerbehandlung, um ungültige Eingaben oder Operationen zu verwalten. Mit diesen Schritten können Sie einen funktionalen Rechner erstellen, der Ihre Arbeitsberechnungen effizient vereinfacht.

Collapse
 
vikasjk profile image
Vikas-jk

Great tutorial, with detailed explanation there is another tutorial for beginners.
Simple Calculator using Javascript.
If anyone looking for basic calculator above link may help, thanks

Collapse
 
betheluxui profile image
betheluxui

Hi
How can I assign x the * operator?
I used this:
case 'X':
display.innerText += '*';
break;

But what I would really like is for x to be displayed and to act as a * operator

Collapse
 
speculatrix profile image
Paul M

Hello,
I checked out the github repo and the style.css file was 0 bytes

Collapse
 
millytexas profile image
Milly texas • Edited

Excellent. It's really an informative stuff. I will be very useful for my post
strength quotes

Collapse
 
ibesarah profile image
Ibe-Sarah

Great job Adam! But then, no real buttons were created here, why were button tags not used?