Skip to content

Commit a235db4

Browse files
PBJIPBJI
authored
Merge pull request #937 from Hariiikrishnan/friendshipCalculator-hariiikrishnan
Friendship Percentage Level Calculator
2 parents ed3bd82 + d5c720a commit a235db4

File tree

4 files changed

+443
-0
lines changed

4 files changed

+443
-0
lines changed

‎FriendshipCalculator/Hariiikrishnan/algo.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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>Document</title>
7+
8+
<link rel="stylesheet" href="globalStyles.css">
9+
10+
<!-- Google Fonts -->
11+
<link rel="preconnect" href="https://fonts.googleapis.com">
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13+
<link href="https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap" rel="stylesheet">
14+
15+
</head>
16+
<body>
17+
<section>
18+
<div class="algo">
19+
<h2>How it Works ?</h2>
20+
<p>The Algorithm behind it!</p>
21+
<ul>
22+
<li>Write your and your friend's name and strike out the similar alphabets. For Eg:"Jack" , "Jane".</li>
23+
<li>Store the count of similar alphabets sequentially. For Eg: alphabets:['J','J','a','a'], Sequence:[2,2]</li>
24+
<li>Count the unique alphabets and store them in the same sequence as before. For Eg:alphabets:['c','k','n','e'], Sequence:[2,2,1,1,1,1]</li>
25+
<li>Now add the first and last values from the sequence and store it. For Eg: 2+1 = 3</li>
26+
<li>Now do the same for the 2nd character from the beginning and from the end in reverse. For Eg: 3 + ( 2 + 1).</li>
27+
<li>Continue doing the same process until the sequence reaches its end. If the sequence length is odd, add the final value.</li>
28+
<li>Now calculate the total count of the similar characters that we struck out earlier. For Eg:['J','a'] = 2</li>
29+
<li>Multiply that count with the answer we calculated earlier by adding the sequence values.</li>
30+
</ul>
31+
<a class="btn" href="index.html">Try it out</a>
32+
</div>
33+
</section>
34+
</body>
35+
</html>

