Calculate html code

 








<!DOCTYPE html> 


<html> 


  


<head> 


    <script src= 

"https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.6.4/math.js"


        integrity= 

"sha512-BbVEDjbqdN3Eow8+empLMrJlxXRj5nEitiCAK5A1pUr66+jLVejo3PmjIaucRnjlB0P9R3rBUs3g5jXc8ti+fQ=="


        crossorigin="anonymous" 


        referrerpolicy="no-referrer"></script> 


    <script src= 

"https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.6.4/math.min.js"


        integrity= 

"sha512-iphNRh6dPbeuPGIrQbCdbBF/qcqadKWLa35YPVfMZMHBSI6PLJh1om2xCTWhpVpmUyb4IvVS9iYnnYMkleVXLA=="


        crossorigin="anonymous" 


        referrerpolicy="no-referrer"></script> 


    <!-- for styling -->


    <style> 


        table { 


            border: 1px solid black; 


            margin-left: auto; 


            margin-right: auto; 


        } 


  


        input[type="button"] { 


            width: 100%; 


            padding: 20px 40px; 


            background-color: green; 


            color: white; 


            font-size: 24px; 


            font-weight: bold; 


            border: none; 


            border-radius: 5px; 


        } 


  


        input[type="text"] { 


            padding: 20px 30px; 


            font-size: 24px; 


            font-weight: bold; 


            border: none; 


            border-radius: 5px; 


            border: 2px solid black; 


        } 


    </style> 


</head> 

<!-- create table -->


  


<body> 


    <table id="calcu"> 


        <tr> 


            <td colspan="3"><input type="text" id="result"></td> 


            <!-- clr() function will call clr to clear all value -->


            <td><input type="button" value="c" onclick="clr()" /> </td> 


        </tr> 


        <tr> 


            <!-- create button and assign value to each button -->


            <!-- dis("1") will call function dis to display value -->


            <td><input type="button" value="1" onclick="dis('1')" 


                        onkeydown="myFunction(event)"> </td> 


            <td><input type="button" value="2" onclick="dis('2')" 


                        onkeydown="myFunction(event)"> </td> 


            <td><input type="button" value="3" onclick="dis('3')" 


                        onkeydown="myFunction(event)"> </td> 


            <td><input type="button" value="/" onclick="dis('/')" 


                        onkeydown="myFunction(event)"> </td> 


        </tr> 


        <tr> 


            <td><input type="button" value="4" onclick="dis('4')" 


                        onkeydown="myFunction(event)"> </td> 


            <td><input type="button" value="5" onclick="dis('5')" 


                        onkeydown="myFunction(event)"> </td> 


            <td><input type="button" value="6" onclick="dis('6')" 


                        onkeydown="myFunction(event)"> </td> 


            <td><input type="button" value="*" onclick="dis('*')" 


                        onkeydown="myFunction(event)"> </td> 


        </tr> 


        <tr> 


            <td><input type="button" value="7" onclick="dis('7')" 


                        onkeydown="myFunction(event)"> </td> 


            <td><input type="button" value="8" onclick="dis('8')" 


                        onkeydown="myFunction(event)"> </td> 


            <td><input type="button" value="9" onclick="dis('9')" 


                        onkeydown="myFunction(event)"> </td> 


            <td><input type="button" value="-" onclick="dis('-')"


                        onkeydown="myFunction(event)"> </td> 


        </tr> 


        <tr> 


            <td><input type="button" value="0" onclick="dis('0')" 


                        onkeydown="myFunction(event)"> </td> 


            <td><input type="button" value="." onclick="dis('.')" 


                        onkeydown="myFunction(event)"> </td> 


            <!-- solve function call function solve to evaluate value -->


            <td><input type="button" value="=" onclick="solve()"> </td> 


  


            <td><input type="button" value="+" onclick="dis('+')" 


                        onkeydown="myFunction(event)"> </td> 


        </tr> 


    </table> 


  


    <script> 


        // Function that display value 


        function dis(val) { 


            document.getElementById("result").value += val 


        } 


  


        function myFunction(event) { 


            if (event.key == '0' || event.key == '1'  


                || event.key == '2' || event.key == '3' 


                || event.key == '4' || event.key == '5'  


                || event.key == '6' || event.key == '7' 


                || event.key == '8' || event.key == '9'  


                || event.key == '+' || event.key == '-' 


                || event.key == '*' || event.key == '/') 


                document.getElementById("result").value += event.key; 


        } 


  


        var cal = document.getElementById("calcu"); 


        cal.onkeyup = function (event) { 


            if (event.keyCode === 13) { 


                console.log("Enter"); 


                let x = document.getElementById("result").value 


                console.log(x); 


                solve(); 


            } 


        } 


  


        // Function that evaluates the digit and return result 


        function solve() { 


            let x = document.getElementById("result").value 


            let y = math.evaluate(x) 


            document.getElementById("result").value = y 


        } 


  


        // Function that clear the display 


        function clr() { 


            document.getElementById("result").value = "" 


        } 


    </script> 


</body> 


  


</html>    

Output:






Comments

Post a Comment

Popular posts from this blog

weight loss

Image
Burn Fat Vs Burning Calories   To lose weight and get in shape you must have a good diet and exercise regularly to burn fat.   first thing u must understand about exercise is that just because you are burning calories does not mean you are burning fat. Your main focus when you exercise should be losing body fat, and you can’t lose body fat just from burning calories. When we exercise, our bodies will start burning calories, but the calories that are burned are the calories from carbohydrates in our system. In order to burn calories from your stored fat, your body requires the presence of oxygen. There is a certain amount of oxygen that your body needs in order to start burning fat and the only way for you to measure the amount needed for your own body is to keep up with your target heart rate during exercise.  Please understand that if you continue to only burn calories from carbohydrates, you will lose mostly “water weight” which leads to a decrease in y...
Read more

Good thing it doesn’t mess with fall fashion

Image
 2021 has been  crazy roller coaster ride for us all. Covid had messed with all of our lives.  Good thing it doesn’t mess with fall fashion.  We are in late October and that means cooler temperatures. Who has gotten out their favorite fall wear? What are your go-to items? ------------------------------------------------------------------------------------ My go-to items are cardigan sweaters, jeans, boots, hats, a jean jacket, and something with print. You can find these items at most clothing stores. I got these items below at Amazon and Shein, but I also believe we should support small businesses. You can easily search up small businesses in your area. Don’t forget about consignment and thrift shops. They need our support too! The fun part of fashion is switching things up and wearing items in different ways.   usually get maybe 4new items and use whatever else is in my closet. It can be fun coming up with new ways to style your outfits. I got a new color...
Read more

Environmentally Household Cleaners

Image
Environmentally Household Cleaners   Many people use a vast array of chemical-laden household cleaners and products around the home on a daily basis. they may not be aware of is the fact that many of these chemicals can be damaging to their health when inhaled. Apart from the inhalation aspect. ________________________________________________________  skin irritations often occur when coming into contact with many chemical cleaners. Many disinfectants contain phenol  cresol. These can attack the central nervous system, liver, kidneys, spleen, and pancreas. How can adding a load of chemicals to your home environment be good for your health and cleanliness. They may kill off the germs, sure, but human beings are gradually going to kill themselves off too, if they continue in this way. Green products.  Many people aim to keep their homes a germ-free environment, but if our homes are kept so germ-free that our immune systems no longer have to work as hard, we run the ris...
Read more