My name is Minh Tran, and I am an FC Associate at the Amazon warehouse. I am also an immigrant, so I did not have any plans for my future until I found out about the Amazon career choice program. Amazon career choice is a great program because it helps Amazon associates to find out and build their careers for the future. Software development is among many courses we can pick from the program. I chose Flatiron School because of its very flexible schedule. I am a full-time worker; therefore,I am not able to join the class in real-time, but the school allows me to learn by watching lectures and recording videos. Moreover, it is so easy to seek help from lecturers and classmates via work lab, pizza and Slack.
After two months of this course, now time to build my first project. I was very worried because I did not know where to begin to build my project. Luckily, instructors helped us step-by-step to figure out how to build this project.
My project app is not a Coffee Shop app that allows users to pick their coffee and make an order. My app is a very simple app that represents a Coffee collection. Users can also contribute to the app by adding their favorite coffee or any other kind of coffee that does not exist in the app. To add new coffee, users only need to input the Name, image copy link, ingredient description and price. For the price, users do not have to provide an exact price. The purpose of this collection app is to convey to users a big picture of the coffee world.
To build the app, I was using HTML, CSS and Javascript. After a couple of hours of searching, I found a Coffee API which provides a random image of coffee. I used these images to build a basic object which includes name, ingredient, image, and price and put them in a file which is named db.json. Then I create HTML, CSS, and js files.
In the HTML file, I create a form to input coffee details and a container to display them. We will use JavaScript to handle the form submission and add it to the container.
we also have an unordered list with the id which we will use JS to add cards element which will contain details of coffees.
Next, we create a CSS file which is typically used in web development to add styling and visual design to HTML documents. We will CSS to create the layout, color, font, size of the text and the appearance of the button. For the main body, I chose an aligned center.
Here's one of block codes from the CSS file :
This CSS code defines the visual appearance of various elements in the Coffee Collection app, such as the font, size, color, and spacing of the text and buttons. You can link this CSS file to your HTML file using a <link> tag in the <head> section of the HTML document. This allows the CSS styles to be applied to the HTML elements and gives your to-do list a polished and professional look.
Next, in the JavaScript file, we start by getting the form element and adding an event listener to it. When the form is submitted, we want to prevent the default behavior and extract the coffee from the input field. Then, we will create a new card element and add it to the card list collection below.
Now, we have a basic Coffee collection app that can add new coffee to the card container. But we also want to store these tasks permanently. This is where APIs come in. We can use an API to send HTTP requests and store our tasks in a database.
Let's create an API endpoint to handle tasks. We will use JSON-server and Express to create a server that listens for requests on port 3000.
In this code, we create an array to store coffee details and define two API endpoints. The GET endpoint returns all the coffee, and the POST endpoint adds a new coffee to the array. Then we create a db.json file in which the object will be stored. The requirement of this project is to use data from API or using JSON data.
Now, let's modify our JavaScript code to use the API to store coffee. We will send a POST request to the API when a new coffee is added, and a GET request to retrieve all the coffee and display them in the card container.
Moreover, we created a like button which makes the app more interactive to users. When users click on the Like button, the number of likes will increase and it is also updated the storage.
On the other hand, we will push the work to GitHub. The first step in pushing your work to GitHub is to create a repository. A repository is a place where you can store your code and manage your project. Secondly, we will clone the repository to the local machine by copying the repository URL and using the CLI git clone in the local machine terminal. Then we will use the command “git add and git commit” to make a change or commit. Finally, we will push the work to GitHub by using the command “git push”.