Skip to content

Commit c7829ac

Browse files
apurvaspaceapurvaspace
authored
Merge pull request #1 from apurvaspace/1
Added Stylesheet, separated js sheet
2 parents 53bf6f1 + 396216c commit c7829ac

File tree

3 files changed

+158
-40
lines changed

3 files changed

+158
-40
lines changed

‎index.html

+16-40
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>CGPA Calculator</title>
4+
<title>CGPA Calculator</title>
5+
<link rel="stylesheet" href="style.css">
6+
57
</head>
68
<body>
7-
<form name="PresentCG">
8-
Current CGPA: <input type="number" step="any" name="current_cg" id="current_cg">
9-
Total Credits Cleared: <input type="number" name="tpastcredits" id="tpastcredits">
9+
<div class="main-container">
10+
<h1>CGPA Estimator</h1>
11+
<form name="PresentCG" class="form1">
12+
<div class="form1-div">
13+
<label>Current CGPA </label><input type="number" step="any" name="current_cg" id="current_cg">
14+
</div>
15+
<div class="form1-div">
16+
<label>Total Credits Cleared</label> <input type="number" name="tpastcredits" id="tpastcredits">
17+
</div>
1018
</form>
11-
<form name="Expected">
19+
<form name="Expected" class="form2">
1220
<table>
1321
<tr>
1422
<th></th>
@@ -77,41 +85,9 @@
7785
</tr>
7886
</table>
7987
<form>
80-
<input type="Submit" name="Submit!" onclick="cg()">
88+
<input type="Submit" name="Submit!" onclick="cg()" class="submit">
8189
</form>
82-
<script type="text/javascript">
83-
function cg() {
84-
var currentCG = document.PresentCG.current_cg.value;
85-
var tcredits = document.PresentCG.tpastcredits.value;
86-
var sub1grade = document.Expected.sub1grade.value;
87-
var sub1credits = document.Expected.sub1credits.value;
88-
var sub2grade = document.Expected.sub2grade.value;
89-
var sub2credits = document.Expected.sub2credits.value;
90-
var sub3grade = document.Expected.sub3grade.value;
91-
var sub3credits = document.Expected.sub3credits.value;
92-
var sub4grade = document.Expected.sub4grade.value;
93-
var sub4credits = document.Expected.sub4credits.value;
94-
var sub5grade = document.Expected.sub5grade.value;
95-
var sub5credits = document.Expected.sub5credits.value;
96-
var sub6grade = document.Expected.sub6grade.value;
97-
var sub6credits = document.Expected.sub6credits.value;
98-
var sub7grade = document.Expected.sub7grade.value;
99-
var sub7credits = document.Expected.sub7credits.value;
100-
var sub8grade = document.Expected.sub8grade.value;
101-
var sub8credits = document.Expected.sub8credits.value;
102-
var sub9grade = document.Expected.sub9grade.value;
103-
var sub9credits = document.Expected.sub9credits.value;
104-
var sub10grade = document.Expected.sub10grade.value;
105-
var sub10credits = document.Expected.sub10credits.value;
106-
var sub11grade = document.Expected.sub11grade.value;
107-
var sub11credits = document.Expected.sub11credits.value;
108-
var sub12grade = document.Expected.sub12grade.value;
109-
var sub12credits = document.Expected.sub12credits.value;
110-
var totalcred = Number(tcredits)+Number(sub1credits)+Number(sub2credits)+Number(sub3credits)+Number(sub4credits)+Number(sub5credits)+Number(sub6credits)+Number(sub7credits)+Number(sub8credits)+Number(sub9credits)+Number(sub10credits)+Number(sub11credits)+Number(sub12credits);
111-
var weightedcredits = (currentCG*tcredits) + (sub1grade*sub1credits)+ (sub2grade*sub2credits) +(sub3grade*sub3credits)+(sub4grade*sub4credits)+ (sub5grade*sub5credits)+(sub6grade*sub6credits)+sub7grade*sub7credits+sub8grade*sub8credits+sub9grade*sub9credits+sub10grade*sub10credits+sub11grade*sub11credits+sub12grade*sub12credits;
112-
var expected_cg = weightedcredits/totalcred;
113-
alert('Your Expected CGPA is ' + expected_cg.toFixed(2));
114-
}
115-
</script>
90+
</div>
91+
<script type="text/javascript" src="script.js"></script>
11692
</body>
11793
</html>

