JS:
const buttons = document.querySelector(‘button’);
const screen = document.getElementById(‘screen’);
for(let button of buttons){
button.addEventListener(‘click’, function(event){
const button_text = event.target.value;
if(button_text === 'C'){
screen.value = '';
}
else if(button_text === '='){
try{
screen.value = eval(screen.value);
console.log(screen.value = eval(screen.value));
}
catch(event){
screen.value = 'Invalid';
}
}
else if(button_text === 'X'){
screen.value += '*';
}
else if(button_text === '^'){
screen.value += '**';
}
else{
screen.value += button_text;
console.log(screen.value += button_text);
}
})
}
CSS:
*{
margin: 0;
}
h1{
color:rgb(44, 42, 40);
font-size: 1.2em;
margin: 2px auto;
}
section{
border: 2px solid black;
margin: 20px auto;
height: 240px;
width: 180px;
padding: 10px;
background-color: ghostwhite;
}
h1{
text-align: center;
}
#screen{
display: block;
margin: auto;
border: 2px solid black;
background-color: rgb(153, 199, 177);
}
table{
border: 2px solid darkgrey;
margin: 9px auto;
}
td{
height: 15px;
width: 20px;
box-shadow: 01px 0px 1px darkgray;
}
button{
height:100%;
width: 100%;
cursor: pointer;
transition: 800ms;
background-color: lightgrey;
}
td:active{
transform: scale(0.95);
}
HTML:
<section>
<div>
<h1>CALCULATOR</h1>
<input type="text" id="screen"/>
<table cellspacing = '10'>
<tbody>
<tr>
<td><button style="background-color: rgb(104, 196, 232);">C</button></td>
<td><button>%</button></td>
<td><button>X</button></td>
<td><button>-</button></td>
</tr>
<tr>
<td><button>7</button></td>
<td><button>8</button></td>
<td><button>9</button></td>
<td><button>/</button></td>
</tr>
<tr>
<td><button>4</button></td>
<td><button>5</button></td>
<td><button>6</button></td>
<td><button>^</button></td>
</tr>
<tr>
<td><button>1</button></td>
<td><button>2</button></td>
<td><button>3</button></td>
<td rowspan="2"><button style="background-color: rgb(230, 157, 84);">+</button></td>
</tr>
<tr>
<td><button>0</button></td>
<td><button>.</button></td>
<td><button>=</button></td>
</tr>
</tbody>
</table>
</div>
</section>
</body>