⭐ JavaScript Array Iteration | Change the Ref Events Page

⭐ Created by Skyler Futrell

👀 View on GitHub Pages: https://skylerfutrell.github.io/js-array-iteration/

📌 Project Overview: This project is a simple interactive events webpage, showcasing a dynamically generated list of upcoming events. The page features a typewriter effect for engaging text animations, smooth scroll-based animations for a visually appealing experience, and dynamic event rendering powered by JavaScript. Users can explore key event details, including dates, locations, and descriptions, with links to external resources for further engagement. The webpage is designed to be both aesthetically compelling and user-friendly.

🚀 Features:

✅ Dynamic Typewriter Effect: Engages users with smooth animated text.

✅ Interactive Event List: Displays upcoming events dynamically from an array.

✅ Smooth Animations: Fade-in effects and hover highlights for a modern feel.

✅ Optimized for GitHub Pages: No additional setup required.

📂 Files:

1. index.html
   • Contains the structure of the webpage, including the main content sections, headings, and placeholders for dynamically inserted elements such as event listings and images. It also links to external stylesheets and scripts for styling and interactivity.
2. styles.css
   • Defines the styling for the webpage, including layout design, typography, colors, animations, and responsive adjustments to ensure a visually appealing and accessible user experience across different screen sizes. It also includes styles for dynamic elements such as fade-in effects and hover interactions.
3. script.js
   • Manages the interactive functionality of the webpage, including the typewriter effect for text animation, dynamic population of event data, image and button content insertion, hover effects, and smooth fade-in animations on scroll. It also enhances user engagement by handling event listeners and applying visual highlights to elements.

🏁 Getting Started:

Prerequisites:
- A modern web browser.
- A local or online server to host the files (optional for testing).

Installation:
- Download or clone the repository to your local machine.
- Ensure the following files are present in the project directory:
  - index.html
  - styles.css
  - script.js

📖 Usage:

• Clone the repository.
• Open index.html in a web browser.

⚒️ Technologies Used:

✅ HTML5: Markup for the structure of the webpage.

✅ CSS3: Styling, layout, and animations.

✅ JavaScript (ES6+): Interactivity and dynamic event handling.

📝 What I Learned:

🧠 Implementing an animated typewriter effect dynamically.

🧠 Creating a dynamic events page using JavaScript arrays.

🧠 Enhancing UX with hover effects and transitions.

🎯 Future Improvements:

🚀 Convert event data into a JSON file for easier updates.

🚀 Add a dark mode toggle for better accessibility.

🚀 Enhance SEO metadata for better discoverability.

🎨 Customization:

• To modify the structure of the webpage by adding or removing elements, such as new sections or buttons, edit the index.html file.
• To adjust colors, fonts, and animations to match your desired aesthetic, and to update .fade-in, .highlight, or other classes for styling tweaks, edit the styles.css file.
• To edit the eventArray to update the list of events or change interactive effects like the typewriter animation and hover highlights, edit the script.js file.

License:

This project is open-source and available under the MIT License. LICENSE

📢 Acknowledgments:

Thank you to the Oliver family for allowing me to use the image of Manuel creating art in honor of Joaquin. #vivaguac

🔗 Connect With Me:

Visit My Website