Tell us what’s happening:
My code is running fine but i can’t seem to pass test 30 ,please help me out
Your code so far
<!-- file: index.html -->
<!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" required>
</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>
<div 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>
</div>
<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>
<div 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>
</div>
<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>
/* file: styles.css */
* {
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;
}
/* file: script.js */
const fullName = document.getElementById('full-name')
const email = document.getElementById('email')
const orderNo = document.getElementById('order-no')
const productCode = document.getElementById('product-code')
const quantity = document.getElementById('quantity')
const complaintsGroup = document.getElementById('complaints-group')
const otherComplaints = document.getElementById('other-complaint')
const checkboxes = document.querySelectorAll("input[type='checkbox']")
const complaintDescription = document.getElementById('complaint-description')
const solutionsGroup = document.getElementById('solutions-group')
const radio = document.querySelectorAll("input[type='radio']")
const otherSolution = document.querySelectorAll('other-solution')
const solutionDescription = document.getElementById('solution-description')
const form = document.getElementById('form')
const message = document.getElementById('message-box')
const isSomeChecked = (input) => {
let newArr = []
for (let i = 0; i < input.length; i++) {
newArr.push(input[i].checked)
}
return newArr
}
const validateForm = () => {
const name = fullName.value;
const emailRegex = /(.+)@.+\..+/;
const orderNoRegex = /2024\d{6}/;
const productCodeRegex = /[a-z]{2}\d{2}-[a-z]\d{3}-[a-z]{2}\d/i;
const descriptionRegex = /.{20,}/
const complaintsGroupArray = isSomeChecked(checkboxes)
const solutionItemsArray = isSomeChecked(radio)
return {
"full-name": name === "" ? false : true,
"email": emailRegex.test(email.value),
"order-no": orderNoRegex.test(orderNo.value),
"product-code": productCodeRegex.test(productCode.value),
"quantity": quantity.value > 0 ? true : false,
"complaints-group": complaintsGroupArray.includes(true),
"complaint-description": otherComplaints.checked ? descriptionRegex.test(complaintDescription.value) : true,
"solutions-group": solutionItemsArray.includes(true),
"solution-description": !otherSolution.checked ? descriptionRegex.test(solutionDescription.value) : true
}
}
const changeBorder = (sth, input) => {
sth === true ? input.style.borderColor = "green" : input.style.borderColor = "red"
}
fullName.addEventListener("change", () => {
validateForm()
changeBorder(validateForm()["full-name"], fullName)
})
email.addEventListener("change", () => {
validateForm()
changeBorder(validateForm()["email"], email)
})
orderNo.addEventListener("change", () => {
validateForm()
changeBorder(validateForm()["order-no"], orderNo)
})
productCode.addEventListener("change", () => {
validateForm()
changeBorder(validateForm()["product-code"], productCode)
})
quantity.addEventListener("change", () => {
validateForm()
changeBorder(validateForm()["quantity"], quantity)
})
complaintsGroup.addEventListener("change", () => {
validateForm()
changeBorder(validateForm()["complaints-group"], complaintsGroup)
})
solutionsGroup.addEventListener("change", () => {
validateForm()
changeBorder(validateForm()["solutions-group"], solutionsGroup)
})
complaintDescription.addEventListener("change", () => {
validateForm()
changeBorder(validateForm()["complaint-description"], complaintDescription)
})
solutionDescription.addEventListener("change", () => {
validateForm()
changeBorder(validateForm()["solution-description"], solutionDescription)
})
const isValid = (testing) => {
return (
testing["full-name"] &&
testing["email"] &&
testing["order-no"] &&
testing["product-code"] &&
testing["quantity"] &&
testing["complaints-group"] &&
testing["complaint-description"] &&
testing["solutions-group"] &&
testing["solution-description"]
);
}
form.addEventListener("submit", (e) => {
e.preventDefault
console.log(Object.values(validateForm()))
console.log(isValid(validateForm()))
if (isValid(validateForm())) {
form.submit
message.textContent = "validation complete"
} else {
message.textContent = "try again"
}
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36
Challenge Information:
Build a Customer Complaint Form - Build a Customer Complaint Form
