https://github.com/rahulkrsharma2004/saveright
https://github.com/rahulkrsharma2004/saveright
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/rahulkrsharma2004/saveright
- Owner: Rahulkrsharma2004
- Created: 2024-07-03T08:36:17.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-07-08T12:24:28.000Z (11 months ago)
- Last Synced: 2025-01-17T04:10:07.361Z (4 months ago)
- Language: JavaScript
- Size: 148 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# saveright
## Project Description
This project is a simple OTP (One Time Password) validation system. It allows users to enter their phone number, receive a six-digit OTP, and validate the OTP through a user-friendly interface. The project uses HTML, CSS, JavaScript, and external libraries like Milligram for UI styling and SweetAlert for better alert dialogs.
## Folder Structure
saveright/
├── css/
│ └── styles.css
├── js/
│ └── scripts.js
├── index.html
## Images
## How to Run the Project
1. **Clone the repository**:
```bash
git clone https://github.com/Rahulkrsharma2004/saveright
```
2. **Open `index.html` in your browser**:
- You can directly open the `index.html` file in any web browser to view the project.
## Features
- **Phone Number Validation**: Ensures the entered phone number is a valid 10-digit number.
- **OTP Generation and Validation**: Generates a random six-digit OTP and validates it.
- **Responsive UI**: Ensures the UI is responsive and looks good on smaller screens.
- **Custom Alerts**: Uses SweetAlert for better alert dialogs instead of the default browser alerts.
- **Automatic Input Focus**: Automatically moves to the next OTP input field as the user types.
## Dependencies
- **Milligram**: A minimalist CSS framework for styling the UI.
- **SweetAlert**: A library for creating beautiful, responsive, customizable alert dialogs.
## Project Details
### HTML (index.html)
The main HTML file contains the structure of the phone number input screen, OTP input screen, and a welcome screen. It includes external links to the Milligram CSS framework and SweetAlert library.
### CSS (css/styles.css)
The CSS file includes styles to ensure the UI is clean and responsive. It customizes the appearance of the OTP input fields and SweetAlert buttons.
### JavaScript (js/scripts.js)
The JavaScript file handles the logic for:
- Sending the OTP.
- Validating the OTP.
- Navigating between different screens.
- Styling the SweetAlert "OK" button.