filifa
/
mcalc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adjust layout and add extra buttons

This commit is contained in:
filifa 2025-12-11 23:49:34 -05:00
parent 37b66ce1ec
commit 8a8dc95c4c
2 changed files with 54 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
index.html
View File

@ -17,29 +17,42 @@
<input id="modulus" required type="number" min="1" step="1" /> <input id="modulus" required type="number" min="1" step="1" />
</div> </div>
<button id="clear" type="button">C</button> <div id="extra-buttons">
<button id="lparen" type="button">(</button> <button id="sqrt" type="button">√</button>
<button id="rparen" type="button">)</button> <button id="inv" type="button">x<sup>-1</sup></button>
<button id="divide" type="button">/</button> <button id="pow" type="button">^</button>
</div>
<button id="7" type="button">7</button> <div id="main-buttons">
<button id="8" type="button">8</button> <button id="clear" type="button">C</button>
<button id="9" type="button">9</button> <button id="lparen" type="button">(</button>
<button id="times" type="button">*</button> <button id="rparen" type="button">)</button>
<button id="4" type="button">4</button> <div id="numerals">
<button id="5" type="button">5</button> <button id="7" type="button">7</button>
<button id="6" type="button">6</button> <button id="8" type="button">8</button>
<button id="minus" type="button">-</button> <button id="9" type="button">9</button>
<button id="1" type="button">1</button> <button id="4" type="button">4</button>
<button id="2" type="button">2</button> <button id="5" type="button">5</button>
<button id="3" type="button">3</button> <button id="6" type="button">6</button>
<button id="plus" type="button">+</button>
<button id="0" type="button">0</button> <button id="1" type="button">1</button>
<button id="2" type="button">2</button>
<button id="3" type="button">3</button>
<button id="0" type="button">0</button>
</div>
<div id="operators">
<button id="divide" type="button">/</button>
<button id="times" type="button">*</button>
<button id="minus" type="button">-</button>
<button id="plus" type="button">+</button>
<button id="enter" type="button">≡</button>
</div>
</div>
<button id="enter" type="button">≡</button>
</div> </div>
<script type="module" src="main.js"></script> <script type="module" src="main.js"></script>

25
styles.css
View File

@ -30,6 +30,27 @@ label[for="expr"] {
flex: auto; flex: auto;
} }
#enter { #extra-buttons {
grid-column: 4; grid-column: 1 / 5;
display: grid;
grid-template-columns: subgrid;
}
#main-buttons {
grid-column: 1 / 5;
display: grid;
grid-template-columns: subgrid;
}
#numerals {
grid-column: 1 / 4;
display: grid;
grid-template-columns: subgrid;
}
#operators {
grid-column: 4;
grid-row: 1 / 3;
display: grid;
grid-template-columns: subgrid;
} }