Exercises

1) Javascript - Operations

Javascript is a fully functional and very powerful programming language. It runs on any javascript engine, like the one in your browser. Learning to program in Javascript is a very powerful skill. In these exercises we explore basic mathematical and logical operations.

Open your favorite browser, in any page, and right-click. Select Inspect Element (Zbadaj), and find the Console. Let's learn how to use mathematical operations.

Write 1+1, press the Enter key, and check the result. You should see:

Javascript can calculate the result of any mathematical operation. Try to calculate the result of 2018 divided by 1009.

2

What would happen if we tried to perform impossible mathematical operations? Try to divide any integer number (10 for example) by zero. What would be the output?

Infinity

Javascript also allow us to declare text into it. Text in javascript (as well as many languages) is called String, and is declared using double quotes, for instance "Buzz Lightyear". Try to declare your name as a string.

You should see whatever name you wrote echoed back to you in single quotation marks. For instance, 'Jan Kowalski'.

We can use the + operator to combine Strings in Javascript. For instance "Jan" + "Kowalski" will output the following:

'JanKowalski'

Try to fix it by adding a space in between the first name and the last name.

"Jan" + " " + "Kowalski"
'Jan Kowalski'

What is the output of 1 + "Buzz"? What is the output of "1" + "1"? Can you guess the output of "2" + 2?

'1Buzz'
'11'
'22'

Calculate the output of 10/0 + " and Beyond!!"

'Infinity and Beyond!!'

Javascript cannot perform other operations between strings. If we ask it for the value of 'Jan' - 'Anna', it returns NaN, which means Not A Number. What is the output of "Ba"+("r"-0)+"a" ? What is the result of this operation Array(8).join('a'-1) + " ... Batman!!" ?

'BaNaNa'
'NaNNaNNaNNaNNaNNaNNaN ... Batman!!'

Numbers are a very important part of programming. Let's say we want to write a logical statement that tells us the year Jan Kowalski was born, given:

his age is 27 years old
we are in 2018
he already had a birthday this year

How would you go about calculating the year Jan was born?

2018-27
1991

Javascript also can perform logical operations, and deal with logical types, true and false. These are called boolean types. For instance, we can make comparisons, and JS will tell us if they are correct or not. Can you check the output of 30 > 18?

true

We can also compare if something is equal to another thing. This is done with the double equals == operator. Can you check the result of 2 + 2 == 5 ?

false

We can also check try to check if one out of two statements is true, this sort of logic is done with the OR operator, using ||. For instance 1 > 2 || 1 < 2 returns true. Can you guess the output of 1 + 1 == 2 || 1 + 1 == 1?

true

Similarly we can check if both of our statements are true. This is done with the AND operator, using &&. For instance 1 > 2 && 1 < 2 returns false. Can you guess the output of 1 + 1 == 2 && 1 + 1 == 1?

true

Another logical operator is the NOT operator. Generally, if we want the oposite of a boolean statement, we use the ! character. For instance, !true is false, and similarly !false is true. What do you expect to be the output of 1 + 1 != 2? What about 'a' != 'b'? Test these expressions on your console.

false
true

Challenge These boolean operators can be combined as much as we need. Say we have a use case where we need to determine if Jan Kowalski can drive, given that:

the minimum age to drive is 18
the maximum age to drive is 65
nobody can drive at 30 years old

Write age = 27 (to declare Jan's age) in your console before starting, and use age in your calculations. Can Jan drive?

age > 18 && age < 65 && age != 30
true

2) HTML & CSS - Tags and Attributes

Alongside JS, HTML and CSS are the pillars of web frontend development. HTML declares the structure of the visual elements in your user interface, and CSS defines the decoration of the elements. In this chapter we will explore both HTML and CSS, and how to create simple page and give it some colors.

Start by opening the Codepen environment we've prepared for you here. In this environment you will see 3 text editor, one for HTML, one for CSS, and one for JS. On the other half of the screen you see a preview of the app you're building, currently blank.

