Project
Title
Star Wars
Subtitle
Exploring a Galaxy Far, Far Away
The challenge section
The challenge
The goal of this college project was to create an interactive website utilizing the Star Wars API (SWAPI) to offer users a comprehensive guide to characters and movies from the Star Wars universe. Key objectives included dynamically populating character and movie information, implementing responsive design principles, and integrating GreenSock (GSAP) animations for enhanced user interaction and engagement.
Image of Zima Bottles
Solution and process section
Solution
Our solution involved utilizing AJAX requests to fetch character and movie data from the SWAPI, dynamically populating the website's content. Each character's name served as a clickable link, initiating separate AJAX calls to retrieve movie details such as title and opening crawl. Additionally, movie posters were sourced locally from the images folder rather than directly from the SWAPI. GSAP animations were integrated into the characters section, offering dynamic and visually captivating transitions. Furthermore, the website was meticulously designed to be responsive, ensuring an optimal viewing experience across various devices.
Process
The project began with thorough research into the SWAPI documentation, defining project goals. Front-end development followed, creating a responsive website with HTML, SCSS, and JavaScript. AJAX integration was crucial for fetching character and movie data from SWAPI, ensuring smooth handling of requests. Characters were dynamically added to a clickable list, triggering AJAX calls to display movie details. GSAP animations enhanced the characters section, improving user engagement.
Image of the Project
Project's Image
Details Section
Year
2024
Team
Marianne Febra
Patricia Martins
Deliverables
Website
Roll
Front-End Developer
Skills
HTML5
CSS3
JavaScript
GSAP