Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will discuss different types of cursors in CSS. This is a JavaScript project where you can Hover on the Div elements to see the preview of each cursor corresponding to the text in the Div.
Furthermore, you can also copy the CSS code related to the cursor just by clicking on the div.
To create this project, we need HTML, CSS, and JavaScript. This is a beginner-friendly JavaScript project. If you are looking for more Complex tutorials, you can check out this playlist here.
This playlist consists of about 100+ JavaScript project tutorials. Each of these projects comes with a free-to-download source code and a video tutorial. This playlist will help you improve your JavaScript skills.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post, you can check out the video below. Also, subscribe to my YouTube channel, where I post new tips, tricks, and tutorials every alternate day.
Project Folder Structure:
Before we start coding let us create the project folder structure. We start by creating a project folder called the cursor guide.
Inside this folder, we have 3 files these files index.html, style.css script.js.
HTML:
We begin with the HTML code. HTML contains a div with a class name container this container holds and centres all the other divs. Each of the divs comes with a custom attribute. We call this attribute a data cursor. Mention the different types of cursors as a value to this attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cursor Guide</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Hover On The Boxes For Preview</h1>
<h3>Click On The Boxes To Copy Code</h3>
<div class="container">
<div data-cursor="alias"></div>
<div data-cursor="all-scroll"></div>
<div data-cursor="cell"></div>
<div data-cursor="col-resize"></div>
<div data-cursor="copy"></div>
<div data-cursor="crosshair"></div>
<div data-cursor="e-resize"></div>
<div data-cursor="grab"></div>
<div data-cursor="grabbing"></div>
<div data-cursor="help"></div>
<div data-cursor="move"></div>
<div data-cursor="n-resize"></div>
<div data-cursor="no-drop"></div>
<div data-cursor="pointer"></div>
<div data-cursor="progress"></div>
<div data-cursor="row-resize"></div>
<div data-cursor="text"></div>
<div data-cursor="zoom-in"></div>
<div data-cursor="zoom-out"></div>
<div data-cursor="wait"></div>
</div>
<div id="alert">Code Copied To Clipboard</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
We then use CSS to style these divs and position them.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #3586ff;
}
.container {
width: 90vw;
max-width: 37.5em;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 2em 1em;
position: relative;
margin: 1em auto 3em auto;
}
.container div {
font-size: 0.9em;
background-color: #ffffff;
color: #164879;
height: calc(100vh / 8);
min-height: 3.5em;
border-radius: 0.3em;
box-shadow: 0 1.3em 1.9em rgba(8, 30, 62, 0.2);
display: grid;
place-items: center;
}
#alert {
display: none;
text-align: center;
background-color: rgba(255, 255, 255, 0.2);
color: #ffffff;
width: 21.85em;
padding: 0.5em 0;
margin: auto;
}
h1 {
text-align: center;
}
h3 {
color: #ffffff;
text-align: center;
margin-bottom: 2em;
font-weight: 500;
}
Javascript:
Finally, we use JavaScript to implement the logic. We do this in the following steps:
Select all the development inside the container.
Look through the node list
Display content for each div
Function to copy text to clipboard
And display messages.
let cursorDivs = document.querySelectorAll(".container div");
//Loop through the node list
cursorDivs.forEach((i) => {
//Display content for each div
i.innerText = i.getAttribute("data-cursor");
i.style.cursor = i.getAttribute("data-cursor");
i.addEventListener("click", () => {
//Copy text to clipboard
let inputElement = document.createElement("input");
inputElement.type = "text";
inputElement.value = `cursor: ${i.getAttribute("data-cursor")};`;
document.body.appendChild(inputElement);
inputElement.select();
document.execCommand("copy");
document.body.removeChild(inputElement);
//Display Message
document.getElementById("alert").style.display = "block";
setTimeout(function () {
document.getElementById("alert").style.display = "none";
}, 1000);
});
});
That’s it for this tutorial. If you face any problems while creating this project you can download the source code by clicking on the download button below. Also, if you have any queries suggestions or feedback you can comment on them below.
Happy coding
