SheTech
  • SheTech JS bootcamp
  • Level 1 - awesome tasks
    • Introduction to Awesome Tasks
    • Step 1: HTML
    • Step 2: playing with the DOM
    • Step 3: add a new task
    • Step 4: dynamic list of tasks
    • Step 5: adding new items
    • Step 6: removing items
    • Step 7: add some style
    • Step 8: marking items as done
    • Step 9: saving items in the localstorage
    • Step 10: adding filters and bulk actions
    • Step 11: add counters
    • From Awesome Task to the next big thing!
  • Level 2 - timeline
    • Live Timeline
    • Step 1: basic HTML page
    • Step 2: add util library
    • Step 3: show all posts
    • Step 4: add form
    • Step 5: collect form data
    • Step 6: create a new post
    • Step 7: validating posts
    • Step 8: refactoring
    • Step 9: refresh button
    • Step 10: auto refresh
  • Code Editors
  • Useful resources
  • API Reference
  • Glossary
Powered by GitBook
On this page

Was this helpful?

  1. Level 2 - timeline

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.

What is the Doctype?

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 Bootstrap'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.

What is a <div>?

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

How do I use functions?

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.

How does document.querySelector() work?

What syntax can I use with a query selector?

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

What are panel and the other panel- classes?

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.

What are Javascript objects?

drawElement(postToAdd);

The second line contains the call to the drawElement function!

PreviousLive TimelineNextStep 2: add util library

Last updated 4 years ago

Was this helpful?