Learn how to create event keycodes with HTML, CSS, and JavaScript. Enhance user interactions and boost your web development skills.
Table of Contents
Event keycodes play a crucial role in web development, enabling you to enhance user interactions and create dynamic web applications. In this tutorial, we will guide you through the process of creating event keycodes using HTML, CSS, and JavaScript.
Join My Telegram Channel to Download the Project Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our event keycodes.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's break it down step by step:
1. <!DOCTYPE html>: This declaration defines the document type and version of HTML being used, in this case, HTML5.
2. <html lang="en">: This is the opening tag for the HTML document. It specifies the language of the document as English ("en").
3. <head>: This is the head section of the HTML document. It contains meta-information and links to external resources that are important for the page but not displayed on the web page itself.
- <meta charset="UTF-8" />: This meta tag sets the character encoding of the document to UTF-8, which is a character encoding that supports a wide range of characters, including those from different languages and special symbols.
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />: This meta tag is used for responsive web design. It sets the viewport width to the device's width and sets the initial zoom scale to 1.0. This helps ensure that the web page displays correctly on various devices with different screen sizes.
- <link rel="stylesheet" href="styles.css" />: This line links an external CSS (Cascading Style Sheets) file named "styles.css" to the HTML document. CSS is used to define the visual styling and layout of the web page.
- <title>Event KeyCodes</title>: This sets the title of the web page, which is displayed in the browser's title bar or tab. In this case, the title is "Event KeyCodes."
4. <body>: This is the body of the HTML document, where the visible content of the web page is placed.
- <div id="insert">: This is a div element with the id attribute set to "insert." It is used as a container.
- <div class="key">: Nested within the "insert" div, this is another div element with the class attribute set to "key." It contains the text "Press any key to get the keyCode."
- <script src="script.js"></script>: This line includes an external JavaScript file named "script.js" in the HTML document. JavaScript is used to add interactivity and functionality to the web page.
This is the basic structure of our event keycodes using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Next, we need to style our page by adding our CSS. This will give our event keycodes page an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
Let's break it down:
1. @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');: This line imports a font from Google Fonts. It makes the "Muli" font available for use in the web page. The display: swap; part of the URL ensures that the font is displayed even if it takes a little longer to load.
2. * { box-sizing: border-box; }: This selector (*) applies the following style rule to all elements on the page. The box-sizing: border-box; property ensures that an element's padding and border are included in its total width and height calculations. This is a common practice for better layout control.
3. body: This selector targets the <body> element of the HTML document.
- background-color: Sets the background color of the entire page to a dark gray (#383838).
- font-family: 'Muli', sans-serif;: Specifies the font family to be used for text within the <body>. It uses the "Muli" font if available, and if not, it falls back to a generic sans-serif font.
- display: flex;: Turns the body into a flex container, allowing its children to be flex items.
- align-items: center; justify-content: center;: Centers the content both vertically and horizontally within the flex container, effectively centering the page's content.
- text-align: center;: Sets the horizontal text alignment to center within the body.
- height: 100vh;: Sets the height of the body to 100% of the viewport height (vh), making the content fill the entire viewport.
- overflow: hidden;: Hides any content that overflows the viewport, ensuring that there is no scrolling.
- margin: 0;: Removes any default margin around the body element.
4. .key: This selector targets elements with the class "key" in the HTML document. It appears to be used for styling specific elements within the page.
- border: Adds a 1-pixel solid border around the "key" elements with a color of #999999.
- background-color: Sets the background color of the "key" elements to a dark gray (#2B2B2B).
- box-shadow: Adds a subtle shadow effect to the "key" elements to give them depth.
- display: inline-flex;: Makes the "key" elements inline flex containers, allowing their children to be flex items.
- align-items: center;: Vertically centers the content within the "key" elements.
- font-size: 20px; font-weight: bold;: Sets the font size and weight for the text within the "key" elements.
- padding: 20px;: Adds internal padding to the "key" elements to provide spacing between the text and the border.
- flex-direction: column;: Sets the flex direction to column, which stacks the child elements vertically within the "key" elements.
- margin: 10px;: Adds margin around the "key" elements to space them apart from each other.
- min-width: 150px;: Sets a minimum width for the "key" elements to ensure they have a minimum size.
- color: white;: Sets the text color within the "key" elements to white.
- position: relative;: Sets the position of the "key" elements to relative, which allows for positioning of child elements with respect to the "key" element.
5. .key small: This selector targets the <small> elements that are children of elements with the class "key." It styles the small text within the "key" elements.
- position: absolute;: Positions the small text absolutely within the parent "key" element.
- top: -24px; left: 0;: Moves the small text 24 pixels above the top of the "key" element, aligning it with the top border.
- text-align: center;: Centers the text horizontally within the small element.
- width: 100%;: Sets the width of the small element to 100% of its parent's width.
- color: #c4c4c4;: Sets the text color of the small text to a light gray (#c4c4c4).
- font-size: 14px;: Sets the font size for the small text to 14 pixels.
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #383838;
font-family: 'Muli', sans-serif;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.key {
border: 1px solid #999999;
background-color: #2B2B2B;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
display: inline-flex;
align-items: center;
font-size: 20px;
font-weight: bold;
padding: 20px;
flex-direction: column;
margin: 10px;
min-width: 150px;
color: white;
position: relative;
}
.key small {
position: absolute;
top: -24px;
left: 0;
text-align: center;
width: 100%;
color: #c4c4c4;
font-size: 14px;
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript. Here's a step-by-step explanation of what this code does:
1. const insert = document.getElementById('insert'): This line of code fetches an HTML element with the id "insert" and assigns it to the variable insert. This element will be used to display information about the keyboard events.
2. window.addEventListener('keydown', (event) => { ... }): This line sets up an event listener on the window object that listens for the "keydown" event, which occurs when a key on the keyboard is pressed down. When this event happens, the code inside the curly braces { ... } is executed.
3. Inside the event listener function, there is a template literal (enclosed in backticks ``) that generates HTML content dynamically based on the keyboard event:
- ${event.key === ' ' ? 'Space' : event.key}: This part displays the key that was pressed. If the key is a space character (identified by event.key === ' '), it displays "Space." Otherwise, it displays the actual key that was pressed. This information is placed inside a <div> element with a class of "key" and followed by a <small> element containing the text "event.key."
- ${event.keyCode}: This part displays the key code of the pressed key. The key code is a numeric value representing the specific key on the keyboard. Like the previous line, this information is placed inside a <div> element with a class of "key" and followed by a <small> element containing the text "event.keyCode."
- ${event.code}: This part displays the code associated with the pressed key. The key code is a standardized string representing the key on the keyboard. As before, this information is placed inside a <div> element with a class of "key" and followed by a <small> element containing the text "event.code."
4. The resulting HTML content generated within the template literal is assigned to the insert.innerHTML property. This means that whenever a key is pressed, the content inside the HTML element with the id "insert" is replaced with the information about the key event.
Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
const insert = document.getElementById('insert')
window.addEventListener('keydown', (event) => {
insert.innerHTML = `
<div class="key">
${event.key === ' ' ? 'Space' : event.key}
<small>event.key</small>
</div>
<div class="key">
${event.keyCode}
<small>event.keyCode</small>
</div>
<div class="key">
${event.code}
<small>event.code</small>
</div>
`
})Final Output:
Conclusion:
Congratulations! You've learned how to create event keycodes using HTML, CSS, and JavaScript. By mastering event listeners and keycode handling, you can build interactive and responsive web applications. Experiment with different keycodes and take your web development skills to the next level.
Start implementing event keycodes in your projects today and watch your web applications come to life!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
