A match made in code heaven

Introduction

Soulmate love calculator? What is this? Buzzfeed? No, but have you ever wondered how technology can give you a glimpse into the mysteries of love? Probably no but get ready anyway to dive into a world of coding cupid arrows as we embark on an exciting journey to create your very own Soulmate Love Calculator! In this step-by-step guide, we'll blend programming prowess with a sprinkle of humor to help you craft an entertaining and surprisingly accurate love calculator. So, fasten your seatbelts – we're about to code some romance!

I started learning Javascript a few weeks ago and while I haven't fallen in love with it (yet), because I have mixed feelings about it and find the syntax a bit confusing, I do love what it can do! I had initially done the love calculator during my early Python days, and it occurred to me that if I rewrote the code in Javascript it would be an excellent chance to practice. Also, I had started learning HTML/CSS at around the same time so I decided to combine the three and see what would happen.

Step 1: Setting the Love Stage

To start, I created a new HTML file and gave it a title that would make Romeo and Juliet jealous. My calculator deserves the best, right? Also, I made sure that I had a fantastic background color because nothing says love like a sweet gradient – trust me, I'm a programmer.

Step 2: The Heart of the Matter – HTML Structure

In the HTML file, I structured my elements like building blocks of affection. I placed an h1 tag with a swoon-worthy title and wrapped my input fields and the "Calculate" button in a div with a class of "calculator-box." I kept it organized because neatness is a universal love language.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Soulmate Love Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="container">
        <h1>Soulmate Love Calculator ❤️</h1>
        <div class="calculator-box">
            <p id="result"></p>
            <input type="text" id="name1" placeholder="Your Name">
            <input type="text" id="name2" placeholder="Their Name">
            <button id="calculateBtn">Calculate</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 3: CSS Elegance for a Date with Destiny

I then styled my container with an inviting backdrop. I used linear-gradient to paint the canvas of love, ensuring that I had created a cozy border and a lovely shadow. I added some padding to keep it comfy – remember, nobody likes a stiff date.

body {
    font-family: Ariel, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(to bottom, #f0e7f0, #5e275e);
}

.container {  
  background: linear-gradient(to bottom,#e3e3e3, aqua);
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);  
}

Step 4: JavaScript – The Matchmaker

Now comes the fun part – JavaScript magic! I created a new .js file and linked it to my HTML. We'll listen for that sweet "click" event on the "Calculate" button. Fetch the input values, lowercase them, and prepare for a whirlwind of string manipulation!

Listening for the Click Event

First off, we're playing matchmaker by listening for the "click" event on the "Calculate" button. When the user clicks that button, we're ready to make sparks fly!

calculateBtn.addEventListener("click", function () {
    // Code inside here executes when the button is clicked.
    // We're ready to work our love magic!
});

Fetching and Lowercasing the Input

The next step is fetching the values entered into the "Your Name" and "Their Name" input fields. I stored these values in the name1 and name2 variables, respectively. But here's a neat trick – I made sure they're all in lowercase. Why? Well, love doesn't discriminate based on capitalization, and I wanted to keep things fair.

const name1 = document.getElementById("name1").value;
const name2 = document.getElementById("name2").value;
const bothNames = (name1 + name2).toLowerCase();

Step 5: Counting Cupid's Letters

Now, we're getting into the nitty-gritty of love counting. We need to tally up the appearances of specific letters in the combined lowercase names. These are the letters that speak the universal language of love: T, R, U, E, L, O, V, and E.

Harnessing the Power of Regular Expressions

To count these letters efficiently, we turn to our trusty sidekick – regular expressions. They might look cryptic at first, but they're like deciphering love letters from the universe. I used the match method with regular expressions to count each letter's occurrences.

const t = (bothNames.match(/t/g) || []).length;
const r = (bothNames.match(/r/g) || []).length;
const u = (bothNames.match(/u/g) || []).length;
const e = (bothNames.match(/e/g) || []).length;
const trueCount = t + r + u + e;

const l = (bothNames.match(/l/g) || []).length;
const o = (bothNames.match(/o/g) || []).length;
const v = (bothNames.match(/v/g) || []).length;
const loveCount = l + o + v + e;

These counts represent the presence of love and truth in the names. We'll use them to calculate a love score that will decide the fate of our star-crossed lovers!

So, there you have it – the inner workings of my Love Calculator. It might seem complex, but trust me when it comes to matters of the heart and code, it's all about finding the right balance. So, let's move on to the next steps, and remember, love is in the code! ❤️💻

Step 6: Love Score and Laughter

I calculated the love score by adding the true and love letter counts. But here's where the twist comes in – I used the modulo operator to keep it within the 0 to 100 range. After all, love shouldn't exceed its limits!

Step 7: Expressing Love with Text

Based on the love score, I crafted hilarious and heartwarming messages. Be creative! If the score is low, sprinkle in some laughter. If it's high, drop hints of admiration. Remember, we're aiming for a love story, not a tragedy!

const loveScore = parseInt(String(trueCount) + String(loveCount)) % 101;

let resultText = "";

if (loveScore <= 20) {
        resultText = `Your score is ${loveScore}, and you are wasting your time! 🤣`;
} else if (loveScore > 20 && loveScore <= 50) {
        resultText = `Your score is ${loveScore}, and maybe start looking around.🧐`;
} else if (loveScore > 50 && loveScore < 80) {
        resultText = `Your score is ${loveScore}, and it could work, who knows? 🤭`;
} else {
        resultText = `Your score is ${loveScore},and you were meant to be unless, they don't like beyonce then you gotta dump them.🥰`;
}

resultElement.textContent = resultText;

Step 8: Button Elegance – CSS Again!

I styled my "Calculate" button – gave it a beautiful background color that screams "I'm here to calculate your destiny!" When hovered over, let it glow brighter than a star-struck lover.

button {
  background-color: rgb(115, 115, 182);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
    background-color: rgb(46, 46, 84);
}

Step 9: The Grand Finale

Put it all together – HTML, CSS, and JavaScript – and run your masterpiece. Input the names, click the button, and let your heart skip a beat as the result unfurls. But what good is love if it's kept a secret? Let's share it with the world by hosting your masterpiece. Personally, I used GitHub pages to host my website. I made sure all my files were well-organized and ready to go, and then I created a repository on GitHub and gave it the name "Love_calculator" because it's memorable. I then read the documentation on GitHub pages, got help from my awesome friends, and was able to host my static website and share the link with the world!

Step 10: Love Bugs

Once you get your love birds to test out your soulmate love calculator, have them send you feedback so you can find those elusive tiny love bugs. For me, they made me realize my calculator was counting beyond 100 (unacceptable!) so I fixed that by adding the modulus. I also realized it was still calculating even when one input was blank (double unacceptable!). Let me know if you find more bugs.

 // Check if both input fields are not empty
    if (name1.trim() === "" || name2.trim() === "") {
        resultElement.textContent = "Please enter both names before calculating.";
        return;

Conclusion: A Code-infused Love Story

Voilà! You've just created a Soulmate Love Calculator that can predict love scores with flair and fun. You've journeyed through HTML, CSS, and JavaScript like a true romantic coder, crafting a tool that not only entertains but sparks a smile.

Remember, love isn't just about algorithms and letters; it's the shared laughter and moments that make life enchanting. So go ahead, spread your newfound knowledge like confetti, and let others experience the joy of coding Cupid's arrow. Happy coding, you modern-day matchmaker!

Sophia Terry's

Sophia Terry's

Building Your Own Soulmate Love Calculator