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 1 - awesome tasks

Step 7: add some style

PreviousStep 6: removing itemsNextStep 8: marking items as done

Last updated 3 years ago

Was this helpful?

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

CSS file