Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Made CGPA Percentage Calculator responsive #1188

Merged
merged 12 commits into from
Jun 10, 2024
Merged

Made CGPA Percentage Calculator responsive #1188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
d9c81ca
made the weather calculator responsive
agastya3636 Jun 1, 2024
a16d834
Merge branch 'main' of https://github.com/agastya3636/CalcDiverse
agastya3636 Jun 1, 2024
2b494af
fixed
agastya3636 Jun 1, 2024
a1ee317
Merge branch 'main' of https://github.com/agastya3636/CalcDiverse
agastya3636 Jun 1, 2024
fa21b5a
Made website bandwidth calculator responsive
agastya3636 Jun 2, 2024
5fc0ec0
Merge branch 'Rakesh9100:main' into main
agastya3636 Jun 2, 2024
5a6cac4
Merge branch 'Rakesh9100:main' into main
agastya3636 Jun 5, 2024
db7994b
made responsive
agastya3636 Jun 5, 2024
b4c1791
Merge branch 'Rakesh9100:main' into main
agastya3636 Jun 6, 2024
ef7189b
Update and rename Readme.md to README.md
Rakesh9100 Jun 10, 2024
cc551bf
Update index.html
Rakesh9100 Jun 10, 2024
32ca14c
Update style.css
Rakesh9100 Jun 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 Calculators/Anagram-Calculator/Readme.md → Calculators/Anagram-Calculator/README.md
View file
Open in desktop
File renamed without changes.
66 changes: 30 additions & 36 deletions Calculators/CGPA-Percentage-Calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
10 changes: 7 additions & 3 deletions Calculators/CGPA-Percentage-Calculator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}