Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@fl2on
fl2on authored Jul 10, 2024
1 parent 7bbdfc4 commit e69a38a
Show file tree
Hide file tree
Showing 7 changed files with 503 additions and 0 deletions.
87 changes: 87 additions & 0 deletions INICIODEX.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DEX - Calculadora</title>
<link rel="stylesheet" href="css/EstiloINICIODEX.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/9.4.4/math.min.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script>
window.MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
startup: {
ready: function() {
MathJax.startup.defaultReady();
document.getElementById("calculateButton").addEventListener("click", function() {
const expression = document.getElementById("expression").value;
const variable = document.getElementById("variable").value;

if (expression && variable) {
try {
const result = math.derivative(expression, variable).toString();

// Display the result in the results section
document.getElementById("output").innerHTML = `\\(${result}\\)`;

// Add to history
const historyItem = document.createElement("li");
historyItem.innerHTML = `Expresión: ${expression} <br> Variable: ${variable} <br> Resultado: \\(${result}\\)`;
document.getElementById("historyList").prepend(historyItem);

// Scroll the new history item into view
historyItem.scrollIntoView({ behavior: 'smooth', block: 'end' });

// Render MathJax
MathJax.typesetPromise([document.getElementById("output"), historyItem]);
} catch (e) {
document.getElementById("output").innerHTML = 'Error en la expresión';
}
} else {
document.getElementById("output").innerHTML = 'Por favor, introduce una expresión y una variable.';
}
});

document.getElementById("toggleHistoryButton").addEventListener("click", function() {
const history = document.getElementById("history");
history.style.display = history.style.display === 'none' || history.style.display === '' ? 'block' : 'none';
});

document.getElementById("clearHistoryButton").addEventListener("click", function() {
document.getElementById("historyList").innerHTML = '';
});
}
}
};
</script>
</head>
<body>
<header class="header">
<h1 class="title" onclick="location.reload();">DEX</h1>
<button class="history-button" id="toggleHistoryButton">≡</button>
</header>

<main class="main">
<section class="calculation-form">
<h2>Expresión:</h2>
<input type="text" id="expression" placeholder="x^2 + 3*x + 5 + x^3 + 4*x + 7">
<h2>Variable:</h2>
<input type="text" id="variable" placeholder="x">
<button id="calculateButton" class="calculate-button">Calcular Derivada</button>
</section>

<section class="results">
<h2>Resultado:</h2>
<p id="output"></p>
</section>
</main>
<aside class="history" id="history">
<h2>Historial de Cálculos</h2>
<ul id="historyList"></ul>
<button class="clear-history-button" id="clearHistoryButton">Borrar Historial</button>
</aside>
</body>
</html>
186 changes: 186 additions & 0 deletions css/EstiloINICIODEX.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
body {
font-family: Arial, sans-serif;
background-color: #f3f4f6;
margin: 0;
padding: 0;
}

.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
background-color: #4A00E0;
color: white;
}

.logo {
height: 40px;
cursor: pointer;
}

.title {
margin: 0 auto;
font-size: 1.5em;
text-align: center;
flex-grow: 1;
}

.history-button {
background-color: #4A00E0;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
position: fixed;
top: 10px;
right: 10px;
z-index: 1000;
}

.history-button:hover {
background-color: #8A2BE2;
}

.main {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}

.calculation-form, .results {
background-color: white;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}

.calculation-form h2, .results h2 {
margin-top: 0;
}

.calculation-form input, .results input {
width: 100%;
padding: 4px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}

.calculate-button {
background-color: #4A00E0;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}

.calculate-button:hover {
background-color: #8A2BE2;
}

.results {
display: flex;
flex-direction: column;
align-items: center;
}

.results p {
font-size: 1.2em;
margin: 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
text-align: center;
}

.history {
position: fixed;
top: 0;
right: 0;
width: 80%;
max-width: 300px;
height: 100%;
background-color: #f9f9f9;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
padding: 20px;
overflow-y: auto;
display: none;
}

.history h2 {
margin-top: 0;
}

.history ul {
list-style: none;
padding: 0;
}

.history ul li {
background-color: white;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.clear-history-button {
background-color: #E74C3C;
color: white;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
width: 100%;
margin-top: 10px;
}

.clear-history-button:hover {
background-color: #C0392B;
}

/* Media Queries para responsive design */
@media (max-width: 600px) {
.header {
flex-direction: column;
align-items: flex-start;
}

.logo {
height: 30px;
width: 100%;
}

.title {
font-size: 1.2em;
margin: 10px 0;
}

.history-button {
padding: 5px 10px;
}

.main {
padding: 10px;
}

.calculation-form, .results {
padding: 15px;
}

.calculate-button {
padding: 5px 10px;
}

.results p {
font-size: 1em;
}
}
Loading

0 comments on commit e69a38a

Please sign in to comment.