13.
DOM Manipulation
The Document Object Model (DOM) represents the HTML structure of a webpage. DOM
Manipulation in JavaScript allows developers to dynamically change webpage elements —
such as text, style, or structure — without reloading the page.
[Link]("demo").innerHTML = "Hello, World!";
14. Event Handling in JavaScript
Event Handling allows JavaScript to respond to user actions like clicks, typing, or mouse
movement. Developers can attach functions (called event handlers) to elements to
perform actions when specific events occur.
<button onclick="showMessage()">Click Me</button>
<script>
function showMessage() {
alert("Button Clicked!");
}
</script>
15. Building a Simple Calculator
A simple calculator performs arithmetic operations like addition, subtraction, multiplication,
and division.
<input id="num1" type="number"> + <input id="num2" type="number">
<button onclick="add()">=</button>
<span id="result"></span>
<script>
function add() {
let a = parseFloat([Link]("num1").value);
let b = parseFloat([Link]("num2").value);
[Link]("result").innerText = a + b;
}
</script>
16. Building a Login Page
A login page allows users to enter credentials and gain access to restricted areas.
JavaScript validates inputs before submitting to the server.
<form onsubmit="return validateLogin()">
<input type="text" id="username" placeholder="Username"><br>
<input type="password" id="password" placeholder="Password"><br>
<button type="submit">Login</button>
</form>
<script>
function validateLogin() {
let user = [Link]("username").value;
let pass = [Link]("password").value;
if(user === "admin" && pass === "1234") {
alert("Login Successful");
} else {
alert("Invalid Credentials");
}
return false;
}
</script>
17. Responsive Design using Media Queries
Responsive Design ensures that a website looks good on all devices (desktop, tablet,
mobile). Media Queries in CSS are used to adjust layout and style depending on screen
size.
body { background-color: lightblue; }
@media (max-width: 600px) {
body { background-color: lightgreen; }
}
18. Mini Project – Portfolio Website
A portfolio website is a personal website that showcases your projects, skills, and contact
information. It usually includes sections like Home, About, Projects, and Contact.
<h1>Welcome to My Portfolio</h1>
<p>Hi, I am a Web Developer passionate about creating interactive websites.</p>
<style>
body { font-family: Arial; text-align: center; }
h1 { color: #2c3e50; }
p { color: #555; }
</style>