This week I had my first experience to write a complete web project on my own as a new software student. I tried to design a app to allow users to search for the imgaes of their choice by using the search query. Here, I want to describe the concepts used in this project to satisfy the project requirements and for the personal records. In this post, I will focus on the javacript function and API method I leanred during this process.
The API method is the first difficulties I faced and I learned so much about API. API stands for application programming interfaces, allow different software systems to communicate with each other. They expose certain functionalities of an application, which can be accessed by other programs.During my coding experiences in the past months, I used Spoonacular and Pexels as my API sources. Pexels and Spoonacular is a free stock photo and video website, and their API allows us to access their database of food images. We sent a request to their API, and in response, we received a JSON object that contained data about the food images, such as the image URL and photographer name. For the API, I practiced how to use fetch method to retrive data from public APIs, which is the main way I retrived data from public servers.
Meanwhile, I leanred how to combine fetch method with javascript functions. Functions are a fundamental concept in JavaScript and are used to define reusable pieces of code that perform a specific task. In the project, I try to use several functions to fetch and display the images. For example, I utilized a function to sends a request to the API and receives a response containing data about the food images. It then maps over the array of photos returned by the API and creates a new array of objects, with each object containing the photo ID, URL, and photographer name. The Javascript function here can posses the capabilities to read, pass, and display data by communicating with both front and back end servers.
Finally, let's talk about the concept of event listeners. Event listeners are used to detect and respond to user interactions with the web page, such as clicking a button or entering text in an input field. Event listeners to detect when the user clicks a cuisine tab, enters a search query, clicks the randomize button, or clicks the clear button. When a user interacts with the page, the corresponding event listener calls the appropriate function to perform the necessary action, such as fetching new images, filtering the images, or displaying a random image in my project.
Overall, the first project I did was a great opportunity to work with APIs, functions, and event listeners in JavaScript. It's exciting to see how these concepts can be combined to create a useful and interactive web application.
Top comments (0)