forked from FSDSTR1024/calculadorajs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
115 lines (115 loc) · 6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<script src="https://kit.fontawesome.com/b7cdcf5f18.js" crossorigin="anonymous"></script>
<title>Simply-calculator</title>
</head>
<body>
<main class="calculator-container" id="calculator-object">
<!-- Display -->
<section id="display-section" class="display-section">
<textarea id="display" aria-label="Pantalla de la calculadora"></textarea>
</section>
<!-- Move-Section-->
<section id="move-section" class="move-section">
<div class="rows-buttons">
<button class="btn-left" data-value="left" aria-label="Mover a la izquierda" role="button">
<i class="fa-solid fa-arrow-left"></i>
</button>
<button class="btn-right" data-value="right" aria-label="Mover a la derecha" role="button">
<i class="fa-solid fa-arrow-right"></i>
</button>
<button class="btn-up" data-value="up" aria-label="Subir número" role="button">
<i class="fa-solid fa-arrow-up-9-1"></i>
</button>
<button class="btn-down" data-value="down" aria-label="Bajar número" role="button">
<i class="fa-solid fa-arrow-down-1-9"></i>
</button>
</div>
</section>
<!-- Funciones adicionales-->
<section id="special-functions" class="special-functions">
<div class="additionals-functions">
<button class="btn-func" data-value="AC" aria-label="Borrar todo" role="button">
<i class="fa-solid fa-arrows-spin"></i>
</button>
<button class="btn-func-ans" data-value="ANS" aria-label="Respuesta anterior" role="button">ANS</button>
<button class="btn-func" data-value="DEL" aria-label="Eliminar el último carácter" role="button">
<i class="fa-solid fa-backward-fast"></i>
</button>
<button class="btn-func" data-value="on_off" aria-label="Encendido/Apagado" role="button">
<i class="fa-solid fa-power-off"></i>
</button>
</div>
</section>
<!-- Operadores y números-->
<section id="calculator-btn" class="calculator-buttons">
<!-- Botones de números -->
<div id="numbers-btns" class="number-buttons">
<button class="btn" data-value="1" aria-label="cero" role="button">
<i class="fa-solid fa-1"></i>
</button>
<button class="btn" data-value="2" aria-label="uno" role="button">
<i class="fa-solid fa-2"></i>
</button>
<button class="btn" data-value="3" aria-label="dos" role="button">
<i class="fa-solid fa-3"></i>
</button>
<button class="btn" data-value="4" aria-label="tres" role="button">
<i class="fa-solid fa-4"></i>
</button>
<button class="btn" data-value="5" aria-label="cuatro" role="button">
<i class="fa-solid fa-5"></i>
</button>
<button class="btn" data-value="6" aria-label="cinco" role="button">
<i class="fa-solid fa-6"></i>
</button>
<button class="btn" data-value="7" aria-label="seis" role="button">
<i class="fa-solid fa-7"></i>
</button>
<button class="btn" data-value="8" aria-label="siete" role="button">
<i class="fa-solid fa-8"></i>
</button>
<button class="btn" data-value="9" aria-label="ocho" role="button">
<i class="fa-solid fa-9"></i>
</button>
<button class="btn" data-value="0" aria-label="nueve" role="button">
<i class="fa-solid fa-0"></i>
</button>
</div>
<!-- Operadores matemáticos-->
<div class="operator-buttons">
<button class="btn" data-value="/" aria-label="División" role="button">
<i class="fa-solid fa-divide"></i>
</button>
<button class="btn" data-value="*" aria-label="Multiplicación" role="button">
<i class="fa-solid fa-xmark"></i>
</button>
<button class="btn" data-value="+" aria-label="Suma" role="button">
<i class="fa-solid fa-plus"></i>
</button>
<button class="btn" data-value="-" aria-label="Resta" role="button">
<i class="fa-solid fa-minus"></i>
</button>
<button class="btn" data-value="sqrt" aria-label="Raíz cuadrada" role="button">
<i class="fa-solid fa-square-root-variable"></i>
</button>
<button class="btn-equal" data-value="=" aria-label="Igual" role="button">
<i class="fa-solid fa-equals"></i>
</button>
<button class="btn-pha" data-value="(" aria-label="Abrir paréntesis" role="button">(</button>
<button class="btn-pha" data-value=")" aria-label="Cerrar paréntesis" role="button">)</button>
<button class="btn-exp" data-value="exp" aria-label="Exponente" role="button">
<i class="fa-solid fa-superscript"></i>
</button>
<button class="btn-pnt" data-value="." aria-label="Punto" role="button">.</button>
</div>
</section>
</main>
<!-- Colocando el <script> al final, permite que se cargue primero el html antes que los scripts y de esta forma evitamos que JavaScript se cuelgue cargando la página. -->
<script src="JS/script.js"></script>
</body>
</html>