updated to include user feedback form

and seeds are planted for user profiles and themes

README.md

@@ -1,96 +1,57 @@
+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.
 
 ---
 
 # Photo Fliper
 
 ## 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 `<figure>` and `<figcaption>` 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!

index.html

@@ -4,15 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Photo Flip</title>
-    <link href="styles.css" rel="stylesheet" type="text/css" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-    <link rel="manifest" href="/site.webmanifest">
-    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
-    <meta name="msapplication-TileColor" content="#da532c">
-    <meta name="theme-color" content="#ffffff">
-    <script defer src="script.js"></script>
+    <link rel="stylesheet" href="styles.css">
 </head>
 
 <body>
@@ -22,6 +14,25 @@
                 <h1>Antonio Archer's Pirate Seafinder for Pics of the 7 Seas</h1>
                 <p>Explore easter eggs! Click the symphony button to enjoy a new song for every image.</p>
             </header>
+            <section>
+                <button id="feedbackButton">Give Feedback</button>
+                <div id="feedbackFormSection" class="feedback-form-section" style="display: none;">
+                    <h2>Feedback Form</h2>
+                    <form id="feedbackForm">
+                        <label for="feedback">Your Feedback:</label>
+                        <textarea id="feedback" rows="4" required></textarea>
+
+                        <label for="feedbackName">Your Name:</label>
+                        <input type="text" id="feedbackName">
+
+                        <label for="feedbackEmail">Your Email:</label>
+                        <input type="email" id="feedbackEmail">
+
+                        <button type="submit">Submit Feedback</button>
+                    </form>
+                    <p id="feedbackResponse"></p>
+                </div>
+            </section>
             <hr>
 
             <main class="grid-container">
@@ -61,12 +72,39 @@ <h2>Comment Section</h2>
         <textarea id="comment-text-area" placeholder="Leave any comments here"></textarea>
         <button id="comment-button">Enter</button>
     </div>
+    <center>
+    <div id="userFormSection" class="user-form-section">
+        <h2>User Preferences</h2>
+        <form id="userForm">
+            <label for="name">Name:</label>
+            <input type="text" id="name" required>
+
+            <label for="email">Email:</label>
+            <input type="email" id="email" required>
+
+            <label for="themeDropdown">Select Theme:</label>
+            <select id="themeDropdown" required>
+                <option value="">-- Select a Theme --</option>
+                <option value="light">Light Theme</option>
+                <option value="dark">Dark Theme</option>
+                <option value="colorful">Colorful Theme</option>
+                <!-- Add more options as needed -->
+            </select>
+
+            <button type="submit">Submit</button>
+        </form>
+        <p id="formResponse"></p>
+    </div>
+</center>
+
 
     <footer>
         <p>If you like this image, make sure to share it!</p>
         <button id="shareButton">Share</button>
     </footer>
 
     <script defer src="script.js"></script>
+    <script defer src="dropdown.js"></script>
+
 </body>
 </html>

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

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 */