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

add buttons and layout

This commit is contained in:
filifa 2025-12-11 23:49:34 -05:00
parent f8324b8a30
commit c8641015cf
2 changed files with 60 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
index.html
View File

@ -2,18 +2,45 @@
<html lang="en-US">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
<title>mcalc</title>
</head>
<body>
<label for="expr">Expression</label>
<input id="expr" required type="text" />
<div id="calculator">
<label for="expr">Expression</label>
<input id="expr" required type="text" />
<label for="modulus">Modulus</label>
<input id="modulus" required type="number" min="1" step="1" />
<output id="result" for="expr modulus"></output>
<button id="enter" type="button">Enter</button>
<div id="modulus-entry">
<label for="modulus"> mod </label>
<input id="modulus" required type="number" min="1" step="1" />
</div>
<output id="result" for="expr modulus"></output>
<button id="clear" type="button">C</button>
<button id="lparen" type="button">(</button>
<button id="rparen" type="button">)</button>
<button id="divide" type="button">/</button>
<button id="7" type="button">7</button>
<button id="8" type="button">8</button>
<button id="9" type="button">9</button>
<button id="times" type="button">*</button>
<button id="4" type="button">4</button>
<button id="5" type="button">5</button>
<button id="6" type="button">6</button>
<button id="minus" type="button">-</button>
<button id="1" type="button">1</button>
<button id="2" type="button">2</button>
<button id="3" type="button">3</button>
<button id="plus" type="button">+</button>
<button id="0" type="button">0</button>
<button id="enter" type="button">≡</button>
</div>
<script type="module" src="main.js"></script>
</body>

27
styles.css Normal file
View File

@ -0,0 +1,27 @@
#calculator {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
label[for="expr"] {
display: none;
}
#expr {
grid-column: 1 / 5;
}
#result {
grid-column: 1 / 4;
border: 1px solid gray;
text-align: right;
}
#modulus-entry {
grid-column: 4;
text-align: right;
}
#enter {
grid-column: 4;
}