[go: up one dir, main page]
Scribd
Upload
11 views5 pages

NM Sets

The document contains a series of HTML and JavaScript exercises, including creating a personal profile page, validating form fields, building a navigation bar with Bootstrap, and implementing various forms and functions. Each exercise provides a code snippet as an answer, demonstrating basic web development skills. The exercises cover topics such as HTML structure, form handling, and JavaScript functionality.

Uploaded by

bsc.cscwc2024
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views5 pages

NM Sets

The document contains a series of HTML and JavaScript exercises, including creating a personal profile page, validating form fields, building a navigation bar with Bootstrap, and implementing various forms and functions. Each exercise provides a code snippet as an answer, demonstrating basic web development skills. The exercises cover topics such as HTML structure, form handling, and JavaScript functionality.

Uploaded by

bsc.cscwc2024
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

SET1

1. Create a simple HTML document for a personal profile page with the following:
A heading with your name.
A paragraph describing yourself.
An ordered list of your technical skills.
A footer with your contact email.

Answer:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Profile</title>
</head>
<body>
<h1>John Doe</h1>
<p>I am a web developer with a passion for front-end technologies.</p>
<h2>My Technical Skills</h2>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<footer>Contact me at: john@example.com</footer>
</body>
</html>
2. Write JavaScript to validate that all fields in a form (Name, Email) are filled in before
submission. If any field is empty, show an alert.
Answer:
<form onsubmit="return validateForm()">
<input type="text" id="name" placeholder="Name"><br>
<input type="email" id="email" placeholder="Email"><br>
<button type="submit">Submit</button>
</form>

<script>
function validateForm() {
if (!document.getElementById('name').value || !document.getElementById('email').value) {
alert("Both fields are required!");
return false;
}
return true;
}
</script>
SET 2

1. Create a basic HTML document with a heading that says "Welcome to My Website".
Below the heading, include a paragraph with a brief introduction of yourself.
Answer:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Hello, I'm a web developer learning HTML, CSS, and JavaScript!</p>
</body>
</html>

2. Using Bootstrap, create a responsive navigation bar with menu items: Home, About,
Services, and Contact. The navbar should collapse into a hamburger menu on smaller
screens.
Answer:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
return true;
}
</script>
SET 3

1. Create a simple contact form with the following fields: Name (text input), Email (email
input), and Message (textarea). Add a submit button.
Answer:
<form action="#">
<input type="text" placeholder="Your Name" required><br>
<input type="email" placeholder="Your Email" required><br>
<textarea placeholder="Your Message" required></textarea><br>
<button type="submit">Send</button>
</form>

2. Write JavaScript to change the text of a heading when a button is clicked.


Answer:
<h1 id="heading">Welcome!</h1>
<button onclick="changeText()">Change Text</button>

<script>
function changeText() {
document.getElementById('heading').innerText = 'Hello, World!';
}
</script>
SET 4

1. Create an HTML table with 3 columns: Student Name, Subject, and Marks. Add data for 3
students.
Answer:
<table border="1">
<tr>
<th>Student Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>John</td>
<td>Math</td>
<td>85</td>
</tr>
<tr>
<td>Mary</td>
<td>Science</td>
<td>90</td>
</tr>
<tr>
<td>Raj</td>
<td>English</td>
<td>88</td>
</tr>
</table>

2. Write JavaScript to add a new list item to an ordered list when a button is clicked.
Answer:
<ol id="skills">
<li>HTML</li>
<li>CSS</li>
</ol>
<button onclick="addSkill()">Add Skill</button>

<script>
function addSkill() {
const newSkill = document.createElement('li');
newSkill.textContent = 'JavaScript';
document.getElementById('skills').appendChild(newSkill);
}
</script>
SET 5

1. Create an HTML registration form with fields for Full Name, Email, Password, Gender
(Radio buttons), and Skills (Checkboxes for HTML, CSS, and JS).
Answer:
<form action="#">
<label>Full Name:</label>
<input type="text"><br>

<label>Email:</label>
<input type="email"><br>

<label>Password:</label>
<input type="password"><br>

<label>Gender:</label>
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female<br>

<label>Skills:</label>
<input type="checkbox" value="HTML"> HTML
<input type="checkbox" value="CSS"> CSS
<input type="checkbox" value="JavaScript"> JavaScript<br>

<button type="submit">Register</button>
</form>

2. Write a JavaScript function that takes a number as input and prints whether the number is
even or odd.
Answer:
function checkEvenOrOdd(number) {
if (number % 2 === 0) {
console.log(number + " is Even");
} else {
console.log(number + " is Odd");
}
}

// Example usage
checkEvenOrOdd(5); // Output: 5 is Odd
checkEvenOrOdd(8); // Output: 8 is Even

You might also like