diff options
| author | Rishi-k-s <rishikrishna.sr@gmail.com> | 2023-10-10 18:59:41 +0530 |
|---|---|---|
| committer | Rishi-k-s <rishikrishna.sr@gmail.com> | 2023-10-10 18:59:41 +0530 |
| commit | dc03ca48f50abb8cdc5f6a17a73e5738858807ca (patch) | |
| tree | eea28a8063ad74dd4c79c951b279beb396d70065 | |
| parent | 151ceff9c7243638c5b97fe87f1b097db4a7d3d1 (diff) | |
made calculatortest
| -rw-r--r-- | calcMain/index.html | 36 | ||||
| -rw-r--r-- | calcMain/script.js | 16 | ||||
| -rw-r--r-- | calcMain/style.css | 8 | ||||
| -rw-r--r-- | calculatorSImple/index.html | 41 | ||||
| -rw-r--r-- | calculatorSImple/script.js | 0 | ||||
| -rw-r--r-- | calculatorSImple/style.css | 13 |
6 files changed, 114 insertions, 0 deletions
diff --git a/calcMain/index.html b/calcMain/index.html new file mode 100644 index 0000000..ab3b931 --- /dev/null +++ b/calcMain/index.html @@ -0,0 +1,36 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <script src="https://cdn.tailwindcss.com"></script>
+ <title>Calculator</title>
+</head>
+<body>
+<div class="topPadding">
+ <div>
+ <input id="mainInput" type="text" class="bg-white w-full border border-slate-300 rounded-md py-2 pl-9 pr-3 shadow-sm">
+ </div>
+
+ <div class="grid grid-cols-3 gap-4">
+ <button onclick="addToDisp('1')"class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 ">1</button>
+ <button onclick="addToDisp('2')"class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 ">2</button>
+ <button onclick="addToDisp('3')"class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 ">3</button>
+ <button onclick="addToDisp('4')"class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 ">4</button>
+ <button onclick="addToDisp('5')"class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 ">5</button>
+ <button onclick="addToDisp('6')"class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 ">6</button>
+ <button onclick="addToDisp('7')"class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 ">7</button>
+ <button onclick="addToDisp('8')"class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 ">8</button>
+ <button onclick="addToDisp('9')"class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 ">9</button>
+ <button onclick="addToDisp('0')"class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 ">0</button>
+ <button onclick="addToDisp('+')"class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 ">+</button>
+ <button onclick="addToDisp('-')"class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 ">-</button>
+ <button onclick="addToDisp('*')"class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 ">*</button>
+ <button onclick="addToDisp('/')"class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 ">/</button>
+ <button onclick="calcFunc()"class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 ">=</button>
+ <button onclick="addToDisp('c')"class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 ">C</button>
+ </div>
+ </div>
+</body>
+<script src="script.js"></script>
+</html>
\ No newline at end of file diff --git a/calcMain/script.js b/calcMain/script.js new file mode 100644 index 0000000..ae30723 --- /dev/null +++ b/calcMain/script.js @@ -0,0 +1,16 @@ +let mainInput = document.getElementById("mainInput");
+
+let calcStr = "";
+let finVal = "";
+
+function addToDisp(val){
+ console.log(val);
+ calcStr+= val
+ mainInput.value = calcStr;
+}
+
+function calcFunc(){
+ finVal = eval(calcStr);
+ mainInput.value = finVal;
+ calcStr = finVal;
+}
diff --git a/calcMain/style.css b/calcMain/style.css new file mode 100644 index 0000000..2ef18af --- /dev/null +++ b/calcMain/style.css @@ -0,0 +1,8 @@ +*{
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+}
+
+.topPadding{
+ padding: 10%;
+}
\ No newline at end of file diff --git a/calculatorSImple/index.html b/calculatorSImple/index.html new file mode 100644 index 0000000..79ebddd --- /dev/null +++ b/calculatorSImple/index.html @@ -0,0 +1,41 @@ +<!DOCTYPE html>
+<html>
+<head>
+ <link rel="stylesheet" href="style.css">
+</head>
+<body>
+ <form action="">
+ <input type="text"><br>
+ </form>
+<div class="grid-container">
+ <button class="grid-item">1</button>
+ <button class="grid-item">2</button>
+ <button class="grid-item">3</button>
+ <button class="grid-item">4</button>
+ <button class="grid-item">5</button>
+ <button class="grid-item">6</button>
+ <button class="grid-item">7</button>
+ <button class="grid-item">8</button>
+ <button class="grid-item">9</button>
+ <button class="grid-item">+</button>
+ <button class="grid-item">-</button>
+ <button class="grid-item">*</button>
+ <button class="grid-item">/</button>
+ <button class="grid-item">=</button>
+
+ <!-- <div class="grid-item">1</div>
+ <div class="grid-item">2</div>
+ <div class="grid-item">3</div>
+ <div class="grid-item">4</div>
+ <div class="grid-item">5</div>
+ <div class="grid-item">6</div>
+ <div class="grid-item">7</div>
+ <div class="grid-item">8</div>
+ <div class="grid-item">9</div> -->
+</div>
+
+
+
+
+</body>
+</html>
diff --git a/calculatorSImple/script.js b/calculatorSImple/script.js new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/calculatorSImple/script.js diff --git a/calculatorSImple/style.css b/calculatorSImple/style.css new file mode 100644 index 0000000..1c7a42e --- /dev/null +++ b/calculatorSImple/style.css @@ -0,0 +1,13 @@ +.grid-container {
+ display: grid;
+ grid-template-columns: auto auto auto;
+ background-color: #2196F3;
+ padding: 10px;
+ }
+.grid-item {
+background-color: rgba(255, 255, 255, 0.8);
+border: 1px solid rgba(0, 0, 0, 0.8);
+padding: 20px;
+font-size: 30px;
+text-align: center;
+}
\ No newline at end of file |