The objectives of this exercise is to create an app in Node.js that has everything I need to copy and paste stuff from in the future to quickly get setup. If you want to know how to get setup with a development environment to give some of this stuff a go then have a little read of Working With the Command Line in Goorm IDE (Node.js) – Backend Web Development. The first thing is to setup routes to various directories...Read more

If you’d like to follow along (I’m writing this as notes for my future self) then you want to head on over to goorm.io and get yourself setup on their platform. They are a “full stack” web development IDE and allow you to access various virtual environments called “containers”. I this post I’m going to be talking about the command line, what it is, what we use it for and what commands we can use in it. Getting setup before...Read more

We left off from the second post with a game that was fully functional and in this post we’re going to style it. You can view the game by clicking here to get a feel for what we’re going to cover in this post. We’re aiming for the game to look like the game on the left (shown above) and at the moment we’re looking like the game on the right. Here is a list of the things that we...Read more

In the first post in the making the colour guessing game we left off with a functional game and the last thing that we needed to do was neaten the page up (style the page etc) and add a bit more functionality (like a reset button or the difficulty button). You can see a working example of where we’re currently at by visiting this link. Similarly, if you’d like to catch up on how we got to this point then...Read more

This is the first complete “game” that I’m going to be making in JavaScript albeit a very simple one. The basic premise is to generate 6 or 3 (depending on difficulty) different colours and display one RGB value above the colours. The aim is for the player to correctly identify (hence improving their skills at recognising RGB colours) the correct colour from the ones displayed. This is going to be tying together a lot of stuff that I’ve been learning...Read more

In the last post Events in JavaScript – Part 1 – Coding a “Score Keeper Game” I looked at using events to code a “gaming score keeper” that had event listeners (“click” and “change”) that allowed us to keep track of our score when playing a game with someone. This post is going to carry on from that last one and this time I’m going to be using event listeners to make a simple ToDo list (looks wise – we...Read more

We use JavaScript to control the behaviour of a web page. We do this by adding events to our page. Examples would be to “listen” for a click or for when the mouse hovers over an image or when the user hits a key on their keyboard etc. The process of events is that we assign an event and then “listen” for a desired response from the user. To add an event listener we use the addEventListen method which is...Read more

In my last post, I wrote about the 5 different Document Object methods and in this post I’m going to expand on that and talk about Document Object Manipulation in JavaScript. If HTML is the page structure and CSS is the page styling then JavaScript is there to control the page behaviour. The 4 main areas of DOM manipulation are: Style manipulation Class manipulation Tag manipulation Attribute manipulation Editing an elements style with the “Style” property When we talk about...Read more

Document is an object in JavaScript that refers to the entire contents of a web page and this post is going to talk about each of the methods inside this document object. The 5 “Document” Methods are as follows: This area of JavaScript is referred to as “DOM” or Document Object Manipulation and is how we get our JavaScript to interact with or “manipulate” the HTML and CSS in the browser. This is the example HTML code we’re going to...Read more