Unicode Character Value Finder App Using TypeScript

Last Updated : 04 Feb, 2025

The Unicode Character Value Finder Project in TypeScript aims to develop a tool that allows users to easily find the Unicode value of any given character. This system helps in understanding and working with special characters, ensuring accuracy in encoding, and improving text processing tasks.

What We Are Going to Create

We’ll build an application that allows users to

Enter a character in an input field.
Find the Unicode value of the entered character.
Display the Unicode value dynamically as the user types.
Provide visual feedback for the entered character's Unicode value.

Project Preview

Unicode-value-7 — Unicode Character Value Finder using TypeScript

Unicode Character Value Finder - HTML and CSS Setup

This HTML code creates a simple Unicode Character Value Finder. It allows users to enter a character and displays its Unicode value. This CSS code provides styling for the Unicode Character Value Finder, ensuring a clean, centred design with modern touches like padding, rounded corners, and shadow effects.

<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            text-align: center;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        h1 {
            font-size: 24px;
            color: #333;
        }
        input {
            width: 80%;
            padding: 8px;
            font-size: 16px;
            margin-top: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            margin-top: 15px;
            padding: 10px 20px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        .result p {
            margin-top: 20px;
            font-size: 18px;
            color: #555;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Unicode Character Value Finder</h1>
        <label for="char">Enter a Character:</label>
        <input type="text" id="char" maxlength="1" placeholder="A" />
        <button id="getUnicode">Get Unicode</button>
        <div class="result">
            <p id="unicodeValue">Unicode:</p>
        </div>
    </div>
</body>
</html>

In this example

The input field allows character entry with a placeholder.
The result display shows the Unicode value dynamically.
The button triggers the logic to find the Unicode value.
CSS centers the form, adds padding, rounded corners, and a shadow.
Styles the input and button with padding, hover effects, and a user-friendly appearance.

Task Management App - Typescript Logic

This TypeScript code handles the task management logic for the app. It allows users to add, edit, and delete tasks, as well as mark tasks as completed. The code ensures that the task list is dynamically updated, providing a seamless and interactive user experience.

function val(char: string): string {
    if (char.length !== 1) {
        return "Please enter a single character.";
    }
    return `Unicode: U+${char.charCodeAt(0).toString(16).toUpperCase()}`;
}

const inp = document.getElementById("char") as HTMLInputElement;
const display = document.getElementById("unicodeValue") as HTMLParagraphElement;
const btn = document.getElementById("getUnicode") as HTMLButtonElement;

btn.addEventListener("click", () => {
    const char = inp.value;
    const unicode = val(char);
    display.textContent = unicode;
});

In this example

This TypeScript code handles the core task management logic for the app.
It allows users to add, edit, and delete tasks.
Users can also mark tasks as completed.
The code ensures the task list is dynamically updated, offering a smooth and interactive experience.

Convert to JavaScript File

Now You need to convert the TypeScript file into JavaScript to render by browser. Use one of the following command-

npx tsc task.ts
tsc task.ts

The command tsc task.ts compiles the calculator.ts TypeScript file into a task.js JavaScript file.
It places the output in the same directory as the input file by default.

Complete Code

<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            text-align: center;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        h1 {
            font-size: 24px;
            color: #333;
        }
        input {
            width: 80%;
            padding: 8px;
            font-size: 16px;
            margin-top: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            margin-top: 15px;
            padding: 10px 20px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        .result p {
            margin-top: 20px;
            font-size: 18px;
            color: #555;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Unicode Character Value Finder</h1>
        <label for="char">Enter a Character:</label>
        <input type="text" id="char" maxlength="1" placeholder="A" />
        <button id="getUnicode">Get Unicode</button>
        <div class="result">
            <p id="unicodeValue">Unicode:</p>
        </div>
    </div>
    <script>
        function val(char) {
            if (char.length !== 1) {
                return "Please enter a single character.";
            }
            return "Unicode: U+".concat(char.charCodeAt(0).toString(16).toUpperCase());
        }
        var inp = document.getElementById("char");
        var display = document.getElementById("unicodeValue");
        var btn = document.getElementById("getUnicode");
        btn.addEventListener("click", function () {
            var char = inp.value;
            var unicode = val(char);
            display.textContent = unicode;
        });
    </script>
</body>
</html>