Step 1: basic HTML page

The initial code

Here is the code that we will start with:

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div id="posts"></div>
  <div>
</body>
<script>
  function drawElement(post) {
    var postContainer = document.querySelector('#posts');
    postContainer.innerHTML +=
      '<div class="card card-default">' +
        '<div class="card-header">' +
          post.title +
        '</div>' +
        '<div class="card-body">' +
          post.body +
        '</div>' +
      '</div>';
  }
  var postToAdd = { title: 'new post', body: 'This is a message..' };
  drawElement(postToAdd);
</script>
</html>

Let's go through the most relevant parts to understand what it does.

0.1 — The Doctype

<!DOCTYPE html>

The Doctype informs the browser which version of HTML is used in the file.

0.2 — The head

<head>
  <title></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>

The <head> tag can contain:

information about the page, such as the title
references to resources that need to be requested before creating the actual page content
inline scripts and styles

We are including 's CSS file. Bootstrap is a UI framework that provides a set of predefined styles, components and scripts.

0.3 — The body

<body>
  <div class="container">
    <div id="posts"></div>
  <div>
</body>

The body is the root of our application's visible content.

The element <div id="posts"> is where we will put all the messages. It is empty because the messages will be created dynamically using Javascript!

The posts container is wrapped by <div class="container">. This div acts as a container for other elements that we will add in the future, and helps to better style and position its content. container is a class used by Bootstrap.

0.4 — The script that creates a post

<script>
  function drawElement(post) {
    var postContainer = document.querySelector('#posts');
    postContainer.innerHTML +=
      '<div class="card card-default">' +
        '<div class="card-header">' +
          post.title +
        '</div>' +
        '<div class="card-body">' +
          post.body +
        '</div>' +
      '</div>';
  }
  var postToAdd = { title: 'new post', body: 'This is a message..' };
  drawElement(postToAdd);
</script>

In order to create the first post, we split the code in two parts:

A generic drawElement function that appends some HTML to the posts container, customised with the provided message details
A call to the drawElement function with the actual message data

0.4.1 — The drawElement function

What is the function actually doing?

var postContainer = document.querySelector('#posts');

The first line of drawElement gets the reference to the posts container.

postContainer.innerHTML +=
  '<div class="panel panel-default">' +
    '<div class="panel-heading">' +
      post.title +
    '</div>' +
    '<div class="panel-body">' +
      post.body +
    '</div>' +
  '</div>';

The second part does a couple of things:

It concatenates a set of strings, some of which (title and body) are properties of the post input parameter
It appends the concatenated string to the post container as HTML

0.4.2 — The initialisation code

In order to create the message, we call the drawElement function and pass the message data as parameter.

var postToAdd = { title: 'new post', body: 'This is a message..' };

The message data is a Javascript object. It contains two properties, title and body.

drawElement(postToAdd);

The second line contains the call to the drawElement function!

PreviousLive Timeline NextStep 2: add util library

Last updated 4 years ago

Was this helpful?