Transfer to git
This commit is contained in:
123
archive/ver_1-until2feb2026/en/calc.html
Normal file
123
archive/ver_1-until2feb2026/en/calc.html
Normal file
@@ -0,0 +1,123 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user