Skip to content

Friendship Percentage Level Calculator #937

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

Merged
merged 2 commits into from
Oct 16, 2023
Merged

Friendship Percentage Level Calculator #937

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3f16228
Friendship Percent Level Calculator
Hariiikrishnan Oct 14, 2023
d5c720a
changed the directory issue
Hariiikrishnan Oct 16, 2023
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
35 changes: 35 additions & 0 deletions FriendshipCalculator/Hariiikrishnan/algo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<link rel="stylesheet" href="globalStyles.css">

<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap" rel="stylesheet">

</head>
<body>
<section>
<div class="algo">
<h2>How it Works ?</h2>
<p>The Algorithm behind it!</p>
<ul>
<li>Write your and your friend's name and strike out the similar alphabets. For Eg:"Jack" , "Jane".</li>
<li>Store the count of similar alphabets sequentially. For Eg: alphabets:['J','J','a','a'], Sequence:[2,2]</li>
<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>
<li>Now add the first and last values from the sequence and store it. For Eg: 2+1 = 3</li>
<li>Now do the same for the 2nd character from the beginning and from the end in reverse. For Eg: 3 + ( 2 + 1).</li>
<li>Continue doing the same process until the sequence reaches its end. If the sequence length is odd, add the final value.</li>
<li>Now calculate the total count of the similar characters that we struck out earlier. For Eg:['J','a'] = 2</li>
<li>Multiply that count with the answer we calculated earlier by adding the sequence values.</li>
</ul>
<a class="btn" href="index.html">Try it out</a>
</div>
</section>
</body>
</html>
167 changes: 167 additions & 0 deletions FriendshipCalculator/Hariiikrishnan/globalStyles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
* {
margin: 0;
padding: 0;
text-align: center;
font-family: 'Tilt Neon', sans-serif;
}

a{
text-decoration: none;
}
section {
/* padding: 30px; */
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
background: #f2709c;
color: white;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ff9472, #f2709c);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ff9472, #f2709c);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

section .header {
padding: 20px;
}

.form {
justify-content: space-evenly;
height: 70vh;
}

.form,
.header {
display: flex;
/* justify-content: center; */
flex-direction: column;
align-items: center;
}

.form,
.header h5 {
font-size: 1.5rem;
margin: 10px;
width: 70%;
}

section .form h1 {
font-size: 2.8rem;
}

.inputs {
width: 70%;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}

.inputs input {
margin: 5px;
font-size: 1.5rem;
font-weight: 700;
border: none;
color: white;
padding: 20px 40px;
border-radius: 6px;
background-color: rgb(255 255 255 / 42%);
/* background-color: #f2709c; */
box-shadow: 3px 3px 100px 5px rgb(222 175 255);
transition: transform 0.1s linear;
/* box-shadow: 3px 3px 100px 15px rgb(255 255 255); */
}
.inputs input:focus-visible{
outline: solid white 2px;
transform: scale(1.1);
}
.inputs input::placeholder {
color: white;
font-weight: 500;
}

button.pre-animation {
opacity: 0;
max-height: 0;
}

button {
/* transition: all 1s; */
max-height: 300px;

padding: 10px;
width: 200px;
border-radius: 10px;
font-size: 1.5rem;
font-weight: 900;
border: solid 3px #f2709c;
transition: all 0.3s linear;
}
button:hover{
background-color: #f2709c;
color: white;
border: solid 2px white;
}
.show {
visibility: visible !important;
/* display: inline!important; */
}
.footer{
display: flex;
justify-content: center;
align-items: center;
}
.footer a,.footer p{
color: white;
margin:5px;
font-size: 1.1rem;
}
.footer p a{
color: rgb(71, 71, 255);
font-weight: 700;
}
ul li{
text-align: left;
}
.algo{
padding: 30px;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;

}
.algo ul li{
font-size: 1.2rem;
}
.algo .btn{
background-color: #f2709c;
border: solid white 1px;
padding: 10px;
width: 100px;
border-radius: 4px;
transition: all 0.1s linear;
color:white;
}
.algo .btn:hover{
background-color: #d03f6f;
color: rgba(255, 255, 255, 0.744);
}

@media (min-width:320px) and (max-width:680px){
.form,
.header h5 {
font-size: 1.3rem;
/* margin: 10px; */
width: 100%;
}
.inputs input {
padding: 10px 15px;
font-size: 1.2rem;
}
}
58 changes: 58 additions & 0 deletions FriendshipCalculator/Hariiikrishnan/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Friendship % Calculator</title>

<link rel="stylesheet" href="globalStyles.css">

<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap" rel="stylesheet">
</head>

<body>
<!-- Its all about my school percentage Calculator -->

<section>
<div class="form">
<div class="header">
<h1>
Friendship Calci
</h1>
<h5>It's all about my School days Friendship % Calculator which we used to kill time.. Sooo NOSTALGIC !
</h5>
</div>

<h4>Let's Play Yours!</h4>
<div class="inputs">
<input name="name1" placeholder="Your Name" id="name1" />
<input name="name2" placeholder="Friend Name" id="name2" />
</div>

<button onclick="calculate()" class="btn">
Find &#128516;
</button>

<div class="result" style="visibility: hidden;">
<h1 class="resultHead">

</h1>

</div>

<div class="footer">
<a href="algo.html">How it Works ?</a>
<p>Developed by <a href="https://github.com/Hariiikrishnan">Hk!</a></p>
</div>
</div>
</section>


<script src="index.js"></script>
</body>

</html>
Loading