Merge pull request #71 from abhople1902/project3

Project Added
Rajdp07 · Oct 20, 2022 · 250f13e · 250f13e
2 parents 4f8dc08 + 5915452
commit 250f13e
Show file tree

Hide file tree

Showing 3 changed files with 253 additions and 0 deletions.
diff --git a/Calculator Using html,css and js/index.html b/Calculator Using html,css and js/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Calculator</title>
+    <link href="style.css" rel="stylesheet">
+    <script src="script.js" defer></script>
+  </head>
+  <body>
+
+    <h1 style="text-align:center">Calculator Using JS</h1>
+
+    <div class="container">
+
+    <br>
+
+    <table>
+
+        <tr>
+
+            <td colspan="3"><input type='text' id='result' class ='screen' style="text-align: right;"></td>
+
+            <td>
+
+                <input type='button' value = 'CLR' onclick="clearScreen()" class="clear"/>
+
+            </td>
+
+        </tr>
+
+    </table>
+
+    <div class="keys">
+
+    <input type="button" value="7" class="button" onClick="display('7')"></input>
+
+    <input type="button" value="8" class="button " onClick="display('8')"></input>
+
+    <input type="button" value="9" class="button" onClick="display('9')"></input>
+
+    <input type="button" value="/" class="operator" onClick="display('/')"></input>
+
+    <input type="button" value="4" class="button" onClick="display('4')"></input>
+
+    <input type="button" value="5" class="button" onClick="display('5')"></input>
+
+    <input type="button" value="6" class="button" onClick="display('6')"></input>
+
+    <input type="button" value="*" class="operator" onClick="display('*')"></input>
+
+    <input type="button" value="1" class="button" onClick="display('1')"></input>
+
+    <input type="button" value="2" class="button" onClick="display('2')"></input>
+
+    <input type="button" value="3" class="button" onClick="display('3')"></input>
+
+    <input type="button" value="-" class="operator" onClick="display('-')"></input>
+
+    <input type="button" value="0" class="button" onClick="display('0')"></input>
+
+    <input type="button" value="." class="button" onClick="display('.')"></input>
+
+    <input type="button" value= "=" class="button equal-sign" onClick="solve()"></input>
+
+    <input type="button" value="+" class="operator" onClick="display('+')"></input>
+
+</div> 
+
+</div>
+
+</body>
+</html>
diff --git a/Calculator Using html,css and js/script.js b/Calculator Using html,css and js/script.js
@@ -0,0 +1,25 @@
+function display(val){
+
+  document.getElementById('result').value += val
+
+  return val
+
+}
+
+function solve(){
+
+  let x = document.getElementById('result').value
+
+  let y = eval(x);
+
+  document.getElementById('result').value = y
+
+  return y
+
+}
+
+function clearScreen(){
+
+  document.getElementById('result').value = ''
+
+}
diff --git a/Calculator Using html,css and js/style.css b/Calculator Using html,css and js/style.css
@@ -0,0 +1,156 @@
+body{
+  background-color: #84a98c;
+}
+
+.container {
+
+  border: 1px solid white;
+
+  box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.4);
+
+  border-radius: 10px;
+
+  position: absolute;
+
+  top: 55%;
+
+  left: 50%;
+
+  transform: translate(-50%, -50%);
+
+  width: 450px;
+
+  height: 400px;
+
+  background-image: linear-gradient(to right, #dee2ff, #e9ecef);
+
+}
+
+.keys {
+
+  display: grid;
+
+  grid-template-columns: repeat(4, 1fr);
+
+  grid-gap: 10px;
+
+  padding: 10px;
+
+  margin:auto;
+
+}
+
+.button {
+
+  height: 60px;
+
+  padding: 5px;
+
+  background-color: #fff;
+
+  border-radius: 3px;
+
+  border: 1px solid #c4c4c4;
+
+  background-color: transparent;
+
+  font-size: 24px;
+
+  color: black;
+
+  background-image: linear-gradient(to bottom, transparent, transparent 50%, rgba(0,0,0,.04));
+
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 0 rgba(255,255,255,.45), inset 0 -1px 0 0 rgba(255,255,255,.15), 0 1px 0 0 rgba(255,255,255,.15);
+
+}
+
+.button:hover {
+
+  background-color: #6c757d;
+
+  color: white;
+
+}
+
+.operator {
+
+  color: #333;
+
+  background-color: #deaaff;
+
+  font-size: 24px;
+
+
+}
+.operator:hover {
+
+  background-color: #6c757d;
+
+  color: white;
+}
+
+.clear {
+
+  background-color: #f08080;
+
+  border-color: #b0353a;
+
+  color: #fff;
+
+  width: 80px;
+
+  height: 30px;  
+
+}
+
+.clear:hover {
+
+  background-color: #f72585;
+
+  color: black;
+
+  border-color: black;
+
+}
+
+.equal-sign {
+
+  background-color: #a3b18a;
+
+  border-color: #3a5a40;
+
+  color: #333;
+
+}
+
+.equal-sign:hover {
+
+  background-color: #4e9ed4;
+
+}
+
+.screen{
+
+  background-color:rgb(171, 219, 231);
+
+  justify-content: left;
+
+  color: black;
+
+  font-size: medium;
+
+  width: 50%;
+
+  height: 30%;
+
+  cursor: default;
+
+  padding: 10px; 
+
+  padding-left: 40%;
+
+  margin: auto;
+
+  margin-bottom: 10px;
+
+}