create a blue square and center it in the screen and make its size medium and whenever you click it make an alert saying "you clicked the square" in javascript

You can create a blue square and center it in the screen using the following HTML and CSS code:


<div id="blue-square"></div>
29 chars
2 lines


#blue-square {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: blue;
   width: 200px;
   height: 200px;
}
166 chars
10 lines

To add an event listener to the square and create an alert message when clicked, you can use the following JavaScript code:


index.tsx
const blueSquare = document.getElementById('blue-square');

blueSquare.addEventListener('click', () => {
  alert("you clicked the square");
});
144 chars
6 lines

This will create a blue square and center it in the middle of the screen. When you click on it, it will display an alert message saying "you clicked the square".

similar javascript code snippets

if no checkbox is selected make button inactive in javascript

create a div of images that is always no bigger than 80% of the display height and the images scale accordingly. when you hover over an image it zooms slighly and the other images gray out in javascript

create a carousel in html in javascript

divide div in four parts in javascript

how to float an html element horizontally but fix it vertically in javascript

wrap li items within span in javascript

create a div that scrolls horizontally and adjust the height of its content to always be 80% of the screen height in javascript

create a div that scrolls horizontally and adjust its height to always be 80% of the screen height in javascript

center a div in javascript

create a button in javascript

related categories