JavaScript Application - Get Unicode Character Value
Last Updated : 06 Jan, 2025
A Unicode Character Value is a unique numeric identifier assigned to every character in the Unicode standard. It allows consistent text representation in computers, regardless of the platform, device, or language.
What We Are Going to Create
We will build a simple web application where users can input a single character to retrieve its Unicode Character Value.
- The UI will be simple, with flexible layouts for various screen sizes.
- A field where the user can type in a word or phrase.
- A button that, when clicked, triggers the display of Unicode character values.
- The result area will show the Unicode values of the characters entered by the user.
Project Preview
JavaScript Application To Check Unicode Character ValueUnicode Character Value - HTML & CSS Structure
This structure provides a simple web interface with an input field to enter a number and a button to check Unicode Character Value.
HTML <html> <head> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; background: linear-gradient(to right, #6a11cb, #2575fc); color: #fff; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { text-align: center; background: #ffffff1a; border-radius: 12px; padding: 20px; width: 90%; max-width: 400px; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2); } h1 { font-size: 24px; margin-bottom: 20px; } input[type="text"] { width: 80%; padding: 10px; border: none; border-radius: 6px; margin-bottom: 15px; font-size: 16px; text-align: center; } input::placeholder { color: #ccc; } button { background-color: #2575fc; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 16px; transition: background-color 0.3s ease; } button:hover { background-color: #1b5bbf; } #output { margin-top: 20px; font-size: 18px; font-weight: bold; } </style> </head> <body> <div class="container"> <h1>Unicode Character Value Finder</h1> <label for="charInput">Enter a character:</label> <input type="text" id="charInput" maxlength="2" placeholder="e.g., A or 😊"> <button id="getUnicode">Get Unicode Value</button> <p id="output"></p> </div> </body> </html> In this example
- body: Uses Flexbox to center content both vertically and horizontally, with a gradient background and no margins/padding.
- .container: A card-like box with rounded corners, padding, and a subtle shadow.
- h1: Large title with space below it.
- input: Easy-to-use text field with padding, rounded corners, and centered text.
- input::placeholder: Light gray placeholder text.
- button: Blue button with white text, rounded corners, and a hover effect for interactivity.
- output: Bold and larger font for the result, with space above it.
Unicode Character Value - JavaScript Functionality
The JavaScript function retrieves the user input as a character from an input field. It then checks if the input is empty and displays an error message if so. The function uses the codePointAt(0) method to determine the Unicode value of the character.
JavaScript document.getElementById('getUnicode').addEventListener('click', function () { const input = document.getElementById('charInput').value; if (input.length === 0) { document.getElementById('output').textContent = "Please enter a character."; return; } const Value = input.codePointAt(0); document.getElementById('output').textContent = `The Unicode value of "${input}" is: ${Value}`; }); In this example
- The function gets the user input as a character from the input field with the ID characterInput.
- It checks if the input is empty (length is 0). If empty, it displays an error message (“Please enter a character”) in the element with the ID output.
- If the input is valid, it uses input. codePointAt(0) to retrieve the Unicode value of the first character.
- The function updates the content of the element with the ID output to show the Unicode value of the entered character, in the format.
Complete Code
HTML <html> <head> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; background: linear-gradient(to right, #6a11cb, #2575fc); color: #fff; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { text-align: center; background: #ffffff1a; border-radius: 12px; padding: 20px; width: 90%; max-width: 400px; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2); } h1 { font-size: 24px; margin-bottom: 20px; } input[type="text"] { width: 80%; padding: 10px; border: none; border-radius: 6px; margin-bottom: 15px; font-size: 16px; text-align: center; } input::placeholder { color: #ccc; } button { background-color: #2575fc; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 16px; transition: background-color 0.3s ease; } button:hover { background-color: #1b5bbf; } #output { margin-top: 20px; font-size: 18px; font-weight: bold; } </style> </head> <body> <div class="container"> <h1>Unicode Character Value Finder</h1> <label for="charInput">Enter a character:</label> <input type="text" id="charInput" maxlength="100" placeholder="e.g., A or 😊"> <button id="getUnicode">Get Unicode Value</button> <p id="output"></p> </div> <script> document.getElementById('getUnicode').addEventListener('click', function () { const input = document.getElementById('charInput').value; if (input.length === 0) { document.getElementById('output').textContent = "Please enter a character."; return; } const Value = input.codePointAt(0); document.getElementById('output').textContent = `The Unicode value of "${input}" is: ${Value}`; }); </script> </body> </html>