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:
- Important! (+15 points)
- Needed, but I don't mind if not (+7 points)
- 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>
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;
}
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;
}
And... the final score.
function getMyScore() {
let userScore = userScore();
let maxScore = maxScore();
return (userScore / maxScore) * 100;
}
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!
Top comments (2)
userScore function "lets" are all "important" class tags , funny post though!
Wops, every good developer has good mistakes! Hahaha. Thanks Emili :D