Step 7: add some style

Break: Let’s add some style!

Time has finally come to make our little app look less ugly!

We will not be adding new features during this step but our app will look much better after some small changes in the markup and after we link our stylesheet. We will not go through the CSS rules – CSS is a whole new argument and it is beyond the scope of today’s workshop, but feel free to ask your coach for resources if you are interested.

Let’s create a <link> tag that points to our CSS file: place this code after the <title> tag, inside <head>.

<link href="styles/app.css" rel="stylesheet">

If we reload the page we notice that our page has now a background image and the text changed a bit.

Now let's turn our template item into this:

<li class="list-group-item">
  <span></span>
  <button onclick="removeItem(event)" class="close">×</button>
</li>

And between the app title <h2> and the <script> tag let's replace the form with this:

<div class="panel panel-default">
  <form onsubmit="createNew(event)" class="panel-heading">
    <input id="new-item" class="form-control" placeholder="Add a new task..." autofocus="autofocus">
    <button class="btn btn-primary">Add</button>
  </form>
  <ul id="task-list" class="list-group"></ul>
</div>

Notice that we preserved all the previous elements and we added some more elements and classes. This way we gave a better structure to our markup. We created a box that contains our tasks list, plus a dedicated box that contains our input field.

PreviousStep 6: removing itemsNextStep 8: marking items as done

Last updated