Skip to content

Instantly share code, notes, and snippets.

@o0pmitev

o0pmitev/calculator.css

Last active November 7, 2018 23:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save o0pmitev/d834310deb9c8f18f7bd7b90bea07481 to your computer and use it in GitHub Desktop.
Save o0pmitev/d834310deb9c8f18f7bd7b90bea07481 to your computer and use it in GitHub Desktop.
Download ZIP
Optional Project: Calculator
Raw
calculator.css
.calculator {
color: green;
width: 320px;
display: flex;
margin-top: 10px;
padding-top: 10px;
margin-left: 100px;
padding-left: 30px;
padding-bottom: 10px;
background-color: coral;
border: 2px solid blue;
border-radius: 50px 20px;
}
input {
width: 220px;
height: 50px;
margin-bottom: 10px;
background-color: #9de1e8;
border: 2px solid blue;
border-radius: 25px;
}
.del {
width: 60px;
border: 2px solid blue;
border-radius: 25px;
background-color: black;
color: white;
}
.rows input {
width: 20px;
background-color: black;
color: red;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.rows :hover{
background-color: yellow;
}
.rows {
padding: 2px;
}
Raw
calculator.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/calculator.css">
<link rel="stylesheet" href="js/calculator.js">
<title>Calculator</title>
</head>
<body>
<div class="calculator">
<div class="buttons">
<form name="cal">
<input type="text" name="display" value="">
<input type="button" class="del" value="C" onclick="cal.display.value= ''">
<div class="rows">
<input type="button" value="7" onclick="cal.display.value+='7'">
<input type="button" value="8" onclick="cal.display.value+='8'">
<input type="button" value="9" onclick="cal.display.value+='9'">
<input type="button" value="/" onclick="cal.display.value+='/'">
</div><!-- /rows -->
<div class="rows">
<input type="button" value="4" onclick="cal.display.value+='4'">
<input type="button" value="5" onclick="cal.display.value+='5'">
<input type="button" value="6" onclick="cal.display.value+='6'">
<input type="button" value="*" onclick="cal.display.value+='*'">
</div><!-- /rows -->
<div class="rows">
<input type="button" value="1" onclick="cal.display.value+='1'">
<input type="button" value="2" onclick="cal.display.value+='2'">
<input type="button" value="3" onclick="cal.display.value+='3'">
<input type="button" value="-" onclick="cal.display.value+='-'">
</div><!-- /rows -->
<div class="rows">
<input type="button" value="0" onclick="cal.display.value+='0'">
<input type="button" value="." onclick="cal.display.value+='.'">
<input type="button" value="=" onclick="cal.display.value =eval(cal.display.value)">
<input type="button" value="+" onclick="cal.display.value+='+'">
</div><!-- /rows -->
</form>
</div><!-- / buttons -->
</div><!-- /calculator -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment