Open In App

JavaScript Application - Get Unicode Character Value

Last Updated : 06 Jan, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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

Unicode
JavaScript Application To Check Unicode Character Value

Unicode 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>

Next Article
Print ASCII Value of a Character in JavaScript

T
tanmxcwi
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox