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.

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

 

WWC “How do you start a career in tech?” Event

I attended a Women Who Code (WWC) Lightning Talks event last night in Roppongi, Tokyo.

The event was titled “How do you start a career in tech?”

Since that just so happens to be a direct quotation of what I keep wondering I had to attend.

I thought it would be a great chance to hear stories from those who had transitioned into a career in tech from other fields.

I was right.

It featured lightning talks (around 10 minute brief presentations) from 6 women:

1. Introduction to the Software Development world
Tutti Quintella @tuttiq (Software Developer at Quipper)

2. Building dev skills while staying at your current job
Lena Morita @mirka (JavaScript Developer at Automattic)

3. Hack your career: teach yourself coding!
Kate Gamo (Java Developer at Yamato, Ltd.)

4. University of Chicago, current Computer Science student
Bing Wang (Joining us with a video submission from Chicago!)

5. What are/were key factors in my career development? and Lessons and Learned
Takako Nishio (Executive Officer and VP, Grow / Protect Technology Program Management at MetLife Insurance)

6. And We Still Have to Give Birth
Yan Fan @yanarchy (CTO & Co-founder at Code Chrysalis)

Details taken from the event page here.

It was only an hour but I feel like I got a lot from that time. All of the speakers did a great job introducing themselves, their story and giving advice to the many people in the room who didn’t raise their hands when asked “Do you currently work in tech?”

Tutti gave a great overview of the kinds of software there are and the kind of languages that are used in them. It contained a lot of information but it left me with the overall feeling that there are loads of options and no way is the “right way”.

The thing that stayed with me the most from many of the talks was how quickly many of the speakers had transitioned from other career fields into technology – around a year for many people.

Also, they all had different journeys and different stories. Some had done coding bootcamps and some had attended coding schools. Others had self-studied while working their current jobs.

Particularly, Lena talked about how she kept her current job while studying coding in her free time. Then she worked on her own projects and she found problems she had in her work or in her life. Processes she could find ways to improve or make more efficient or automated.

Bing built upon this by mentioning that you can try to help open source projects and contribute code. If your code is used to improve it this can show your real-life application of your coding skills.

Kate mentioned about learning to code to do things that interested her in Swift for mobile applications. Then as she learned more she realised she needed a broader range of skills and joined a coding school to prepare before landing her current job.

The final presentation resonated with me. It was by Yan (who runs the Code Chrysalis coding bootcamp that started in Japan in 2017).

She mentioned that she had a first couple of months of attending meetups, daydreaming, studying a little then stopping for weeks. Then, she got serious and knuckled down to study properly. And then she got good enough to enter a good coding bootcamp in the US.

I feel a little like I am still in the more “casual” phase of:

  • Fitting in a little studying in my lunch break at work
  • Spending a few hours at the weekend to study online courses and read books
  • Attending meetups to learn a bit and meet new people.

Most of the presenters and the audience seemed to be in their 20’s or possibly early 30’s – all just starting to build careers. So to hear Takako’s speech which chronicled her 30 year career in tech was very enlightening. We heard about the moves she had made over the years and why. Also, how she had to make sacrifices to live her dream of working abroad.

Takako mentioned how technical skills are a must – those skills are a prerequisite for any tech job. But it is the soft skills (and people skills) that are the key to unlocking your career potential. So, self-reflection is so important: celebrating your strong points and identifying your weak points so you can improve.

Yan’s speech ended by saying about how only around 25% of tech related jobs are going to women. Also that there is a huge economic gap between men and women in general, not just in Japan (which ranked 114 out of 144 in the Gender Equality Ranking in 2017). It made me grateful that these kinds of events exist and there is a community in Toyko for women interested in technology.

Git and GitHub

I studied a bit about Git and GitHub recently by following the track on Odin and watching Le Wagon’s Git and GitHub movie.

Yesterday, I created a repository on GitHub.

Then I cloned it on my local machine.

I used the command line to start tracking that repository with Git on my machine, then I created new files in the local repository.

I made a README.md file. Then I added it to the staging area. Then committed the file with a short message about what I did.

I repeated this process with a hello-world.txt file.

Then I pushed my changes to GitHub.

You can see the repository here.

It was a very simple thing but actually implementing what I had learned about Git, GitHub and the command line and seeing it come up on GitHub felt like a proud moment for me last night.