INFORMATION & CODE

Add Tags Input Box Display

What the Code Does

The code creates a tag-management interface where users can type tags, add them by pressing Enter, remove individual tags, or remove all tags at once. The tags are also saved in the browser using localStorage, so they remain available after the page is refreshed or reopened.

How the Code Works

The HTML provides the basic structure of the application. It contains a title section with an image and “Add Tags” heading, an instruction telling the user to press Enter or use commas, an <input> field for entering tags, and a details section showing the number of tags remaining. The Remove All button allows the user to clear every tag.

The CSS controls the appearance of the application. It creates the white card-like container, rounded corners, spacing, typography, borders, shadows, tag styling, input field, and red Remove All button. The tags themselves are displayed as small rounded elements inside the input area, with an X icon beside each tag for deleting it.

The JavaScript provides the application's functionality. It first finds the important HTML elements and sets a maximum of 100 tags. It then checks localStorage for previously saved tags. If none are found, it starts with the two example tags: Oranges and Lemons.

When a tag is added, the addTag() function reads the text entered by the user, removes unnecessary spaces, and allows multiple tags to be entered by separating them with commas. Duplicate tags are ignored, and no more than 100 tags can be stored. The updated list is then saved to localStorage and displayed on the page.

The createTag() function is responsible for displaying the stored tags. For each tag, JavaScript creates an <li> element containing the tag name and an X icon. Clicking the X calls the remove() function, which removes that particular tag from the array, updates the display, and saves the new list.

The countTags() function calculates how many tags the user can still add by subtracting the current number of tags from the maximum of 100. The result is displayed in the <span> inside the details section. The input is also automatically focused when this function runs, making it convenient to continue entering tags.

The Remove All button sets the tags array to empty, removes the saved tags from localStorage, clears the displayed tags, and updates the remaining-tag counter. Because the tags are stored in localStorage, the browser remembers them without requiring a database or server.

How to Use the Code

To use the application, open the HTML page in a browser with the CSS and JavaScript files correctly linked. Click inside the input field and type a tag such as HTML, then press Enter. You can also enter several tags at once, such as HTML, CSS, JavaScript, and press Enter. Click the × beside a tag to remove it, or click Remove All to delete every saved tag.