Weekly Goal:
Can you write a frontend, single-page app using only pure JavaScript?
This week was a little tedious because on top of making a single page app we were also not allowed to use any libraries. This included testing libraries, which meant we had to create our own.
Day 1
So at the start of the week, I guess we spent a little time wrapping our heads around the whole idea. But there was an example for testing that helped wrap our head around it better. Our tests were simple but they did what they have to. After that, we got started on the main project which uses javascript "querySelectors" to update the page. We started by making a notes prototype that stores text. After that, we had to add them to a list prototype and then add functions to add and convert and returns all the list items as HTML.
Day 2
We set up the HTML page on day two, as well as setting up a function that changes the DOM(document object model). We then made the controller so we can get the list of notes and then use DOM manipulation to change the page to display the notes. We spiked this feature which meant we had to delete it all and then restart using TDD.
Day 3
We started day three by creating a single note prototype, which stores a single note and has a method for returning it with a div wrapped around it. We ran into a couple of bugs we manage to workaround which had us struggling for a while but it was mainly just syntax errors.
Day 4
This day was quite interesting because we had to go back to our note list and change it up a little bit. We had to add ids to each of the displayed list items. We needed to do that so we could access each item by looking up its id to eventually display just that item. We had to add ids to the div in increasing order to give each item a unique id. We also had to change the list items to anchor tags so that we could change the URL. So we could then add an event listener for a hash change and use the id from the URL to display the appropriate note.
Day 5
Fridays are usually a slow day because it's near the end of the week and we do our retro on Friday. But we still managed to get through step 10 which was adding a form for creating new notes which went pretty smoothly. It was fun to see the app work with no refreshing of the page it was just a lot quicker overall.
Summary
It was a fun week overall seeing a single page app was interesting and I can see it is very useful. I think doing my own testing from scratch was useful it helped me understand testing libraries better, but I don't think doing that will be as useful in the future considering there are already testing libraries out there. I really enjoyed this week seeing what single-page apps could do and I feel like I achieved the weekly goal so a success all round.
Top comments (0)