https://github.com/ahmed-maher77/smart-date-calculator
A modern date calculator that computes future/past dates with weekend exclusion. Built with React, this responsive web app offers precise date calculations with an intuitive interface and accessibility-focused design.
https://github.com/ahmed-maher77/smart-date-calculator
context-api css-modules date-calculator react reactjs responsive-design vitejs
Last synced: 2 months ago
JSON representation
A modern date calculator that computes future/past dates with weekend exclusion. Built with React, this responsive web app offers precise date calculations with an intuitive interface and accessibility-focused design.
- Host: GitHub
- URL: https://github.com/ahmed-maher77/smart-date-calculator
- Owner: Ahmed-Maher77
- License: mit
- Created: 2025-04-09T19:59:35.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-09T22:27:15.000Z (about 1 year ago)
- Last Synced: 2025-04-10T00:39:47.618Z (about 1 year ago)
- Topics: context-api, css-modules, date-calculator, react, reactjs, responsive-design, vitejs
- Language: JavaScript
- Homepage: https://smart-date-calculator.netlify.app/
- Size: 34.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Smart Date Calculator 📅 [](https://reactjs.org)
A sophisticated date calculator that enables users to:
- Calculate dates ±100 days from today
- Exclude weekends from calculations
- View results in natural language format
- Access via keyboard navigation
- Reset calculations instantly
## 🌐 **Demo (Live Preview):**
👉 **Live Preview:** https://smart-date-calculator.netlify.app/
## 💻 Used Technologies
- **React.js** → Component-based library for building dynamic UIs.
- **CSS Modules** → Scoped, maintainable styling at the component level.
- **HTML5 Semantic Markup** → Provides accessible and well-structured content.
- **Vite** → Fast build tool and development server for modern React apps.
## 🎥 **Demo Video:**
📹 **Watch Video on LinkedIn:** __coming soon__
## ✨Key Features:
- 🔄 Bidirectional date calculation
- 🚫 Weekend exclusion toggle
- ♿ WCAG-compliant accessibility
- 📱 Mobile-responsive design
- ⚡ Instant result updates
## 👀 Website Preview:
## 🎯 Usage
1. **Select Days**: Use the range slider or number input to choose days (-100 to +100)
2. **Toggle Weekends**: Check "Exclude weekends" to skip Saturday and Sunday
3. **View Results**: See the calculated date in natural language format
4. **Reset**: Click "Reset" to return to today's date
### Keyboard Shortcuts
- **Arrow Keys**: Navigate day values (↑/→ increase, ↓/← decrease)
- **Tab**: Navigate between controls
- **Enter/Space**: Activate buttons
- **Escape**: Close focused elements
## 📤 Installation
```bash
npm install
npm run dev
```
## 📬 Contact & Contribution
- 🧑💻 **Portfolio:** https://ahmedmaher-portfolio.vercel.app/
- 🔗 **LinkedIn:** https://www.linkedin.com/in/ahmed-maher-algohary
- 📧 **Email:** ahmedmaher.dev1@gmail.com
> Contributions, suggestions, and bug reports are welcome. Feel free to open issues or pull requests.
---
## ⭐ Support
If you found this project helpful or inspiring, please consider giving it a ⭐. Your support helps me grow and share more open-source projects like this!