No title
January 26, 2023
document.querySelector("form").addEventListener("submit", function(event) {
event.preventDefault();
var name1 = document.querySelector("#name1").value;
var name2 = document.querySelector("#name2").value;
// Calculate the love percentage
var lovePercentage = Math.floor(Math.random() * 100);
// Display the result on the page
var result = document.createElement("p");
result.innerHTML = name1 + " and " + name2 + " are " + lovePercentage + "% compatible!";
document.querySelector(".container").appendChild(result);
});
Love Calculator
body {
background-color: pink;
}
.container {
width: 50%;
margin: 0 auto;
text-align: center;
}
h1 {
color: red;
}
form {
margin-top: 50px;
}
label {
font-weight: bold;
}
input[type="text"] {
width: 60%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid red;
border-radius: 4px;
}
input[type="submit"] {
width: 20%;
background-color: red;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: pink;
}
