Digital Picture Book Project

Overview

This project aims to create a digital picture book to address issues with traditional picture books, such as deterioration, limited sharing capabilities, and potential loss of photos. The application has been enhanced based on user feedback to improve sharing, liking, and image management features.

Features

• Web-based image user interface
• Multiple pages with navigation
• Creative Commons licensed images
• Like, dislike, hide, and share functionality for images
• User feedback form
• Responsive design
• Accessibility considerations

Problem Statement

47% of our user base expressed frustration with the application's limitations in sharing, liking, and hiding images. Users want the ability to hide unwanted images and share with friends and family.

Project Scope

• Enhance existing features with JavaScript and icons
• Implement like, dislike, hide, and share functionality for images
• Add a comment form for user feedback
• Use JavaScript to build a form dropdown menu on page load

User Interface (UI)

• Home page
• Image 2 Page (linked from Home, links back to Home)
• Image 3 Page (linked from Home, links back to Home)
• Feedback form
• Interactive buttons for each image

Technical Implementation

• HTML5 (<figure>, <figcaption>, semantic elements)
• CSS3 (responsive design, centered images)
• JavaScript (form creation, user interactions)
• Creative Commons licensing for images

Deliverables

• Implemented feedback form with JavaScript-created dropdown
• Like, dislike, and share buttons with user event handling
• Updated README.md reflecting the latest version
• Commented code for readability
• GitHub Projects stories and related issues/tasks

Usage

1. Navigate through the digital picture book using the provided links.
2. Interact with images using like, dislike, hide, and share buttons.
3. Provide feedback using the comment form.

Project Tasks

1. Embed CSS into HTML pages.
2. Create HTML structure with semantic elements.
3. Implement footer with social media links.
4. Create main section for project list and images.
5. Add required and optional attributes to image tags.
6. Center images and ensure consistent sizing.
7. Implement JavaScript for form creation and user interactions.
8. Add meaningful id and class attribute names.
9. Comment code thoroughly.
10. Create GitHub Projects stories and issues.

Future Enhancements

• Further improve sharing capabilities.
• Implement user accounts for personalized experiences.
• Enhance mobile responsiveness.

Contributing

Feedback and contributions are welcome. Please use the provided feedback form or submit issues on GitHub to help improve the project.

License

This project uses Creative Commons licensed images. Please refer to individual image credits for specific license details.