Skip to content

Commit 4a0e8de

Browse files
HARIESH-SRHARIESH-SR
authored
Add files via upload
1 parent b2a95a7 commit 4a0e8de

File tree

5 files changed

+354
-0
lines changed

5 files changed

+354
-0
lines changed

‎README.md

-713 Bytes

SRM GPA CGPA CALCULATOR

Developed a GPA & CGPA calculator website tailored for SRM IST, Trichy Campus, to simplify academic performance tracking. This user-friendly tool enables students to input course details and instantly calculate their GPA and CGPA. Empowering students to monitor their progress conveniently

Website Link: https://cgpa-calculator-srm.netlify.app/

‎cgpa-calculator.html

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>CGPA Calculator</title>
7+
<link rel="stylesheet" href="css/cgpa-calculator.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>SRM CGPA Calculator</h1>
12+
13+
<div>
14+
<label for="regulation">Select Regulation:</label>
15+
<select id="regulation">
16+
<option value="2018">2018</option>
17+
<option value="2021">2021</option>
18+
</select>
19+
</div>
20+
21+
<div>
22+
<label for="course">Select Course:</label>
23+
<select id="course">
24+
<!-- The course options will be dynamically filled based on the selected regulation -->
25+
</select>
26+
</div>
27+
28+
<div class="semester-input">
29+
<label for="semester1">Semester 1 GPA:</label>
30+
<input type="number" id="semester1" step="0.01" min="0" max="4.0" required>
31+
</div>
32+
33+
<div id="additional-semesters">
34+
<!-- Additional semester inputs will be added here -->
35+
</div>
36+
37+
<button onclick="addSemester()">Add Another Semester</button>
38+
<button onclick="removeSemester()">Remove Last Semester</button>
39+
<button onclick="calculateCGPA()">Calculate CGPA</button>
40+
41+
<div class="result">
42+
<p>Your CGPA: <span id="cgpa">N/A</span></p>
43+
</div>
44+
</div>
45+
46+
<footer>
47+
<div class="footer-content">
48+
<div class="footer-text">
49+
Developed by
50+
<a href="https://www.linkedin.com/in/sai23/" target="_blank">Sai Narayana</a>
51+
and
52+
<a href="https://www.linkedin.com/in/hariesh-s-r/" target="_blank">Hariesh</a>
53+
</div>
54+
</div>
55+
</footer>
56+
57+
<style>
58+
footer {
59+
background-color: #333;
60+
color: #fff;
61+
padding: 10px 0; /* Reduced height by adjusting padding */
62+
position: fixed;
63+
bottom: 0;
64+
width: 100%;
65+
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
66+
transition: all 0.3s;
67+
}
68+
.footer-content {
69+
display: flex;
70+
align-items: center;
71+
justify-content: space-between;
72+
max-width: 1200px;
73+
margin: 0 auto;
74+
padding: 0 20px;
75+
}
76+
.footer-text {
77+
font-size: 16px;
78+
flex: 1;
79+
text-align: center;
80+
}
81+
.footer-text a {
82+
font-weight: 600;
83+
cursor: pointer;
84+
transition: color 0.3s;
85+
color: #fff;
86+
text-decoration: none; /* Removes underline from links */
87+
}
88+
.footer-text a:hover {
89+
color: #b8b8b8;
90+
}
91+
.social-icons {
92+
display: flex;
93+
align-items: center;
94+
}
95+
.social-icons a {
96+
margin-left: 10px;
97+
font-size: 20px;
98+
color: #fff;
99+
transition: color 0.3s;
100+
}
101+
.social-icons a:hover {
102+
color: #0077b5;
103+
}
104+
footer:hover {
105+
transform: translateY(-10px);
106+
box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.2);
107+
}
108+
</style>
109+
110+
111+
<script src="js/cgpa-calculator.js"></script>
112+
</body>
113+
</html>

‎gpa-calculator.html

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Select Details</title>
7+
<link rel="stylesheet" href="css/gpa-calculator.css">
8+
</head>
9+
<style>
10+
body {
11+
background-image: url('images/bg.jpg');
12+
background-repeat: no-repeat;
13+
background-position: center center;
14+
background-size: cover;
15+
background-attachment: fixed;
16+
}
17+
18+
</style>
19+
20+
<body>
21+
<div class="bg"></div>
22+
<div class="container">
23+
<label for="regulation">Select Regulation:</label>
24+
<select id="regulation" onchange="updateCourses()">
25+
<option value="2018">2018</option>
26+
<option value="2021">2021</option>
27+
<!-- Add other regulations if needed -->
28+
</select>
29+
30+
<label for="course">Select Course:</label>
31+
<select id="course" onchange="updateSemesters()"></select>
32+
33+
<label for="semester">Select Semester:</label>
34+
<select id="semester"></select>
35+
36+
<button onclick="goToSubjectsPage()">Next</button>
37+
</div>
38+
39+
<footer>
40+
<div class="footer-content">
41+
<div class="footer-text">
42+
Developed by
43+
<a href="https://www.linkedin.com/in/sai23/" target="_blank">Sai Narayana</a>
44+
and
45+
<a href="https://www.linkedin.com/in/hariesh-s-r/" target="_blank">Hariesh</a>
46+
</div>
47+
</div>
48+
</footer>
49+
50+
<style>
51+
footer {
52+
background-color: #333;
53+
color: #fff;
54+
padding: 10px 0; /* Reduced height by adjusting padding */
55+
position: fixed;
56+
bottom: 0;
57+
width: 100%;
58+
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
59+
transition: all 0.3s;
60+
}
61+
.footer-content {
62+
display: flex;
63+
align-items: center;
64+
justify-content: space-between;
65+
max-width: 1200px;
66+
margin: 0 auto;
67+
padding: 0 20px;
68+
}
69+
.footer-text {
70+
font-size: 16px;
71+
flex: 1;
72+
text-align: center;
73+
}
74+
.footer-text a {
75+
font-weight: 600;
76+
cursor: pointer;
77+
transition: color 0.3s;
78+
color: #fff;
79+
text-decoration: none; /* Removes underline from links */
80+
}
81+
.footer-text a:hover {
82+
color: #b8b8b8;
83+
}
84+
.social-icons {
85+
display: flex;
86+
align-items: center;
87+
}
88+
.social-icons a {
89+
margin-left: 10px;
90+
font-size: 20px;
91+
color: #fff;
92+
transition: color 0.3s;
93+
}
94+
.social-icons a:hover {
95+
color: #0077b5;
96+
}
97+
footer:hover {
98+
transform: translateY(-10px);
99+
box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.2);
100+
}
101+
</style>
102+
103+
104+
<script src="js/gpa-calculator.js"></script>
105+
</body>
106+
</html>

