front-end completed

charakamihiranga · Jun 13, 2024 · 3c1fbcd · 3c1fbcd
1 parent 7bea647
commit 3c1fbcd
Show file tree

Hide file tree

Showing 4 changed files with 252 additions and 0 deletions.
diff --git a/assets/backspaceImg.png b/assets/backspaceImg.png
diff --git a/calculator.html b/calculator.html
@@ -4,9 +4,110 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style/style.css">
+
   <title>Calculator</title>
 </head>
 <body>
 
+  <div class="app">
+
+		<div class="calculator">
+
+			<div class="display">
+				<div class="content">
+					<div class="input"></div>
+					<div class="output"></div>
+				</div>
+			</div>
+
+			<div class="keys">
+
+				<div data-key="clear" class="key action">
+					<span>AC</span>
+				</div>
+
+				<div data-key="brackets" class="key action">
+					<span>( )</span>
+				</div>
+
+				<div data-key="%" class="key action">
+					<span>%</span>
+				</div>
+
+				<div data-key="/" class="key operator">
+					<span>÷</span>
+				</div>
+
+				<div data-key="7" class="key">
+					<span>7</span>
+				</div>
+
+				<div data-key="8" class="key">
+					<span>8</span>
+				</div>
+
+				<div data-key="9" class="key">
+					<span>9</span>
+				</div>
+
+				<div data-key="*" class="key operator">
+					<span>x</span>
+				</div>
+
+				<div data-key="4" class="key">
+					<span>4</span>
+				</div>
+
+				<div data-key="5" class="key">
+					<span>5</span>
+				</div>
+
+				<div data-key="6" class="key">
+					<span>6</span>
+				</div>
+
+				<div data-key="-" class="key operator">
+					<span>-</span>
+				</div>
+
+				<div data-key="1" class="key">
+					<span>1</span>
+				</div>
+
+				<div data-key="2" class="key">
+					<span>2</span>
+				</div>
+
+				<div data-key="3" class="key">
+					<span>3</span>
+				</div>
+
+				<div data-key="+" class="key operator">
+					<span>+</span>
+				</div>
+
+				<div data-key="backspace" class="key action">
+          <span>&#9003;</span>
+				</div>
+
+				<div data-key="0" class="key">
+					<span>0</span>
+				</div>
+
+				<div data-key="." class="key">
+					<span>.</span>
+				</div>
+
+				<div data-key="=" class="key operator">
+					<span>=</span>
+				</div>
+			</div>
+
+		</div>
+
+	</div>
+
+
+  <script src="js/script.js"></script>
 </body>
 </html>
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,22 @@
+const keys = document.querySelectorAll('.key');
+const display_input = document.querySelector('.display .input');
+const display_output = document.querySelector('.display .output');
+
+let input = "";
+
+for (let key of keys){
+  const value = key.dataset.key;
+
+  key.addEventListener('click', () => {
+    if(value == 'clear'){
+      input = "";
+      display_input.innerHTML = "";
+      display_output.innerHTML = "";
+    }else if(value == 'backspace'){
+      input = input.slice(0, -1);
+      display_input.innerHTML = input;
+  });
+}
+
+
+
diff --git a/style/style.css b/style/style.css
@@ -0,0 +1,129 @@
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	font-family: sans-serif;
+}
+
+
+body {
+  background-color: #D9D9D9;
+}
+.app {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100vh;
+}
+
+.calculator {
+	background-color:#FFFF;
+	width: 100%;
+	max-width: 375px;
+	min-height: 700px;
+	display: flex;
+	flex-direction: column;
+	border-radius: 1.5rem;
+	overflow: hidden;
+  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
+  border: 8px solid #988D8D;
+}
+
+.display {
+	min-height: 200px;
+	padding: 1.5rem;
+	display: flex;
+	justify-content: flex-end;
+	align-items: flex-end;
+	color: white;
+	text-align: right;
+	flex: 1 1 0%;
+}
+
+.display .content {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
+	width: 100%;
+	max-width: 100%;
+	overflow: auto;
+}
+
+.display .input {
+	width: 100%;
+	font-size: 1.25rem;
+	margin-bottom: 0.5rem;
+}
+
+.display .output {
+	font-size: 3rem;
+	font-weight: 700;
+	width: 100%;
+	white-space: nowrap;
+}
+
+.display .operator {
+	color: #EB6666;
+}
+
+.display .brackets,
+.display .percent {
+	color: #26FED7;
+}
+
+.keys {
+	background-color: #F2F2F2;
+	padding: 1.5rem;
+	border-radius: 1.5rem 1.5rem 0 0;
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	grid-template-rows: repeat(5, 1fr);
+	grid-gap: 1rem;
+
+}
+
+.keys .key {
+	position: relative;
+	cursor: pointer;
+
+	display: block;
+	height: 0;
+	padding-top: 100%;
+	background-color: #544D4D;
+	border-radius: 50%;
+	transition: 0.2s;
+	user-select: none;
+}
+
+.keys .key span {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+
+	font-size: 24px;
+	font-weight: 700;
+	color: #FFF;
+}
+
+.keys .key:hover {
+	box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.2);
+}
+
+.keys .key.operator span {
+
+	color: #ffffff;
+}
+
+.keys .key.action span {
+
+	color: #ffffff;
+}
+
+.keys .key.operator {
+  background-color: #FF9D20;;
+}
+
+.keys .key.key.action {
+  background-color: #CBC4C4;
+}