future-a-f/akan-naming

The **Akan Name Generator** is an interactive web application that celebrates West African naming traditions. It calculates and displays a user's traditional **Akan day name** based on their date of birth, gender, and ethnic group (Ashanti or Fanti). # Akan Name Generator ## 📖 About This Project The **Akan Name Generator** is an interactive web application that celebrates West African naming traditions. It calculates and displays a user's traditional **Akan day name** based on their date of birth, gender, and ethnic group (Ashanti or Fanti). In Akan culture, each day of the week is associated with specific given names for males and females. This practice, deeply rooted in Ghanaian heritage, reflects the day a person was born and carries cultural significance. This tool bridges traditional knowledge with modern web technology, allowing users to discover or verify their day name with a simple click. ## 📁 Project Structure & File Explanations ``` akan-name/ ├── index.html # Main HTML structure ├── css/ │ └── style.css # Styling and layout ├── js/ │ └── script.js # Core logic and data └── README.md # This file ``` ### **index.html** – The User Interface This is the entry point of the application. It contains: - A semantic HTML structure with proper accessibility attributes. - A centered card layout with a header ("🇬🇭 Akan Name Generator"). - **Three input fields:** - ` ` – Captures the user's birth date. - ` ` – Dropdown menu for gender selection (Male/Female). - ` ` – Dropdown menu for ethnic group (Ashanti or Fanti). - A `Generate Name` button that triggers the name generation logic. - A result container (` `) that displays the computed Akan name, birth weekday, and meaning. - Links to Google Fonts (Poppins) for typography and the external CSS stylesheet. ### **css/style.css** – Styling & Visual Design This stylesheet provides: - **Responsive layout** using flexbox and CSS Grid for centering content. - **Color scheme** that complements the Ghanaian theme (includes a background overlay). - **Typography** with the Poppins font family for a modern, clean appearance. - **Form styling** for inputs and selects with focus states and hover effects. - **Button styling** for the "Ge …