Skip to content

Commit a6cf6fe

Browse files
Adi-456Adi-456
committed
Love Calculator addedd
1 parent 6dc79e9 commit a6cf6fe

File tree

4 files changed

+188
-0
lines changed

4 files changed

+188
-0
lines changed

‎Love Calculator/index.html

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
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>Love Calculator💘</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="content">
12+
13+
<h1>Love Calculator 💘💖</h1>
14+
<div class="inputarea">
15+
<input type="text" placeholder="Your Name..." id="NameOne" onfocus="this.value = ''">
16+
<input type="text" placeholder="Your Lover..." id="NameTwo" onfocus="this.value = ''">
17+
</div>
18+
<a href="#" onclick="love()">Play</a>
19+
<p id="print">You Both are </p>
20+
<p id="statement"></p>
21+
</div>
22+
</div>
23+
<!-- <script>
24+
function love(){
25+
var name1 = document.getElementById("NameOne").value;
26+
var name2 = document.getElementById("NameTwo").value;
27+
if(name1.length<=2){
28+
alert("Enter at least 3 character");
29+
}
30+
if(name2.length<=2){
31+
alert("Enter at least 3 character");
32+
}
33+
else{
34+
var random = Math.floor(Math.random()*100);
35+
document.getElementById("print").innerHTML = name1 + " Loves " + name2 + " 😘💖 " +" ➡➡"+random + "%" ;
36+
}
37+
if(random<=10 || random<=60){
38+
document.getElementById("statement").innerHTML = "Moderate Relationship😪😪😗";
39+
}
40+
else if(random<=61 || random<=100){
41+
document.getElementById("statement").innerHTML = "Lovely Relationship😍😍😘😘";
42+
}
43+
}
44+
</script> -->
45+
<script src="script.js"></script>
46+
</body>
47+
</html>

‎Love Calculator/readme.md

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Love Calculator
2+
3+
Love Calculator is a fun web application built with HTML5 and CSS3. Users can enter their name and their partner's name, and the calculator will generate a random love percentage between them, displaying the result.
4+
5+
## How to Use
6+
1. Open the `index.html` file in your web browser.
7+
2. Enter your name and your partner's name in the provided fields.
8+
3. Click the "Calculate" button to see the love percentage between you and your partner.
9+
10+
## Tech Stack Used
11+
- HTML5
12+
- CSS3
13+
14+
Enjoy using the Love Calculator to have some fun and see how strong your love connection is!
15+
16+
Feel free to customize and enhance this app to add more features or styling as desired.

‎Love Calculator/script.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
function love(){
2+
var name1 = document.getElementById("NameOne").value;
3+
var name2 = document.getElementById("NameTwo").value;
4+
if(name1.length<=2){
5+
alert("Enter at least 3 character");
6+
}
7+
if(name2.length<=2){
8+
alert("Enter at least 3 character");
9+
}
10+
else{
11+
var random = Math.floor(Math.random()*100);
12+
document.getElementById("print").innerHTML = name1 + " Loves " + name2 + " 😘💖 " +" ➡➡"+random + "%" ;
13+
}
14+
if(random<=10 || random<=60){
15+
document.getElementById("statement").innerHTML = "Moderate Relationship😪😪😗";
16+
}
17+
else if(random<=61 || random<=100){
18+
document.getElementById("statement").innerHTML = "Lovely Relationship😍😍😘😘";
19+
}
20+
21+
}

‎Love Calculator/style.css

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
body{
7+
background-color: rgb(220, 166, 175);
8+
/* background-image: llinear-gradient(to bottom right, red, yellow); */
9+
font-family: poppins;
10+
}
11+
12+
body:hover{
13+
background-color: #ef8ca3;
14+
}
15+
.container{
16+
top: 50%;
17+
left: 50%;
18+
position: absolute;
19+
transform: translate(-50%,-50%);
20+
height: 80vh;
21+
width: 60vw;
22+
box-shadow: inset -8px -8px 12px rgb(185,103,117),
23+
inset 8px 8px 12px rgb(201,95,114);
24+
border-radius: 50px;
25+
}
26+
.content{
27+
top: 50%;
28+
left: 50%;
29+
position: absolute;
30+
transform: translate(-50%,-50%);
31+
}
32+
33+
.content h1{
34+
text-transform: uppercase;
35+
text-align: center;
36+
color: #c0294c;
37+
font-family:cursive;
38+
margin-bottom: 25px;
39+
font-weight: bold;
40+
font-size: 40px;
41+
}
42+
.inputarea{
43+
display: flex;
44+
margin-bottom: 5px;
45+
margin-left: 10px;
46+
}
47+
48+
.inputarea input{
49+
width: 200px;
50+
height: 30px;
51+
text-align: center;
52+
margin: 5px;
53+
outline: none;
54+
border: 2px solid #a22441;
55+
padding: 20px 40px;
56+
font-size: 20px;
57+
border-radius: 10px;
58+
background-color: #f6b5de;
59+
60+
}
61+
#NameOne,#NameTwo{
62+
color: rgb(183, 14, 14);
63+
font-weight: bold;
64+
}
65+
a{
66+
display: flex;
67+
justify-content: center;
68+
text-decoration: none;
69+
background-color: #dc4669;
70+
padding: 10px;
71+
margin: 0px 6px;
72+
color: #fff;
73+
text-transform: uppercase;
74+
font-size: 20px;
75+
font-weight: bold;
76+
border-radius: 50%;
77+
font-family: cursive;
78+
margin-top: 10px;
79+
}
80+
a:hover{
81+
background-color: #500b1b;
82+
}
83+
#print{
84+
display: flex;
85+
justify-content: center;
86+
background-color: #9c0629;
87+
margin: 20px;
88+
padding: 20px 50px;
89+
color: #fff;
90+
text-transform: uppercase;
91+
font-size: 20px;
92+
text-align: center;
93+
font-weight: bold;
94+
font-family: cursive;
95+
border-radius: 5px;
96+
}
97+
#statement{
98+
display: flex;
99+
justify-content: center;
100+
margin-top: 50px;
101+
text-transform: uppercase;
102+
font-size: 41px;
103+
font-family:cursive;
104+
}

0 commit comments

Comments
 (0)