tengo la siguiente calculadora que la estoy programando con Javascript y Jquery, tengo unos problemas para las operaciones de potenciación: ^
y de radicación: √
, parece ser que no reconoce los signos de ^
y √
, como hago para convertirlos en ^
por **
y √
por Match.sqrt(x)
.Además he leido en demás foros que la funcion eval()
es totalmente desaconsejada su uso, ya que si sufres un ataque cibernetico a tu sitio o aplicacion web, donde tengas almacenada esa funcion en un script, el atacante puede robarte cookies o cambiar tu codigo por el suyo, o algo asi entendí. Si fuera así, tendría que cambiar esa funcion por otra. Y por último, cuando el tipo de dato en el campo de texto sea inválido, Ejem: 2++ o 2+2+ o tambien 2*2 + 1 / , como hago para que me genere un mensaje que diga ERROR o IMPOSIBLE DE PROCESAR, parecido a lo que la consola ejecuta Unexpected end of input
document.addEventListener('DOMContentLoaded', function(){
const text_input = document.querySelector('.text_input'),
box = document.querySelector('.box');
// Botones
const buttonOn = $('.on'),
buttonOff = $('.off'),
buttonAll = $('button')
buttonOn.addClass('active');
const box_content = () =>{
box.addEventListener('click', e =>{
if(!box){ return }
const element_clicked = e.target; // Seleccionar elemento clickeado
// Click en ON
if(element_clicked.className === 'on'){
buttonOn.addClass('active');
buttonOff.removeClass('active');
buttonAll.removeAttr('disabled');
continueAnimation();
}
// Click en OFF
if(element_clicked.className === 'off'){
buttonOn.removeClass('active');
buttonOff.addClass('active');
buttonAll.not('.on, .off').attr('disabled','disabled');
cleanCalculator();
stopAnimation();
}
// Click en ←
if(element_clicked.className === 'borrar-caracter'){
let select_text = text_input.textContent;
let deleteCharacter = select_text.substring(0, select_text.length - 1); // Eliminar ultimo caracter del campo de texto
text_input.textContent = deleteCharacter;
text_input.textContent === ''
? continueAnimation()
: null
}
// Click en DEL
if(element_clicked.className === 'borrar-todo'){
cleanCalculator();
continueAnimation();
}
// Click en numeros
if(element_clicked.className === 'numero'){
inputCharacter(element_clicked.textContent);
}
// Click en operadores
if(element_clicked.className === 'operador'){
inputCharacter(element_clicked.textContent);
}
// Click en igual
if(element_clicked.className === 'resultado'){
calculatorInit();
}
});
}
box_content();
// Funcion limpiar campo de texto de calculadora
const cleanCalculator = () =>{
text_input.textContent = '';
}
// Funcion detener animacion de slash vertical
const continueAnimation = () =>{
text_input.classList.remove('stopAnimation');
}
// Funcion iniciar animacion de slash vertical
const stopAnimation = () =>{
text_input.classList.add('stopAnimation');
}
// Funcion concatenar caracteres en campo de texto de calculadora
const inputCharacter = character =>{
text_input.textContent += character;
text_input.classList.add('stopAnimation');
limite = text_input.textContent.substr(0, 24); // Limite de caracteres
text_input.textContent = limite;
}
// Funcion capturar resultado con eval()
const calculatorInit = () =>{
let capture_value = eval(text_input.textContent);
console.log(capture_value);
text_input.textContent = `${capture_value}`
if(text_input.textContent === 'undefined'){
text_input.textContent = null
}
}
});
body{
background: #D9D6D6;
font-family: system-ui, sans-serif;
margin: 0;
padding: 0;
}
h2{
font-size: 40px;
text-align: center;
margin: 40px 0;
}
.container{
width: 100%;
max-width: 350px;
margin: auto;
background: #3b5168;
height: 450px;
box-sizing: border-box;
padding-top: 30px;
margin-bottom: 50px;
box-shadow: 0 2px 15px 2px rgba(0,0,0,0.25);
border-radius: 25px;
border: 4px solid rgba(0,0,0,0.25);
}
.text_input{
background: rgba(255,255,255,0.75);
border-radius: 15px;
border-top: 4px solid rgba(0,0,0,0.5);
border-left: 4px solid rgba(0,0,0,0.5);
width: 100%;
max-width: 300px;
height: 50px;
margin: auto;
line-height: 2.5;
box-sizing: border-box;
padding: 0 15px;
font-weight: bold;
font-size: 18px;
}
.text_input:after{
content: '';
border-right: 2px solid black;
animation: fade 1.5s infinite;
}
@keyframes fade{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.box{
width: 100%;
max-width: 300px;
margin: 5% auto 5% auto;
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
}
button{
border: 3px solid rgba(0,0,0,0.45);
color: white;
font-weight: bold;
padding: 10px;
border-radius: 6px;
text-align: center;
}
button:hover{
cursor: pointer;
}
button:focus{
outline: none;
}
button:active{
transform: scale(0.85);
}
button:disabled{
opacity: 0.6;
}
.operador,
.signo_decimal{
background: rgba(0,0,0,0.45);
font-size: 17px;
}
.numero{
background: rgba(255,255,255,0.75);
color: black;
font-size: 20px;
}
.borrar-todo{
background: rgba(187,0,0,0.8);
}
.resultado{
background: rgba(255,170,0,0.8);
color: black;
font-size: 20px;
grid-column: 4/6;
grid-row: 5;
}
.on,
.off{
background: rgba(255,255,255,0.75);
color: black;
}
.borrar-caracter{
background: rgb(0,1,110);
}
button:nth-child(14){
grid-column: 4;
grid-row: 3/5;
}
.active{
background: #000;
color: white;
}
.stopAnimation:after{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<h2>My first calculator</h2>
<div class="container">
<div class="text_input"></div>
<div class="box">
<button class="on">ON</button>
<button class="off">OFF</button>
<button class="borrar-caracter">←</button>
<button class="operador">√</button>
<button class="borrar-todo">DEL</button>
<button class="numero">7</button>
<button class="numero">8</button>
<button class="numero">9</button>
<button class="operador">*</button>
<button class="operador">^</button>
<button class="numero">4</button>
<button class="numero">5</button>
<button class="numero">6</button>
<button class="operador">+</button>
<button class="operador">/</button>
<button class="numero">1</button>
<button class="numero">2</button>
<button class="numero">3</button>
<button class="operador">-</button>
<button class="numero">0</button>
<button class="operador">.</button>
<button class="operador">%</button>
<button class="resultado">=</button>
</div>
</div>
Agradeceria que me pudieran ayudar, es la primera vez que programo una calculadora.