Scribd
Upload
0 views

Sample Program

Uploaded by

megaravichandran17
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0 views

Sample Program

Uploaded by

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

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: [email protected]</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>
3.​ 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>

4.​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>
5.​ 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>

6.​ 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>

7. 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>

8. 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>

9. 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>

10. 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