Can You Vote?
Create an input field where the user enters their age.
Use an if-else condition to check if the age is 18 or above.
Display a message accordingly.
<h2>Enter Your Age:</h2>
<input type="number" id="age">
<button onclick="checkAge()">Check</button>
<p id="result"></p>
<script>
function checkAge() {
let a = [Link]("age").value;
let result = [Link]("result");
if (a >= 18) {
[Link] = "You are eligible to vote!";
} else {
[Link] = "You are not eligible to vote.";
}
</script>
<h2>Enter Your Marks:</h2>
<input type="number" id="marksInput">
<button onclick="calculateGrade()">Get Grade</button>
<p id="gradeResult"></p>
<script>
function calculateGrade() {
let marks = [Link]("marksInput").value;
let result = [Link]("gradeResult");
let grade;
if (marks >= 90) grade = "A+";
else if (marks >= 80) grade = "A";
else if (marks >= 70) grade = "B";
else if (marks >= 60) grade = "C";
else grade = "F (Fail)";
[Link] = `Your Grade: ${grade}`;
}
</script>
Create two input box with id “num1” and “num2”. On a button click take the two values
from both the boxes and store it in a variable called “total”. Create a paragraph tag with
id “result”. Every time user click add button, the added result should be displayed in
paragraph tag.
Add Two Numbers using Function-on Mouse Click Button
<h1>Add two numbers using Button Click Event</h1>
<label>Enter the first number:</label>
<input type="number" id="num1">
<br><br>
<label>Enter the second number:</label>
<input type="number" id="num2">
<br><br>
<button onclick="add()">Click Me</button>
<h2 id="result"></h2>
<script>
function add()
let a=[Link]("num1").value;
let b=[Link]("num2").value;
let result=a+b;
[Link]("result").textContent="Sum"+" "+result;
</script>
<h1>Add two numbers using Button Click Event</h1>
<label>Enter the first number:</label>
<input type="number" id="num1">
<br><br>
<label>Enter the second number:</label>
<input type="number" id="num2">
<br><br>
<button onclick="add()">Click Me</button>
<h2 id="result"></h2>
<script>
function add()
let a=parseFloat([Link]("num1").value);
let b=parseFloat([Link]("num2").value);
let result=a+b;
[Link]("result").textContent="Sum"+" "+result;
</script>
parseFloat() is a JavaScript function used to convert a string into a floating-point
number.
[Link](parseFloat("3.14")); // Output: 3.14
[Link](parseFloat("42")); // Output: 42
[Link](parseFloat("3.14abc")); // Output: 3.14
[Link](parseFloat("abc3.14")); // Output: NaN
Change Div Content on Button Click
<div id="myDiv">Original Text</div>
<button id="changeTextBtn">Change Text</button>
<script>
[Link]("changeTextBtn").addEventListener("click", function() {
[Link]("myDiv").innerText = "Text Changed!";
});
</script>
Traffic Light
<h2>Select a Traffic Light Color:</h2>
<select id="lightSelect">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
</select>
<button onclick="checkLight()">Show Meaning</button>
<div id="signal"></div>
<script>
function checkLight() {
let color = [Link]("lightSelect").value;
let signalBox = [Link]("signal");
switch (color) {
case "red":
[Link] = " STOP!";
[Link] = "red";
break;
case "yellow":
[Link] = "GET READY!";
[Link] = "yellow";
break;
case "green":
[Link] = " GO!";
[Link] = "green";
break;
default:
[Link] = "";
</script>
Change Text on Button Click
<button id="myButton">Click Me</button>
<script>
[Link]("myButton").addEventListener("click", function() {
[Link] = "You Clicked Me!";
});
</script>
Using a Named Function
<button id="myButton">Click Me</button>
<script>
function change()
[Link]="You clicked me";
[Link]("myButton").addEventListener("click", change);
</script>
<script>
function displayLabel(label) {
[Link]("output").innerText = label;
</script>
<button onclick="displayLabel('Ankit')">Ankit</button>
<button onclick="displayLabel('Roshini')">Roshini</button>
<button onclick="displayLabel('Mahroof')">Mahroof</button>
<p id="output">.</p>
addEventListener different options
<button id="myButton">Hover or Click Me!</button>
<script>
let button = [Link]("myButton");
// click event
[Link]("click", function() {
[Link]("Button was clicked!");
});
// mouseover event
[Link]("mouseover", function() {
[Link]("Mouse is over the button!");
});
// mouseout event
[Link]("mouseout", function() {
[Link]("Mouse left the button!");
});
// dblclick event
[Link]("dblclick", function() {
[Link]("Button was double clicked!");
});
// mousedown event
[Link]("mousedown", function() {
[Link]("Mouse button pressed down on the button!");
});
// mouseup event
[Link]("mouseup", function() {
[Link]("Mouse button released over the button!");
});
// contextmenu event: (right click)
[Link]("contextmenu", function() {
[Link]("Right click on the button!");
});
</script>
<button id="myButton">Hover or Click Me!</button>
<script>
let button = [Link]("myButton");
// click event
[Link]("click", function() {
[Link]="Button was clicked!";
});
// mouseover event
[Link]("mouseover", function() {
[Link]="Mouse is over the button!";
});
// mouseout event
[Link]("mouseout", function() {
[Link]="Mouse left the button!";
});
// dblclick event
[Link]("dblclick", function() {
[Link]("Button was double clicked!");
});
// mousedown event
[Link]("mousedown", function() {
[Link]="Mouse button pressed down on the button!";
});
// mouseup event
[Link]("mouseup", function() {
[Link]("Mouse button released over the button!");
});
// contextmenu event: (right click)
[Link]("contextmenu", function() {
[Link]="Right click on the button!";
});
</script>
<p>Press any key:</p>
<p id="keyOutput"></p>
<script>
[Link]("keydown", function(event) {
[Link]("keyOutput").innerText = "You pressed: " + [Link];
});
</script>
<h2>Word Counter</h2>
<textarea id="textInput" rows="5" cols="30" placeholder="Type here..."></textarea>
<p>Word Count: <span id="wordCount">0</span></p>
<script>
[Link]("textInput").addEventListener("input", function() {
let text = [Link]();
let words = text ? [Link](/\s+/).length : 0;
[Link]("wordCount").innerText = words;
});
</script>
[Link] gets the text inside the input field.
.trim() removes leading and trailing spaces to avoid counting empty spaces as
words.
split(/\s+/) - splits the text using regular expression /\s+/, which matches one or
more spaces
Show Alert on Mouse Hover
<button id="hoverBtn">Hover Over Me</button>
<script>
[Link]("hoverBtn").onmouseover = function() {
alert("Mouse is hovering over the button!");
};
</script>
Change Button Color on Mouse Enter and Reset on Mouse Leave
<button id="colorBtn">Hover to Change Color</button>
<script>
let btn = [Link]("colorBtn");
[Link]("mouseover", function() {
[Link] = "blue";
[Link] = "white";
});
[Link]("mouseout", function() {
[Link] = "";
[Link] = "";
});
</script>
Display Mouse Coordinates on Hover
<div id="box" style="width: 200px; height: 100px; background: lightgray; text-align:
center; line-height: 100px;">
Hover here
</div>
<p id="coords"></p>
<script>
[Link]("box").addEventListener("mousemove", function(event) {
[Link]("coords").innerText = `X: ${[Link]}, Y: $
{[Link]}`;
});
</script>
Hide and Show Text on Button Click
<button id="toggleTextBtn">Hide Text</button>
<p id="text">This is a sample text.</p>
<script>
[Link]("toggleTextBtn").addEventListener("click", function() {
let text = [Link]("text");
if ([Link] === "none") {
[Link] = "block";
[Link] = "Hide Text";
} else {
[Link] = "none";
[Link] = "Show Text";
});
</script>
[Link] → Gets the X-coordinate of the mouse relative to the viewport.
[Link] → Gets the Y-coordinate of the mouse relative to the viewport.
The === operator is used in JavaScript for strict comparison, meaning it checks both
value and type.
Click Counter
Task: Create a button that counts the number of times it has been clicked.
<button id="counterBtn">Clicked 0 times</button>
<script>
let count = 0;
[Link]("counterBtn").addEventListener("click", function() {
count++;
[Link] = `Clicked ${count} times`;
});
</script>
addEventListener("click", function() { ... }) listens for click events and runs the function
when the button is clicked.
"Clicked " + count + " times" or ‘Clicked ${count} times’
Change Div Background Color on Hover
<div id="hoverDiv" style="width: 200px; height: 100px; background-color: lightgray;">
Hover over me!
</div>
<script>
let div = [Link]("hoverDiv");
[Link]("mouseover", function() {
[Link] = "lightblue";
});
[Link]("mouseout", function() {
[Link] = "lightgray";
});
</script>