diff --git a/README.md b/README.md index c731396..7a8038d 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,4 @@ +Here's a more streamlined and professional README for your Photo Fliper project, focusing on the core features and implementation without unnecessary sections like the problem statement or project scope. --- @@ -5,92 +6,52 @@ ## Project Overview -This Photo gallery-based project is a web-based image viewer that displays a series of images with accompanying links and music references. The project aims to create a visually appealing and functional image interface using HTML and CSS. Users can navigate through images and access additional resources linked to each image. +Photo Fliper is a web-based image viewer designed to showcase a gallery of images with accompanying links and music references. The project utilizes HTML, CSS, and JavaScript to create a visually appealing and interactive interface. Users can easily navigate through images, access linked resources, and provide feedback through an integrated feedback form. -## Problem Statement +## Features -Keeping physical photo albums can be problematic due to issues such as photos being removed, borrowed, or deteriorating over time. This project provides a digital solution to showcase images in a consistent and accessible format. - -## Project Scope - -- **Create a page structure** for an image user interface using standard HTML elements. -- **Ensure consistent image sizes** and centering for a uniform look and feel. -- **Link images** to external web pages and additional resources. -- **Embed CSS** directly into the HTML for styling. -- **Implement a comment section** for user interactions. -- **Add hide and unhide buttons** to manage the visibility of comments. - -## Tasks - -1. **HTML Structure**: - - Embed CSS within the HTML page. - - Create a header section with comments for future implementation. - - Create a footer with placeholder links for social media. - - Create a main section with a list of images and links. - - Use `
` and `
` elements for images. - - Add required and optional attributes to image tags. - - Center images horizontally on the page. - - Implement a comment section below the images. - - Add buttons to hide and unhide the comment section. - -2. **JavaScript Functionality**: - - Implement image navigation with "Previous" and "Next" buttons. - - Add functionality to link images to external webpages and music resources. - - Ensure JavaScript correctly updates images and links based on user interactions. - - Manage the hide and unhide functionality for the comment section. - -3. **CSS Styling**: - - Ensure images have consistent dimensions using CSS. - - Center images on the page using CSS properties. - - Style buttons for navigation and external links. - - Style the comment section and the grayish line separating it from the buttons. - -4. **User Interface (UI)**: - - Create a home page linking to separate image pages (Image 2 and Image 3). - - Implement links to navigate between the home page and image pages. - - Ensure all links and image attributes are properly set. +- **Image Gallery**: Display a series of images with links to external web pages and music resources. +- **Navigation Controls**: "Previous" and "Next" buttons for seamless image navigation. +- **Comment Section**: Users can leave comments on images, with the option to hide or unhide the section. +- **Feedback Form**: Users can submit feedback through a dedicated form, enhancing user engagement. +- **Responsive Design**: Ensures a consistent experience across devices. ## Implementation Details -### HTML +### HTML Structure -- **Header Section**: Includes a title and placeholder comments for future functionality. -- **Main Section**: Contains images with links and music references, along with a comment section. +- **Header**: Contains the title and navigation links. +- **Main Section**: Displays images, music references, and a comment section. - **Footer**: Placeholder for social media links. -### CSS - -- **Embedded CSS**: Styles for consistent image size, centering, button appearance, and comment section. -- **Image Styling**: Enforced dimensions for a uniform look. - -### JavaScript +### CSS Styling -- **Image Array**: Contains objects with `src`, `link`, `alt`, and `music` attributes for each image. -- **Event Listeners**: Added to "Previous" and "Next" buttons for image navigation and to hide/unhide the comment section. -- **Functionality**: Updates the main image and its associated links based on user input and manages the comment visibility. +- Embedded CSS is used for styling the gallery, ensuring consistent image sizes and centering. +- Buttons are styled for a cohesive look and feel. -### Navigation +### JavaScript Functionality -- **Home Page**: Links to Image 2 and Image 3 pages. -- **Image Pages**: Each image page links back to the home page. +- An array of image objects contains attributes such as `src`, `link`, `alt`, and `music`. +- Event listeners are implemented for navigation buttons and the feedback form. +- The script manages image updates, link interactions, and comment visibility. ## Future Enhancements -- **Advanced Comments**: Use JSDoc or similar documentation to describe JavaScript functions. -- **Improved Navigation**: Enhance page transitions and user experience. -- **Additional Features**: Implement more interactive elements or multimedia content. +- **Advanced Comment Features**: Improve user interaction and feedback collection. +- **Enhanced Navigation**: Refine page transitions and overall user experience. +- **Additional Multimedia Elements**: Incorporate more dynamic content and interactive features. ## Dependencies - **HTML5**: For page structure and semantics. -- **CSS3**: For styling and layout. -- **JavaScript**: For dynamic functionality and interactions. +- **CSS3**: For layout and styling. +- **JavaScript**: For dynamic interactions and functionality. ## Status -- **HTML**: Completed with embedded CSS, header, footer, main section, comment section, and hide/unhide buttons. -- **CSS**: Applied for image sizing, centering, button styling, and comment section. -- **JavaScript**: Implemented for image navigation, link updates, and comment management. +- HTML and CSS are fully implemented with an interactive JavaScript layer for functionality. +- The project is complete and ready for further enhancements. --- +Feel free to adjust any sections or add specific details to better fit your project's current state! \ No newline at end of file diff --git a/index.html b/index.html index 3491ed5..200a853 100644 --- a/index.html +++ b/index.html @@ -4,15 +4,7 @@ Photo Flip - - - - - - - - - + @@ -22,6 +14,25 @@

Antonio Archer's Pirate Seafinder for Pics of the 7 Seas

Explore easter eggs! Click the symphony button to enjoy a new song for every image.

+
+ + +
@@ -61,6 +72,31 @@

Comment Section

+
+
+

User Preferences

+
+ + + + + + + + + + +
+

+
+
+

If you like this image, make sure to share it!

@@ -68,5 +104,7 @@

Comment Section

+ + diff --git a/script.js b/script.js index f5940d6..462e086 100644 --- a/script.js +++ b/script.js @@ -59,6 +59,9 @@ const likeButton = document.getElementById("likeButton"); const dislikeButton = document.getElementById("dislikeButton"); const likeCounter = document.getElementById("likeCount") || document.createElement('div'); // Fallback if not found const dislikeCounter = document.getElementById("dislikeCount") || document.createElement('div'); // Fallback if not found +const feedbackButton = document.getElementById("feedbackButton") + + // Set up the music button click event musicButton.onclick = function() { @@ -252,7 +255,7 @@ function updateLikeDislikeUI() { // Share button event listener document.getElementById('shareButton').addEventListener('click', function() { - const currentImageLink = images[currentIndex].link; // Update to use the current image link + const currentImageLink = images[currentIndex].src; // Update to use the current image link const shareText = `Check out this image: ${currentImageLink}`; if (navigator.share) { @@ -270,6 +273,75 @@ document.getElementById('shareButton').addEventListener('click', function() { } }); +// Function to handle form submission +document.getElementById('userForm').addEventListener('submit', function(event) { + event.preventDefault(); // Prevent the default form submission + + const name = document.getElementById('name').value; + const email = document.getElementById('email').value; + const selectedTheme = document.getElementById('themeDropdown').value; + + // Validate that a theme has been selected + if (selectedTheme) { + // Store user preferences in local storage + localStorage.setItem('userName', name); + localStorage.setItem('userEmail', email); + localStorage.setItem('userTheme', selectedTheme); + + // Display a response message + document.getElementById('formResponse').textContent = `Thank you, ${name}! Your preferences have been saved.`; + + // Optionally, you can apply the selected theme immediately + applyTheme(selectedTheme); + } else { + document.getElementById('formResponse').textContent = 'Please select a theme.'; + } + + // Clear the form inputs + document.getElementById('userForm').reset(); +}); + +// Function to apply the selected theme +function applyTheme(theme) { + document.body.classList.remove('light', 'dark', 'colorful'); // Remove existing theme classes + document.body.classList.add(theme); // Add the selected theme class +} + +// Check for saved user preferences on load +window.onload = function() { + const savedTheme = localStorage.getItem('userTheme'); + if (savedTheme) { + applyTheme(savedTheme); + } +}; + +// Show feedback form when the feedback button is clicked +document.getElementById('feedbackButton').addEventListener('click', function() { + const feedbackFormSection = document.getElementById('feedbackFormSection'); + feedbackFormSection.style.display = feedbackFormSection.style.display === 'none' ? 'block' : 'none'; +}); + +// Function to handle feedback form submission +document.getElementById('feedbackForm').addEventListener('submit', function(event) { + event.preventDefault(); // Prevent the default form submission + + const feedbackText = document.getElementById('feedback').value; + const feedbackName = document.getElementById('feedbackName').value; + const feedbackEmail = document.getElementById('feedbackEmail').value; + + // You can handle feedback submission logic here (e.g., send to server or store locally) + + // Display a response message + document.getElementById('feedbackResponse').textContent = `Thank you for your feedback, ${feedbackName || 'Guest'}!`; + + // Optionally, save feedback to local storage (you can modify this as needed) + localStorage.setItem('userFeedback', JSON.stringify({ feedbackText, feedbackName, feedbackEmail })); + + // Clear the form inputs + document.getElementById('feedbackForm').reset(); +}); + + // Initial image setup updateImage(); populateHiddenImagesDropdown(); // Populate dropdown on startup diff --git a/styles.css b/styles.css index 994794f..387c7e4 100644 --- a/styles.css +++ b/styles.css @@ -8,8 +8,9 @@ --button-active-like: green; /* Like Button Active Color */ --button-active-dislike: red; /* Dislike Button Active Color */ --button-gray: gray; /* Gray Buttons Background */ - --text-color: #333; /* General Text Color */ + --text-color: White; /* General Text Color */ --white: #ffffff; /* White Color */ + } /* General Styles */