| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <title>calculator</title>
|
| <script>
|
| function insert(nbr) {
|
| if(document.form.textview.value == "0"){
|
| document.form.textview.value = nbr;
|
| }else if(document.form.textview.value == "" && nbr == "."){
|
| document.form.textview.value = "0.";
|
| }else if(document.form.textview.value == "" && (nbr == '+' || nbr == '-' || nbr == 'X' || nbr == '/'))
|
| {
|
| document.form.textview.value = "";
|
| }else
|
| document.form.textview.value = document.form.textview.value + nbr
|
| }
|
| function equals(){
|
| var exp = document.form.textview.value;
|
| if(exp)
|
| document.form.textview.value = eval(exp);
|
| }
|
| function clean() {
|
| document.form.textview.value = "";
|
| }
|
| function substring(){
|
| var exp = document.form.textview.value;
|
| document.form.textview.value = exp.substring(0,exp.length-1);
|
| }
|
| </script>
|
| <style>
|
| *{
|
| margin: 0;
|
| padding: 0;
|
| }
|
| .bnt{
|
| width: 50px;
|
| height: 50px;
|
| font-size: 18pt;
|
| margin: 5px;
|
| cursor: pointer;
|
| border: none;
|
| color: white;
|
| background-color: #26284e;
|
| }
|
| .bnt:hover{
|
| border: solid;
|
| border-color: rgba(25,29,49,0.96);
|
| box-shadow: 1px 1px 2px 1px darkslategray;
|
| }
|
| #text-view{
|
| width: 227px;
|
| font-size: 20pt;
|
| padding: 5px;
|
| margin: 5px;
|
| border: none;
|
| background: repeating-linear-gradient(#e4ffde,#ffaaf6);
|
| }
|
| .main{
|
| position: absolute;
|
| top: 100px;
|
| left: 200px;
|
| background: repeating-linear-gradient(#00ff7a,#ff00cf);
|
| box-shadow: 1px 1px 2px 1px darkslategrey;
|
| }
|
| .bg{
|
| height:100%;
|
| width: 100%;
|
| position: fixed;
|
| background: linear-gradient(to right, #ff00b4de, #02ce69);
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div class="bg"></div>
|
| <div class="main">
|
| <form name="form">
|
| <input id="text-view" name="textview" value="">
|
| </form>
|
| <table>
|
| <tr>
|
| <td><input class="bnt" type="button" value="C" onclick="clean()"></td>
|
| <td><input class="bnt" type="button" value="<=" onclick="substring()"></td>
|
| <td><input class="bnt" type="button" value="/" onclick="insert('/')"></td>
|
| <td><input class="bnt" type="button" value="X" onclick="insert('X')"></td>
|
| </tr>
|
| <tr>
|
| <td><input class="bnt" type="button" value="7" onclick="insert(7)"></td>
|
| <td><input class="bnt" type="button" value="8" onclick="insert(8)"></td>
|
| <td><input class="bnt" type="button" value="9" onclick="insert(9)"></td>
|
| <td><input class="bnt" type="button" value="-" onclick="insert('-')"></td>
|
| </tr>
|
| <tr>
|
| <td><input class="bnt" type="button" value="4" onclick="insert(4)"></td>
|
| <td><input class="bnt" type="button" value="5" onclick="insert(5)"></td>
|
| <td><input class="bnt" type="button" value="6" onclick="insert(6)"></td>
|
| <td><input class="bnt" type="button" value="+" onclick="insert('+')"></td>
|
| </tr>
|
| <tr>
|
| <td><input class="bnt" type="button" value="1" onclick="insert(1)"></td>
|
| <td><input class="bnt" type="button" value="2" onclick="insert(2)"></td>
|
| <td><input class="bnt" type="button" value="3" onclick="insert(3)"></td>
|
| <td rowspan="5"><input style="height: 112px;" class="bnt" type="button" value="=" onclick="equals()"></td>
|
| </tr>
|
| <tr>
|
| <td colspan="2"><input style="width: 112px" class="bnt" type="button" value="0" onclick="insert(0)"></td>
|
| <td><input class="bnt" type="button" value="." onclick="insert('.')"></td>
|
| </tr>
|
| </table>
|
| </div>
|
| </body>
|
| </html> |
Aucun commentaire:
Enregistrer un commentaire