COUNTDOWN TO MIDNIGHT IN JAVASCRIPT
For the new year I decided to go over how to use a itteration in JavaScript to make a countown in JavaScript using a for loop. The first step is making a function that is creating a for loop but instead of counting up you need it to count down. To count down in a for loop you need to make some adjustments to your loop settings. In a normal loop you would set your index at 0, then add one to your index as long as the index is less than the length of the array. In the case of counting down you want to set your loop up so the index is equal to the array length minus one because the array starting point is zero. Then you want to set your counter for as long as your index is less than or equal to one. And the final instead of adding one you need to subract one each loop.
for (i = list.length - 1; i >= 0; i--)
Recursion Holiday Edition!
While learning JavaScript the one subject that always seemed to trip me up was recursion. I would use it and be able to memorize the steps of using it but never really fully understood what I was doing with it. This week I decided to really dive deep and focus on understanding what was going on under the hood and break it down for myself. First I decided to break down the definition of what recursion was, the most simple explanation is that it is a function that calls on itself. Sounds simple enough but I know from first-hand experience how complicated this can get. When setting up an example for myself to follow I decided to write some pseudo code first. Since it’s the holiday season, I decided to make my example about receiving a present, but little did you know this present is from your jerk older brother. He has put your present inside multiple boxes which you will have to open one by one till you finally can get to your present. This is a great example to use recursion on because we do not know how many boxes we will need to go through. It also has a stopping point(base case statement) which is when we reach the present.
Has many relationships with React
For my React/Redux project I knew I wanted to help the shelter I volunteered at. I could do this by making a foster database to keep track of what dogs a foster currently had. The shelter had all the information but was keeping it on an excel sheet, and wasn’t getting updated as often as it should have been. I wanted to create an app where a shelter could easily add fosters to their database then add and delete dogs from that fosters page. I also wanted there to be a database of all the dogs at the shelter for them to look through as well.
I started the project by making the backend. I made the API with the has many belongs to the relationship set between a caretaker and a dog. Once I finished with the backend setting up the models, controllers, and serializers I moved on to starting the frontend of my project. I had never worked with a have many relationship with React before so I knew It was going to be tricky. I decided on setting up my dog form within my caretaker page. I had set up my relationship for all dogs to be created through a caretaker on the backend so that the logic would be easier to follow. This all worked great till I wanted to set up a list of all the dogs in the shelter and individual dog pages as well.
When making my routes I wanted to be able to grab the information from the dogs API instead of the caretakers API so it would be more CRUD based. This is where I ran into a huge issue when I create a dog through caretakers that the dog would immediately update on the caretaker’s page. However, I would need to refresh for the same information to pop up on the individual dog and all dog pages. I started breaking everything down and brainstorming. I finally realized that it was because I was creating my dogs on the backend through caretakers, instead of creating them through dogs. This was a tough lesson I learned in the separation of concerns and why it’s so important. I thought I could take the easy way out and just do everything in one spot but with everything, I wanted to accomplish realized that was not possible.
To fix the issue I had to do a lot of backtracking and needed some help from my cohort leader. I started the fix with the backend. I realized I would have to create dogs through dogs and then attach them to a caretaker. I also changed the settings for deleting dogs as well.
def create
@dog = Dog.new(dog_params)
@dog.caretaker = Caretaker.find(params[:caretaker_id])
if @dog.save
render json: @dog
else
render json: {error:'Error creating Dog'}
end
end
once the backend was fixed I had to change the way the dogs were displayed and created from the frontend as well. When I create a dog I would assign the caretaker’s id when submiting the dog form.
this.props.createDog({ dog: this.state, caretaker_id: this.props.caretaker.id})
Then when my app was sending a post request it would be to the dog API instead of the caretakers API like I was doing previously. This way when a dog was created, it would automatically update anything that was run through the dog API. This solution fixed my issue since the API that was getting changed was the only API that was dealing with dogs. So by separating my concerns and re-evaluating my code I was able to have a successful application without refreshing.
The interesting process of fetch requests
Making my JavaScript project was a very long and difficult process for me. One thing that I was struggling with the most was fetch requests and making sure it would append to the DOM correctly. After my project review, I decided to dive a little deeper and challenge myself to make sure I understood all the steps of making a post request enough where I could explain it to someone else. When making a fetch request you need to pass in a URL as its first property and then there is a second property which is optional, however, this is where you can do things like make a post, patch or delete request instead of a get request.