I've never been into web a lot, but I really want to. I started from simple things. I have some experience in .NET and c#. But the world of javascript is completely new for me. I wrote simple calculator just to try js.
Maybe there are some ridiculous things in my code that I want to know. I'm not really interested in functionallity of my project.
The main thing that I want to know are mistakes that could be dangerous in my future projects. So I will appreciate any advices.
P.S. Am I using let correctly? I read about that in airbnb js guide. And what about onsumbit event on Form? What is the best practice?
window.onload = (function () {
document.getElementById("user_input").value = "";
let btns = document.getElementsByTagName("Button");
for (var i = 0; i < btns.length; i++) {
if (!isOperation(btns[i].textContent)) {
btns[i].onclick = function (e) {
let userInput = document.getElementById("user_input");
if (userInput === null) {
console.error("Error, user_input element is not found!");
} else {
userInput.value = userInput.value + e.target.textContent;
}
return false;
};
} else {
btns[i].onclick = function (e) {
let part = document.getElementById("part");
if (part === null) {
console.error("Error, part element is not found!");
} else {
part.textContent = document.getElementById("user_input").value
+ e.target.textContent;
document.getElementById("user_input").value = "";
}
return false;
};
}
if (btns[i].textContent.toLowerCase() === 'c') {
btns[i].onclick = function (e) {
let user_input = document.getElementById("user_input").value;
if (user_input.value !== null) {
if (user_input.length >= 1) {
document.getElementById("user_input").value =
user_input.substring(0, user_input.length - 1);
} else {
document.getElementById("user_input").value = null;
}
}
return false;
};
}
if (btns[i].textContent === '.') {
btns[i].onclick = function (e) {
alert("I'm not working...");
return false;
};
}
}
});
function calc() {
let part = document.getElementById("part").textContent;
let userInput = document.getElementById("user_input");
let operation = part[part.length - 1];
document.getElementById("part").textContent = operate(operation, part, userInput.value);
userInput.value = null;
}
function isOperation(a) {
let operations = ['+', '-', '/', '*'];
for (let i = 0; i < operations.length; i++) {
if (a === operations[i]) return true;
}
return false;
}
function operate(operator, value1, value2) {
let num1 = parseInt(value1);
let num2 = parseInt(value2);
if (operator === '+') {
return num1 + num2;
} else if (operator === '-') {
return num1 - num2;
} else if (operator === '*') {
return num1 * num2;
} else {
return num1 / num2;
}
} body {
margin: 0;
padding: 0;
}
h1 {
text-align : center;
}
.calc {
width: 300px;
margin: 0 auto;
margin-top: 200px;
text-align: center;
}
table{
margin-left: 82px;
text-align:center;
}
button{
width: 30px;
font-size: 24px;
}
.buttons{
text-align:center;
}w
#part{
text-align:right;
margin-left: 50px;
}<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
<title>JS Calc Native</title>
</head>
<body>
<div class="calc">
<h2>Simple Native JS Calc</h2>
<form onsubmit="calc(); return false;" >
<p id="part"></p>
<input type="text" id="user_input"/>
<div class="buttons">
<table>
<tr>
<td><button>7</button></td>
<td><button>8</button></td>
<td><button>9</button></td>
<td><button>+</button></td>
</tr>
<tr>
<td><button>4</button></td>
<td><button>5</button></td>
<td><button>6</button></td>
<td><button>-</button></td>
</tr>
<tr>
<td><button>1</button></td>
<td><button>2</button></td>
<td><button>3</button></td>
<td><button>/</button></td>
</tr>
<tr>
<td><button>C</button></td>
<td><button>0</button></td>
<td><button>.</button></td>
<td><button>*</button></td>
</tr>
</table>
</div>
<input type="submit" value="calculate"/>
</form>
</div>
<script src="calc.js"></script>
</body>
</html>
