https://github.com/katherinekhine/real-time-character-counter

https://github.com/katherinekhine/real-time-character-counter

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/katherinekhine/real-time-character-counter
• Owner: katherinekhine
• Created: 2024-08-21T07:46:44.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-08-21T15:03:25.000Z (4 months ago)
• Last Synced: 2024-08-22T16:25:36.074Z (4 months ago)
• Language: HTML
• Size: 2.93 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Real-time Character Counter

This project is a simple real-time character counter web application that provides immediate feedback on the number of characters typed into a text area. It displays both the total number of characters typed and the remaining characters available, with a maximum limit of 150 characters.

## Features

- Real-time Counting: As you type, the total number of characters and the remaining characters are updated in real-time.

- Responsive Design: The application is designed to be responsive and visually appealing with a background color and a shadow effect on the counter box.

- Bootstrap Integration: The project uses Bootstrap 5.3 for styling, making the layout and elements consistent and easy to modify.

## Technologies Used

- HTML5: Structure of the web page.

- CSS3: Inline styles and Bootstrap 5.3 for styling.

- JavaScript: For handling the real-time character counting functionality.

- Bootstrap 5.3: Integrated via CDN for responsive and modern design.

## File Structure

- index.html: The main HTML file containing the structure of the web page.

- index.js: The JavaScript file that handles the real-time counting logic.

- README.md: Documentation for the project.

## Setup Instructions

1. Clone the repository or download the project files.

2. Open index.html in your preferred web browser.

3. Start typing in the text area to see the real-time character counter in action.

## Usage

- Simply type your text into the provided text area.

- The total character count and the remaining character count will be displayed below the text area.

- The maximum character limit is set to 150.

## Customization

- Character Limit: You can change the maximum character limit by modifying the maxlength attribute in the `` tag inside the index.html file.

- Styling: Customize the appearance by editing the inline styles in the HTML file or by adding a separate CSS file.