For many that wonders what HTML, CSS and Javascript can do, here is a little calculator you can build using the languages. These languages are not only made for web applications, you can lay your hands on building a simple calculator with it, even to an advanced one.
Look at the code below.
- <html>
- <head>
- <title>Calculator</title>
- <style>
- #text1,#text2{
- }
- button{
- width:100%;
- height:100%;
- }
- </style>
- <script>
- function event1(x){
- document.getElementById("text1").value+=x;
- }
- function event2(){
- var x = document.getElementById("text1").value;
- document.getElementById("text1").value = eval(x);
- }
- </script>
- </head>
- <body>
- <center>
- <table border="1">
- <tr>
- <th colspan=4><h1>Calculator</h1></th>
- </tr>
- <tr >
- <td colspan=4><input type="text" id="text1" placeholder="0" style="text-align:right;"/></td>
- </tr>
- <tr>
- <td></td>
- <td><button type="button" value="/" onClick="event1(this.value)">/</button></td>
- <td><button type="button" value="*" onClick="event1(this.value)">*</button></td>
- <td><button type="button" value="-" onClick="event1(this.value)">-</button></td>
- </tr>
- <tr>
- <td><button type="button" value="7" onClick="event1(this.value)">7</button></td>
- <td><button type="button" value="8" onClick="event1(this.value)">8</button></td>
- <td><button type="button" value="9" onClick="event1(this.value)">9</button></td>
- <td rowspan=2><button type="button" value="+" style="height:50px;" onClick="event1(this.value)">+</td>
- </tr>
- <tr>
- <td><button type="button" value="4" onClick="event1(this.value)">4</button></td>
- <td><button type="button" value="5" onClick="event1(this.value)">5</button></td>
- <td><button type="button" value="6" onClick="event1(this.value)">6</button></td>
- </tr>
- <tr>
- <td><button type="button" value="1" onClick="event1(this.value)">1</button></td>
- <td><button type="button" value="2" onClick="event1(this.value)">2</button></td>
- <td><button type="button" value="3" onClick="event1(this.value)">3</button></td>
- <td rowspan=2><button type="button" style="height:48px;" onClick="event2()" >=</button></td>
- </tr>
- <tr>
- <td colspan=2><button type="button" style="width:100%">0</button></td>
- <td><button type="button">.</button></td>
- </tr>
- </table>
- </center>
- </body>
- </html>
WHAT TO DO?
1. Just copy the code above into a file in any of your text editor like Notepad, Notepad++ etc.
2. save as calculator.html
3. Open in any browser of your choice..
Its as simple as that...
Watch out for more applications on HTML, CSS and JS on this platform...
Feel free to share to any one that needs it.
No comments:
Post a Comment