120 lines
5.4 KiB
HTML
120 lines
5.4 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="../es/about-this-site.html">Sobre el sitio</a></p>
|
|
</div>
|
|
<div id="middle">
|
|
<p><a href="../es_home.html">Principal</a></p>
|
|
</div>
|
|
<div class="right">
|
|
<p>
|
|
<a href="#top">ES</a>
|
|
<a href="../en/calc.html">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">Un poco de información</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 class="bot bar panel">
|
|
<div class="left"><p>Hecho a mano, sólo html y css (y un poco de js aquí) :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>Versión 1.0.4, 23.01.2026</p></div>
|
|
</div>
|
|
</body>
|
|
</html> |