A web-based Recharge Card Generator and Manager built with HTML, CSS, JavaScript, and localStorage. This tool allows users to generate random recharge codes, save them with details, manage their status, and recharge using stored codes. The app is fully functional with search, delete, and mobile-friendly display features.
Generate Random Recharge Codes Click the Generate button to create a new recharge code for the selected network and amount. Save Card Data Save recharge cards with the following details: Network (MTN, Airtel, Glo, 9mobile) Amount Generated recharge code Status (Unused/Used) Date created Date used Display Cards in Table and Mobile View All saved cards are displayed in a table for desktop and cards for mobile, showing all details including status. Delete Cards Remove any saved card easily using the Delete button. Recharge Functionality Enter a saved recharge code in the recharge input field and click Load: If the card is unused, it will be marked as Used and the date of usage is updated. If the card is already used, an alert will notify you. If you copy an unused card’s recharge code into the recharge input, the card will automatically be marked as Used, simulating a real recharge. Search Functionality Search for cards by network name. The table dynamically updates to show only matching results. LocalStorage Support All saved card data persists in the browser's localStorage, so your cards remain even after refreshing or closing the browser.
Select a network from the dropdown. Enter the amount. Click Generate to create a random recharge code. Click Save to store the card. View saved cards in the table or mobile card view. To recharge a card: Copy the recharge code from an unused card into the Load input field. Click Load. The card status will change to Used automatically. Use the Search input to filter cards by network name. Delete any card by clicking the Delete button next to it. Technologies Used HTML5 – Structure and markup CSS3 & Bootstrap 5 – Styling and responsive layout JavaScript – Logic for generating, saving, searching, and recharging cards localStorage – Persistent data storage
Each network has a predefined prefix for its recharge codes: MTN: 311 Airtel: 312 Glo: 311 9mobile: 313 When a recharge code is used, its status changes and it cannot be reused. Copying an unused card’s code into the recharge field simulates the “recharge” and updates its status to Used. All dates are recorded in local time using JavaScript's Date object.
This project is free to use for learning and personal projects.