From 8a8dc95c4cd657bd28c7dd99c21bfaca630281d5 Mon Sep 17 00:00:00 2001
From: filifa <filifa.breath652@8alias.com>
Date: Thu, 11 Dec 2025 23:49:34 -0500
Subject: [PATCH] adjust layout and add extra buttons

---
 index.html | 49 +++++++++++++++++++++++++++++++------------------
 styles.css | 25 +++++++++++++++++++++++--
 2 files changed, 54 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index f35a11b..8c3b263 100644
--- a/index.html
+++ b/index.html
@@ -17,29 +17,42 @@
 				<input id="modulus" required type="number" min="1" step="1" />
 			</div>
 
-			<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>
+			<div id="extra-buttons">
+				<button id="sqrt" type="button">√</button>
+				<button id="inv" type="button">x<sup>-1</sup></button>
+				<button id="pow" type="button">^</button>
+			</div>
 
-			<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>
+			<div id="main-buttons">
+				<button id="clear" type="button">C</button>
+				<button id="lparen" type="button">(</button>
+				<button id="rparen" 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>
+				<div id="numerals">
+					<button id="7" type="button">7</button>
+					<button id="8" type="button">8</button>
+					<button id="9" type="button">9</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="4" type="button">4</button>
+					<button id="5" type="button">5</button>
+					<button id="6" type="button">6</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>
 
 		<script type="module" src="main.js"></script>
diff --git a/styles.css b/styles.css
index 491d877..9a9aad2 100644
--- a/styles.css
+++ b/styles.css
@@ -30,6 +30,27 @@ label[for="expr"] {
 	flex: auto;
 }
 
-#enter {
-	grid-column: 4;
+#extra-buttons {
+	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;
 }