Wad JS

Developing Web Page Styles using JavaScript and CSS
/project
├── index.html # HTML file for the webpage
├── styles.css # External CSS file
└── script.js # JavaScript file for dynamic styling
<!DOCTYPE html> #index.html

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Styling with JavaScript</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<h1>Web Page with Dynamic Styles</h1>
<button id="changeTheme">Change Theme</button>
</div>
<div class="content">
<p>This is some content that will be dynamically styled using JavaScript.</p>
</div>
<script src="script.js"></script>
</body>
</html>
/* Default Styles */ #styles.css

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.header {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
.content {
margin: 20px;
padding: 15px;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Dark Theme Styles */
.dark-theme {
background-color: #2b2b2b;
color: #f0f0f0;
}
.dark-theme .header {
background-color: #1e1e1e;
}
// Select the button and body element #script.js

const changeThemeButton = document.getElementById('changeTheme');
const body = document.body;
// Event listener to toggle theme on button click

changeThemeButton.addEventListener('click', () => {
body.classList.toggle('dark-theme');
// Change button text based on the active theme

if (body.classList.contains('dark-theme')) {
changeThemeButton.textContent = 'Switch to Light Theme';
} else {
changeThemeButton.textContent = 'Switch to Dark Theme';
}
});
B. . Develop Script interactive forms

├── index.html # HTML file for the webpage
├── styles.css # External CSS file
└── script.js # JavaScript file for dynamic styling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Form Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="form-container">
<h2>Sign-Up Form</h2>
<form id="signupForm">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter your name" required>
<small class="error-message"></small>
</div>
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter your email" required>
</div>
<label for="password">Password:</label>
<input type="password" id="password" placeholder="Enter a password" required>
</div>
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" placeholder="Confirm your password" required>
</div>
<button type="submit" id="submitBtn">Sign Up</button>

</form>
</div>
<script src="script.js"></script>
</body>
</html>
/* Global Styles */ ( css)

body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* Form Container */
.form-container {
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 400px;
}
h2 {
text-align: center;
margin-bottom: 20px;
}
/* Form Group */
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 5px;
}
input:focus {
border-color: #4CAF50;
outline: none;
}
/* Error Message */
.error-message {
color: red;
font-size: 0.875rem;
visibility: hidden;
}
/* Submit Button */
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
}
button:hover {
background-color: #45a049;
}
// Select form and input elements

const form = document.getElementById('signupForm');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const confirmPasswordInput = document.getElementById('confirmPassword');
// Helper function to display error messages

function showError(input, message) {
const formGroup = input.parentElement;
const errorMessage = formGroup.querySelector('.error-message');
errorMessage.textContent = message;
errorMessage.style.visibility = 'visible';
input.style.borderColor = 'red';
}
// Helper function to clear error messages

function clearError(input) {
const formGroup = input.parentElement;
const errorMessage = formGroup.querySelector('.error-message');
errorMessage.textContent = '';
errorMessage.style.visibility = 'hidden';
input.style.borderColor = '#ccc';
}
// Validate email format using regex

function validateEmail(email) {
const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
return re.test(String(email).toLowerCase());
}
// Event listener for form submission

form.addEventListener('submit', function (event) {
event.preventDefault(); // Prevent default form submission behavior
// Clear previous errors

clearError(nameInput);
clearError(emailInput);
clearError(passwordInput);
clearError(confirmPasswordInput);
let isValid = true;
// Validate Name
if (nameInput.value.trim() === '') {
showError(nameInput, 'Name is required');
isValid = false;
}
// Validate Email
if (!validateEmail(emailInput.value)) {
showError(emailInput, 'Invalid email address');
isValid = false;
}
// Validate Password
if (passwordInput.value.length < 6) {
showError(passwordInput, 'Password must be at least 6 characters long');
isValid = false;
}
// Validate Confirm Password

if (confirmPasswordInput.value !== passwordInput.value) {
showError(confirmPasswordInput, 'Passwords do not match');
isValid = false;
}
// If all validations pass, submit the form

if (isValid) {
alert('Form submitted successfully!');
form.reset(); // Reset the form fields
}
});

Wad JS

Uploaded by

Copyright:

Available Formats

Wad JS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Wad JS

Uploaded by

Copyright:

Available Formats

Developing Web Page Styles using JavaScript and CSS

<!DOCTYPE html> #index.html

/* Default Styles */ #styles.css

// Select the button and body element #script.js

// Event listener to toggle theme on button click

// Change button text based on the active theme

B. . Develop Script interactive forms

<button type="submit" id="submitBtn">Sign Up</button>

/* Global Styles */ ( css)

// Select form and input elements

// Helper function to display error messages

// Helper function to clear error messages

// Validate email format using regex

// Event listener for form submission

// Clear previous errors

let isValid = true;

// Validate Confirm Password

// If all validations pass, submit the form

You might also like