Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Calculator</title>
- <link rel="stylesheet" href="css/CalcStyle.css">
- </head>
- <body>
- <table border ="1">
- <th colspan="4">Calculator</th>
- <tr>
- <td colspan="3"><input type="text" id="result"/></td>
- <td><input type="button" value="c" onclick="clr()"/> </td>
- </tr>
- <tr>
- <td><input type="button" value="7" onclick="dis('7')"/> </td>
- <td><input type="button" value="8" onclick="dis('8')"/> </td>
- <td><input type="button" value="9" onclick="dis('9')"/> </td>
- <td><input type="button" value="/" onclick="dis('/')" class="func"/> </td>
- </tr>
- <tr>
- <td><input type="button" value="4" onclick="dis('4')"/> </td>
- <td><input type="button" value="5" onclick="dis('5')"/> </td>
- <td><input type="button" value="6" onclick="dis('6')"/> </td>
- <td><input type="button" value="-" onclick="dis('-')" class="func"/> </td>
- </tr>
- <tr>
- <td><input type="button" value="1" onclick="dis('1')"/> </td>
- <td><input type="button" value="2" onclick="dis('2')"/> </td>
- <td><input type="button" value="3" onclick="dis('3')"/> </td>
- <td><input type="button" value="+" onclick="dis('+')" class="func"/> </td>
- </tr>
- <tr>
- <td><input type="button" value="." onclick="dis('.')" class="func"/> </td>
- <td><input type="button" value="0" onclick="dis('0')"/> </td>
- <td><input type="button" value="=" onclick="solve()" class="func"/> </td>
- <td><input type="button" value="*" onclick="dis('*')" class="func"/> </td>
- </tr>
- </table>
- <script type="text/javascript" src="js/CalcScript.js"></script>
- </body>
- </html>
- ---------------------------------------------------------------------------------------------------------------------------------------
- //css
- *{
- background-color:aliceblue;
- }
- .title{
- margin-left: 43%;
- margin-bottom: 10px;
- text-align:center;
- width: 210px;
- color:rgb(0, 0, 0);
- border: none;
- font-size: 50px;
- }
- input[type="button"]{
- font-size: 30px;
- height: 100%;
- background-color:rgb(214, 210, 209);
- color: black;
- border: solid black 2px;
- width:100%
- }
- input[type="button"]:hover{
- width: 95%;
- height: 95%;
- font-size: 25px;
- background-color: rgb(209, 237, 245);
- }
- input[type="text"]{
- font-size: 30px;
- height: 93%;
- background-color:white;
- border: solid black 2px;
- width:98%
- }
- table{
- width: 500px;
- margin-left: 33%;
- margin-top: 5%;
- border: none;
- }th{
- margin-left: 100px;
- font-size: 40px;
- text-align: center;
- background-color: rgb(214, 210, 209);
- }
- td{
- height: 100px;
- width: 500px;
- border: none;
- }
- input.func{
- background-color: rgb(173, 173, 173);
- }
- ---------------------------------------------------------------------------------------------------------------------------------------
- //js
- function dis(val){
- document.getElementById("result").value+=val
- }
- function solve(){
- let x = document.getElementById("result").value
- let y = eval(x)
- document.getElementById("result").value = y
- }
- function clr(){
- document.getElementById("result").value = ""
- }
Add Comment
Please, Sign In to add comment