Added Love Compatibility Calculator (#594)

Rakesh9100 · Feb 26, 2024 · 42bc43d · 42bc43d
1 parent 9d61dbd
commit 42bc43d
Show file tree

Hide file tree

Showing 5 changed files with 151 additions and 0 deletions.
diff --git a/Calculators/Love-Compatibility-Calculator/README.md b/Calculators/Love-Compatibility-Calculator/README.md
@@ -0,0 +1,15 @@
+# <p align="center">Love Compatibility Calculator</p>
+
+## Description :-
+
+Calculates the compatibility score based on the entered names, hobbies, and communication styles.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![Compatibility](https://github.com/Rakesh9100/CalcDiverse/assets/122675390/fd741aae-2871-4871-8c04-2d05cb0eab7d)
diff --git a/Calculators/Love-Compatibility-Calculator/index.html b/Calculators/Love-Compatibility-Calculator/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+    <title>Love Compatibility Calculator</title>
+</head>
+<body>
+    <div class="container">
+        <h1>Love Compatibility Calculator</h1>
+        <form id="compatibilityForm">
+            <label for="person1">Person 1 Name:</label>
+            <input type="text" id="person1" required>
+
+            <label for="person2">Person 2 Name:</label>
+            <input type="text" id="person2" required>
+
+            <label for="hobbies">Common Hobbies (1-10)</label>
+            <input type="number" id="hobbies" min="1" max="10" required>
+
+            <label for="communication">Communication (1-10)</label>
+            <input type="number" id="communication" min="1" max="10" required>
+
+            <label for="support">Support for Goals (1-10)</label>
+            <input type="number" id="support" min="1" max="10" required>
+
+            <label for="trust">Importance of Trust (1-10)</label>
+            <input type="number" id="trust" min="1" max="10" required>
+
+            <label for="spendingTime">Enjoyment of Spending Time (1-10)</label>
+            <input type="number" id="spendingTime" min="1" max="10" required>
+
+            <button type="button" onclick="calculateCompatibility()">Calculate</button>
+        </form>
+
+        <div id="result"></div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Love-Compatibility-Calculator/script.js b/Calculators/Love-Compatibility-Calculator/script.js
@@ -0,0 +1,26 @@
+function calculateCompatibility() {
+    // Get values from the form
+    var person1 = document.getElementById("person1").value;
+    var person2 = document.getElementById("person2").value;
+    var hobbies = parseInt(document.getElementById("hobbies").value);
+    var communication = parseInt(document.getElementById("communication").value);
+    var support = parseInt(document.getElementById("support").value);
+    var trust = parseInt(document.getElementById("trust").value);
+    var spendingTime = parseInt(document.getElementById("spendingTime").value);
+
+    // Calculate the average score
+    var totalScore = hobbies + communication + support + trust + spendingTime;
+    var averageScore = totalScore / 5;
+
+    // Display the result
+    var resultElement = document.getElementById("result");
+    resultElement.innerHTML = `${person1} and ${person2} have a compatibility score of ${averageScore.toFixed(2)}/10.`;
+
+    if (averageScore >= 7) {
+        resultElement.style.color = "#27ae60";
+        resultElement.innerHTML += " Congratulations! They have a strong connection.";
+    } else {
+        resultElement.style.color = "#e74c3c";
+        resultElement.innerHTML += " It seems there might be some differences. Communication is key!";
+    }
+}
diff --git a/Calculators/Love-Compatibility-Calculator/styles.css b/Calculators/Love-Compatibility-Calculator/styles.css
@@ -0,0 +1,54 @@
+body {
+    font-family: 'Arial', sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f5f5f5;
+}
+
+.container {
+    max-width: 600px;
+    margin: 50px auto;
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    text-align: center;
+    color: #3498db;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+}
+
+label {
+    margin-top: 10px;
+    font-weight: bold;
+}
+
+input, button {
+    margin-bottom: 15px;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+button {
+    background-color: #3498db;
+    color: #fff;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #2980b9;
+}
+
+#result {
+    margin-top: 20px;
+    font-weight: bold;
+    text-align: center;
+    color: #27ae60;
+}
diff --git a/index.html b/index.html
@@ -1925,6 +1925,20 @@ <h3>Checks if an entered number or string is Palindrome or not.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Love Compatibility Calculator</h2>
+                <h3>Calculates the compatibility score based on the entered names, hobbies, and communication styles.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Love-Compatibility-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Love-Compatibility-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
     </div>
 
     <!-- Calculator Section Ends Here  -->