1.
write a js programme that listens to a double click event and performs a ac on
<!DOCTYPE html>
<html>
<head>
< tle>Double Click Example</ tle>
</head>
<body>
<bu on id="myBu on">Double Click Me</bu on>
<script>
document.getElementById('myBu on').addEventListener('dblclick', func on() {
console.log('Bu on double clicked');
// Perform your desired ac on
alert('You double clicked the bu on!');
});
</script>
</body>
</html>
2. write a js func that changes bg colour of an element when a mouse enters it
<!DOCTYPE html>
<html>
<head>
< tle>Change Background Color on Mouseover</ tle>
</head>
<body>
<div id="myElement">Hover over me</div>
<script>
func on changeBgColor(element) {
element.style.backgroundColor = 'blue';
const myElement = document.getElementById('myElement');
myElement.addEventListener('mouseover', func on() {
changeBgColor(myElement);
});
</script>
</body>
</html>
3. write a js programme that creates a bu on and add a click event listner to lock a message when its
clicked
<!DOCTYPE html>
<html>
<head>
< tle>Lock Message Bu on</ tle>
</head>
<body>
<div id="messageContainer">
<p id="message">This is a message that can be locked.</p>
</div>
<script>
func on createBu onAndAddListener() {
const bu on = document.createElement('bu on');
bu on.textContent = 'Lock Message';
const container = document.getElementById('messageContainer');
container.appendChild(bu on);
bu on.addEventListener('click', func on() {
const message = document.getElementById('message');
message.setA ribute('contenteditable', false);
bu on.textContent = 'Message Locked';
});
createBu onAndAddListener();
</script>
</body>
</html>
4. write a js programme to create a drop down menu that shows and hides its opo on when clicked
<!DOCTYPE html>
<html>
<head>
< tle>Dropdown Menu</ tle>
<style>
.dropdown-menu {
display: none;
</style>
</head>
<body>
<bu on id="dropdown-bu on">Dropdown</bu on>
<div id="dropdown-menu" class="dropdown-menu">
<ul>
<li>Op on 1</li>
<li>Op on 2</li>
<li>Op on 3</li>
</ul>
</div>
<script>
const dropdownBu on = document.getElementById('dropdown-bu on');
const dropdownMenu = document.getElementById('dropdown-menu');
dropdownBu on.addEventListener('click', () => {
dropdownMenu.style.display = dropdownMenu.style.display === 'none' ? 'block' : 'none';
});
</script>
</body>
</html>
5. write a programme to show a slide show that changes image when next or previous bu on is
clicked
<!DOCTYPE html>
<html>
<head>
< tle>Slideshow</ tle>
<style>
#slideshow-container {
width: 800px;
height: 400px;
overflow: hidden;
#slideshow {
width: 100%;
height: 100%;
transi on: transform 0.5s ease-in-out;
#slideshow img {
width: 100%;
height: 100%;
#prev-bu on, #next-bu on {
posi on: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
#prev-bu on {
le : 0;
#next-bu on {
right: 0;
</style>
</head>
<body>
<div id="slideshow-container">
<div id="slideshow">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
</div>
<bu on id="prev-bu on">Previous</bu on>
<bu on id="next-bu on">Next</bu on>
<script>
const slideshowContainer = document.getElementById('slideshow-container');
const slideshow = document.getElementById('slideshow');
const prevBu on = document.getElementById('prev-bu on');
const nextBu on = document.getElementById('next-bu on');
let currentSlide = 0;
const slideWidth = slideshowContainer.offsetWidth;
func on showSlide(index) {
slideshow.style.transform = `translateX(-${index * slideWidth}px)`;
currentSlide = index;
prevBu on.addEventListener('click', () => {
showSlide((currentSlide - 1 + slideshow.children.length) % slideshow.children.length);
});
nextBu on.addEventListener('click', () => {
showSlide((currentSlide + 1) % slideshow.children.length);
});
// Show the first slide ini ally
showSlide(0);
</script>
</body>
</html>