‎index.html

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<html lang="en">
2+
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>GPA | CGPA Calculator</title>
7+
<link rel="stylesheet" href="css/main.css">
8+
<style>
9+
.background-container {
10+
background-image: url("https://images.unsplash.com/photo-1442606383395-175ee96ed967?q=80&fm=jpg&s=5c8c74be9bc91b47c79a1aaf92264be5");
11+
background-size: cover;
12+
background-repeat: no-repeat;
13+
padding: 20px; /* Add padding to keep content away from edges */
14+
}
15+
</style>
16+
</head>
17+
18+
<body>
19+
<div class="background-container">
20+
21+
<!-- Sidebar Menu -->
22+
<div id="sideMenu" class="sidebar">
23+
<a href="javascript:void(0)" class="closebtn" onclick="closeMenu()">&times;</a>
24+
<a href="index.html">Home</a>
25+
<a href="gpa-calculator.html">GPA Calculator</a>
26+
<a href="cgpa-calculator.html">CGPA Calculator</a>
27+
<a href="about.html">About</a>
28+
<a href="contact.html">Contact</a>
29+
</div>
30+
31+
<!-- Menu Button -->
32+
<span class="menuicon" onclick="openMenu()">&#9776; </span>
33+
34+
<!-- Main Content -->
35+
<div class="container">
36+
<!-- Hero Section -->
37+
<section class="hero">
38+
<div class="hero-content">
39+
40+
</div>
41+
</section>
42+
43+
<!-- Features -->
44+
<section class="features">
45+
<h2>Why Use Our Calculators?</h2>
46+
<div class="feature-box-container">
47+
<div class="feature-box">
48+
<h3>Accurate & Reliable</h3>
49+
<p>We use the official grading criteria of SRM IST to ensure accurate GPA & CGPA results.</p>
50+
</div>
51+
<div class="feature-box">
52+
<h3>Easy to Use</h3>
53+
<p>With an intuitive design, you can calculate your GPA & CGPA in a few easy steps without even knowing the credit details.</p>
54+
</div>
55+
<div class="feature-box">
56+
<h3>Plan Ahead</h3>
57+
<p>Get insights into your academic progress and set goals for your future semesters.</p>
58+
</div>
59+
</div>
60+
</section>
61+
62+
<!-- Call to Action -->
63+
<section class="cta">
64+
<h2>Ready to Start?</h2>
65+
<p>Calculate your GPA or CGPA now and take a step towards academic success!</p>
66+
<div class="links">
67+
<a href="gpa-calculator.html" class="calculate-button">Calculate GPA</a>
68+
<a href="cgpa-calculator.html" class="calculate-button">Calculate CGPA</a>
69+
</div>
70+
</section>
71+
72+
<!-- Testimonials -->
73+
<section class="testimonials">
74+
<h2>What Students Are Saying</h2>
75+
<div class="testimonial">
76+
<p>"This tool has been a game-changer for me. It's so easy to track my progress!"</p>
77+
<cite>- Sivabalan, 3rd Year AI-ML</cite>
78+
</div>
79+
<div class="testimonial">
80+
<p>"I love how simple it is. It has helped me set my academic goals."</p>
81+
<cite>- Guru V, 3rd Year ECE</cite>
82+
</div>
83+
</section>
84+
85+
<!-- Footer -->
86+
<footer>
87+
<p>&copy; 2023 Designed by Sai Narayana & Hariesh</p>
88+
</footer>
89+
</div>
90+
91+
<!-- JavaScript for the sidebar menu -->
92+
<script>
93+
function openMenu() {
94+
document.getElementById("sideMenu").style.width = "250px";
95+
}
96+
97+
function closeMenu() {
98+
document.getElementById("sideMenu").style.width = "0";
99+
}
100+
</script>
101+
102+
</div>
103+
104+
</body>
105+
106+
</html>

‎subjects.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<style>
5+
body {
6+
background-image: url("bg.jpg");
7+
background-color: #cccccc;
8+
background-repeat: no-repeat;
9+
background-attachment: fixed;
10+
background-size: cover;
11+
}
12+
</style>
13+
<meta charset="UTF-8">
14+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
15+
<title>Select Grades</title>
16+
<link rel="stylesheet" href="css/gpa-calculator.css">
17+
</head>
18+
<body>
19+
<div class="bg"></div>
20+
<div class="container" id="subjectsContainer">
21+
<!-- Subjects and grade dropdowns will be dynamically populated here -->
22+
</div>
23+
24+
<button onclick="calculateGPA()">Calculate GPA</button>
25+
<div id="result"></div>
26+
27+
<script src="js/gpa-calculator.js"></script>
28+
</body>
29+
</html>

0 commit comments

Comments
 (0)