123 lines
5.6 KiB
HTML
123 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=0.5">
|
|
<title>Calculadora</title>
|
|
<link rel="stylesheet" type='text/css' href="../css/global/components.css">
|
|
<link rel="stylesheet" type='text/css' href="../css/global/styles.css">
|
|
<link rel="stylesheet" type="text/css" href="../css/specific/calc.css">
|
|
<script src="../js/calc1.js"></script>
|
|
<script defer src="../js/calc2.js"></script>
|
|
</head>
|
|
<body>
|
|
<!--
|
|
<div class="panel">
|
|
<div>
|
|
<button onclick="calc()">CalcV1</button>
|
|
<p>Testing</p>
|
|
</div>
|
|
</div>
|
|
-->
|
|
<div class="top bar panel">
|
|
<div class="left">
|
|
<p><a href="../en/about-this-site.html">About this site</a></p>
|
|
</div>
|
|
<div id="middle">
|
|
<p><a href="../en_home.html">Main</a></p>
|
|
</div>
|
|
<div class="right">
|
|
<p>
|
|
<a href="../es/calc.html">ES</a>
|
|
<a href="#top">EN</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="middle">
|
|
<div class="calculator panel">
|
|
<div>
|
|
<div class="calctitle">
|
|
Calculadora
|
|
</div>
|
|
<div class="viewing panel">
|
|
<span id="output"></span>
|
|
</div>
|
|
<div class="buttons">
|
|
<button onclick="q_manage('add',1)">1</button>
|
|
<button onclick="q_manage('add',2)">2</button>
|
|
<button onclick="q_manage('add',3)">3</button>
|
|
<button onclick="q_manage('add','+')">+</button>
|
|
<button onclick="q_manage('add',4)">4</button>
|
|
<button onclick="q_manage('add',5)">5</button>
|
|
<button onclick="q_manage('add',6)">6</button>
|
|
<button onclick="q_manage('add','-')">-</button>
|
|
<button onclick="q_manage('add',7)">7</button>
|
|
<button onclick="q_manage('add',8)">8</button>
|
|
<button onclick="q_manage('add',9)">9</button>
|
|
<button onclick="q_manage('add','*')">*</button>
|
|
<button onclick="">(</button>
|
|
<button onclick="q_manage('add',0)">0</button>
|
|
<button onclick="">)</button>
|
|
<button onclick="q_manage('add','/')">/</button>
|
|
<button onclick="q_manage('remove')"><</button>
|
|
<button onclick="q_manage('add','^')">^</button>
|
|
<button onclick="q_execute('add','=')" id="equal">=</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="info panel">
|
|
<h1 class="title">About this project</h1>
|
|
<p>
|
|
It has certainly been a while since I've touched Javascript,
|
|
and I wanted to regain some of the know-how I had about it,
|
|
that's why decided to code this calculator from scratch
|
|
without using any external libraries, nor chatbots, only
|
|
wikis like w3 school about the language itself even if
|
|
that required more time.
|
|
</p>
|
|
<p>
|
|
So it began my learning journey, coding this entire calculator
|
|
has been quite a joy I must say, and even if the final product
|
|
is lacking some funcionality like parenthesis parsing it still
|
|
works completely fine for most things, as it process inputs using
|
|
PEMDAS.
|
|
</p>
|
|
<p>
|
|
Were I to make it all over again, I would probably go about
|
|
things differently, researching about more efficient algorithms
|
|
and methods and not reinventing the wheel, but the thing is,
|
|
that's the entire point of this excersice, wasn't for that
|
|
self-impossed limitation, I could make use of tons of more
|
|
efficient libraries.
|
|
</p>
|
|
<p>
|
|
Now about the inner workings of the script, I implemented a
|
|
simple array that stores every character typed, and once the
|
|
equal key is pressed, it sends the array to be processed in
|
|
the following steps:
|
|
<span class="li">Concatenate the digits, from [1,1,'+',2,3] to [11,'+',23].</span>
|
|
<span class="li">Search for term separators, and create multidimensional arrays with
|
|
each level representing one type of operation.
|
|
</span>
|
|
<span class="li">Undo all this array but backwards, processing the output as it goes.
|
|
</span>
|
|
It looks easy on paper, but I spent an entire day and a half coding and dealing with
|
|
each aspect of programming, things I didn't quite remember, others I didn't know from
|
|
the get-go, etc. (I must add a personal rant about how difficult is dealing with
|
|
multidimensional arrays, it's not a trivial task for sure).
|
|
</p>
|
|
<p>
|
|
Update 23/01/2026 <br>
|
|
I showed my calculator to a friend of mine and they
|
|
pointed out I was lacking a 0 button, how could I miss
|
|
that, seriously XD.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="bot bar panel">
|
|
<div class="left"><p>Entirely handmade, css & html only (and some js here) :D</p></div>
|
|
<img src="../imgs/global/rainbowcable.png" alt="Rainbow cable."> <!-- Found on https://minx98.neocities.org/Assets/IDButtons/Ribbon/rainbowcable.png -->
|
|
<div class="right"><p>Version 1.0.4, 23.01.2026</p></div>
|
|
</div>
|
|
</body>
|
|
</html> |