61 lines
1.4 KiB
Markdown
61 lines
1.4 KiB
Markdown
Week 2 Day 2 – JavaScript Voting Eligibility Checker
|
||
|
||
Project Overview
|
||
|
||
This project is a simple JavaScript-based web application that checks whether a user is eligible to vote based on their age. It demonstrates the use of **JavaScript operators, conditional statements, and DOM manipulation**.
|
||
|
||
Features
|
||
|
||
* User input for age
|
||
* Real-time eligibility check
|
||
* Displays result dynamically on the webpage
|
||
* Handles invalid input
|
||
|
||
Tech Stack
|
||
|
||
* HTML5
|
||
* CSS3
|
||
* JavaScript (Vanilla JS)
|
||
|
||
|
||
How It Works
|
||
|
||
1. User enters their age in the input field
|
||
2. Clicks the **Check** button
|
||
3. JavaScript function runs:
|
||
|
||
* If age ≥ 18 → Eligible
|
||
* If age < 18 → Not eligible
|
||
* If invalid input → Error message
|
||
4. Result is displayed on the screen
|
||
|
||
Key Concepts Used
|
||
|
||
* Variables and Data Types
|
||
* Operators (`+`, `-`, `>=`, etc.)
|
||
* Conditional Statements (`if`, `else if`, `else`)
|
||
* DOM Manipulation (`getElementById`)
|
||
|
||
Output Example
|
||
|
||
* Input: 20 → ✅ You are eligible to vote
|
||
* Input: 15 → ❌ You are not eligible
|
||
* Input: -1 → ⚠️ Please enter a valid age
|
||
|
||
Future Improvements
|
||
|
||
* Add input validation (only numbers allowed)
|
||
* Add styling enhancements
|
||
* Convert into a reusable component
|
||
* Store user input using Local Storage
|
||
|
||
Learning Outcome
|
||
|
||
By completing this project, you understand:
|
||
|
||
* How JavaScript controls webpage behavior
|
||
* How to take user input and process it
|
||
* How to apply decision-making logic in real applications
|
||
|
||
|