HTML-Rechner by Emmanuel Ndubuisi:

Kqzpvz

Bootstrap Modal:

Modal

Youtube

mebis/moodle: Einen Taschenrechner einbinden

Code

<style>.calculator table {
margin: auto;
background-color: #222;
width: 315px;
max-width: 315px;
height: 325px;
text-align: center;
border-radius: 4px;
padding-right: 10px;
}
.calculator input {
outline: 0;
position: relative;
left: 5px;
top: 5px;
border: 0;
color: #495069!important;
background-color: #fff;
border-radius: 4px;
width: 60px;
height: 50px;
float: left;
margin: 5px;
font-size: 20px;
box-shadow: 0 4px rgba(0,0,0,0.2);
margin-bottom: 15px;
}
.calculator input:active {
top: 4px;
border: 0 solid #000;
color: #495069;
background-color: #fff;
border-radius: 4px;
width: 60px;
height: 50px;
float: left;
margin: 5px;
font-size: 20px;
box-shadow: none;
}
.calculator #display {
width: 90%;
max-width: 90%;
font-size: 26px;
text-align: right;
background-color: #fff;
float: left;
}
.calculator #display:hover {
width: 90%;
font-size: 26px;
text-align: right;
background-color: #fff;
box-shadow: 0 4px rgba(0,0,0,0.2);
}
.calculator #display:active {
top: 5px;
width: 270px;
font-size: 26px;
text-align: right;
background-color: #fff;
box-shadow: 0 4px rgba(0,0,0,0.2);
}
.calculator .operator {
background-color: #cee9ea;
position: relative;
}
.calculator .operator:hover {
background-color: #cee9ea;
box-shadow: 0 4px #b0d2cf;
}
.calculator .operator:active {
top: 4px;
box-shadow: none;
}
.calculator #clear {
float: left;
position: relative;
display: block;
background-color: #ff9fa8;
}
.calculator #clear:hover {
float: left;
display: block;
background-color: #F297A0;
margin-bottom: 15px;
box-shadow: 0 4px #CC7F86;
}
.calculator #clear:active {
float: left;
top: 4px;
display: block;
background-color: #F297A0;
margin-bottom: 15px;
box-shadow: none;
}
</style>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#rechnerModal">
<i class="fa fa-calculator"></i> Taschenrechner
</button>
<!-- Modal -->
<div class="modal fade" id="rechnerModal" tabindex="-1" role="dialog" aria-labelledby="rechnerModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="rechnerModalLabel">Taschenrechner</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="calculator">
<form name="calculator">
<table>
<tr>
<td colspan="4">
<input type="text" name="display" id="display" disabled>
</td>
</tr>
<tr><td><input type="button" name="point" value="." onclick="calculator.display.value += '.'"></td>
<td><input type="button" name="klammerauf" value="(" onclick="calculator.display.value += '('"></td>
<td><input type="button" name="klammerzu" value=")" onclick="calculator.display.value += ')'"></td><td></td></tr>
<tr>
<td><input type="button" name="one" value="1" onclick="calculator.display.value += '1'"></td>
<td><input type="button" name="two" value="2" onclick="calculator.display.value += '2'"></td>
<td><input type="button" name="three" value="3" onclick="calculator.display.value += '3'"></td>
<td><input type="button" class="operator" name="plus" value="+" onclick="calculator.display.value += '+'"></td>
</tr>
<tr>
<td><input type="button" name="four" value="4" onclick="calculator.display.value += '4'"></td>
<td><input type="button" name="five" value="5" onclick="calculator.display.value += '5'"></td>
<td><input type="button" name="six" value="6" onclick="calculator.display.value += '6'"></td>
<td><input type="button" class="operator" name="minus" value="-" onclick="calculator.display.value += '-'"></td>
</tr>
<tr>
<td><input type="button" name="seven" value="7" onclick="calculator.display.value += '7'"></td>
<td><input type="button" name="eight" value="8" onclick="calculator.display.value += '8'"></td>
<td><input type="button" name="nine" value="9" onclick="calculator.display.value += '9'"></td>
<td><input type="button" class="operator" name="times" value="x" onclick="calculator.display.value += '*'"></td>
</tr>
<tr>
<td><input type="button" id="clear" name="clear" value="c" onclick="calculator.display.value = ''"></td>
<td><input type="button" name="zero" value="0" onclick="calculator.display.value += '0'"></td>
<td><input type="button" name="doit" value="=" onclick="calculator.display.value = eval(calculator.display.value)"></td>
<td><input type="button" class="operator" name="div" value="/" onclick="calculator.display.value += '/'"></td>
</tr>
</table>
</form></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
</div>
</div>
</div>
</div>