Mouse Event

This project is a simple web page that displays the X and Y position of the user's mouse cursor as it moves around the screen. The page consists of two boxes, each with a heading that indicates whether it's showing the X or Y position. As the user moves their mouse, the values in the boxes update in real time to show the current X and Y positions of the cursor. The page is styled using CSS to have a green and white color scheme, with the boxes centered on the page and given a border and spacing for visual appeal. This project is a good example of using JavaScript to dynamically update HTML elements based on user interactions with the page.

Demo

You can try out the application by visiting this link.

Technologies Used

• HTML
• CSS
• JavaScript

Getting Started

To get started with this project, clone the repository and open the index.html file in your preferred web browser.

New Things I Learned

So, in this project, I used backticks in JavaScript to create a template literal. The template literal helps me to include variables or expressions inside them by wrapping them with ${}. I used this to update the HTML element's content to display the current mouse position values. To do this, I used the window.addEventListener() method to listen for the mousemove event. Then, I updated the innerHTML property of the .container element with the template literal to display the current mouse position values. Overall, this project helped me to learn how to dynamically update HTML elements based on user interaction using JavaScript.