Save the codepen (you're not required to login or register). You will see that the address will change to something like https://codepen.io/anon/pen/.... Keep this address somewhere so you can keep track of your progress during the exercises. Let's add some content to our blank page.

Let's add a title heading to our web page. Headings in HTML are created using the h1 tag. Try adding this to your webpage:

<h1> Open Position: Software Engineer Intern </h1>

Are you able to see this title in the webpage preview?

Headings can vary in their size. HTML lets you use headers from h1 to h6. Let's add a subtitle to our page. Add these lines below your h1 heading.

<h3> Location: Warsaw </h3>
<hr>

In HTML, hr stands for horizontal ruler. Were you able to see the subtitle and the dividing ruler?

Let's add a paragraph to our web page. Paragraphs in HTML are added using the p tag. Bold text is added using b or strong, while italic can be added using i or em. Add the following paragraph to your page:

<p>The company <em>Recoding</em> is looking for <strong>talented 
and creative</strong> people. Join now by sending us a message!</p>

Our page is looking more like a job description page. Let's add some colors now. In the CSS pane, add the following attribute to your h1:

h1 { color: #708090; }

You should see that your title became a shade of bluish gray. Are you able to do the same for your h3 and p ?

h3 { color: #708090; }
p { color: #708090; }

Now what if we wanted to center the content, and add some space in our page? We can do this directly in the body tag. Add the following to your CSS:

body {
  padding: 24px;
  text-align: center;
}

What if we wanted to keep our paragraph left-aligned? Add a text-align attribute to p setting it to left alignment. Were you able to make it work?

HTML also enables us, among other things, to include lists into our content. Let's add a list to our HTML:

<p>Must Know</p>
<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

ul stands for Unordered List, and li means List Item. Check if you are able to see the list in the document. You may have noticed that the list is center aligned. Are you able to align it to the left?

li { text-align: left; }

Create another list below the one you have, preceded with a p that says Nice To Have. Add at least 3 items to this list. Are you able to also set the color CSS attribute of li to #708090?

You may have noticed that setting the attribute of a tag in CSS changes all the elements. For instance, all the paragraphs have the color we set. If we want to change the color of a specific element we have to use a class. Change your main paragraph to look like this:

<p class="bigText">The company <em>Recoding</em> is looking for 
<strong>talented and creative</strong> people. Join now by sending 
us a message!</p>

Next, add to your CSS the following class (notice the period . notation):

.bigText {
  font-size: 20px;
}

Were you able to make your first paragraph bigger?

Challenge Repetition is a very bad practice, in any programming discipline. Using classes (and giving them meaningful names) is a way to keep the CSS and the HTML clean. A tag can have as many classes as we want, provided we add them separated by space characters. Notice that in your CSS you repeat the blue color attribute a few times.

Create a new class in your CSS, called blueText and add the attribute color: #708090; to it. Remove the other color setting attributes, and add the blue text class to your body element.

.blueText{ color: #708090; }
<body class="blueText">

3) Javascript - Variables & Functions

Variables and functions allow us to store values in the javascript engine, and calculate things dynamically, using those values. In this chapter we create a few variables about Jan, and we calculate if he's able to drive and drink legally.

In the first chapter, we created a variable by writing in the console age = 27. This is the same as writing var age = 27. In this case, var stands for variable, and age is the name of this variable. We can choose whatever we want, but it is a very good practice to make it meaningful. Let's create more variables.

Ask Javascript for the variable firstName. You should get ReferenceError: firstName is not defined. Let's declare first name by writing var firstName = 'Jan'. What is the output of firstName now?

'Jan'

Are you able to create a new variable called lastName and give it the value 'Kowalski'?

var lastName = 'Kowalski'

When declaring variables, we can use other variables to create a value. For instance, we can create a variable called fullName and assign to it firstName + ' ' + lastName. Like this:

var fullName = firstName + ' ' + lastName

What is the output of fullName now?

'Jan Kowalski'

Let's assume our friend Jan decided to change his name. We can reassign the value of firstName to something else. Try to change the value of the first name variable to Tomek. What is the value of firstName now? What is the value of fullName now?

firstName = 'Tomek'
'Tomek'
'Jan Kowalski'

Interestingly the fullName variable didn't change. That happens because once a variable is created with a value, that value is calculated and assigned to it. Even if we created it with a variable, it will not dynamically change with the variable. This behavior can be achieved with a function. Define a function to calculate the full name dynamically:

function fullName() { 
  return firstName + ' ' + lastName; 
}

What is the value of fullName()? Try reassigning firstName to Jan. What is the value of fullName() now?

'Tomek Kowalski'
firstName = 'Jan'
'Jan Kowalski'

Variables can assume other types of data, like numbers and booleans. Let's define Jan's age to be 17. Create a boolean variable called canDrive that is true if age is more than 17. What is the value of canDrive?

var age = 17
var canDrive = age > 17
false

Set the age to 24. Can you create a variable called canDrink and make it true only if the age is more than 21? What is the value of canDrink?

age = 24
var canDrink = age > 21
true

Set the variable drunkToday to true. Can you recalculate canDrive to be true only if the age is more than 17 and drunkToday is false?

canDrive = age > 17 && !drunkToday

Challenge Notice that our variable canDrink is calculated upon assignment. Changing the age does not affect its value. Are you able to rewrite canDrink into a function?

function canDrink() { return age > 17 && !drunkToday }

HTML & JS - Buttons

In this exercise we will explore how Javascript and HTML can work together to make your website interactive. There are many ways that web pages may require user interaction, for instance text fields, checkboxes, date selectors, buttons, forms, and many more. In this exercise we explore the usage of buttons.

Open the new Codepen we've prepared for you by following this link. As previously, save it and keep the newly generated link ready, in case you want to come back later to this exercise. You should be able to see a blog post web page. Clicking the button Join on the page doesn't do anything, let's add some behavior.

On the Javascript text editor, we are going to check if we're able to make it talk to us. Making programs talk to developers is called Logging. Javascript can log with the function console.log. Add the following to your JS code:

console.log("Hello World")

Now open the console. You should be able to see this message.

Before we go on adding awesome behaviors to our website, we need to be able to tell when the webpage is prepared to understand our code. We will add some JS code to ask the browser to tell us when it's ready.

function ready() {
  // Add code below

  // Add code above
}
document.addEventListener("DOMContentLoaded", ready, false)

You've learned that we can add the style to specific HTML elements using the class attribute. There is another attribute, that we can use to uniquely identify a visual element in web pages. This attribute is called id. Let's try adding an identifier to our button, like so:

<button id="submitButton"> Join </button>

Now that our button element has an ID, we're able to reference to it in a Javascript variable, and add a click listener to it. In Software Engineer, a Listener Design Pattern is a function that is called when specific events happen. Let's try to implement it. Add the following to your ready function:

var button = document.getElementById('button')
button.onclick = function (e) {
   console.log('Button was clicked')
}

Are you able to see the logs in the console when you press the button?

A very important part of frontend development is making your content configurable. CMS (content management service) platforms make use of this ability by configuring the web elements with certain variables. Let's make the content of our webpage configurable. Find the main paragraph in the page, and add the id of mainContent to it. Then inside your ready function, create a variable for it, and set its text to be something else.

<p id="mainContent">

var mainContent = document.getElementById('mainContent')
mainContent.textContent = "write something meaningful here"

Now use a similar procedure to add a title ID to the title of the page, and create a title variable in the ready funtion, and set the title text to something meaningful.

Another very powerful Javascript feature is the creation of objects. Objects are data structures that can hold multiple fields. In an MVC architecture, a Javascript Controller configures a HTML View with an object Model. Let's create a model object for us that stores the string values of title and content.

var model = {
  title: "A meaningful title",
  content: "A meaningful content"
}

Now use the properties of the variable model to update your content, for instance:

mainParagraph.textContent = model.content

Challenge Update the model to include a new variable, the title of the button. Use this new variable to update the title of your button accordingly.

Index

1) Javascript - Operations

2) HTML & CSS - Tags and Attributes

3) Javascript - Variables & Functions

HTML & JS - Buttons