Skip to content

Commit 41cba49

Browse files
RiyaGupta89RiyaGupta89
committed
Added love calculator app
1 parent f782626 commit 41cba49

File tree

5 files changed

+155
-0
lines changed

5 files changed

+155
-0
lines changed

‎LOVE-CALCULATOR/README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Love Calculator App
2+
3+
<!-- Image -->
4+
5+
*This is a good-looking love calculator app. Love calculator is a fun application where friends and couples can calculate the percentage of love between them. Simple and interesting app to work on.*
6+
7+
> Technologies used:
8+
9+
- HTML
10+
- CSS
11+
- JAVASCRIPT

‎LOVE-CALCULATOR/heart.png

29.7 KB
Loading

‎LOVE-CALCULATOR/index.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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+
<link rel="preconnect" href="https://fonts.gstatic.com">
8+
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
9+
<link rel="preconnect" href="https://fonts.gstatic.com">
10+
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
11+
<link rel="stylesheet" href="style.css">
12+
<title>Love Calculator</title>
13+
</head>
14+
15+
<body>
16+
17+
<nav>
18+
<div class="logo">The Love Calculator</div>
19+
</nav>
20+
21+
<section class="wrapper">
22+
<h2 class="heading">Welcome to this great invention of Doctor Love!</h2>
23+
<p class="about">We all know that a name can tell a lot about a person. Names are not randomly chosen: they all
24+
have a meaning. Doctor Love knew this so he made another great invention just for the lonely you!
25+
26+
Sometimes you'd like to know if a relationship with someone could work out. Therefore Doctor Love himself
27+
designed this great machine for you. With The Love Calculator you can calculate the probability of a
28+
successful relationship between two people. The Love Calculator is an affective way to get an impression of
29+
what the chances are on a relationship between two people.
30+
31+
To find out what the chances for you and your dream partner are, just fill in both full names (both first
32+
and last name) in the two text boxes below, and press Calculate.</p>
33+
34+
<div class="box">
35+
<div class="flex-box">
36+
<div class="yourName">
37+
<label for="yourName" class="bold">Your Name</label> <br>
38+
<input type="text" placeholder="Full Name" required>
39+
</div>
40+
<div class="yourCrush">
41+
<label for="yourCrush" class="bold" >Your Crush</label> <br>
42+
<input type="text" placeholder="Full Name" required>
43+
</div>
44+
</div>
45+
<button onclick="calculateLove()">Calculate love</button>
46+
<div id="lovePercentage">
47+
48+
</div>
49+
</div>
50+
</section>
51+
52+
<script src="script.js"></script>
53+
54+
</body>
55+
56+
</html>

‎LOVE-CALCULATOR/script.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
2+
function calculateLove(){
3+
var random = Math.random();
4+
random = (random * 100) + 1;
5+
random = Math.floor(random);
6+
var p = document.createElement("p");
7+
var text = document.createTextNode(random + "%");
8+
p.appendChild(text);
9+
document.getElementById("lovePercentage").appendChild(p);
10+
}

‎LOVE-CALCULATOR/style.css

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
font-family: 'Lato', sans-serif;
5+
}
6+
7+
body{
8+
background-color: #eee;
9+
}
10+
11+
.logo{
12+
font-family: 'Dancing Script', cursive;
13+
font-size: 39px;
14+
color: red;
15+
padding: 20px 70px;
16+
}
17+
18+
.wrapper{
19+
width: 70%;
20+
margin: 0 auto;
21+
text-align: center;
22+
margin-top: 80px;
23+
}
24+
25+
.heading{
26+
font-size: 28px;
27+
letter-spacing: 0.9px;
28+
line-height: 54px;
29+
}
30+
31+
.about{
32+
font-size: 19px;
33+
line-height: 30px;
34+
text-align: left;
35+
}
36+
37+
.box{
38+
padding: 100px 0;
39+
background-image: url('./heart.png');
40+
background-repeat: no-repeat;
41+
background-size: contain;
42+
background-position: 50% 60%;
43+
opacity: 0.8;
44+
}
45+
46+
.flex-box{
47+
display: flex;
48+
justify-content: space-around;
49+
}
50+
51+
.bold{
52+
font-weight: bold;
53+
font-size: 17px;
54+
letter-spacing: 0.7px;
55+
56+
}
57+
58+
input{
59+
padding: 20px 70px;
60+
border: none;
61+
border-radius: 35px;
62+
63+
}
64+
65+
button{
66+
padding: 15px 28px;
67+
font-size: 20px;
68+
border-radius: 30px;
69+
background-image: linear-gradient(210deg, red, orange);
70+
border: none;
71+
color: #fff;
72+
cursor: pointer;
73+
74+
}
75+
76+
#lovePercentage{
77+
font-size: 30px;
78+
}

0 commit comments

Comments
 (0)