Phase 4…Fetch and Click
We’ve made it to Javascript *insert sweat emoji*. Out of all of the phases in Flatiron School’s Software Engineering program, Javascript in phase 4 was the one I was most nervous about. Javascript is a beast! I always hear about all of the cool things Javascript can do. But I could not help my apprehensiveness.
For my phase 4 project, I wanted to create a quiz. Who doesn’t like quizzes? Especially fun ones! Buzzfeed has the coolest ones if you were wondering.
One of the project requirements was to create a Rails API and have a belongs_to and has_many relationship. Using the Resource Generator is one of my favorite tools to use. After creating the database, tables, models, etc, the backend took no time to set up and establish relationships. In my project, the questions have many answers and the answers belongs to the questions.
In the frontend aspect of the project is where the HTML, CSS and JavaScript live. Because we’ve previously completed a project focusing on the backend, there were new obstacles to face in the frontend.
In order to retrieve data, the Fetch API is used. The fetch() function takes in an argument of a URL. It will use a GET method for AJAX requests. It will default to a get request if we do not specify in the options. After the request is made, .then() method is used to convert the returned response into a JSON format. The second .then() uses the data for DOM manipulation.
The fetch API allowed me to retrieve my data from the backend and create my questions and answers for the quiz
Another tool I enjoyed using was onclick(). The onclick event happens when the user clicks an element on the web page and something happens. Inside the function, with one click, multiple actions are set to occur on the page. In my project, I used onclick() on my answer buttons. When the user chooses an answer, it will turn green for correct or red for incorrect. The other answer buttons become disabled. It will also add to their score if the answer is correct.
While working on this project, I learned there’s so much that can be done with JavaScript. One of the most important things I learned was to keep trying. I ran into a lot of road blocks but persistence is key. JavaScript wasn’t easy to grasp but as time goes on, I will get more comfortable and hope to build bigger projects.
