How to make calculator in javascript for beginners (EASY Method)

#javascript #js #coding #html #css
All the Code is provided in comments
Make sure to like and sub :)

[@Football.Legends7654]

HTML Code:


Calculator


Calculator
Number 1:

Number 2:


+

-

x

/
=



CSS Code:
body{
background-color: hsl(0, 0%, 95%);
font-family: sans-serif;
}
form{
background-color: hsl(0, 0%, 100%);
width: 350px;
margin: auto;
padding: 25px;
border-radius: 10px;
box-shadow: 5px 5px 15px hsla(0, 0%, 0%, 0.3);
}
input{
font-size: 1.1em;
margin-bottom: 10px;
border-radius: 7px;
}
label{
font-size: 1.5em;
font-weight: bold;
}
h1{
text-align: center;
}
button{
background-color: hsl(39, 97%, 57%);
color: white;
border: none;
font-size: 1.5em;
padding: 7px 15px;
border-radius: 10px;
margin-top: 7px;
}
p{
font-size: 1.75em;
font-weight: bold;
text-align: center;
}
JS Code:
const num1 = document.getElementById("num1");
const num2 = document.getElementById("num2");
const add = document.getElementById("add");
const sub = document.getElementById("sub");
const mul = document.getElementById("mul");
const div = document.getElementById("div");
const submit = document.getElementById("submit");
const result = document.getElementById("result");
let x;
let y;
let z;
submit.onclick = function(){
if(add.checked){
x = Number(num1.value);
y = Number(num2.value);
z = x + y;
result.textContent = z;
}
else if(sub.checked){
x = Number(num1.value);
y = Number(num2.value);
z = x - y;
result.textContent = z;
}
else if(mul.checked){
x = Number(num1.value);
y = Number(num2.value);
z = x * y;
result.textContent = z;
}
else if(div.checked){
x = Number(num1.value);
y = Number(num2.value);
z = x / y;
result.textContent = z;
}
else{
result.textContent = "Choose an option"
}
}
Btw feel free to improve this code and give suggestions
and if you use it make sure to give me credits

[@Football.Legends7654]

btw in css also add
button:hover{
background-color: orange;}
and in button also add
button{
cursor: pointer;}

[@shor.ts959]

Nice video, keep creating the same video for the beginners

[@Football.Legends7654]

Thanks, btw do you have any ideas ?

[@shor.ts959]

@@Football.Legends7654 you can create small projects for all languages that you are familiar with.

[@Football.Legends7654]

​@@shor.ts959Ok but currently I'm still learning js so in my next video I will make a counter program as I progress I will make advance things

[@shor.ts959]

@@Football.Legends7654 I'll be watching..