Question 1

Write a program to show different alerts when different buttons are clicked

Answer

<!DOCTYPE html>
<html>
<head>
    <title>Alert Demo</title>
</head>
<body>
    <button onclick="alert('Button 1 clicked')">Button 1</button>
    <button onclick="alert('Button 2 clicked')">Button 2</button>
    <button onclick="alert('Button 3 clicked')">Button 3</button>
</body>
</html>

In this program, we have created three buttons, and attached an onclick event to each of them, which displays a different alert message when the button is clicked.

This was the simplest way to do this, but there are other ways to do this as well. For example:

<html>
<head>
    <title>Button Alerts</title>
    <script>
        function showAlert1() {
            alert("Button 1 clicked!");
        }

        function showAlert2() {
            alert("Button 2 clicked!");
        }

        function showAlert3() {
            alert("Button 3 clicked!");
        }
    </script>
</head>
<body>
    <button onclick="showAlert1()">Button 1</button>
    <button onclick="showAlert2()">Button 2</button>
    <button onclick="showAlert3()">Button 3</button>
</body>
</html>

Explanation:

We create three separate functions showAlert1, showAlert2, and showAlert3, each with a different alert message.
We add an onclick attribute to each button, and set it to the corresponding function using a JavaScript function call.

Question 2

Create a website which is capable of storing bookmarks of your favourite website using href.

Answer

<!DOCTYPE html>
<html>
<head>
    <title>Bookmark</title>
</head>
<body>
    <a href="https://www.google.com"><button>Google</button></a>
    <a href="https://www.facebook.com"><button>Facebook</button></a>
    <a href="https://www.youtube.com"><button>Youtube</button></a>
</body>
</html>

In this program, we have created three links, and set their href attribute to the corresponding website URL. When the user clicks on any of the links, they will be redirected to the corresponding website.

Question 3

Repeat Question 2 using event listeners.

Hint: Use window.location and window.focus to navigate to the website.

Answer

<!DOCTYPE html>
<html>
<head>
    <title>Bookmark Demo</title>
</head>
<body>
     <button id="google-button">Google</button>
    <button id="facebook-button">Facebook</button>
    <button id="youtube-button">Youtube</button>
    <script src="script.js"></script>
</body>
</html>

javascript:

const googleButton = document.querySelector('#google-button');
const facebookButton = document.querySelector('#facebook-button');
const youtubeButton = document.querySelector('#youtube-button');

googleButton.addEventListener('click', function() {
  window.location = 'https://www.google.com';
  window.focus();
});

facebookButton.addEventListener('click', function() {
  window.location = 'https://www.facebook.com';
  window.focus();
});

youtubeButton.addEventListener('click', function() {
  window.location = 'https://www.youtube.com';
  window.focus();
});

Explanation:

In this JavaScript code, we start by selecting the three buttons using the querySelector method and storing them in variables.

We then add event listeners to each button using the addEventListener method. Inside the event listener, we set the window.location property to the URL of the corresponding website and call the window.focus method, which will cause the browser to navigate to that website and bring the window to the foreground when the button is clicked.

Question 4

creaete a glowing bulb effect using classList and setInterval method in JavaScript

Answer

<!DOCTYPE html>
<html>
<head>
    <title>Bulb Demo</title>
    <style>
        .bulb {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: black;
        }
        .on {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="bulb"></div>
    <script src="script.js"></script>
</body>
</html>

javascript:

const bulb = document.querySelector('.bulb');

setInterval(function() {
    bulb.classList.toggle('on');
}, 1000);

Explanation:

In this JavaScript code, we start by selecting the bulb using the querySelector method and storing it in a variable.

We then use the setInterval method to call a function every second. Inside the function, we toggle the on class on the bulb using the classList.toggle method. This will cause the bulb to turn on and off every second.

Day 47 of #100daysofjs

Question 1

Question 2

Question 3

Question 4

Subscribe to my newsletter

Arpan Mukherjee

Arpan Mukherjee