Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript CSS HTML
Hello guys I made a calculator using JavaScript and I styled it using CSS.
I want to style it more like the calculator in this link.
http://www.online-calculator.com[^]
but i can't figure out how to combine those features in my calculator...
plz help me with coding.
 
Here is my html code:
 
<html>
<head>
<TITLE>Javascript Calculator</TITLE>
<link type="text/css" rel="stylesheet" href="styles/calculator.css" />
<script type="text/javascript">
var Overall="", First="", Second="", Opp="";
 
function init()
{
    Clear();
}
 
function MyClick($key)
    { var Display="";
if(Opp == ""){
    First = First + $key;
    document.getElementById('screen').innerHTML = First;
    }else{
    Second = Second + $key;
    Display = document.getElementById('screen').innerHTML;
    document.getElementById('screen').innerHTML = First + ' ' + Opp + ' ' + Second;
 
         }
        }
function Operator($sign)
{       var Display="";
    Opp = $sign;
// See if the first and second factors have values ie: there has already been an equation
if(First != "" && Second != "") DoSum();
    Display = document.getElementById('screen').innerHTML;
    document.getElementById('screen').innerHTML = Display + ' ' + Opp + ' ';
 
}
 
function Clear()
{
    First = "";
    Second = "";
    Opp = "";
    Overall = "";
    document.getElementById('screen').innerHTML = '0';
}
 
function DoSum()
{
    var string;
    result=0;
if(First != "" && Second != "" && Opp != "")
  {
        string = First + ' ' + Opp + ' ' + Second;
    Overall = eval(string);
    document.getElementById('screen').innerHTML = Overall;
    // Now clear the First, Second and Opp variables for further use
    First = Overall;
    Second = "";
    Opp = "";
  }
}
</script>
</head>
 
<body>
 
<div id="frame">
        <div id="window"> <!-- this is the window that holds the digits -->
            <div id="screen"><!-- this displays the information that the javascript functions provide -->
              </div><!-- end of screen div -->
       </div><!-- end of window div -->
<div id="key1" onclick="MyClick(1)"><div id="digit">1</div></div>
<div id="key2" onclick="MyClick(2)"><div id="digit">2</div></div>
<div id="key3" onclick="MyClick(3)"><div id="digit">3</div></div>
<div id="plus" onclick="Operator('+')"><div id="digit">+</div></div>
<div id="key4" onclick="MyClick(4)"><div id="digit">4</div></div>
<div id="key5" onclick="MyClick(5)"><div id="digit">5</div></div>
<div id="key6" onclick="MyClick(6)"><div id="digit">6</div></div>
<div id="key7" onclick="MyClick(7)"><div id="digit">7</div></div>
<div id="key8" onclick="MyClick(8)"><div id="digit">8</div></div>
<div id="key9" onclick="MyClick(9)"><div id="digit">9</div></div>
<div id="min" onclick="Operator('-')"><div id="digit">-</div></div>
<div id="key0" onclick="MyClick(0)"><div id="digit">0</div></div>
<div id="period" onclick="MyClick('.')"><div id="digit">.</div></div>
<div id="equals" onclick="DoSum()"><div id="digit">=</div></div>
<div id="mult" onclick="Operator('*')"><div id="digit">*</div></div>
<div id="divided" onclick="Operator('/')"><div id="digit">/</div></div>
<div id="clear" onclick="Clear()"><div id="digit">C</div></div>
        </div><!-- End frame div -->
</body>
</html>
 
And here is my CSS code:
 
body{
margin:50px;
}
#frame
{
    position:absolute;
    left    :50px;
    top     :50px;
    height  :398px;
    width   :244px;
    border  :1px solid #069ff7;
}
#window
{
    padding :5px;
    height  :50px;
    width   :182px;
    font    :30px verdana;
    position:absolute;
    left    :22px;
    top     :22px;
    border  :1px solid #069ff7;
 
}
#digit
{
    text-align: center;
    vertical-align:center;
    font    :30px Comic Sans Ms;
}
 
#key1
{
    position         :absolute;
    left             :22px;
    top              :94px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;
}
#key1:hover
{
    color:red;
}
#key2
{
    position         :absolute;
    left             :88px;
    top              :94px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;
 
}
#key2:hover
{
    color:red;
}
#key3
{
    position         :absolute;
    left             :154px;
    top              :94px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;
 
}
#key3:hover
{
    color:red;
}
 
#key4
{
    position         :absolute;
    left             :22px;
    top              :143px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;
 
}
#key4:hover
{
    color:red;
}
#key5
{
    position         :absolute;
    left             :88px;
    top              :143px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;
}
#key5:hover
{
    color:red;
}
#key6
{
    position         :absolute;
    left             :154px;
    top              :143px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;
 
}
#key6:hover
{
    color:red;
}
 
#key7
{
    position         :absolute;
    left             :22px;
    top              :192px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;
 
}
#key7:hover
{
    color:red;
}
#key8
{
    position         :absolute;
    left             :88px;
    top              :192px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;
 
}
#key8:hover
{
    color:red;
}
#key9
{
    position         :absolute;
    left             :154px;
    top              :192px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;
 
}
#key9:hover
{
    color:red;
}
#key0
{
    position         :absolute;
    left             :22px;
    top              :241px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;
 
}
#key0:hover
{
    color:red;
}
#period
{
    position         :absolute;
    left             :88px;
    top              :241px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;
 
}
#period:hover
{
    color:red;
}
#clear
{
    position         :absolute;
    left             :154px;
    top              :339px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;
 
}
#clear:hover
{
    color:red;
}
 

#plus
{
    position         :absolute;
    left             :154px;
    top              :241px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border  :1px solid #069ff7;
 

}#plus:hover
{
    color:red;
}
#min
{
    position         :absolute;
    left             :22px;
    top              :290px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border           :1px solid #069ff7;
 
}
#min:hover
{
    color:red;
}
 
#mult
{
    position         :absolute;
    left             :88px;
    top              :290px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border           :1px solid #069ff7;
 
}
#mult:hover
{
    color            :red;
}
#divided
{
    position         :absolute;
    left             :154px;
    top              :290px;
    cursor           :pointer;
    width            :59px;
    height           :38px;
    border           :1px solid #069ff7;
 
}
#divided:hover
{
    color:red;
}
 

 
#equals
{
    position         :absolute;
    left             :22px;
    top              :339px;
    cursor           :pointer;
    width            :125px;
    height           :38px;
    border           :1px solid #069ff7;
 
}
#equals:hover
{
    color            :red;
}
 

Can you help me add some good features to this while keeping above css features also???
 
Greatly appreciate if you can help me....
Thanks
Posted 17-Dec-12 20:13pm
Edited 18-Dec-12 3:57am
v2

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Hi,
 
1. you can use the background image property for the number divs to make it look good.
2. You can also use the background-color property for that.
3. use hover property fro designing the button and change the color using the css.
4. Apply border-radius property for designing the div corners to rounded.
 
These above can make your calculator look like that you have mentioned in the link.
You need to add them in right way. All the best. If any query then ask me here.
 
Thanks
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 BillWoodruff 314
1 Sergey Alexandrovich Kryukov 290
2 George Jonsson 274
3 CPallini 255
4 OriginalGriff 237
0 OriginalGriff 4,895
1 CPallini 4,010
2 Sergey Alexandrovich Kryukov 3,514
3 George Jonsson 2,826
4 Gihan Liyanage 2,386


Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 18 Dec 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100