The Web Developer Bootcamp Part 3

Continuation from previous posts:
The Web Developer Bootcamp Part 1
The Web Developer Bootcamp Part 2

I’m currently at lecture 171 out of 360. That’s „only” 24 lectures in this week.
You can find this part’s projects here.

There were holidays in Poland this week. Free days instead of boosting my progress, seem to slow it down. I decided to put learning web development higher on my priorities, even at the cost of some of my social life and other things I would like to do. There is simply not enough time while working full time and trying to do few other things at the same time. One thing for sure, learning web development takes time!

All what I did this week was focused on DOM selection, manipulation and events. Another broad dimension of Web Development. This is a new topic for me, which is both fun and challenging.
DOM stands for Document Object Model. With JavaScript I can select html elements and manipulate them, add events to them.

I first started by playing with DOM through Google Chrome Dev Tools. Inspecting some random websites and trying to manipulate them, changing some parts of them. Like changing an image on Google Search Engine from the current one to a kitten photo, then counting a number of elements in a table from some website.

Project called ColorChange was an introduction to DOM events. Simple exercise, where first I had to select a button and add to it an event listener that upon click changes the color of a body element.

var changeColor = document.getElementById(„clickMe”);
var body = document.getElementsByTagName(„body”)[0];

changeColor.addEventListener(„click”, function(){
document.body.classList.toggle(„isGreen”);
});

.isGreen {
background-color: green;
}

Project ScoreKeeper was what I spend most of the time this week on. This project was a counter that could be used for volleyball, table tennis or many other sport disciplines. By using buttons you can either add points to player1 or player2. You can also set a maximum, winning score. Sounds simple, but this project was a good way to practice DOM manipulation. Had to make sure that everything works correctly.

The third project ListAndEvents was a short exercise of different possible events that exist besides click. Overall there are about 300 of them.

5 of the lectures that I went through were about an upcoming, a bit more sophisticated project called The Color Game. This project builds upon all that has been shown in the course so far.

1 comment

  1. I do trust аllⅼ oof the ideas you have introduced to your post.
    They aree very c᧐nvijcing andd can certainly work.
    Տtіll, the posts are too quick for beginners.
    May ʏou please extend them a little from next time?

    Thsnks for the post.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *