How to Create Your Own Royalty-Free Music on Android in 3 Easy Ways

Introduction

alert boxes are useful for displaying important information or messages to users on a webpage. They can be used to inform users about errors, successful actions, or important updates. In this article, we will learn how to create an alert box using HTML, CSS, and JavaScript that has a close button and appears for 3 seconds before disappearing.

 

HTML

The first step in creating the alert box is to write the HTML markup. The alert box is wrapped in a `div` element with a class of `alert`. Inside the `div`, there is a `span` element with a class of `close-btn` that contains the close button. Finally, there is a `p` element that contains the text that will be displayed in the alert box.

   
   
  <div class="alert">
<span class="close-btn">&times;</span>
  <p>This is an alert box!</p>
</div>

CSS

After writing the HTML markup, we need to style the alert box using CSS. The `alert` class is used to style the `div` element that contains the alert box. The `close-btn` class is used to style the `span` element that contains the close button.

The CSS code above positions the alert box in the center of the screen, gives it a black background and white text, adds a close button that uses an `×` symbol as an SVG icon, and adds a transition effect to the opacity property. The `border-radius` property sets the border radius to 16px to give the alert box rounded corners. The `box-shadow` property adds a shadow effect to the alert box. Finally, the `z-index` property ensures that the alert box is always displayed on top of other elements on the page.

  .alert {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	background-color: black;
	color: white;
	padding: 9px;
	border-radius: 16px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	z-index: 9999;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: space-between;
	width: 233px;
	padding: 4px 20px;
}

.alert.show {
  opacity: 1;
}

.close-btn {
  cursor: pointer;
  color: white;
  font-size: 24px;
}

.close-btn:hover {
  color: red;
}

 JavaScript

The last step is to write the JavaScript code that will show and hide the alert box when necessary. We will create two functions: `showAlert()` and `hideAlert()`. The `showAlert()` function adds a `show` class to the alert box to make it visible, sets a 3-second timeout to remove the `show` class and hide the alert box, and adds a click event listener to the close button that calls the `hideAlert()` function. The `hideAlert()` function removes the `show` class from the alert box to hide it.

To change time from 3 sec to another replace 3000 with your desired number ,remember 1sec = 1000.

  const alertBox = document.querySelector('.alert');
const closeButton = document.querySelector('.close-btn');

function showAlert() {
  alertBox.classList.add('show');
  setTimeout(hideAlert, 3000);
}

function hideAlert() {
  alertBox.classList.remove('show');
}

closeButton.addEventListener('click', hideAlert);

showAlert();

Go to Link