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

Add +/- button and rearrange button order

Browse source
This commit is contained in:
lolabird 2023-12-27 21:02:38 -07:00
commit a80ae4ce86
2 changed files with 10 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

11
index.html
View file

@ -17,26 +17,29 @@
<button class="clear all">C</button> <button class="clear all">C</button>
<button class="clear error">CE</button> <button class="clear error">CE</button>
<button class="plus-minus">+/-</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">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">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">0</button> <button class="num">0</button>
<button class="num">.</button> <button class="num">.</button>
<button class="equal">=</button> <button class="equal">=</button>
<button class="operator">+</button>
</div> </div>
</main> </main>
<footer> <footer>

6
style.css
View file

@ -63,13 +63,11 @@ button:hover {
filter: brightness(.9); filter: brightness(.9);
} }
.num { .num, .plus-minus {
background: #d9e1f2; background: #d9e1f2;
} }
.clear { .clear {
grid-column: span 2;
width: 205px;
background: #f98383; background: #f98383;
} }
@ -78,6 +76,8 @@ button:hover {
} }
.equal { .equal {
grid-column: span 2;
width: 205px;
background: #79ff54; background: #79ff54;
} }