This web application utilizes modern web development techniques to create an efficient infinite scroll feature, allowing users to easily load a continuous stream of high-quality images from the Unsplash API. Using the Fetch API and asynchronous JavaScript functions like async/await, images are dynamically retrieved and displayed, while a Scroll Event Listener detects when the user reaches the bottom of the page. To enhance the user experience for those with slower internet connections, the app implements adaptive loading techniques.
- Live Site URL: Netlify
Tech used: HTML, CSS, JavaScript
This project uses HTML, CSS, and JavaScript to create a simple but effective infinite scroll feature. The Unsplash API is used to dynamically retrieve and display images, while the Fetch API and asynchronous JavaScript functions like async/await are used to handle the data retrieval process. A Scroll Event Listener is used to detect when the user has reached the bottom of the page and trigger the loading of additional images.
In the future, I plan to convert this project to a React app, providing significant performance and maintenance benefits. Furthermore, I aim to enhance the design using Tailwind CSS for greater customization and consistency. Additionally, to further improve the user experience, I plan to optimize image sizes to reduce loading times.
This project provided me with valuable experience in working with asynchronous JavaScript functions like async/await, as well as handling data retrieval and manipulation using the Fetch API. Additionally, I gained proficiency in using the DOM and Scroll Event Listener to implement interactive features.
- Quote-Generator: GitHub Repository
- Huddle Landing Page: GitHub Repository