├── Donation-page.png ├── History-Page.png ├── assets ├── coin.png ├── feni.png ├── logo.png ├── noakhali.png └── quota-protest.png ├── Assignment-5 FInal.fig ├── Bonus-Modal Idea.png └── readme.md /Donation-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B10A5-DOM-Quest-Build-and-Manipulate/HEAD/Donation-page.png -------------------------------------------------------------------------------- /History-Page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B10A5-DOM-Quest-Build-and-Manipulate/HEAD/History-Page.png -------------------------------------------------------------------------------- /assets/coin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B10A5-DOM-Quest-Build-and-Manipulate/HEAD/assets/coin.png -------------------------------------------------------------------------------- /assets/feni.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B10A5-DOM-Quest-Build-and-Manipulate/HEAD/assets/feni.png -------------------------------------------------------------------------------- /assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B10A5-DOM-Quest-Build-and-Manipulate/HEAD/assets/logo.png -------------------------------------------------------------------------------- /assets/noakhali.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B10A5-DOM-Quest-Build-and-Manipulate/HEAD/assets/noakhali.png -------------------------------------------------------------------------------- /Assignment-5 FInal.fig: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B10A5-DOM-Quest-Build-and-Manipulate/HEAD/Assignment-5 FInal.fig -------------------------------------------------------------------------------- /Bonus-Modal Idea.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B10A5-DOM-Quest-Build-and-Manipulate/HEAD/Bonus-Modal Idea.png -------------------------------------------------------------------------------- /assets/quota-protest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B10A5-DOM-Quest-Build-and-Manipulate/HEAD/assets/quota-protest.png -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Welcome to Assignment 5 2 | 3 | ## DONATE BANGLADESH 4 | 5 | ## Key Rule 6 | 7 | - Do not ask about mark distribution in the group, as it will not be provided. 8 | - Do not post assignment feedback after receiving it. If you encounter issues or have complaints, please join a support session for discussion. 9 | - Avoid using "lorem ipsum" text. Use relevant and meaningful content instead. 10 | - Feel free to modify the color or design, but ensure the design is visually appealing and professional. 11 | - You are **not allowed** to use any JavaScript library or framework for this assignment. 12 | 13 | ## Design 14 | 15 | - **Navbar**: Create a visually appealing navbar with the following structure: 16 | - Logo positioned in the middle. 17 | - "Blog" button on the left. 18 | - Account balance with a coin icon on the right. 19 | - "Donation" and "History" buttons in the center (as per Figma). 20 | - **Donation Cards**: Create 3 donation cards with the following details: 21 | - Image on the left. 22 | - Donation title. 23 | - Donation info. 24 | - Current donation amount. 25 | - Input field for donation amount. 26 | - Button for submitting the donation. 27 | - **History Section**: Initially hidden and empty. 28 | 29 | ## Functionalities 30 | 31 | - **Donation and History Button Functionality**: 32 | - Clicking the "History" button will hide the donation data and display the history. 33 | - Clicking the "Donation" button will hide the history and display the donation data. 34 | - **Donation Functionality for Each Card**: 35 | - When the "Donate Now" button is clicked: 36 | - The donation input will be deducted from the total account balance, and the updated balance will be shown. 37 | - The card’s current donation amount will increase. 38 | - A meaningful notification will be added to the History section. 39 | - **Input Validation**: 40 | - Show an alert if invalid data is found and stop the transaction. 41 | - Validate the donation amount: 42 | - If the donation amount is greater than the account balance. 43 | - If the input field contains an invalid number. 44 | - If the input field is empty. 45 | - **History Section**: 46 | - The history section will display transaction notifications, including: 47 | - Date and time of the transaction. 48 | - Donation amount. 49 | - Donation name. 50 | 51 | ## Challenges 52 | 53 | - **Sticky Navbar**: Make the navbar sticky to the top of the page. 54 | - **Blog Page**: Create a `blog.html` file and link it to the main page: 55 | - The blog page should contain 4 questions and their answers: 56 | 1. What is the Document Object Model (DOM)? 57 | 2. How do you select an element from the DOM? 58 | 3. What is event delegation in the context of the DOM, and why is it useful? 59 | 4. How do you manipulate an element's attributes and styles using the DOM? 60 | - **Toggle Active Status**: Toggle the active status of the "Donation" and "History" buttons: 61 | - Change the button color to indicate when it's active. 62 | - **Static Modal**: Display a static modal instead of an alert on a successful donation. 63 | - **Reusable Functions**: Use at least 2 common functions. 64 | - **Responsive Design**: Ensure the application is responsive for different screen sizes. 65 | --------------------------------------------------------------------------------