employed design in css and html with few refinings

kushagra-xo · Nov 7, 2023 · 62850ed · 62850ed
1 parent a428cd2
commit 62850ed
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 9 deletions.
diff --git a/css/main.css b/css/main.css
@@ -9,7 +9,8 @@
 body {
  display: flex;
  flex-direction: column;
- gap: 5vh;
+ gap: 4vh;
+ padding: 1vw;
  background: var(--main-bg-color);
  color: var(--main-text-color);
  font-family: 'Fira Code';
@@ -24,12 +25,13 @@ header {
 
 h1 {
  padding: 3vmin;
- background: #141414;
+ background: var(--button-bg-color);;
+ border: solid var(--main-text-color);
  border-radius: 20px;
  font-family: 'Comfortaa';
 }
 
-h2 {
+h3 {
  text-align: center;
 }
 
@@ -50,19 +52,15 @@ main {
 }
 
 #view {
- align-self: center;
  height: 15vh;
  width: 30vw;
- background: black;
+ background: var(--button-bg-color);;
  border-radius: 20px;
- color: white;
+ color: var(--main-text-color);;
  text-align: right;
  padding: 5%;
  box-sizing: border-box;
  font-size: x-large;
- display: flex;
- justify-content: center;
- align-items: center;
 }
 
 #pad {

diff --git a/index.html b/index.html
@@ -18,6 +18,28 @@ <h3>A simple calculator implemented in <span id="js">javascript</span></h3>
 		<main>
 			<div class="calculator">
 				<div role="display" id="view"></div>
+				<div role="input" id="pad">
+					<div id="numpad">
+						<button>1</button>
+						<button>2</button>
+						<button>3</button>
+						<button>4</button>
+						<button>5</button>
+						<button>6</button>
+						<button>7</button>
+						<button>8</button>
+						<button>9</button>
+						<button>.</button>
+						<button>0</button>
+						<button>=</button>
+					</div>
+					<div id="operations">
+						<button>+</button>
+						<button>-</button>
+						<button>*</button>
+						<button>/</button>
+					</div>
+				</div>
 			</div>
 		</main>
 		<script src="script/script.js"></script>