<!DOCTYPE html>
<html>
<head>
<title>CoCoCoder</title>
<meta charset = "utf-8">
<link rel = "stylesheet" href = "calculator-style.css">
<script src = "calculator-script.js" defer ></script>
</head>
<body>
<div class = "button-number">
<div class = "button-1"><span class = "1">1</span></div> <!-- 65px -->
<div class = "button-2">2</div>
<div class = "button-3">3</div>
<div class = "button-4">4</div>
<div class = "button-5">5</div>
<div class = "button-6">6</div>
<div class = "button-7">7</div>
<div class = "button-8">8</div>
<div class = "button-9">9</div>
<div class = "button-0" type = "button" value = "0" onclick = 'insert(0)'>0</div>
<div class = "button-star">*</div>
<div class = "button-slash">/</div>
<div class = "button-equal">=</div>
<div class = "button-amount">+</div>
<div class = "button-difference">-</div>
<div class = "button-degree">^</div>
<div class = "output-line" type = "textarea"><input type = "textarea" class ="textview"></input></div>
</div>
<div class = "bkground"></div>
</body>
</html>.button-number {
text-align:center;
}
.button-1 {
height: 60px;
width:60px;
background-color:#F1F3F4;
border-radius:20px;
font-size:40px;
margin-left:450px;
margin-top:450px;
}
.button-2 {
height: 60px;
width:60px;
background-color:#F1F3F4;
border-radius:20px;
font-size:40px;
margin-left:515px;
margin-top:-60px;
}
.button-3 {
height: 60px;
width:60px;
background-color:#F1F3F4;
border-radius:20px;
font-size:40px;
margin-left:580px;
margin-top:-60px;
}
.button-4 {
height: 60px;
width:60px;
background-color:#F1F3F4;
border-radius:20px;
font-size:40px;
margin-left:450px;
margin-top:-125px;
}
.button-5 {
height: 60px;
width:60px;
background-color:#F1F3F4;
border-radius:20px;
font-size:40px;
margin-left:515px;
margin-top:-60px;
}
.button-6 {
height: 60px;
width:60px;
background-color:#F1F3F4;
border-radius:20px;
font-size:40px;
margin-left:580px;
margin-top:-60px;
}
.button-7 {
height: 60px;
width:60px;
background-color:#F1F3F4;
border-radius:20px;
font-size:40px;
margin-left:450px;
margin-top:-125px;
}
.button-8 {
height: 60px;
width:60px;
background-color:#F1F3F4;
border-radius:20px;
font-size:40px;
margin-left:515px;
margin-top:-60px;
}
.button-9 {
height: 60px;
width:60px;
background-color:#F1F3F4;
border-radius:20px;
font-size:40px;
margin-left:580px;
margin-top:-60px;
}
.button-0 {
height:60px;
width: 60px;
background-color:#F1F3F4;
border-radius:20px;
font-size:40px;
margin-left:515px;
margin-top:135px;
}
.button-star {
height:60px;
width:60px;
background-color:#F3A447;
border-radius:20px;
font-size:40px;
margin-left:450px;
margin-top:-60px;
}
.button-slash {
height:60px;
width:60px;
background-color:#F3A447;
border-radius:20px;
font-size:40px;
margin-left:580px;
margin-top:-60px;
}
.button-equal {
height:125px;
width:60px;
background-color:#F3A447;
border-radius:20px;
font-size:40px;
margin-left:645px;
margin-top:-125px;
}
.button-amount {
height:60px;
width:60px;
background-color:#F3A447;
border-radius:20px;
font-size:40px;
margin-left:645px;
margin-top:-190px;
}
.button-difference {
height:60px;
width:60px;
background-color:#F3A447;
border-radius:20px;
font-size:40px;
margin-left:645px;
margin-top:-125px;
}
.button-degree {
height:60px;
width:60px;
background-color:#F3A447;
border-radius:20px;
font-size:40px;
margin-left:645px;
margin-top:-125px;
}
.output-line {
width:190px;
height:50px;
margin-top:-55px;
margin-left:450px;
background-color:#fff;
}
.bkground {
background-color:#4D4D4D;
height:330px;
width:270px;
border-radius:20px;
margin-left:443px;
margin-top:-200px;
z-index:-1;
position:relative;
}
.textview {
border:0px solid #fff;
height:60px;
width:30px;
}