Skip to content

Commit

Permalink
Archivos para correr la pagina web.
Browse files Browse the repository at this point in the history 
Más adelante, agregamos BOOTSTRAP y VUE.js
  • Loading branch information
@consuelomilagros
consuelomilagros authored Dec 5, 2024
1 parent 691118e commit dbc56e5
Show file tree
Hide file tree
Showing 3 changed files with 290 additions and 0 deletions.
65 changes: 65 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora cientifica básica</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="https://static.vecteezy.com/system/resources/previews/015/123/653/non_2x/realistic-calculator-isolated-png.png">
</head>
<body>
<header>
<h1 class="titulo">Realice operaciones matemáticas básicas con la calculadora online</h1>
</header>
<div class="calculator">
<input type="text" id="display" placeholder="0" oninput="validateInput(this)">
<div class="buttons">
<button class="btn" onclick="clearDisplay()">C</button>
<button class="btn" onclick="appendToDisplay('7')">7</button>
<button class="btn" onclick="appendToDisplay('8')">8</button>
<button class="btn" onclick="appendToDisplay('9')">9</button>
<button class="btn" onclick="appendToDisplay('/')">/</button>
<button class="btn" onclick="appendToDisplay('4')">4</button>
<button class="btn" onclick="appendToDisplay('5')">5</button>
<button class="btn" onclick="appendToDisplay('6')">6</button>
<button class="btn" onclick="appendToDisplay('*')">*</button>
<button class="btn" onclick="appendToDisplay('1')">1</button>
<button class="btn" onclick="appendToDisplay('2')">2</button>
<button class="btn" onclick="appendToDisplay('3')">3</button>
<button class="btn" onclick="appendToDisplay('-')">-</button>
<button class="btn" onclick="appendToDisplay('0')">0</button>
<button class="btn" onclick="appendToDisplay('+')">+</button>
<button class="btn" onclick="appendToDisplay('%')"">%</button>
<button class="btn btn-advanced btn-square-root" onclick="calculateSquareRoot()">√</button>
<button class="btn btn-advanced btn-exponent" onclick="calculateExponent()">xⁿ</button>
<button class="btn btn-advanced" onclick="appendToDisplay('sin(')">sin</button>
<button class="btn btn-advanced" onclick="appendToDisplay('cos(')">cos</button>
<button class="btn btn-advanced" onclick="appendToDisplay('tan(')">tan</button>
<button class="btn btn-advanced" onclick="appendToDisplay('log(')">log</button>
<button class="btn" onclick="calculateResult()">=</button>
</div>
</div>
<!--Colocamos el archivo donde estas las funciones y variables de javascript para modificar nuestra calculadora-->
<script src="logica_calculadora.js"></script>
<footer class="social-footer">
<p class="footer-title">SEGUIME EN:</p>
<div class="social-icons">
<a href="https://x.com/fvckingmuggle" target="_blank" class="social-icon">
<img src="https://cdn-icons-png.flaticon.com/512/733/733579.png" alt="Twitter">
</a>
<a href="https://www.facebook.com/milagros.venencia.14/" target="_blank" class="social-icon">
<img src="https://cdn-icons-png.flaticon.com/512/733/733547.png" alt="Facebook">
</a>
<a href="https://instagram.com/femil4gros" target="_blank" class="social-icon">
<img src="https://cdn-icons-png.flaticon.com/512/733/733558.png" alt="Instagram">
</a>
<a href="https://github.com/consuelomilagros" target="_blank" class="social-icon">
<img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="GitHub">
</a>
<a href="https://bsky.app/profile/fuckingmuggle.bsky.social" target="_blank" class="social-icon">
<img src="https://seeklogo.com/images/B/bluesky-logo-934E68F6EC-seeklogo.com.png" alt="Bluesky">
</a>
</div>
</footer>
</body>
</html>
91 changes: 91 additions & 0 deletions logica_calculadora.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
// logica_calculadora.js
let isExponentMode = false; // Bandera para controlar el modo exponente
let baseValue = null; // Guardará la base cuando se presione xⁿ

function appendToDisplay(value) {
const display = document.getElementById('display');
display.value += value;
}

function validateInput(input) {
// Permitir solo números, operadores matemáticos, paréntesis, punto decimal, y guion bajo
input.value = input.value.replace(/[^0-9+\-*/().^√logsincoatan_]/g, '');
}

function clearDisplay() {
const display = document.getElementById('display');
display.value = '';
}

function calculateResult() {
const display = document.getElementById('display');
try {
let expression = display.value;

if (/log_([0-9]+)\s*\(\s*([0-9.]+)\s*\)/.test(expression)) {
// Extraer base y argumento
const match = expression.match(/log_([0-9]+)\s*\(\s*([0-9.]+)\s*\)/);
const base = parseFloat(match[1]);
const num = parseFloat(match[2]);

// Calcular el logaritmo en base n
display.value = Math.log(num) / Math.log(base);
return;
}

// Otros reemplazos y evaluación utilizando REGEX para JS
expression = expression.replace(/√(\d+)/g, 'Math.sqrt($1)');
expression = expression.replace(/log\(([^)]+)\)/g, 'Math.log10($1)');
expression = expression.replace(/sin\(([^)]+)\)/g, 'Math.sin($1)');
expression = expression.replace(/cos\(([^)]+)\)/g, 'Math.cos($1)');
expression = expression.replace(/tan\(([^)]+)\)/g, 'Math.tan($1)');
expression = expression.replace(/(\d+)\^(\d+)/g, 'Math.pow($1,$2)');
console.log("Expresión evaluada: ", expression);
display.value = eval(expression);
} catch (error) {
display.value = 'Error';
}
}

