DOM Manipulation – Odin Project Web Dev 101

I finished studying the Odin Project Web Dev 101 – DOM Manipulation.

Here were the learning outcomes and my answers.

Learning Outcomes:

  • What is DOM in relation to a webpage?

The DOM is the Document Object Model. It is a tree-like structure for the contents of a webpage.
There is a tree of “nodes” with different relationships. Like child or parent.

  • What’s the difference between a “node” and an “element”?

An element is a specific node in the DOM.
A node can include elements, text content inside an element, the document itself, “fragments, and even code comments (the ones that don’t display on the page, like between /* */ in CSS, in HTML, or // in JavaScript).

  • How do you target nodes with “selectors”?

You can use:

  1. CSS-style selectors.
  2. Relationship properties.

1. CSS-style selectors for:
Screenshot 2019-02-21 at 22.26.13.png

  • div.display
  • .display
  • #container > .display
  • div#container > div.display

2. Relationship properties (identify nodes based on relationships to nodes around it)

  • firstElementChild
  • previousElementSibling

You use these selections with a “Query Selector”.
e.g. document.querySelector(“.display”);

  • What are the basic methods for finding/adding/removing and altering DOM nodes?

Finding
– Use Query Selectors

Adding
– Create an element and then append it

document.createElement(tagName[, options])
then
parentNode.appendChild(childNode)

Removing
– Remove the node
e.g. parentNode.removeChild(div);

Altering
– Once you have referenced an element, you can add, edit, or remove things from it. Like add CSS styles or remove CSS classes.
E.g.,

To add an inline style of blue:
div.style.color = ‘blue’;
To add a new ID:
div.setAttribute(‘id’, ‘theDiv’); sets the id attribute of our div to theDiv.

  • What is the difference between a “nodelist” and an “array of nodes”?

It is a list of nodes. It looks like an array but a nodelist is an object, not an array. You cannot apply the same methods to it as you would to an array.
An array of nodes is when a nodelist is converted into an array, and the regular array methods will work on it.
To convert a nodelist to an array you can use a  spread operator ( . . . ) or Array.from().

  • How do “events” and “listeners” work? What are three ways to use events in your code?

Event
An event is generally something the computer can react to. Like something that the user does (an input) that can be tracked. Like a mouse click or button press.

Listener
A listener is set up to track when the event happens on a particular DOM node. An event listener listens for this input.
The event listener can be set up so that when it detects that the event has occurred, it runs more code to do something else.

E.g. If the event is a mouse click and the login button is set up with an event listener for mouse clicks. When the user clicks on the login button, the event listener detects that the button has been clicked on, it runs the code for showing the Username and Password input box above the login button.

You can set up these events in three ways:
1. Attaching Scripts to HTML elements as an attribute:

<button onclick=”showUserAndPassBox()”>Login</button>
2. Setting the “on_event_” property on the DOM object in your JavaScript:

// the html file
<button id=”btn”>Login</button>

// the JavaScript file
var btn = document.querySelector(‘#btn’);
btn.onclick = (e) => showUserAndPassBox();

3. Event Listeners in JavaScript:

// the html file
<button id=”btn”>Login</button>

// the JavaScript file
var btn = document.querySelector(‘#btn’);
btn.addEventListener(‘click’, (e) => {
showUserAndPassBox();
});

  • How does “bubbling” work?

If you apply an event listener to a piece of code that is embedded in another piece of code, the event listener will apply to the parent element as well.
E.g.,

This is the actual target of the event listener.

If you clicked anywhere on that div it will fire the event listener because it “bubbles” up.
The process is likened to bubbles because events bubble up from the inner element up through parents like a bubble in the water.

It is an efficient method for firing an event on multiple elements — starting from the innermost element — and “bubbling” up to outer elements.

(Note: Not all events bubble and you can stop events bubbling using the event.stopPropagation() method)

Advertisements

Rock, Paper, Scissors

The Odin Project Web Dev 101 has a coding project to build a rock, paper, scissors game.

At first you create the JavaScript logic and it works entirely in the browser console.

Next, after learning DOM manipulation, you build a UI for it.

My project is live here:

rockpaperscissors-pc.png

I enjoy UI design, and I tried to make it look cute but also similar to an old video game – especially the fonts.

I made the design responsive using media queries. This is how it would look on an iPhone 7.

rockpaperscissors-iphone6.png

rockpaperscissors-iphone-horizontal.png

It was my first time building anything with JavaScript so it was a challenge. But I started to feel like “yeah, I am really making progress!”

The JavaScript in freecodecamp is where I got stuck and gave up many years ago, so I’m glad to be breaking through that barrier.

100 Days of Code

I found 100 Days of Code mentioned in a few tech podcasts I listen to and on Twitter.

It is a challenge to code for at least one hour each day for 100 days.

The rules are that you should share a log of your studies, don’t skip two days in a row, and you should support at least two members of the community each day.

I decided it’ll be a way for me to start 2019 off with accountability and day by day progress.

I attended my first tech Meetup and then I started this blog over 6 months ago, around June 2018.

In that time I have learned how to use the terminal and command Line. Learned how to use Git and GitHub. Relearned HTML and CSS and created my first Google Homepage clone using HTML and CSS.

I have achieved a lot for me in that time but I know deep down I have a lot more potential.

I need to focus my energy into consistent effort if I want to see any big results that would give me the skills to enter the tech industry.

So, that’s why I decided to start 100 Days of Code today.

I forked the repository on GitHub and will be updating my log each day there (check it here) as well as sharing updates on Twitter (check those here).

JavaScript Fundamentals Part 2

Last year, I continued studying on Fundamentals of Javascript in the Odin Project Web Development 101. I decided to start off the New Year by doing a review of what I had studied a month ago.

I did the first JavaScript “Test Yourself” questions in this blog post.

These are the second JavaScript “test yourself” questions here and my answers below.

  • What are the seven data types of javascript?
  1. Number
  2. String
  3. Boolean
  4. Null
  5. Undefined
  6. Object
  7. Symbol
  • Which data type is NOT primitive?

Object.
This is because objects store collections of data and more complex entities.
Whereas, numbers, strings, booleans, null, undefined, and symbol are represented directly. Also, those data types cannot be changed (although, the variables they may be stored in can change).

  • What is the difference between single, double, and backtick quotes for strings?

Single and double quotes are the same. But they need to be used consistently, not mixed – ‘Hi’ or “Hi”
not “Hi’

Backtick quotes are extended functionality quotes. They allow us to embed variables and expressions into a string using  backticks:
stringtext ${variable} stringtext `

  • Which type of quote lets you embed variables/expressions into a string?

Backticks.

  • How do you embed variables/expressions into a string?

Using the dollar sign and { } brackets together.
The variable or expression would be written within the curly brackets.

  • How do you escape characters in a string?

​​​​​You can escape characters, like a  single, double, or backtick quote with a backslash before them \’ \” \`

  • What is the difference between slice/substring/substr?

These are three ways to extract part of a string.
The parameters are different in each:

  1. slice(start, end)
  2. substring(start, end)
  3. substr(start, length)

Slice extracts part of a string and returns the extracted part in a new sting.
Substring is similar to slice. Substr is different because you choose the length of the string you want to get, rather than the end point of the original string.

  • What are methods?

A method is a bit of functionality that is built into the language. They are properties which contain a function. So, slice(), substring(), and substr() are methods.
Also, indexOf() and search() are methods.

  • What are the three logical operators and what do they stand for?

&& AND

|| OR

! NOT

  • What are the comparison operators?

> greater than
< less than
>= greater than or equals
<= less than or equals
== equality check
!= not equals

  • What is nesting?

When we put something inside something else.
In JavaScript, we can nest if statements within each other. For example,
if (condition) {
xyz } else if (condition) {
zyx } else {
abc }

  • What are truthy and falsy values?

A value that evaluates as true in a Boolean context is truthy.
A value that evaluates as false in a Boolean context is falsy.

  • What are the falsy values in Javascript?
  1. false
  2. undefined
  3. null
  4. 0
  5. NaN
  • What is the syntax for an if/else if/else conditional?

if (condition) {
xyz } else if (condition) {
zyx } else {
abc }

  • What is the syntax for a switch statement?

switch (expression) {
case choice 1:
run this code
break;
case choice 2:
run this code
break;
default:
actually, just run this code
}

  • What is the syntax for a ternary operator?

(condition) ? run this code : run this code instead;

  • What is the relationship between null and undefined?

Null is a value. It means “nothing, empty, no value”.
Whereas, Undefined means there is a variable but “value has not been assigned”.

If you test equality:
null == undefined would be true
null === undefined would be false

This is because with strict equality they need to be the same type to return true. Null is an object, but undefined is a type of value itself.

  • What are conditionals?

Conditionals are statements which execute a block of code is certain conditions are true.
Conditional statements include:

  1. if
  2. else
  3. else if
  4. switch

 

JavaScript Fundamentals Part 1

I started working on the Fundamentals of Javascript in the Odin Project Web Development 101.

These are the first “test yourself” questions here and my answers below.

  • How do you declare a variable?

You write “let”, “const”, or “var” followed by the name of the variable you want to create.

  • What are three different ways to declare a variable?

You can use “let”, “const”, or “var”.

  • Which one should you use when?

“Let” is the currently accepted way to declare a new variable. You should use it for any new variable, except constant (unchanging) variables, these can be declared with “const”.
“Var” is the older way of declaring variables. There are reasons for not using it because of it’s behaviour, but it is still seen in older scripts.

  • What are the rules for naming variables?
  1. Use letters, digits, $ or _
  2. First character cannot be a digit
  3. They are case sensitive – use camelCase
  4. Do not use non-English letters
  5. There are reserved words (e.g. let, class, return, function)
  6. Define the variable before using it
  7. Make names concise but descriptive and logical
  • What are operators, operands, and operations?

Operators – they define the operation to be performed between two operands.

Operands – the things operated on (like numbers)

Operations – when we perform an action between two numbers or variables (like division, addition, incrementation)

  • What is concatenation and what happens when you add numbers and strings together?

Concatenation is when two things get added together as a string. Like, “My” “3rd” “Dessert” when added would become “My3rdDesert”.

If you add numbers and strings together they will concatenate into a string. Like, “2” “Apples” would be “2Apples”.

  • What are the different type of operators in JavaScript?

+ Addition
– Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
— Decrement
= Assignment
/= Division assignment
+= Addition assignment
-= Subtraction assignment
*= Multiplication assignment

** Exponentiation

=== Strict Equality
!== Strict Non-Equality
< Less than
> Greater than
<= Less than or equal to
>= Greater than or equal to

Rarely used bitwise operators:
& AND
| OR
^ XOR
~ NOT
<< LEFT SHIFT
>> RIGHTSHIFT
>>> ZERO-FILL RIGHT SHIFT

  • What is the difference between == and ===?

== is equality.
=== is strict equality.
e.g. let x = “123”;
let y = new Number(123);

x == y is true.
x === y is not true.
Equality is just the same value. But strict equality needs to be the same value and the same type (x is a number, y is a number object).

  • What are operator precedence values?

Similar to high school math – PEDMAS (parenthesis, exponents, multiplication, division, addition, subtraction). These are calculated in JavaScript in order of precedence. The operators are also included in this precedence list.

  • What are the increment/decrement operators?

Increment and decrement take the value and then change it. Increment adds 1 to the value. Decrement minuses 1 from the value.

  • What is the difference between prefixing and post-fixing them?

Prefix – returns new value:
If you put the increment/decrement operator first (prefix) it will perform the action of incrementing/decrementing and then returns the new value to be used right away.

Postfix – returns old value:
If you put the increment/decrement operator second (post-fix) it will return the old value first, then increment/decrement the value.

  • What are assignment operators?

Assignment operators assign a value to a variable.

They are also able to change the value while assigning it.
E.g.,
n *= 3+5 is short for n = n *  (3+5)

The assignment operators have the same precedence as a normal assignment operator, so they run after most other calculations are already done.

  • What is the “Unary +” Operator?

Unary operator acts on a single operand to operate.

For example, x = +x;

If you had let a = 10 then console.log(-a) it would show “-10”.

Whereas, in a binary operation like x + y there are two operands. This means the “+” acts as addition and concatenates them.

 

Google Layout HTML/CSS Project

I am (still) working on the web development 101 section of the Odin Project curriculum.

The first project you are tasked with is using your basic HTML and CSS knowledge to copy the design and layout of the Google Homepage (easier task) and/or the Google Search Results page (difficult task).

Screen Shot 2018-11-22 at 18.24.37.png
You have to build this webpage as part of the Odin Project curriculum

I wrote about finishing the easier page just before Halloween. It’s taken me almost a month, but I finally finished the Hard challenge after a full day coding at home today.

The Process

I started from planning out the layout on paper and figuring out what I needed to do, how the page would be divided and what sections I would need to create.

IMG_2968.jpg
Image © Rebeccode

Then, I started coding and trying things out.

I also had a chance to practice my terminal and git skills to keep versions of the data as I added and changed things.

I had a hard time getting my head around layouts, so I tried to make the Homepage using floats. And then make the search page mostly using flexbox. It was tricky but I found using cheat sheets like this one helped a lot.

Quick Tip:
A lot of times I was confused about why something worked or didn’t work. I tried commenting out the CSS (by hitting Command and /) to see what effect taking out the code made.

The Result

I’m really happy with the result and it is the first time I really “built” something substantial using my coding skills since I was a kid, so it’s a really proud moment!

Screen Shot 2018-11-22 at 18.25.56.png

It’s live here.

Google Homepage Clone

I built my first ever project following with the Odin Project syllabus:

I used HTML and CSS to re-create the Google homepage. The project focuses on arranging the page visually and not actually building in any functionality (so the links don’t go anywhere and the search box doesn’t work).

It was much, much more difficult than I expected.

I also used the command line and Git and GitHub the whole time, so you can see all of my commits. I tried to copy the rules for making commits and writing commit messages.

I kept using a lot of trial and error and I still feel like I don’t quite understand all the display and position attributes fully and their behavior sometimes confused me.

It was extremely fun but extremely challenging.

It is live here.