179 lines
8.2 KiB
HTML
179 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
|
<title>masiv's lair | Calculator</title>
|
|
<link rel="stylesheet" href="../../css/articles/diy-calculator/diy-calculator.css">
|
|
<link rel="icon" href="../../img/favicon/favicon-lair.png">
|
|
<script src="../../js/articles/diy-calculator/calc.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="navbar top blank"></div>
|
|
<div class="navbar top">
|
|
<div class="logo">
|
|
<img src="../../img/logo/logo_smth.png" alt="">
|
|
<a href="../../main_en.html" class="logo-text">masiv's lair</a>
|
|
</div>
|
|
<div class="about panel">
|
|
<b><a href="../articles/about_en.html">About me</a></b>
|
|
</div>
|
|
<div class="links">
|
|
<div class="social-media github">
|
|
<img src="../../img/icons/github.png" alt="">
|
|
<a href="https://github.com/masiv1001" target="_blank">masiv1001</a>
|
|
</div>
|
|
<div class="social-media instagram">
|
|
<img src="../../img/icons/instagram.png" alt="">
|
|
<a href="https://instagram.com/sietezip/" target="_blank">sietezip</a>
|
|
</div>
|
|
<div class="social-media pixelfed">
|
|
<img src="../../img/icons/pixelfed.png" alt="">
|
|
<a href="https://pixelfed.social/masiv1001/" target="_blank">masiv1001</a>
|
|
</div>
|
|
<div class="social-media twitter">
|
|
<img src="../../img/icons/twitter.png" alt="">
|
|
<a href="https://twitter.com/_visam/" target="_blank">_visam</a>
|
|
</div>
|
|
<div class="social-media reddit">
|
|
<img src="../../img/icons/reddit.png" alt="">
|
|
<a href="https://www.reddit.com/user/masiv_o/" target="_blank">masiv_o</a>
|
|
</div>
|
|
<div class="social-media steam">
|
|
<img src="../../img/icons/steam.png" alt="">
|
|
<a href="https://steamcommunity.com/id/masiv1001/" target="_blank">masiv1001</a>
|
|
</div>
|
|
<div class="social-media osu">
|
|
<img src="../../img/icons/osu.png" alt="">
|
|
<a href="https://osu.ppy.sh/users/19273464/" target="_blank">masiv_</a>
|
|
</div>
|
|
<div class="social-media mail">
|
|
<img src="../../img/icons/mail.png" alt="">
|
|
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
|
</div>
|
|
</div>
|
|
<div class="lang-picker panel">
|
|
<b><a href="../articles/diy-calculator_es.html">Español</a></b>
|
|
</div>
|
|
</div>
|
|
<div class="wrapper">
|
|
<div class="primary">
|
|
<div>
|
|
<div class="calc panel">
|
|
<h1>Calculator</h1>
|
|
<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 class="info panel">
|
|
<h1>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>
|
|
</div>
|
|
<div class="navbar bot blank"></div>
|
|
<div class="navbar bot">
|
|
<div class="links">
|
|
<div class="social-media github">
|
|
<img src="../../img/icons/github.png" alt="">
|
|
<a href="https://github.com/masiv1001" target="_blank">masiv1001</a>
|
|
</div>
|
|
<div class="social-media instagram">
|
|
<img src="../../img/icons/instagram.png" alt="">
|
|
<a href="https://instagram.com/sietezip/" target="_blank">sietezip</a>
|
|
</div>
|
|
<div class="social-media pixelfed">
|
|
<img src="../../img/icons/pixelfed.png" alt="">
|
|
<a href="https://pixelfed.social/masiv1001/" target="_blank">masiv1001</a>
|
|
</div>
|
|
<div class="social-media twitter">
|
|
<img src="../../img/icons/twitter.png" alt="">
|
|
<a href="https://twitter.com/_visam/" target="_blank">_visam</a>
|
|
</div>
|
|
<div class="social-media reddit">
|
|
<img src="../../img/icons/reddit.png" alt="">
|
|
<a href="https://www.reddit.com/user/masiv_o/" target="_blank">masiv_o</a>
|
|
</div>
|
|
<div class="social-media steam">
|
|
<img src="../../img/icons/steam.png" alt="">
|
|
<a href="https://steamcommunity.com/id/masiv1001/" target="_blank">masiv1001</a>
|
|
</div>
|
|
<div class="social-media osu">
|
|
<img src="../../img/icons/osu.png" alt="">
|
|
<a href="https://osu.ppy.sh/users/19273464/" target="_blank">masiv_</a>
|
|
</div>
|
|
<div class="social-media mail last">
|
|
<img src="../../img/icons/mail.png" alt="">
|
|
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|