How to add a line break in Meteor?

Question

I'm not too sure how I can add a line break every time when i click a button in meteor (in this case "end day"). The jquery after shouldn't work since it's reactive data.

You can see it here. I just want to add the line break on top of the list after I hit end day!

http://sallychecklist.meteor.com/

HTML

<template name="checklist">
  <ul>{{#each list}}
    <li class='check {{selected}}'>{{task}} {{status}}</li>
    {{/each}}
  </ul>
  <input type="button" class="checked" value="Done">
  <input type="button" class="line" value="End Day">
</template>

<template name="addtask">
  <form>
    <input type="text" name="add">
    <input type="submit" value="Add Task">
  </form>
</template>

Here is the template helpers.

Template.checklist.helpers({
  'list': function() {
    return CheckList.find()
  },

  'selected': function() {
    var taskId = this._id;
    var anotherSelectedTask = Session.get('selectedTask');
    if (taskId == anotherSelectedTask) {
      return "selected"
    }
  }
})

Template.checklist.events({
  'click .check': function() {
    var taskId = this._id;
    Session.set('selectedTask', taskId);
  },

  'click .checked': function() {
    console.log('check');
    var selectedTask = Session.get('selectedTask');
    CheckList.update(selectedTask, {
      $set: {
        status: '✓'
      }
    });
  },
  'click .line': function() {
    console.log('remove');
    var removeId = Session.get('selectedTask');
    CheckList.remove(removeId);
  }
})

Template.addtask.events({
  'submit form': function(event) {
    event.preventDefault();
    var taskName = event.target.add.value;
    CheckList.insert({
      task: taskName
    })
  }
})

Thanks!!!

Answer 1

The live example doesn't have an "End Day" button? But your code does. I would add "selected" as an ID for easy access to the element you want to have line below:

<li id="{{selected}}" class='check {{selected}}'>{{task}} {{status}}</li>

Then create a simple class in css for the horizontal rule:

.horizontal-line {
  border-bottom: solid black 1px;
}

Now for the JavaScript. Add this event.

'click .line': function() {
  // get the selected element
  var selectedElement = document.getElementById('selected');
  // add a class to the existing class names
  selectedElement.className = selectedElement.className + ' horizontal-line';
}

And that should give you a line below the selected element and thus end the day of stuff to-do.

You will have to create a new remove button to remove an element because that's currently what your end day button does.

Hope it helps!

Answer 2

Try using

<pre>
Your
breaking 
contents
</pre>