Com340 Spring 1 Exam 1: Figures 1 And 2 You Are Expected To
Com340 Spring 1 Exam 1figure 1figure 2you Are Expected To Recreate
Com340 Spring 1 Exam 1Figure 1Figure 2You are expected to recreate the two figures above using two HTML files and associated CSS and JavaScript files, subject to the following: Maintain all the color codes contained in the figures. Populate all the selection (dropdown) boxes. Use CSS to define all the text colors and color coordination. When the “Get Registration Code” button is clicked, it must verify that an email address was entered and display an applicable error message. When the “Complete Registration” button is clicked, it must check that the rest of the fields have been populated. Then the form is submitted using the POST method.
Paper For Above instruction
Recreating Figures with HTML, CSS, and JavaScript
This paper describes the process of recreating two figures using HTML, CSS, and JavaScript, maintaining the original color schemes, populating dropdowns, validating user input, and handling form submission with POST method. These figures likely involve registration forms with specific style and validation requirements.
Introduction
Creating web forms that accurately replicate visual figures involves careful attention to design, interactivity, and validation. The task at hand requires two separate HTML pages, each with associated styling and scripting, to emulate the given figures while ensuring functionality like dropdown population, color coordination, input validation, and form submission.
Design and Layout Considerations
Preserving the color codes from the original figures is crucial to maintain visual consistency. CSS is employed to define text colors, backgrounds, and other stylistic elements. Proper use of semantic HTML ensures accessibility and ease of maintenance. The forms include dropdown menus which should be dynamically populated using JavaScript, and input validation must be in place for email addresses and other fields.
Implementation Details
HTML Structure
Two HTML files are created: one for each figure. Each contains a form element with relevant input fields, dropdown menus, and buttons. Example structure includes input for email, dropdowns for registration options, and submit controls. IDs and classes are used to facilitate styling and scripting.
CSS Styling
CSS styles are centralized in a stylesheet to apply color schemes consistently across all elements. Text colors are defined explicitly, considering the original color schemes. Additional styles improve layout, spacing, and responsiveness.
JavaScript Functionality
JavaScript populates dropdown options dynamically on page load, ensuring all options are available as per the original figures. Event listeners on buttons validate user input: the ‘Get Registration Code’ button verifies that an email address has been entered, displaying an error message if not. The ‘Complete Registration’ button checks that all fields are filled before submitting the form via POST.
Sample Code Implementation
HTML Sample (for one figure)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form id="registrationForm" method="POST" action="submit.php">
<label for="email">Email Address:</label>
<input type="email" id="email" name="email">
<button type="button" id="getCodeBtn">Get Registration Code</button>
<div id="emailError" class="error-message"></div>
<label for="course">Select Course:</label>
<select id="course" name="course">
<option value="">--Select Course--</option>
</select>
<label for="semester">Select Semester:</label>
<select id="semester" name="semester">
<option value="">--Select Semester--</option>
</select>
<button type="submit" id="registerBtn">Complete Registration</button>
<div id="formError" class="error-message"></div>
</form>
<script src="script.js"></script>
</body>
</html>
CSS Styling (styles.css)
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
padding: 20px;
}
form {
background-color: #fff;
padding: 15px;
border-radius: 8px;
max-width: 500px;
margin: auto;
}
label {
display: block;
margin-top: 10px;
font-weight: bold;
}
input[type="email"], select {
width: 100%;
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
margin-top: 15px;
padding: 10px 15px;
background-color: #007bff; / Corresponds to figure color scheme /
border: none;
color: white;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.error-message {
color: red;
margin-top: 5px;
font-size: 0.9em;
}
JavaScript Functionality (script.js)
document.addEventListener('DOMContentLoaded', () => {
const courseSelect = document.getElementById('course');
const semesterSelect = document.getElementById('semester');
const getCodeBtn = document.getElementById('getCodeBtn');
const emailInput = document.getElementById('email');
const emailError = document.getElementById('emailError');
const form = document.getElementById('registrationForm');
const formError = document.getElementById('formError');
// Populate dropdowns dynamically
const courses = ['Mathematics', 'Physics', 'Computer Science', 'Biology'];
const semesters = ['Fall 2024', 'Spring 2025', 'Summer 2025'];
courses.forEach(course => {
const option = document.createElement('option');
option.value = course;
option.textContent = course;
courseSelect.appendChild(option);
});
semesters.forEach(sem => {
const option = document.createElement('option');
option.value = sem;
option.textContent = sem;
semesterSelect.appendChild(option);
});
// Event listener for 'Get Registration Code' button
getCodeBtn.addEventListener('click', () => {
const email = emailInput.value.trim();
if (email === '') {
emailError.textContent = 'Please enter an email address.';
} else if (!validateEmail(email)) {
emailError.textContent = 'Please enter a valid email address.';
} else {
emailError.textContent = '';
alert('Registration code sent to ' + email);
}
});
// Email validation function
function validateEmail(email) {
const regex = /^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$/;
return regex.test(email);
}
// Event listener for form submission
form.addEventListener('submit', (e) => {
e.preventDefault();
// Check that all fields are populated
if (
emailInput.value.trim() === '' ||
courseSelect.value === '' ||
semesterSelect.value === ''
) {
formError.textContent = 'Please fill in all fields before submitting.';
return;
}
// Clear error message and submit form
formError.textContent = '';
form.submit(); // Submits via POST as specified
});
});