oh dear
This commit is contained in:
zyqunix
parent
220a7626fb
commit
5738f9f43e
3 changed files with 163 additions and 0 deletions
26
calc/calc.js
Normal file
26
calc/calc.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
const num7 = document.getElementById('7');
|
||||
const num8 = document.getElementById('8');
|
||||
const num9 = document.getElementById('9');
|
||||
const divide = document.getElementById('divide');
|
||||
const sqroot = document.getElementById('sqroot');
|
||||
const num4 = document.getElementById('4');
|
||||
const num5 = document.getElementById('5');
|
||||
const num6 = document.getElementById('6');
|
||||
const mutiply = document.getElementById('mutiply');
|
||||
const percent = document.getElementById('percent');
|
||||
const num1 = document.getElementById('1');
|
||||
const num2 = document.getElementById('2');
|
||||
const num3 = document.getElementById('3');
|
||||
const subtract = document.getElementById('subtract');
|
||||
const fraction = document.getElementById('fraction');
|
||||
const num0 = document.getElementById('0');
|
||||
const decimal = document.getElementById('decimal');
|
||||
const negative = document.getElementById('negative');
|
||||
const add = document.getElementById('add');
|
||||
const sum = document.getElementById('sum');
|
||||
|
||||
const result = document.querySelector('span#resultnum');
|
||||
|
||||
num7.addEventListener('click', () => {
|
||||
result.innerHTML = num7.innerHTML;
|
||||
})
|
||||
46
calc/index.html
Normal file
46
calc/index.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Calculator</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<h1>zyq's calculator</h1>
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<div class="result">
|
||||
<span id="resultnum"></span>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button class="button" id="7">7</button>
|
||||
<button class="button" id="8">8</button>
|
||||
<button class="button" id="9">9</button>
|
||||
<button class="button" id="divide">÷</button>
|
||||
<button class="button" id="sqroot">√</button>
|
||||
<button class="button" id="4">4</button>
|
||||
<button class="button" id="5">5</button>
|
||||
<button class="button" id="6">6</button>
|
||||
<button class="button" id="mutiply">×</button>
|
||||
<button class="button" id="percent">%</button>
|
||||
<button class="button" id="1">1</button>
|
||||
<button class="button" id="2">2</button>
|
||||
<button class="button" id="3">3</button>
|
||||
<button class="button" id="subtract">-</button>
|
||||
<button class="button" id="fraction">1/x</button>
|
||||
<button class="button" id="0">0</button>
|
||||
<button class="button" id="decimal">.</button>
|
||||
<button class="button" id="negative">+/-</button>
|
||||
<button class="button" id="add">+</button>
|
||||
<button class="button" id="sum">=</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="calc.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
91
calc/style.css
Normal file
91
calc/style.css
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
font-family: monospace;
|
||||
font-size: small;
|
||||
background-color: #2a2a2a;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
color: #f0f0f0;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div.main {
|
||||
padding: 50px;
|
||||
text-align: right;
|
||||
background-color: #909090;
|
||||
max-width: 350px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #707070;
|
||||
}
|
||||
|
||||
.result {
|
||||
width: 98.5%;
|
||||
height: 40px;
|
||||
font-size: x-large;
|
||||
background-color: #505050;
|
||||
border: 2px solid #757575;
|
||||
border-radius: 10px;
|
||||
justify-content: center;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-template-rows: repeat(4, 1fr);
|
||||
gap: 10px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
padding: 5px 10px;
|
||||
color: #ccc;
|
||||
background-color: #464646;
|
||||
border: 2px solid #505050;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.1s linear;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
#resultnum {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
button#sum {
|
||||
cursor: pointer;
|
||||
padding: 5px 10px;
|
||||
color: #ddd;
|
||||
background-color: #b38eed;
|
||||
border: 2px solid #a986e1;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.1s linear;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #565656;
|
||||
border: 2px solid #606060;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button#sum:hover {
|
||||
background-color: #c099ff;
|
||||
border: 2px solid #b38eed;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.result:hover {
|
||||
background-color: #606060;
|
||||
border: 2px solid #757575;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue