Tell us what’s happening:
Hi , All tests are passing except for #30. Its now been 2 days but to no avail . Please help
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">
</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>
/* 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 orderNum=document.getElementById(`order-no`);
const prodCode=document.getElementById(`product-code`);
const qty=document.getElementById(`quantity`);
const complaintsGrp=document.getElementById(`complaints-group`);
const otherComplaint=document.getElementById(`other-complaint`);
const complaintDescription=document.getElementById(`complaint-description`);
const solutionsGrp=document.getElementById(`solutions-group`);
const solutionDescription=document.getElementById(`solution-description`);
const otherSolution=document.getElementById(`other-solution`);
const form=document.getElementById(`form`);
const submitt=document.getElementById(`submit-btn`);
const checkboxes = document.querySelectorAll('#complaints-group input[type="checkbox"]');
const radioz=document.querySelectorAll('#solutions-group input[type="radio"]');
function validateForm(){
const emailReg=/^[a-zA-Z0-9._+-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,6}$/;
const orderNumReg=/^2024\d{6}$/;
const prodCodeReg=/^[A-Za-z]{2}\d{2}-[A-Za-z]\d{3}-[A-Za-z]{2}\d$/;
return {
"full-name": fullName.value ? true : false ,
"email": emailReg.test(email.value),
"order-no": orderNumReg.test(orderNum.value),
"product-code": prodCodeReg.test(prodCode.value),
"quantity": qty.value >=1 && !isNaN(qty.value),
"complaints-group": Array.from(checkboxes).some(cb=>cb.checked),
"complaint-description": !otherComplaint.checked || complaintDescription.value.length >= 20,
"solutions-group": Array.from(radioz).some(rad=>rad.checked),
"solution-description": !otherSolution.checked || solutionDescription.value.length >= 20
};
}
fullName.addEventListener(`change`,function(event){
if(fullName.value)fullName.style.borderColor=`green`;
else fullName.style.borderColor=`red`;
});
email.addEventListener(`change`,function(event){
const validOrNot=validateForm();
if(validOrNot["email"])email.style.borderColor=`green`;
else email.style.borderColor=`red`;
});
orderNum.addEventListener(`change`,function(event){
const validOrNot=validateForm();
if(validOrNot["order-no"])orderNum.style.borderColor=`green`;
else orderNum.style.borderColor=`red`;
});
prodCode.addEventListener(`change`,function(event){
const validOrNot=validateForm();
if(validOrNot["product-code"])prodCode.style.borderColor=`green`;
else prodCode.style.borderColor=`red`;
});
qty.addEventListener(`change`,function(event){
const validOrNot=validateForm();
if(validOrNot["quantity"])qty.style.borderColor=`green`;
else qty.style.borderColor=`red`;
});
complaintsGrp.addEventListener(`change`,function(event){
const validOrNot=validateForm();
if(validOrNot["complaints-group"])complaintsGrp.style.borderColor=`green`;
else complaintsGrp.style.borderColor=`red`;
});
complaintDescription.addEventListener(`change`,function(event){
const validOrNot=validateForm();
if(validOrNot["complaint-description"])complaintDescription.style.borderColor=`green`;
else complaintDescription.style.borderColor=`red`;
});
solutionsGrp.addEventListener(`change`,function(event){
const validOrNot=validateForm();
if(validOrNot["solutions-group"])solutionsGrp.style.borderColor=`green`;
else solutionsGrp.style.borderColor=`red`;
});
solutionDescription.addEventListener(`change`,function(event){
const validOrNot=validateForm();
if(validOrNot["solution-description"])solutionDescription.style.borderColor=`green`;
else solutionDescription.style.borderColor=`red`;
});
form.addEventListener(`submit`,()=>{
isValid(validateForm());
})
function isValid(validationObject){
try{const result=validationObject();
const values=Object.values(result);
return values.every(val => val === true);
}catch(err){
console.log(`Validation Error : `,err.message);
return false;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36 Edg/141.0.0.0
Challenge Information:
Build a Customer Complaint Form - Build a Customer Complaint Form