A modular JavaScript utility library designed for scalable, efficient web development.
npm install @lcsng/tools) or Node-compatible (require / import)
html
`
> β
When using via CDN, all exports are available under the lcsTools global object.
---
$3
`bash
npm install lcs_tools
`
Then in your code:
`js
// ESModule
import { getCurrentLocation } from 'lcs_tools';
// CommonJS
const { getCurrentLocation } = require('lcs_tools');
`
---
π Usage Examples
$3
Fetch the current browser location with graceful fallback:
`js
lcsTools.getCurrentLocation()
.then((locationText) => {
console.log('Your location:', locationText);
})
.catch((err) => {
console.warn('Location error:', err);
});
`
Returns a promise that resolves to:
`plaintext
12 Yemi Car Wash Off Freedom Way, Itedo, Lekki Phase I, Lagos State, Nigeria
`
---
π’ OTP Input Validation
Purpose:
Manages OTP (One-Time Password) inputs with seamless auto-focus and input aggregation.
Features:
- Supports digit-only input
- Automatically jumps to the next field on valid input
- Moves to the previous input field on backspace
- Aggregates all inputs into a hidden field for submission
Expected HTML Structure:
`html
`
Notes:
- The final OTP string is automatically inserted into the hidden input field.
---
π Password Visibility Toggle
Purpose:
Allows toggling of password fields between text and password, improving user experience during login or sign-up.
Features:
- Click to show/hide password
- Dynamically changes the toggle button text (Show / Hide)
Expected HTML Structure:
`html
`
Notes:
- The button label updates automatically.
- Works on dynamically added elements too.
---
π Geolocation + Reverse Geocoding
Purpose:
Fetches the user's current location, converts it to a human-readable address using OpenStreetMapβs Nominatim API, and inserts it into a specified field.
Key Features:
- Fully custom modal alert for user interaction
- Geolocation permission awareness
- Reverse geocoding to address string
- Compatible with both input fields and contentEditable elements
- Input fallback on failure
Expected HTML Structure:
`html
`
Usage Flow:
1. User clicks the button with class lcsGetCurrentLocation.
2. A custom modal appears asking for permission (if required).
3. On approval, the location is fetched and resolved to a readable address.
4. The address is inserted into the targeted input or editable field.
Permissions Handling:
- Detects if permission is already granted, denied, or needs to be asked.
- Displays custom prompts accordingly.
APIs Used:
- navigator.geolocation for coordinates
- OpenStreetMap's Nominatim Reverse Geocoding API for address resolution
Failure Scenarios:
- Geolocation unsupported
- Permission denied or dismissed
- No internet connection
- Input field target not found
Fallback:
If the address can't be fetched, the input is reset to its previous value.
---
π‘ Best Practices
- Make sure each tool is wrapped in appropriate HTML structure.
- These tools rely on event delegation, so dynamic elements are supported out of the box.
- Use minimal styling overrides to ensure visual consistency if customizing the modals.
---
π§© Integration Example
`html
`
$3
Will support file upload with:
- progress tracking
- size/format validations
- server endpoint options
Stay tuned.
---
π Project Structure
`
lcs_tools/
βββ dist/ # Bundled, obfuscated output
β βββ lt.min.js
βββ src/ # Source modules
β βββ index.js # Main export entry
β βββ location.js # Location utility
β βββ password.js # Password toggle
β βββ ...more coming
βββ webpack.config.js # Build + Obfuscation
βββ jsdoc.json # Auto documentation
βββ package.json
βββ README.md
`
---
π§βπ» Contributing
Want to add a utility or improve one?
`bash
git clone https://github.com/lcsnigeria/lcs_tools.git
cd lcs_tools
npm install
npm run build
`
All source files live in /src. Just export any new functions or classes from index.js to include them in the final build.
> β
Contributions should be modular and documented using JSDoc comments.
---
π Documentation
Auto-generated from source using JSDoc. Build with:
`bash
npm run build
`
This will generate the HTML docs in a docs/ folder (optionally host via GitHub Pages later).
---
π Versioning
Versioned using standard-version:
`bash
npm run release
``