- This video shows you how to make a simple calculator using HTML, CSS, JS in speed coding mode.
Source Code:
| <!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