Octavia/odin-calculator
Watch
1
0
Fork
You've already forked odin-calculator
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Create basic calculator look

Browse source
This commit is contained in:
lolabird 2023-12-26 18:50:51 -07:00
commit a97d1e9891
2 changed files with 62 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

34
index.html
View file

@ -11,24 +11,22 @@
<main> <main>
<div class="calculator"> <div class="calculator">
<div class="screen"></div> <div class="screen"></div>
<div class="buttons"> <button class="num">1</button>
<button class="num">1</button> <button class="num">2</button>
<button class="num">2</button> <button class="num">3</button>
<button class="num">3</button> <button class="operator">+</button>
<button class="operator">+</button> <button class="num">4</button>
<button class="num">4</button> <button class="num">5</button>
<button class="num">5</button> <button class="num">6</button>
<button class="num">6</button> <button class="operator">-</button>
<button class="operator">-</button> <button class="num">7</button>
<button class="num">7</button> <button class="num">8</button>
<button class="num">8</button> <button class="num">9</button>
<button class="num">9</button> <button class="operator">*</button>
<button class="operator">*</button> <button class="num">0</button>
<button class="num">0</button> <button class="clear">C</button>
<button class="clear">C</button> <button class="equal">=</button>
<button class="equal">=</button> <button class="operator">/</button>
<button class="operator">/</button>
</div>
</div> </div>
</main> </main>
<footer> <footer>

46
style.css
View file

@ -0,0 +1,46 @@
body {
text-align: center;
flex-direction: column;
min-height: 100vh;
margin: 0;
background-color: #111;
color: #eee;
}
header {
flex: 0 0 auto;
}
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
}
.calculator {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-gap: 5px;
background: purple;
padding: 10px;
}
.screen {
grid-column: 1 / span 4;
height: 100px;
background: #eee;
}
button {
height: 100px;
width: 100px;
font-size: 50px
}
footer {
flex: 0 0 auto;
}