Love Calculator Documentation

The Love Calculator is a simple web-based tool that calculates the compatibility between two individuals based on their names and dates of birth. This project is built using HTML, CSS, and JavaScript, offering an easy-to-use interface and quick calculations accesible on Internet chicks website.

Features

  • Calculates compatibility based on names and dates of birth.

  • Simple and intuitive UI.

  • Instant result display.

  • Customizable and responsive design.

Getting Started

Prerequisites

To run this project, ensure you have the following:

  • A modern web browser (Chrome, Firefox, etc.)

  • Basic knowledge of HTML, CSS, and JavaScript (for customization)

Project Structure

Find the project Github on the Love Calculators Github Page

├── index.html         # Main HTML file
├── styles.css         # CSS for styling the UI
├── script.js          # JavaScript for the calculator logic
└── assets/            # Any image or additional assets

Installation

  • Clone the repository:

    codegit clone https://github.com/your-username/love-calculator.git

  • Navigate to the project directory:

    codecd love-calculator

  • Open the project:

    • Open the index.html file in a browser to view and use the calculator.

Usage

  1. Enter the name and date of birth of two individuals in the respective input fields.

  2. Click on the Calculate button to get the compatibility result.

  3. The result will display a percentage indicating the compatibility between the two people.

Example

Enter the following data:

  • Person 1: Name - "John", Date of Birth - "1990-05-21"

  • Person 2: Name - "Jane", Date of Birth - "1992-08-30"

Click Calculate to see the compatibility result.

Basic Code Explanation

HTML (index.html)

  • Contains input fields for names and dates of birth.

  • A button is provided to trigger the compatibility calculation.

<form id="love-calculator-form">
  <label for="name1">Person 1 Name:</label>
  <input type="text" id="name1" required>
  
  <label for="dob1">Person 1 Date of Birth:</label>
  <input type="date" id="dob1" required>

  <label for="name2">Person 2 Name:</label>
  <input type="text" id="name2" required>
  
  <label for="dob2">Person 2 Date of Birth:</label>
  <input type="date" id="dob2" required>

  <button type="button" onclick="calculateLove()">Calculate</button>
</form>

CSS (styles.css)

  • Styles the form and results for a clean and responsive layout.

codeform {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f8f8f8;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}
input, button {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
}

JavaScript (script.js)

  • The logic that calculates compatibility based on a simple formula.

codefunction calculateLove() {
  const name1 = document.getElementById("name1").value;
  const dob1 = document.getElementById("dob1").value;
  const name2 = document.getElementById("name2").value;
  const dob2 = document.getElementById("dob2").value;

  // Basic compatibility logic (example)
  const compatibility = Math.floor((Math.random() * 100) + 1);

  // Display the result
  alert(`${name1} and ${name2} are ${compatibility}% compatible!`);
}

Customization

  • You can modify the calculation logic in the script.js file to use different algorithms for more accurate compatibility calculations.

  • Update the design by editing styles.css to fit your project's branding.

Contributing

Feel free to contribute to this project by submitting pull requests or reporting issues. Any suggestions or improvements are welcome!

License

This project is licensed under the MIT License

Last updated