Tell us what’s happening:
Hi ,my code is not passing test 10 despite passing all other similar test and work as intended. I’ve tried in a few different ways but always with same result!
Your code so far
<!-- file: index<!DOCTYPE html>
<html lang="en">
<head>
<title>Customer Complaint Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Complaint Form</h1>
<form id="form">
<fieldset id="personal-info">
<div>
<label for="full-name">Full Name:</label>
<input type="text" id="full-name" name="full-name" placeholder="John Doe">
</div>
<div>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" placeholder="example@domain.com">
</div>
</fieldset>
<hr>
<fieldset id="product-info">
<div>
<label for="order-no">Order No:</label>
<input type="text" id="order-no" name="order-no" placeholder="2024######">
</div>
<div>
<label for="product-code">Product Code:</label>
<input type="text" id="product-code" name="product-code" placeholder="XX##-X###-XX#">
</div>
<div>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1">
</div>
</fieldset>
<fieldset id="complaints-group">
<legend>Complaint Reason:</legend>
<div>
<input type="checkbox" id="damaged-product" name="complaint" value="damaged-product">
<label for="damaged-product">Damaged Product</label>
</div>
<div>
<input type="checkbox" id="nonconforming-product" name="complaint" value="nonconforming-product">
<label for="nonconforming-product">Nonconforming Product</label>
</div>
<div>
<input type="checkbox" id="delayed-dispatch" name="complaint" value="delayed-dispatch">
<label for="delayed-dispatch">Delayed Dispatch</label>
</div>
<div>
<input type="checkbox" id="other-complaint" name="complaint" value="other">
<label for="other-complaint">Other</label>
</div>
</fieldset>
<fieldset id="complaint-description-container">
<legend>Description of Complaint Reason</legend>
<textarea placeholder="Describe the reason of your complaint in at least 20 characters"
name="complaint-textarea" id="complaint-description"></textarea>
</fieldset>
<fieldset id="solutions-group">
<legend>Desired Solution</legend>
<input type="radio" name="solutions" id="refund" value="refund">
<label for="refund">Refund</label>
<input type="radio" name="solutions" id="exchange" value="exchange">
<label for="exchange">Exchange</label>
<input type="radio" name="solutions" id="other-solution" value="other">
<label for="other-solution">Other</label>
</fieldset>
<fieldset id="solution-description-container">
<legend>Description of Desired Solution</legend>
<textarea placeholder="Describe the desired solution to your issue in at least 20 characters"
name="solution-textarea" id="solution-description"></textarea>
</fieldset>
<div id="btn-container">
<button type="submit" id="submit-btn">Submit</button>
<span id="message-box" aria-live="polite"></span>
</div>
</form>
<script src="script.js"></script>
</body>
</html>.html -->
/* file: style* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
#form {
max-width: 70%;
margin: auto;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding: 10px;
}
input {
border-color: rgb(118, 118, 118);
}
#personal-info input, #product-info input {
width: 100%;
margin-bottom: 10px;
}
fieldset {
margin-bottom: 10px;
border-radius: 5px;
border-color: rgb(118, 118, 118);
}
textarea {
width: 100%;
border-color: rgb(118, 118, 118);
}
#btn-container {
display: flex;
justify-content: space-between;
align-items: center;
}
#submit-btn, #clear-btn {
margin: 10px 15px 0;
}s.css */
const fullName = document.getElementById("full-name");
const email = document.getElementById("email");
const orderNumber = document.getElementById("order-no");
const productCode = document.getElementById("product-code");
const quantity = document.getElementById("quantity");
const complaintsGroup = document.getElementById("complaints-group");
const complaintDescription = document.getElementById("complaint-description");
const solutionsGroup = document.getElementById("solutions-group");
const solutionDescription = document.getElementById("solution-description");
const submitButton = document.getElementById("submit-btn")
const form = document.getElementById("form")
fullName.addEventListener("change", () => {
if (isNameTrue(fullName.value)){
fullName.style.borderColor = "green"
}
else {
fullName.style.borderColor = "red";
}
});
function isNameTrue(input) {
if(input) {
fullName.style.borderColor = "green";
return true;
}
else {
fullName.style.borderColor = "red";
return false
}
}
email.addEventListener("change", () => {
if (isEmailTrue(email.value)){
email.style.borderColor = "green"
}
else {
email.style.borderColor = "red";
}
});
function isEmailTrue(input) {
const regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
if (regex.test(input) == true) {
email.style.borderColor = "green";
}
else {
email.style.borderColor = "red";
}
return regex.test(input)
}
orderNumber.addEventListener("change", () => {
if (isOrderNumberTrue(orderNumber.value)){
orderNumber.style.borderColor = "green"
}
else {
orderNumber.style.borderColor = "red";
}
});
function isOrderNumberTrue(input) {
const regex = /^2024+\d{6}$/;
if (regex.test(input) == true) {
orderNumber.style.borderColor = "green";
}
else {
orderNumber.style.borderColor = "red";
}
return regex.test(input)
};
productCode.addEventListener("change", (e) => {
e.target.style.borderColor = validateForm()['product-code'] ? "green" : "red";
});
function isProductCodeTrue(input) {
const regex = /^[a-zA-Z]+[a-zA-Z]+\d+\d+[-a-zA-Z]+\d+\d+\d+[-a-zA-Z]+[a-zA-Z]+\d$/;
if (regex.test(input)) {
productCode.style.borderColor = "green";
}
else {
productCode.style.borderColor = "red";
}
return regex.test(input)
}
quantity.addEventListener("change", () => {
if (isQuantityTrue(quantity.value)){
quantity.style.borderColor = "green"
}
else {
quantity.style.borderColor = "red";
}
});
function isQuantityTrue(input) {
if(input>0) {
quantity.style.borderColor = "green";
return true
}
else {
quantity.style.borderColor = "red";
return false
}
}
complaintsGroup.addEventListener("change", () => {
if (isComplaintTrue()){
complaintsGroup.style.borderColor = "green"
}
else {
complaintsGroup.style.borderColor = "red";
}
});
function isComplaintTrue(){
if (document.getElementById("damaged-product").checked | document.getElementById("nonconforming-product").checked | document.getElementById("delayed-dispatch").checked | document.getElementById("other-complaint").checked) {
complaintsGroup.style.borderColor = "green"
return true
}
else{
complaintsGroup.style.borderColor = "red";
return false
}
}
complaintDescription.addEventListener("change", () => {
if (isComplaintDescriptionTrue(complaintDescription.value)){
complaintDescription.style.borderColor = "green"
}
else {
complaintDescription.style.borderColor = "red";
}
});
function isComplaintDescriptionTrue(input) {
if(document.getElementById("other-complaint").checked == false) {
return true
}
else if(input.length >= 20){
complaintDescription.style.borderColor = "green"
return true
}
else {
complaintDescription.style.borderColor = "red";
return false
}
}
solutionsGroup.addEventListener("change", () => {
if (isSolutionsTrue()){
solutionsGroup.style.borderColor = "green"
}
else {
solutionsGroup.style.borderColor = "red";
}
});
function isSolutionsTrue() {
if (document.getElementById("refund").checked |document.getElementById("exchange").checked |document.getElementById("other-solution").checked) {
solutionsGroup.style.borderColor = "green"
return true
}
else {
solutionsGroup.style.borderColor = "red";
return false
}
}
solutionDescription.addEventListener("change", () => {
if (isSolutionDescriptionTrue(solutionDescription.value)){
solutionDescription.style.borderColor = "green"
}
else {
solutionDescription.style.borderColor = "red";
}
});
function isSolutionDescriptionTrue(input) {
if(document.getElementById("other-solution").checked == false) {
return true
}
else if(input.length >= 20){
solutionDescription.style.borderColor = "green"
return true
}
else {
solutionDescription.style.borderColor = "red";
return false
}
}
function validateForm() {
let obj = {"full-name": isNameTrue(fullName.value), "email": isEmailTrue(email.value), "order-no": isOrderNumberTrue(orderNumber.value), "product-code": isProductCodeTrue(productCode.value), "quantity": isQuantityTrue(quantity.value), "complaints-group": isComplaintTrue(), "complaint-description": isComplaintDescriptionTrue(complaintDescription.value), "solutions-group": isSolutionsTrue(), "solution-description":
isSolutionDescriptionTrue(solutionDescription.value)}
return obj
}
function isValid(input) {
let count = 0;
for (const check in input) {
if (input[check] === true) {
count++;
}
}
if (count == 9) {
return true
}
else {
return false
}
}
form.addEventListener("submit", () => {
isValid(validateForm())
})
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36
Challenge Information:
Build a Customer Complaint Form - Build a Customer Complaint Form