Day 13 The DOM

Day 13 is now in the books and it was one of the most fun days so far. Today we were introduced to the Document Object Model(DOM). The DOM is basically a copy of your HTML that the browser makes and stores in memory. What makes it powerful is that it can be manipulated using javascript to change the way the page looks and behaves. Other languages can manipulate the DOM as well, but javascript has the unique ability to make all of these dynamic changes right in the front end.

The DOM comes with a bunch of built in methods that allow you to access, create, and change elements in the dom. The reason why today was so fun is because now that we know javascript, HTML, CSS, and the DOM we can actually start to make cool applications. For example today I made a simple to do list app in about two hours. You can check that out here http://simpletodolist.surge.sh/. I made this in two hours so it’s lacking some major features, but it’s a good example of how things are starting to come together now that we’ve got a few pieces to the puzzle. I had a blast making this today, and can’t wait to put some additional finishing touches on it.

One of the most powerful aspects of the DOM is that you can add event listeners to different actions that are happening on the page. For example you can set a click event on a button and then write some logic that runs when that button is clicked. If you look at the to do list that I linked to above you will see this in action. When you click the Add todo button some javascript is triggered to run. The javascript grabs the value of the input field if there is one and does a few things with it. First it creates a new <li>(list) element. Second it pulls the value from the input field and populates it inside of the list element. Finally it appends or adds that list element to an already existing <ul>(unordered list) element. This is a very simple of example, but you can see how powerful it is. You can add event listeners for just about any action that happens on the page. Click, double click, mouseover, keypress, mousemove, focus, and blur are just a few of the events available. The DOM is the primary reason that we have dynamic websites today. Tomorrow we are going to make a pixel art maker which is going to be really fun! I’m definitely looking forward to that. If all goes well I’ll share it here tomorrow evening.

Overall this has been a great week so far. We covered a lot in a short amount of time. It was tough in the sense that we covered a ton of ground, but it was also something of a reprieve because logically it wasn’t quite as tough. I think writing complex logic is a lot more taxing than just memorizing the way something works. So in some ways this week was a much needed change of pace. We’ve been doing a lot of work in groups which has been fun. It’s been really cool to see everyone come together and help each other out with assignments. It’s been almost three weeks and I’m still having an absolute blast. Fingers crossed that I can keep the enthusiasm as the difficulty increases. We will find out soon enough!

13 down and 87 to go!

Show your support

Clapping shows how much you appreciated Jon Ramer’s story.