Transfer to git
This commit is contained in:
175
pages/articles/diy-calculator_es.html
Normal file
175
pages/articles/diy-calculator_es.html
Normal file
@@ -0,0 +1,175 @@
|
||||
<!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 | Calculadora</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_es.html" class="logo-text">masiv's lair</a>
|
||||
</div>
|
||||
<div class="about panel">
|
||||
<b><a href="../articles/about_es.html">Sobre mí</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>Calculadora</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>Sobre este projecto</h1>
|
||||
<p>
|
||||
Hace tiempo que no programaba en Javascript, y quería
|
||||
nuevamente agarrarle la mano, por lo que decidí hacer esta
|
||||
calculadora sin hacer uso de absolutamente nada más que
|
||||
w3 school y algunas búsquedas sobre javascript, nada de
|
||||
preguntar mis dudas a ninguna IA (aunque sea más lento).
|
||||
</p>
|
||||
<p>
|
||||
Así que me puse manos a la obra re-aprendiendo algunas cosas,
|
||||
he de decir que fue un ejercicio divertido, y aunque el
|
||||
resultado carece de algunas características (cómo el uso
|
||||
de paréntesis), sigue el orden de las operaciones, y eso
|
||||
es bastante.
|
||||
</p>
|
||||
<p>
|
||||
En un futuro si la hiciese nuevamente, podría implementar
|
||||
algoritmos más eficientes, puesto que realmente lo hice de
|
||||
la manera que se me fue ocurriendo, y realmente debe ser muy
|
||||
ineficiente, si quisiese eficiencia tendría mil maneras y
|
||||
librerías, pero el objetivo de este ejercicio es aprender.
|
||||
</p>
|
||||
<p>
|
||||
Yendo un poco más a lo técnico, mi idea principal fue almacenar
|
||||
cada caracter escrito en un array, y luego procesarlo de la
|
||||
siguiente manera:
|
||||
<span class="li">Unir los números, de [1,1,'+',2,3] a [11,'+',23].</span>
|
||||
<span class="li">Buscar dónde están los separa términos, e ir creando arrays
|
||||
multidimensionales, cada nivel tiene un tipo de operación (on orden).
|
||||
</span>
|
||||
<span class="li">Deshacer ese array multidimensional, e ir procesando
|
||||
todas las operaciones.
|
||||
</span>
|
||||
Dicho así parece sencillo, pero esutve un día y medio programando y lidiando
|
||||
con cosas que, o no sabía, o no recordaba. (He de decir que trabajar con tanta iteración
|
||||
en los arrays multidimensionales es un trabajo no trivial).
|
||||
</p>
|
||||
<p>
|
||||
Actualización 23/01/2026 <br>
|
||||
Le mostré la calcualdora a unx amigx, y me hizo darme
|
||||
cuenta de que no había implementado el botón del 0,
|
||||
la verdad no tengo ni idea cómo no me di cuenta 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>
|
||||
Reference in New Issue
Block a user