Made CGPA Percentage Calculator responsive (#1188)

Rakesh9100 · Jun 10, 2024 · 8fab65d · 8fab65d
1 parent 1c060e2
commit 8fab65d
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 39 deletions.
diff --git a/Calculators/Anagram-Calculator/Readme.md → Calculators/Anagram-Calculator/README.md b/Calculators/Anagram-Calculator/Readme.md → Calculators/Anagram-Calculator/README.md
diff --git a/Calculators/CGPA-Percentage-Calculator/index.html b/Calculators/CGPA-Percentage-Calculator/index.html
@@ -2,43 +2,37 @@
 <html>
 
 <head>
-	<script src="./script.js"></script>
-	<script src="https://cdn.tailwindcss.com"></script>
-	<link rel="stylesheet" href="style.css" />
-	<title>CGPA Percentage Calculator</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="style.css" />
+    <title>CGPA Percentage Calculator</title>
 </head>
 
 <body>
-	<main class="flex items-center justify-center h-screen bg-gradient-to-r from-green-400 to-blue-500">
-		<form class="w-full max-w-md bg-white rounded-lg shadow-xl p-8 space-y-6">
-			<div>
-				<h1 class="text-2xl font-bold text-center text-gray-700 mb-1">
-					CGPA ⟷ Percentage
-				</h1>
-				<h3 class="text-center mt-0 text-sm text-gray-400">
-					Start Typing In Any Field
-				</h3>
-			</div>
-			<div class="flex flex-col space-y-2">
-				<label
-					class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-					for="CGPA">CGPA</label><input
-					class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-					id="cgpaInput" placeholder="CGPA" type="number" />
-			</div>
-			<div class="flex flex-col space-y-2">
-				<label
-					class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-					for="Percentage">Percentage</label><input
-					class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-					id="percentageInput" placeholder="Percentage" type="number" />
-			</div>
-			<div id="error" class="text-red-300"></div>
-		</form>
-	</main>
-
-	<script src="./script.js"></script>
-
+    <main class="flex items-center justify-center min-h-screen bg-gradient-to-r from-green-400 to-blue-500 p-4">
+        <form class="w-full max-w-md bg-white rounded-lg shadow-xl p-8 space-y-6">
+            <div>
+                <h1 class="text-2xl font-bold text-center text-gray-700 mb-1">CGPA ⟷ Percentage</h1>
+                <h3 class="text-center mt-0 text-sm text-gray-400">Start Typing In Any Field</h3>
+            </div>
+            <div class="flex flex-col space-y-2">
+                <label
+                    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    for="CGPA">CGPA</label>
+                <input
+                    class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                    id="cgpaInput" placeholder="CGPA" type="number" />
+            </div>
+            <div class="flex flex-col space-y-2">
+                <label
+                    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    for="Percentage">Percentage</label>
+                <input
+                    class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                    id="percentageInput" placeholder="Percentage" type="number" />
+            </div>
+            <div id="error" class="text-red-300"></div>
+        </form>
+    </main>
+    <script src="./script.js"></script>
 </body>
-
-</html>
+</html>
diff --git a/Calculators/CGPA-Percentage-Calculator/style.css b/Calculators/CGPA-Percentage-Calculator/style.css
@@ -1,5 +1,9 @@
 input[type='number']::-webkit-inner-spin-button,
 input[type='number']::-webkit-outer-spin-button {
-	-webkit-appearance: none;
-	margin: 0;
-}
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input[type='number'] {
+    -moz-appearance: textfield;
+}