‎script.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
function cg() {
2+
var currentCG = document.PresentCG.current_cg.value;
3+
var tcredits = document.PresentCG.tpastcredits.value;
4+
var sub1grade = document.Expected.sub1grade.value;
5+
var sub1credits = document.Expected.sub1credits.value;
6+
var sub2grade = document.Expected.sub2grade.value;
7+
var sub2credits = document.Expected.sub2credits.value;
8+
var sub3grade = document.Expected.sub3grade.value;
9+
var sub3credits = document.Expected.sub3credits.value;
10+
var sub4grade = document.Expected.sub4grade.value;
11+
var sub4credits = document.Expected.sub4credits.value;
12+
var sub5grade = document.Expected.sub5grade.value;
13+
var sub5credits = document.Expected.sub5credits.value;
14+
var sub6grade = document.Expected.sub6grade.value;
15+
var sub6credits = document.Expected.sub6credits.value;
16+
var sub7grade = document.Expected.sub7grade.value;
17+
var sub7credits = document.Expected.sub7credits.value;
18+
var sub8grade = document.Expected.sub8grade.value;
19+
var sub8credits = document.Expected.sub8credits.value;
20+
var sub9grade = document.Expected.sub9grade.value;
21+
var sub9credits = document.Expected.sub9credits.value;
22+
var sub10grade = document.Expected.sub10grade.value;
23+
var sub10credits = document.Expected.sub10credits.value;
24+
var sub11grade = document.Expected.sub11grade.value;
25+
var sub11credits = document.Expected.sub11credits.value;
26+
var sub12grade = document.Expected.sub12grade.value;
27+
var sub12credits = document.Expected.sub12credits.value;
28+
var totalcred = Number(tcredits)+Number(sub1credits)+Number(sub2credits)+Number(sub3credits)+Number(sub4credits)+Number(sub5credits)+Number(sub6credits)+Number(sub7credits)+Number(sub8credits)+Number(sub9credits)+Number(sub10credits)+Number(sub11credits)+Number(sub12credits);
29+
var weightedcredits = (currentCG*tcredits) + (sub1grade*sub1credits)+ (sub2grade*sub2credits) +(sub3grade*sub3credits)+(sub4grade*sub4credits)+ (sub5grade*sub5credits)+(sub6grade*sub6credits)+sub7grade*sub7credits+sub8grade*sub8credits+sub9grade*sub9credits+sub10grade*sub10credits+sub11grade*sub11credits+sub12grade*sub12credits;
30+
var expected_cg = weightedcredits/totalcred;
31+
alert('Your Expected CGPA is ' + expected_cg.toFixed(2));
32+
}

‎style.css

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto');
2+
*{
3+
margin: 0;
4+
padding:0;
5+
box-sizing: border-box;
6+
}
7+
body{
8+
font-family: 'Roboto',sans-serif;
9+
background-color: #eee;
10+
margin-top:3px;
11+
}
12+
h1{
13+
font-weight: 400;
14+
font-size: 2.5rem;
15+
text-align: center;
16+
padding: 5px;
17+
margin: 10px;
18+
margin-top: 0px;
19+
text-decoration: underline;
20+
color: rgb(65, 63, 63);
21+
}
22+
.main-container{
23+
box-shadow: 30px 0 40px rgba(0, 0, 0, 0.2), -30px 0 40px rgba(0, 0, 0, 0.2);
24+
height: 80%;
25+
width:50%;
26+
padding: 20px;
27+
padding-left: 50px;
28+
margin: auto;
29+
background: #fff;
30+
align-items: center;
31+
border: 0.8px solid rgba(0, 0, 0, 0.3);
32+
border-radius: 15px;
33+
}
34+
35+
.form1{
36+
padding-bottom: 20px;
37+
display: flex;
38+
flex-direction:column;
39+
align-items: center;
40+
41+
}
42+
43+
.form1-div{
44+
margin-bottom: 15px;
45+
display: flex;
46+
flex-direction: column;
47+
align-items: center;
48+
}
49+
50+
.form1-div label{
51+
display: block;
52+
padding: 5px;
53+
font-size: 20px;
54+
}
55+
56+
.form1-div input{
57+
padding: 4px;
58+
outline: none;
59+
width: 200px;
60+
border-radius: 20px;
61+
border: 1px solid #000;
62+
transition: 0.5s;
63+
64+
}
65+
66+
.form1-div input:focus{
67+
border: 2px solid #000;
68+
}
69+
70+
.form2{
71+
display: flex;
72+
flex-direction: column;
73+
align-items: center;
74+
75+
text-transform:capitalize;
76+
}
77+
.form2 table tr{
78+
padding: 30px;
79+
margin: 10px;
80+
}
81+
.form2 tr th,
82+
.form2 tr td{
83+
padding:2px;
84+
padding-right: 7px;
85+
}
86+
.form2 tr td input{
87+
padding: 4px;
88+
outline: none;
89+
width: 200px;
90+
border-radius: 20px;
91+
border: 1px solid #000;
92+
transition: 0.5s;
93+
}
94+
.submit{
95+
padding: 10px 20px;
96+
margin: 10px;
97+
border-radius:30px;
98+
border: 1px solid #000;
99+
background: rgb(219, 218, 218);
100+
font-size: 20px;
101+
font-weight:lighter;
102+
103+
}
104+
105+
@media (max-width: 1000px)
106+
{
107+
.main-container{
108+
width: 80%;
109+
}
110+
}

0 commit comments

Comments
 (0)