‎FriendshipCalculator/Hariiikrishnan/globalStyles.css‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
text-align: center;
5+
font-family: 'Tilt Neon', sans-serif;
6+
}
7+
8+
a{
9+
text-decoration: none;
10+
}
11+
section {
12+
/* padding: 30px; */
13+
height: 100vh;
14+
width: 100%;
15+
display: flex;
16+
flex-direction: column;
17+
justify-content: space-evenly;
18+
align-items: center;
19+
background: #f2709c;
20+
color: white;
21+
/* fallback for old browsers */
22+
background: -webkit-linear-gradient(to right, #ff9472, #f2709c);
23+
/* Chrome 10-25, Safari 5.1-6 */
24+
background: linear-gradient(to right, #ff9472, #f2709c);
25+
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
26+
27+
}
28+
29+
section .header {
30+
padding: 20px;
31+
}
32+
33+
.form {
34+
justify-content: space-evenly;
35+
height: 70vh;
36+
}
37+
38+
.form,
39+
.header {
40+
display: flex;
41+
/* justify-content: center; */
42+
flex-direction: column;
43+
align-items: center;
44+
}
45+
46+
.form,
47+
.header h5 {
48+
font-size: 1.5rem;
49+
margin: 10px;
50+
width: 70%;
51+
}
52+
53+
section .form h1 {
54+
font-size: 2.8rem;
55+
}
56+
57+
.inputs {
58+
width: 70%;
59+
display: flex;
60+
justify-content: space-evenly;
61+
flex-wrap: wrap;
62+
}
63+
64+
.inputs input {
65+
margin: 5px;
66+
font-size: 1.5rem;
67+
font-weight: 700;
68+
border: none;
69+
color: white;
70+
padding: 20px 40px;
71+
border-radius: 6px;
72+
background-color: rgb(255 255 255 / 42%);
73+
/* background-color: #f2709c; */
74+
box-shadow: 3px 3px 100px 5px rgb(222 175 255);
75+
transition: transform 0.1s linear;
76+
/* box-shadow: 3px 3px 100px 15px rgb(255 255 255); */
77+
}
78+
.inputs input:focus-visible{
79+
outline: solid white 2px;
80+
transform: scale(1.1);
81+
}
82+
.inputs input::placeholder {
83+
color: white;
84+
font-weight: 500;
85+
}
86+
87+
button.pre-animation {
88+
opacity: 0;
89+
max-height: 0;
90+
}
91+
92+
button {
93+
/* transition: all 1s; */
94+
max-height: 300px;
95+
96+
padding: 10px;
97+
width: 200px;
98+
border-radius: 10px;
99+
font-size: 1.5rem;
100+
font-weight: 900;
101+
border: solid 3px #f2709c;
102+
transition: all 0.3s linear;
103+
}
104+
button:hover{
105+
background-color: #f2709c;
106+
color: white;
107+
border: solid 2px white;
108+
}
109+
.show {
110+
visibility: visible !important;
111+
/* display: inline!important; */
112+
}
113+
.footer{
114+
display: flex;
115+
justify-content: center;
116+
align-items: center;
117+
}
118+
.footer a,.footer p{
119+
color: white;
120+
margin:5px;
121+
font-size: 1.1rem;
122+
}
123+
.footer p a{
124+
color: rgb(71, 71, 255);
125+
font-weight: 700;
126+
}
127+
ul li{
128+
text-align: left;
129+
}
130+
.algo{
131+
padding: 30px;
132+
height: 100vh;
133+
display: flex;
134+
flex-direction: column;
135+
align-items: center;
136+
justify-content: space-evenly;
137+
138+
}
139+
.algo ul li{
140+
font-size: 1.2rem;
141+
}
142+
.algo .btn{
143+
background-color: #f2709c;
144+
border: solid white 1px;
145+
padding: 10px;
146+
width: 100px;
147+
border-radius: 4px;
148+
transition: all 0.1s linear;
149+
color:white;
150+
}
151+
.algo .btn:hover{
152+
background-color: #d03f6f;
153+
color: rgba(255, 255, 255, 0.744);
154+
}
155+
156+
@media (min-width:320px) and (max-width:680px){
157+
.form,
158+
.header h5 {
159+
font-size: 1.3rem;
160+
/* margin: 10px; */
161+
width: 100%;
162+
}
163+
.inputs input {
164+
padding: 10px 15px;
165+
font-size: 1.2rem;
166+
}
167+
}

‎FriendshipCalculator/Hariiikrishnan/index.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Friendship % Calculator</title>
8+
9+
<link rel="stylesheet" href="globalStyles.css">
10+
11+
<!-- Google Fonts -->
12+
<link rel="preconnect" href="https://fonts.googleapis.com">
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14+
<link href="https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap" rel="stylesheet">
15+
</head>
16+
17+
<body>
18+
<!-- Its all about my school percentage Calculator -->
19+
20+
<section>
21+
<div class="form">
22+
<div class="header">
23+
<h1>
24+
Friendship Calci
25+
</h1>
26+
<h5>It's all about my School days Friendship % Calculator which we used to kill time.. Sooo NOSTALGIC !
27+
</h5>
28+
</div>
29+
30+
<h4>Let's Play Yours!</h4>
31+
<div class="inputs">
32+
<input name="name1" placeholder="Your Name" id="name1" />
33+
<input name="name2" placeholder="Friend Name" id="name2" />
34+
</div>
35+
36+
<button onclick="calculate()" class="btn">
37+
Find &#128516;
38+
</button>
39+
40+
<div class="result" style="visibility: hidden;">
41+
<h1 class="resultHead">
42+
43+
</h1>
44+
45+
</div>
46+
47+
<div class="footer">
48+
<a href="algo.html">How it Works ?</a>
49+
<p>Developed by <a href="https://github.com/Hariiikrishnan">Hk!</a></p>
50+
</div>
51+
</div>
52+
</section>
53+
54+
55+
<script src="index.js"></script>
56+
</body>
57+
58+
</html>

0 commit comments

Comments
 (0)