Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/karl-horning/word-count-textarea
A simple web application to count the number of words in a textarea, built using HTML, Bootstrap (for the example front end), and JavaScript.
https://github.com/karl-horning/word-count-textarea
bootstrap frontend javascript
Last synced: 1 day ago
JSON representation
A simple web application to count the number of words in a textarea, built using HTML, Bootstrap (for the example front end), and JavaScript.
- Host: GitHub
- URL: https://github.com/karl-horning/word-count-textarea
- Owner: Karl-Horning
- License: mit
- Created: 2024-01-31T22:47:18.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-01T09:02:46.000Z (about 1 year ago)
- Last Synced: 2024-12-30T17:16:50.540Z (about 2 months ago)
- Topics: bootstrap, frontend, javascript
- Language: JavaScript
- Homepage:
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Word Count Textarea
A simple web application to count the number of words in a textarea, built using HTML, Bootstrap (for the example front end), and JavaScript.
## Table of Contents
- [Overview](#overview)
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Integration Steps](#integration-steps)
- [How to Use](#how-to-use)
- [Contributing](#contributing)
- [Acknowledgments](#acknowledgments)
- [License](#license)
- [Author](#author)
## Overview
This project provides a straightforward way to count the number of words in a given text entered into a textarea. It's a lightweight and easy-to-use tool for users who need a quick word count without the need for complex features.
## Features
- Dynamic word count update as you type.
- Clean and normalize input text for accurate word counting.
- Utilizes Bootstrap for a responsive and visually appealing design.
## Installation
To get started with the Word Count project, simply clone the repository and open the `index.html` file in a web browser.
```bash
git clone https://github.com/Karl-Horning/word-count-textarea.git
cd word-count-textarea
```
## Usage
1. Open the `index.html` file in a web browser.
2. Enter text in the textarea.
3. The word count will be displayed dynamically.
To use the `wordCounter.js` in a different project, follow these steps:
### Integration Steps:
1. **Include Bootstrap:**
- Ensure that Bootstrap is included in your project as the wordCounter.js uses Bootstrap's text-danger and text-success for styling. You can either link to the Bootstrap CDN in your HTML file or install it via a package manager.
```html
```
2. **Copy `wordCounter.js`:**
- Copy the `wordCounter.js` file into your project's JavaScript folder or any desired location.
3. **Link `wordCounter.js` in HTML:**
- Link the `wordCounter.js` file in your HTML file, making sure to use the correct path.
```html
```
4. **Create HTML Structure:**
- Ensure you have an HTML structure with a textarea and an element to display the word count. The necessary elements should have specific IDs used in the `wordCounter.js` script.
```html
Word Count:
0
```
### How to Use:
Now, you can use the `updateWordCount` function in your project to dynamically update the word count based on user input. Here's how you can use it:
```html
// Add an event listener to the window's load event
window.addEventListener("load", () => {
const textareaId = "wordCountTextarea";
const wordCountElementId = "wordCountNumber";
// Add input event listener to update word count
document.getElementById(textareaId).addEventListener("input", () => {
updateWordCount(textareaId, wordCountElementId);
});
});
```
With these steps, you can easily integrate the `wordCounter.js` into your project, providing a simple and effective way to count words in a textarea.
## Contributing
Contributions are welcome! Please follow these guidelines:
1. Fork the repository.
2. Create a new branch for your feature: `git checkout -b feature-name`.
3. Make your changes and commit them: `git commit -m 'Add feature'`.
4. Push to the branch: `git push origin feature-name`.
5. Submit a pull request.
## Acknowledgments
- [Bootstrap](https://getbootstrap.com) - Front-end framework used for styling.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Author
**Karl Horning:**
- [GitHub](https://github.com/Karl-Horning/)
- [LinkedIn](https://www.linkedin.com/in/karl-horning/)
- [CodePen](https://codepen.io/karlhorning)