JSFiddle - React, Tailwind, and code Playground

by mlms13

HTML

<form action="">
    <h1>Person 1's Favorite Methods of Transportation</h1>
    <select id="p1i1">
        <option value="bike">Bike</option>
        <option value="car">Car</option>
        <option value="plane">Plane</option>
        <option value="train">Train</option>
        <option value="boat">Boat</option>
        <option value="bus">Bus</option>
        <option value="snowshoes">Snow Shoes</option>
    </select>
    <select id="p1i2">
        <option value="bike">Bike</option>
        <option value="car">Car</option>
        <option value="plane">Plane</option>
        <option value="train">Train</option>
        <option value="boat">Boat</option>
        <option value="bus">Bus</option>
        <option value="snowshoes">Snow Shoes</option>
    </select>
    <select id="p1i3">
        <option value="bike">Bike</option>
        <option value="car">Car</option>
        <option value="plane">Plane</option>
        <option value="train">Train</option>
        <option value="boat">Boat</option>
        <option value="bus">Bus</option>
        <option value="snowshoes">Snow Shoes</option>
    </select>
    <select id="p1i4">
        <option value="bike">Bike</option>
        <option value="car">Car</option>
        <option value="plane">Plane</option>
        <option value="train">Train</option>
        <option value="boat">Boat</option>
        <option value="bus">Bus</option>
        <option value="snowshoes">Snow Shoes</option>
    </select>
</form>
<form action="">
    <h1>Person 2's Favorite Methods of Transportation</h1>
    <select id="p2i1">
        <option value="bike">Bike</option>
        <option value="car">Car</option>
        <option value="plane">Plane</option>
        <option value="train">Train</option>
        <option value="boat">Boat</option>
        <option value="bus">Bus</option>
        <option value="snowshoes">Snow Shoes</option>
    </select>
    <select id="p2i2">
        <option value="bike">Bike</option>
        <option...

CSS

body {
    font-family: sans-serif;
}
h1 {
    font-weight: bold;
}
select {
    display: block;
}

JavaScript

function compareInterests() {
    var i, j, x, score = 0,
        p1interests = [
            document.getElementById('p1i1').value,
            document.getElementById('p1i2').value,
            document.getElementById('p1i3').value,
            document.getElementById('p1i4').value
        ],
        p2interests = [
            document.getElementById('p2i1').value,
            document.getElementById('p2i2').value,
            document.getElementById('p2i3').value,
            document.getElementById('p2i4').value
        ];
    
    for (i = 0; i < p1interests.length; i++) {
        for (j=0; j < p2interests.length; j++) {
            if (p1interests[i] === p2interests[j]) {
                x = Math.max(i, j) + 1;
                score += ((x * x) - (11 * x) + 30) * 5 / 2;
                break;
            }
        }
    }
    alert(score);
}

document.getElementById('calc').onclick = function() {
    compareInterests();
};