After just finishing phase 4 of the Flatiron Full stack Full-time bootcamp, I can say learning javascript has been the most difficult.After learning Ruby and building off it with Sinatra and Rails, switching to a whole new language threw me off. I think about it as learning how to speak fairly fluent Spanish and then being told you have one month to fluently speak German. If it had been my first time learning a new language I'd be saying thats not possible but if you learn one language you can transfer the habits of learning it to the new language and I think the same thing applies here.
After three weeks of learning javascript, we were tasked with using DOM manipulation to create a single page application and our own api for the backend and connecting the two for our monthly project. In my case, I made a super dumbed down version of a social media/forums app. No users, no creating posts, however, with the api I created, you can create/delete comments on premade pages which in my case is bonsai based. I chose to create my app based on bonsai trees as I have a serious addiction to them. I own a few and am constantly on the bonsai subreddit so I created a care guide for different species of trees. Though initially planning to use sessions to allow users, due to time constraints, it became "imagine you're logged in and what you see is what a user sees".
Learning the material and aspects of javascript was one thing but putting together all of them was another. As with all the previous projects, I only really feel like I understand it after finishing the project for that unit. The first three days was struggling through finding out how to use different pieces properly and the last three days was actually building the project. One part I struggled with was properly finding the correct information.
let a = document.createElement('ul')
a.id = "comment-container"
a.addEventListener('click', (e) => {
if(e.target.className === "delete-button")
{let comment = Comment.all.find((comment) =>
{return(comment.id ==
e.target.parentElement.dataset.id)})
e.target.parentElement.remove()
comment.deleteComment()
Through this block of code, I am able to access each delete button and delete the comment from both the document and the api. Previously I was only able to delete it from the api as I did not have an understanding that I could access the information from the document using parents and children (one of the things I must've brushed over when trying to catch back up on assignments). When using containers, you can nest them within each other and access information throughout the family tree but either specifying child or parent element. In my example, e is the delete button. We want to remove the comment from the document so we focus on the parent element which is the comment-container and remove the data-id that corresponds to the specific comment after setting it equal to the delete button id. Finally we can call the deleteComment function on the element which will allow us to use this. within the new function.
deleteComment() {
fetch(`${treeURL}/${this.tree_id}/comments/${this.id}`,{
method: "DELETE"
Previously I had been passing in the tree id and comment id from another function, which got it from another function, which got it from another function. In the end it became a huge mess and I had wished I knew how to properly manipulate and gather data from the start (now I've got a mess to go back and clean up).
In the end, I think my project came out fairly well for three days. Starting over with javascript definitely was a challenge and the majority of the time I had kept telling myself I couldn't do it. That seems to be a reoccurring theme with these projects however in this case, I was absolutely not confident. Though I had high hopes before starting the project, I am glad I simplified it after realizing I didn't know what I was doing at first. I feel much better about it now so now it's time to start the final month of my Flatiron School journey.
Top comments (0)