DEV Community

Cover image for How I get a girlfriend using JavaScript
Juanjo Salvador
Juanjo Salvador

Posted on

How I get a girlfriend using JavaScript

I don't like dating websites but in everyone's life, the day comes when you need a partner. So I decided to create my own way to get the perfect girl for me. And I made it using an HTML form, and a simple JavaScript's script.

The list

Before start coding, I wrote a list with all those things I want for my perfect girl. And I divided them into three groups:

  1. Important! (+15 points)
  2. Needed, but I don't mind if not (+7 points)
  3. Not needed, but if she have, it's better (+3 points)

May it would be better if I write a list with things I don't want for my girl, but this makes the test very long and bored. In fact, I have about 55 elements on my list.

The form

This part was easy. We only need to write a bunch of checkboxes with different classes.

  • Class important
  • Class needed
  • Class not-needed

Each class is used to design the value of each response.

  <form name="areyoumyperfectgirl">
    <input type="checkbox" class="element important"> Loves JavaScript
    <input type="checkbox" class="element needed">Loves Japanese food
    <input type="checkbox" class="element notneeded">Loves coffee
    [...]
  </form>
  <button class="success" type="button" onClick="getMyScore();">Let's go!</button>
Enter fullscreen mode Exit fullscreen mode

Repeat for every element at our list.

The second thing we need here, is write some CSS to make it beautiful. I used Picnic CSS because it is cool.

The script

Now, the good part.

My script needs to read all the checkboxes in the form, read their classes and calculate the total score. To get an A grade in this test, you need to get at least the 70% of the maximum possible score.

So, in first place, we need to calculate the maximum possible score.


function maxScore() {

    let important = (document.getElementsByClassName("important").length) * 15;
    let needed    = (document.getElementsByClassName("needed").length) * 7;
    let notneeded = (document.getElementsByClassName("notneeded").length) * 3;

    return important + needed + notneeded;

}
Enter fullscreen mode Exit fullscreen mode

Once we have it, the next step is calculate the user score.


function userScore() {

    let important_checkbox = document.getElementsByClassName("important");
    let need_checkbox = document.getElementsByClassName("needed");
    let notneed_checkbox = document.getElementsByClassName("notneeded");

    let score = 0;

    for (var x = 0; x < important_checkbox.length; x++) {
        if (important_checkbox[x].checked) {
            score = score + 15;
        }
    }

    for (var x = 0; x < need_checkbox.length; x++) {
        if (need_checkbox[x].checked) {
            score = score + 7;
        }
    }

    for (var x = 0; x < notneed_checkbox.length; x++) {
        if (notneed_checkbox[x].checked) {
            score = score + 3;
        }
    }

    return score;

}
Enter fullscreen mode Exit fullscreen mode

And... the final score.


function getMyScore() {

    let userScore = userScore();
    let maxScore = maxScore();

    return (userScore / maxScore) * 100;

}
Enter fullscreen mode Exit fullscreen mode

Conclusion

With few lines and a simple website, you can get your perfect girl (or boy!). Just share your test link and wait for it.

Cheers!

Discussion (2)

Collapse
emilibot profile image
Emili Bota • Edited on

userScore function "lets" are all "important" class tags , funny post though!

Collapse
jsalvador profile image
Juanjo Salvador Author

Wops, every good developer has good mistakes! Hahaha. Thanks Emili :D