Experiment 3 HTML CSS JS (1)

Week3 - Web Development Fundamentals Experiment
Objective
To understand and implement basic web development concepts using:

1. HTML for structure
2. CSS for styling
3. JavaScript for interactivity
Prerequisites
- Any text editor (VS Code, Sublime Text, or Notepad++)
- Web browser (Chrome or Firefox recommended)
- Basic understanding of web development concepts
Experiment 1: HTML Structure
Setup and Implementation

1. Create a new directory:
mkdir web_basics_experiment
cd web_basics_experiment
2. Create ìndex.html` with this content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Information Form</title>
</head>
<body>
<header>
<h1>Student Information</h1>
</header>
<main>
<form id="studentForm">
<div class="form-group">
<label for="name">Full Name:</label>
<input type="text" id="name" required>
</div>
<label for="email">Email:</label>
<input type="email" id="email" required>
</div>
<label for="course">Course:</label>
<select id="course">
<option value="web">Web Development</option>
<option value="python">Python Programming</option>
<option value="java">Java Programming</option>
</select>
</div>
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</div>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
<div id="output">
<h2>Submitted Information</h2>
<p id="result"></p>
</div>
</main>
<footer>
<p>© 2024 Web Development Lab</p>
</footer>
</body>
</html>
Expected Output for Experiment 1

Your screenshot should show:
1. Raw HTML page without styling showing:
- Form with input fields
- Select dropdown
- Radio buttons
- Submit and Reset buttons
- Footer with copyright
Experiment 2: CSS Styling
1. Create `styles.css` and link it in your HTML file's head section:
<link rel="stylesheet" href="styles.css">
2. Add this CSS content:
/* Basic Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
background-color: f0f0f0;
}
header {
text-align: center;
margin-bottom: 30px;
color: 333;
}
main {
max-width: 600px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
color: 555;
}
input[type="text"],
input[type="email"],
select {
width: 100%;
padding: 8px;
border: 1px solid ddd;
border-radius: 4px;
}
input[type="radio"] {
margin-right: 5px;
}
button {
background-color: 4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-right: 10px;
}
button[type="reset"] {
background-color: f44336;
}
button:hover {
opacity: 0.8;
}
output {
margin-top: 20px;
padding: 15px;
border-top: 1px solid ddd;
}
footer {
text-align: center;
margin-top: 30px;
color: 666;
}

1. Styled form with:
- Centered layout
- White background with shadow
- Properly spaced form elements
- Green submit button and red reset button
- Styled input fields with borders
Experiment 3: JavaScript Functionality
1. Create `script.js` and link it before the closing body tag:
<script src="script.js"></script>
2. Add this JavaScript content:
document.addEventListener('DOMContentLoaded', function() {
const studentForm = document.getElementById('studentForm');
const resultDiv = document.getElementById('result');
studentForm.addEventListener('submit', function(e) {
e.preventDefault();
// Get form values

const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const course = document.getElementById('course');
const courseName = course.options[course.selectedIndex].text;
const gender = document.querySelector('input[name="gender"]:checked');
// Validate form
if (!name || !email || !gender) {
alert('Please fill in all fields!');
return;
}
// Display results
const output = `
<strong>Name:</strong> ${name}<br>
<strong>Email:</strong> ${email}<br>
<strong>Course:</strong> ${courseName}<br>
<strong>Gender:</strong> ${gender.value}
`;
resultDiv.innerHTML = output;
// Add success message styling

resultDiv.style.backgroundColor = 'e8f5e9';
resultDiv.style.padding = '10px';
resultDiv.style.borderRadius = '4px';
resultDiv.style.marginTop = '15px';
});
});

1. Form with entered data
2. Displayed submitted information below the form
3. Alert message if form is incomplete
4. Reset button clearing all fields
Experiment Submission Instructions
Required Screenshots
1. For HTML Structure (Experiment 1):
- Screenshot of raw HTML page without CSS
- Name as: èxp1_html.png`
2. For CSS Styling (Experiment 2):

- Screenshot of styled page before form submission
- Name as: èxp2_css.png`
3. For JavaScript Functionality (Experiment 3):

- Screenshot 1: Form with filled data and submission result
- Screenshot 2: Alert for incomplete form
- Screenshot 3: Form after using reset button
- Name as: èxp3_submit.png`, èxp3_alert.png`, and èxp3_reset.png`
Screenshot Requirements
1. Each screenshot must:
- Show the full browser window
- Include browser URL bar
- Show complete page without scrolling
- Be clearly readable
Submission Format
1. Create a ZIP file named `Web_Basics_Experiment_<YourName>` containing:
- All source code files (ìndex.html`, `styles.css`, `script.js`)
- All required screenshots
- A readme.txt file containing:
- Your name and experiment date
- Browser used and version
- Any issues encountered and solutions
Validation Checklist
Before submitting, verify:
- HTML form displays all elements correctly
- CSS styling matches the expected output
- JavaScript validation works for empty fields
- Form submission displays data correctly
- Reset button clears all fields
- All screenshots are clear and complete
- All files are named correctly
Common Issues and Solutions

1. CSS not applying:
- Check if CSS file is linked correctly
- Verify file path is correct
2. JavaScript not working:

- Check browser console for errors
- Verify script is linked at bottom of body
- Ensure IDs match between HTML and JavaScript
3. Form submission refreshing page:

- Verify preventDefault() is called
- Check if event listener is properly attached
Remember: Document any unique issues and their solutions in your readme.txt file.

Experiment 3 HTML CSS JS (1)

Uploaded by

Copyright:

Available Formats

Experiment 3 HTML CSS JS (1)

Uploaded by

Document Information

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

Experiment 3 HTML CSS JS (1)

Uploaded by

Copyright:

Available Formats

Week3 - Web Development Fundamentals Experiment

To understand and implement basic web development concepts using:

Experiment 1: HTML Structure

Setup and Implementation

2. Create `index.html` with this content:

Expected Output for Experiment 1

Experiment 2: CSS Styling

1. Create `styles.css` and link it in your HTML file's head section:

<link rel="stylesheet" href="styles.css">

2. Add this CSS content:

Expected Output for Experiment 2

Experiment 3: JavaScript Functionality

1. Create `script.js` and link it before the closing body tag:

2. Add this JavaScript content:

// Get form values

// Add success message styling

Expected Output for Experiment 3

Experiment Submission Instructions

2. For CSS Styling (Experiment 2):

3. For JavaScript Functionality (Experiment 3):

Common Issues and Solutions

2. JavaScript not working:

3. Form submission refreshing page:

You might also like