diff --git a/Love Calculator/images/boy.png b/Love Calculator/images/boy.png
new file mode 100644
index 0000000..3a0a237
Binary files /dev/null and b/Love Calculator/images/boy.png differ
diff --git a/Love Calculator/images/girl.png b/Love Calculator/images/girl.png
new file mode 100644
index 0000000..cd598b3
Binary files /dev/null and b/Love Calculator/images/girl.png differ
diff --git a/Love Calculator/images/hearts.png b/Love Calculator/images/hearts.png
new file mode 100644
index 0000000..4147c4e
Binary files /dev/null and b/Love Calculator/images/hearts.png differ
diff --git a/Love Calculator/index.html b/Love Calculator/index.html
new file mode 100644
index 0000000..4139b11
--- /dev/null
+++ b/Love Calculator/index.html
@@ -0,0 +1,60 @@
+
+
+
+
+
+ Love Calculator
+
+
+
+
+
+
+
+
+ Calculate Your Love Score
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Love Calculator/index.js b/Love Calculator/index.js
new file mode 100644
index 0000000..ba08282
--- /dev/null
+++ b/Love Calculator/index.js
@@ -0,0 +1,23 @@
+
+
+var lovePercentage = Math.floor(Math.random()*100)+1;
+var heading = document.getElementById("heading");
+var button = document.getElementById("check-button");
+var inputs = document.querySelectorAll('input');
+
+button.addEventListener('click',function(){
+ var firstName = inputs[0].value.toUpperCase();
+ var secondName = inputs[1].value.toUpperCase();
+ if(!(firstName=='' || secondName=='')){
+ while(lovePercentage < 80){
+ lovePercentage = Math.floor(Math.random()*100)+1;
+ }
+ var messege = secondName + " and " + firstName + " are "+ lovePercentage +"% compatible";
+ heading.innerHTML=messege;
+ lovePercentage = Math.floor(Math.random()*100)+1;
+
+ }
+ else{
+ heading.innerHTML= "Enter your name first";
+ }
+})
\ No newline at end of file
diff --git a/Love Calculator/style.css b/Love Calculator/style.css
new file mode 100644
index 0000000..65b93da
--- /dev/null
+++ b/Love Calculator/style.css
@@ -0,0 +1,87 @@
+.container {
+ padding: 2px 5px;
+
+ }
+.container-button{
+ text-align: center;
+ padding-top: 5%;
+}
+h2{
+ color: #FF869E;
+ font-family: 'Outfit', sans-serif;
+ font-weight: 700;
+ text-align: center;
+ font-size: 3rem;
+}
+p{
+ color: hsl(220, 15%, 55%);
+ font-family: 'Outfit', sans-serif;
+ font-size: 15px;
+ text-align: center;
+}
+label,#check-button{
+ color: #FF869E;
+ font-family: 'Outfit', sans-serif;
+ font-weight: 700;
+ text-align: center;
+ font-size: 1rem;
+}
+footer{
+ padding-top: 2.5%;
+}
+.flex-container{
+ display: flex;
+
+ background-color:#FFC4C4;
+ justify-content: center;
+ justify-content: space-evenly;
+ flex-wrap: wrap;
+
+ padding: 3%;
+
+ }
+ .middleElement{
+ text-align: center;
+ /* background-color: hsl(0, 0%, 100%); */
+ height: auto;
+ width: 300px;
+ padding: 15px;
+ }
+
+
+ /* On mouse-over, add a deeper shadow */
+ /* .card:hover {
+ box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+ } */
+
+ /* Add some padding inside the card container */
+
+ .card {
+ text-align: center;
+ background-color: hsl(0, 0%, 100%);
+ /* margin: 9% 40%; */
+ height: auto;
+ width: 300px;
+ padding: 15px;
+ box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+ transition: 0.3s;
+ border-radius: 10px; /* 5px rounded corners */
+
+ /* Add shadows to create the "card" effect */
+ box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+ transition: 0.3s;
+ }
+
+
+ #check-button {
+ background-color: #FF869E;
+ color: white;
+ border: 2px solid #4CAF50;
+ padding: 14px 40px;
+ font-size: 1.5rem;
+ border-radius: 30px;
+ }
+
+ #check-button:hover {
+ box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+ }
\ No newline at end of file