function calculatePercentage() {
const display = document.getElementById('display');
try {
display.value = parseFloat(display.value) / 100;
} catch (error) {
display.value = 'Error';
}
}

function calculateRaiz(){
const display= document.getElementById('display');
try {
display.value= Math.sqrt(eval(display.value));
} catch (error){
display.value= 'Error';
}
}

function calculateExponent() {
const display = document.getElementById('display');

// Si no estamos en modo exponente, guarda la base y activa el modo
if (!isExponentMode) {
baseValue = parseFloat(display.value);
if (isNaN(baseValue)) {
display.value = 'Error'; // Error si no hay un número válido
return;
}
isExponentMode = true;
display.value = ''; // Limpia el display para que el usuario ingrese el exponente
} else {
// Si estamos en modo exponente, toma el exponente y calcula
const exponentValue = parseFloat(display.value);
if (isNaN(exponentValue)) {
display.value = 'Error'; // Error si no hay un número válido
return;
}
display.value = Math.pow(baseValue, exponentValue);
isExponentMode = false; // Resetea el modo exponente
baseValue = null; // Limpia el valor de la base
}
}
134 changes: 134 additions & 0 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
/* styles.css */
body {
font-family: 'Times New Roman', Times, serif;
text-align: center;
color: #333;
margin: 0;
padding: 0;
display: block; /* Activar Flexbox */
height: 100vh; /* Ocupa toda la altura del viewport */
background-image:url("https://img.freepik.com/vector-gratis/fondo-matematicas_23-2148146941.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

.titulo {
width: 100%; /* Ocupa todo el ancho de la página */
height: auto; /* Ajusta la altura según el contenido */
background-image: url("https://i.gifer.com/Dctz.gif");
background-size: cover; /* Ajusta el tamaño del GIF */
background-repeat: no-repeat; /* Evita que el GIF se repita */
background-position: 20% 15%; /* Centra el GIF */
color: rgb(255, 238, 3); /* Color del texto para contraste */
text-align: center; /* Alinea el texto al centro */
padding: 40px; /* Espacio interno para el texto */text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Mejora la legibilidad */
font-size: 36px; /* Tamaño del texto */
font-family: 'Times New Roman', Times, serif;
display: flex;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Agrega una sombra para resaltar */
}

.calculator {
background-color: #e60000;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 300px; /* Define un tamaño fijo para el ancho. */
margin: 0 auto; /* Asegura que la calculadora esté centrada horizontalmente. */
}

input[type="text"] {
width: 100%;
height: 40px;
margin-bottom: 10px;
text-align: right;
font-size: 18px;
border: 1px solid #ffffff;
border-radius: 5px;
padding: 5px;
}

.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}

.btn {
padding: 20px;
font-size: 18px;
background-color: #ffffff;
color: rgb(0, 0, 0);
border: none;
border-radius: 5px;
cursor: pointer;
}

.btn:hover {
background-color: #0056b3;
}

/* Botones destacados para funciones avanzadas */
.btn-advanced {
background-color: #ffffff; /* Naranja para destacar */
color: #000000;
font-weight: bold;
font-size: 20px;
}

.btn-advanced:hover {
background-color: #0056b3; /* Más oscuro al pasar el cursor */
transform: scale(1.1); /* Efecto de agrandamiento */
}

/* Botón xⁿ con icono de superíndice */
.btn-exponent::after {
font-size: 14px;
vertical-align: super; /* Coloca la "n" en superíndice */
}

/* Botón √ con un diseño único */
.btn-square-root::after {
font-family: Arial, sans-serif; /* Asegura que el símbolo √ sea visible */
font-size: 20px;
margin-left: 5px;
}

main {
padding: 20px; /* Espacio interno del contenido */
}

/* Footer container */
.social-footer {
position: relative; /* Evita superposición */
margin-top: 30px; /* Separación entre la calculadora y el footer */
background-color: #001f3f; /* Fondo azul oscuro */
padding: 20px;
text-align: center;
}

.footer-title {
font-size: 18px;
color: #fff;
margin-bottom: 10px;
font-weight: bold;
text-transform: uppercase;
}

.social-icons {
display: flex;
justify-content: center;
gap: 15px; /* Espaciado entre los íconos */
}

.social-icon img {
width: 40px;
height: 40px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.social-icon:hover img {
transform: scale(1.2); /* Aumenta ligeramente el tamaño */
box-shadow: 0px 4px 8px rgba(5, 5, 5, 0.4); /* Sombra elegante */
}

0 comments on commit dbc56e5

Please sign in to comment.