Calculator Design Using HTML,CSS And JavaScript

<html>
<head>

<script>

    function calculate(res){

        calculator.dis.value = calculator.dis.value+res;
     
    }
       function clr(){

        calculator.dis.value =  " ";
     
    }

</script>
<style type="text/css">

body, html {
    background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
    margin: 0;
    padding: 0;
}

.container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    box-shadow: 10px 10px 10px 10px lightgreen;
    border-radius: 14px;
    padding-bottom: 20px;
    width: 280px;
 
}
.display {
    width: 100%;
    height: 60px;
    padding: 40px 0;
    background: lightgreen ;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}
.row{
    width: 280px;
    float: left;
}
input[type=button] {
    width: 60px;
    height: 60px;
    float: left;
    padding: 0;
    margin: 5px;
    box-sizing: border-box;
    background: #ecedef;
    border: none;
    font-size: 30px;
    line-height: 30px;
    font-weight: 700;
    color: #5E5858;

    border-radius: 50%;
    cursor: pointer;
    box-shadow: 5px 5px 5px 5px lightgreen;
 
}
input[type=text] {
    width: 270px;
    height: 60px;
    float: left;
    padding: 0;
    margin: 0 25px;
    box-sizing: border-box;
    background: none;
    border: none;
    font-size: 60px;
    line-height: 60px;
    font-weight: 700;
    color: red;

    text-align: right;
}
.red {
    background: red !important;
    color: #ffffff !important;
 
}
</style>

</head>

<body>

<form name="calculator">

<table class="container">
<tr>
<td class="display">
            <input type="text"  placeholder="0" name="dis" />
   </td>
</tr>

<tr class="row">
      <td><input type="button" name="seven" value="7" onClick="calculate(seven.value)"></td>
      <td><input type="button" name="eight" value="8" onClick="calculate(eight.value)"></td>
      <td><input type="button" name="nine" value="9" onClick="calculate(nine.value)"></td>
      <td><input type="button" name="add" value="+" onClick="calculate(add.value)"></td>

</tr>

<tr class="row">

      <td><input type="button" name="four" value="4" onClick="calculate(four.value)"></td>
      <td><input type="button" name="five" value="5" onClick="calculate(five.value)"></td>
      <td><input type="button" name="six" value="6" onClick="calculate(six.value)"></td>
      <td><input type="button" name="sub" value="-" onClick="calculate(sub.value)"></td>

</tr>

<tr class="row">

      <td><input type="button" name="one" value="1" onClick="calculate(one.value)"></td>
      <td><input type="button" name="two" value="2" onClick="calculate(two.value)"></td>
      <td><input type="button" name="three" value="3" onClick="calculate(three.value)"></td>
      <td><input type="button" name="mul" value="*" onClick="calculate(mul.value)"></td>

</tr>

<tr class="row">

   
      <td><input type="button" name="zero" value="0" onClick="calculate(zero.value)"></td>
      <td><input type="button" name="div" value="/" onClick="calculate(div.value)"></td>
      <td><input type="button" name="c" value="C" onclick="clr();"></td>
      <td><input type="button" class="red" value="=" onClick="dis.value=eval(dis.value)"></td>
     

</tr>

</table>

</form>

</body>
 
</html>

Comments

Post a Comment

Popular posts from this blog

WebPage Design Using HTML and CSS

<html> <head> <title>Java Basics</title> <style> *{ box-sizing: border-box; } body { margin: 0; } .header,.footer{ background-color: yellow; padding: 10px; text-align: center; } .menu { overflow: hidden; background-color: LightGreen; padding: 10px; } .menu a { float: right; display: block; color: red; padding: 10px 10px; } .menu a:hover { background-color: yellow; color: blue; } .column.left,.column.right{ text-align: left; float: left; width: 20%; padding: 70px; background-color: HotPink } .column.middle { text-align: center; float: left; width: 60%; padding: 70px; } .row:after { content: ""; display: table; clear: both; } </style> </head> <body> <div class ="header"> <h2>Header</h2> </div> <div class = "menu"> <a href="#">Home</a> <a href="#">AboutUs</a> <...
Read more

How to design webpage using HTML And CSS

<!DOCTYPE html> <head> <title>Java Basics</title> <style> * { box-sizing: border-box; } body { margin: 0; } .header,.footer { background-color: yellow; padding: 10px; text-align: center; } .topnav {   overflow: hidden;   background-color: LightGreen;   padding: 10px; } .topnav a { float: right; display: block; color: red; padding: 10px 10px; } .topnav a:hover { background-color: yellow; color: blue; } .column.left,.column.right { text-align: left; float: left; width: 20%; padding: 70px; background-color: HotPink; } .column.middle { text-align: center; float: left; width: 60%; padding: 70px; } .row:after { content: ""; display: table; clear: both; } </style> </head> <body> <div class="header">    <h2>Header</h2> </div> <div class="topnav">    <a href="#">Home</a>    <a href="#">Ab...
Read more

Convert XML In To Java Using Java

package com.java.basicprograms; import java.io.File; import javax.xml.bind.JAXBContext; import javax.xml.bind.JAXBException; import javax.xml.bind.Unmarshaller; public class ConvertXMLInToJava { public static void main(String[] args) { try { JAXBContext context  = JAXBContext.newInstance(Item.class); Unmarshaller unmarshaller = context.createUnmarshaller(); File file = new File("E:/item.xml"); Item item = (Item) unmarshaller.unmarshal(file); System.out.println(item); } catch (JAXBException e) { e.printStackTrace(); } } }
Read more