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:


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.



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 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:
| OR

  • 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.
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 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.

Odin Project – Community

I was working through the Odin Project course.

The first course is Web Development 101.
There is a lesson called “Your First Rails Application”.

After learning about the command line, you learn how to configure Git and GitHub.

Then you follow the steps to create a Ruby on Rails web application.
Which you can see here:

After my initial commit after following all of the instructions – it didn’t work.

I couldn’t figure out why and I wasn’t sure what to do.

I went to the Odin Project Gitter – which is like a community forum and chat for people interested in the Odin project.

I posted my issue:


I wasn’t expecting any response – but actually two or three people tried to help me.

One person helped to solve the issue and once I’d made the change he suggested it the code compiled and it worked!


Within 20 minutes of my posting my query on the Gitter chatroom I had managed to fix everything!

I felt this sense of appreciation and pride – for the first time I felt like I’d become part of a community here.

My first rails app can be found here.
It is the code provided by the Odin Project for a kind of car naming list. You can add new cars, edit ones already in the list, and erase them from the list.

I don’t really understand all of what I did there because I was just following instructions. As I progress through Odin it’s going to go back and teach topics in more detail.

Next, I’m going to be learning more in depth about Git and Github.

The Command Line and Rabbit Holes

I spent my lunch break today learning about the command line.

I use Mac so the Terminal is the way to access the command line and to write prompts.

The aim of today is to learn how to find folders, move, copy, and erase files using the Terminal so I can get familiar with how to use it.

At the moment, I’m not sure why this is useful for me exactly but I’m following the Odin Project syllabus and it says to do everything in order for your to gain the expertise you need.

Notebook with coding notes
Image © Rebeccode

I did use the command line last week when I was installing some things I needed for Sublime Text 3. I figured out a lot about the command line just by playing with it trying to achieve that.

Last week I also found a list of 30 fun things you can do with the Terminal. Finding the hidden “games” was my favourite so far.

In “Gearing Up” lesson of Odin, it said about how to manage your study time. It is easy to know we need to focus, avoid procrastination and take breaks to digest information, and practice using it in real projects.

One thing I don’t usually hear about pitfalls of studying was about getting sucked into “Rabbit Holes”. I realised this while researching any topic about the web – there are so many resources and there’s so much information out there.

It is the same feeling when I look at a MOOC website like FutureLearn or EdX – I want to study everything and learn everything.

But the advice on the Odin Project site was that there is not much benefit of learning too deeply about something you’re not ready for yet and it may not be very beneficial.

So, I need to strike a balance there – being curious but not wasting time down the many Rabbit Holes the internet has to offer.

How does the web work?

I’m starting my journey by learning about how the web works today.

It reminded me of being a human biology student at sixth form college and being amazed at how many processes happen in our bodies simultaneously, how our brain receives so much input from our sensory system and maintains so many processes to keep us alive. How this physical foundation creates our happiness, love, fear and creativity.

Seeing what a web browser does when we type a URL into the browser reminded me of this and left me feeling a sense of awe – humans really are amazing to have created this.

I’ll briefly explain my understanding of what happens when you type the URL (like into your browser.

notebook on top of a laptop
Image © Rebeccode

1) Your operating system and browser determine if they know the IP address already or not (if it is configured or in your cache memory)

2) If not, the operating system queries the Resolving Name Server.

3) The Resolving Name Server knows where to find the Root Name Servers.

4) The Root Name Servers direct the Resolving Name Server to the Com Name Servers which are the Top Level Domain Name Servers.

5) The Top Level Domain Name Servers know which Authoritative Name Server to refer you to because of the Domain’s Registrar.

6) The Authoritative Name Server gives you the IP address and the Resolving Name Server puts it in cache.

7) The Resolving Name Server gives this to the browser and the browser makes a connection to the IP address, requesting the web page.

8) The webpage is sent through the servers to your browser in many small packages which are then assembled in your browser to display the webpage.

If I have made any mistakes or have any misunderstandings, please leave a comment below. I’d love to hear from you.