mohnoor94/count-your-blessings

Say Alhamdulellah

โ˜… 0Forks 0JavaScriptGitHub โ†—Compare

README

Blessing Reminder - Alhamdulillah

A spiritual Progressive Web Application (PWA) that displays random blessings in Arabic and English to encourage gratitude and mindfulness.

Features

  • ๐ŸŒŸ Random blessing display with smooth animations
  • ๐ŸŒ Bilingual support (Arabic & English) with proper RTL/LTR handling
  • ๐Ÿ“ฑ Mobile-first responsive design
  • ๐Ÿ’พ Local storage for blessing history and preferences
  • ๐Ÿ”„ PWA functionality with offline support
  • โœจ Modern UI with spiritual color palette
  • โ™ฟ Accessibility features and keyboard navigation

Project Structure

blessing-reminder-pwa/
โ”œโ”€โ”€ index.html                 # Main application entry point
โ”œโ”€โ”€ manifest.json             # PWA manifest for installation
โ”œโ”€โ”€ sw.js                     # Service worker for offline functionality
โ”œโ”€โ”€ assets/
โ”‚   โ”œโ”€โ”€ css/
โ”‚   โ”‚   โ”œโ”€โ”€ main.css          # Main styles with CSS variables
โ”‚   โ”‚   โ”œโ”€โ”€ animations.css    # Animation and transition definitions
โ”‚   โ”‚   โ””โ”€โ”€ arabic.css        # Arabic-specific typography and RTL styles
โ”‚   โ”œโ”€โ”€ js/
โ”‚   โ”‚   โ”œโ”€โ”€ app.js            # Main application logic
โ”‚   โ”‚   โ”œโ”€โ”€ blessings.js      # Blessing management and display
โ”‚   โ”‚   โ”œโ”€โ”€ storage.js        # LocalStorage management
โ”‚   โ”‚   โ””โ”€โ”€ language.js       # Language switching and RTL handling
โ”‚   โ”œโ”€โ”€ data/
โ”‚   โ”‚   โ””โ”€โ”€ blessings.json    # Comprehensive blessing database (to be created)
โ”‚   โ””โ”€โ”€ icons/                # PWA icons in various sizes (to be created)
โ””โ”€โ”€ README.md

Technology Stack

  • Frontend: Vanilla JavaScript (ES6+)
  • Styling: Custom CSS with CSS Grid and Flexbox
  • PWA: Service Worker + Web App Manifest
  • Storage: Browser LocalStorage
  • Deployment: GitHub Pages (static hosting)

Getting Started

  1. Clone or download this repository
  2. Open index.html in a modern web browser
  3. For development, serve the files using a local web server
  4. For production, deploy to GitHub Pages or any static hosting service

Development

The application is built with vanilla JavaScript and CSS for optimal performance and simplicity. No build process is required - just open the HTML file in a browser.

Key Components

  • BlessingManager: Handles blessing data and selection logic
  • StorageManager: Manages local storage for preferences and history
  • LanguageManager: Handles Arabic/English switching and RTL support
  • Main App: Coordinates all components and handles UI interactions

Browser Support

  • Modern browsers with ES6+ support
  • PWA features require HTTPS (except localhost)
  • Service Worker support for offline functionality
  • LocalStorage for data persistence

Contributing

This is a spiritual project aimed at promoting gratitude and mindfulness. Contributions are welcome, especially:

  • Additional blessings in Arabic and English
  • UI/UX improvements
  • Accessibility enhancements
  • Performance optimizations

License

See LICENSE file for details.


"And if you would count the graces of Allah, never could you be able to count them. Truly! Allah is Oft-Forgiving, Most Merciful." - Quran 16:18

Contributors

mohnoor94

Issues