This project was an expansion of Frontend Mentor's advice generator challenge. I adjusted the CSS styling and integrated an additional API from Unsplash that adds images alongside an advice API. The goal of this project was to develop an advice generator app that, with a simple click of a button, provides real-time advice on various topics, accompanied by visually appealing images, and leverages the capabilities of two APIs. The app aims to offer a convenient experience for users seeking guidance and inspiration.
Purpose and Goal
Web Stack
The web stack utilized to develop the advice generator app consisted of HTML, CSS, and JavaScript, complemented by the integration of two APIs. HTML formed the structural foundation of the app, and CSS enhanced the visual presentation and aesthetics of the app. JavaScript served as the primary programming language, enabling dynamic and interactive functionalities within the app. It facilitated the retrieval of advice and images from the two APIs, handling asynchronous requests and seamlessly integrating the fetched data into the app's user interface.
To provide a diverse range of advice, the Advice Slip JSON API was used. This API generates random advice on various topics. Additionally, the Unsplash API is utilized to retrieve and display images. This image retrieval API provides access to a vast collection of images, enabling the app to display visually appealing visuals alongside the advice.
By combining HTML, CSS, JavaScript, and the integration of these two APIs, the advice generator app delivered an engaging user experience, offering instant advice and visually appealing images with a click of a button.
Lessons Learned
When coding the advice generator app, several valuable lessons were learned throughout the development process. These lessons include overcoming difficulties in integrating two APIs, ensuring correct sizing for the Unsplash Image API, the importance of thoroughly reading API documentation, and the significance of responsive design and media queries.
Integrating two APIs presented its challenges, requiring careful consideration of API endpoints, request handling, and response parsing. Overcoming these difficulties involved understanding the APIs' authentication mechanisms, request formats, and response structures. Additionally, managing asynchronous requests and handling potential errors or rate limits were important aspects of integrating the APIs seamlessly into the app.
Specifically, when utilizing the Unsplash Image API, ensuring appropriate image sizing was a crucial aspect. Understanding the available parameters, such as width and height, and how to dynamically adjust them to display images correctly within the app proved to be essential. Experimentation and trial-and-error helped to find the optimal image size that both maintained visual quality and provided a responsive and consistent user experience.
One of the key takeaways was the significance of thoroughly reading and understanding API documentation. By delving into the documentation, developers gained insights into the APIs' capabilities, limitations, and best practices. This knowledge enabled them to utilize the APIs effectively, make well-informed decisions, and handle any potential issues or edge cases that arose during the development process.
Overall, developing the advice generator app provided valuable lessons on integrating APIs effectively, adjusting image sizing, thoroughly reading API documentation, and implementing responsive design principles. These lessons contribute to the growth and improvement of developers' skills, enabling them to tackle future projects with increased proficiency and efficiency.
