Tutorial troubles for todos continues.. checking off and deleting tasks

help
1

i am seeing no check boxs watsoever any help appreciated heres my code
imports/ui/task.js

import { Template } from 'meteor/templating';

import { Tasks } from '../api/tasks.js';

import './task.html';

Template.task.events({
    'click .toggle-checked'() {
      //set the checked property to the opposite of its current value
      Tasks.update(this._id, {
        $set: { checked: ! this.checked },
    });
},
'click .delete'() {
  Tasks.remove(this._id);
},
});

imports/ui/task.html

<template name="task">
  <li class="{{#if checked}}checked{{/if}}">
    <button class="delete">&times;</button>

    <input type="checkbox" checked="{{checked}}" class="toggle-checked" />

    <span class="text">{{text}}</span>
  </li>
</template>

imports/ui/body.js

import { Template } from 'meteor/templating';

import { Tasks } from '../api/tasks.js';

import './task.js';
import './body.html';

Template.body.helpers({
  tasks() {
//show newest tasks at the top
   return Tasks.find({}, { sort: { createdAt: -1 }});
  },
});

Template.body.events({
  'submit .new-task'(event) {
    // Prevent default browser form submit
    event.preventDefault();

    // Get value from form element
    const target = event.target;
    const text = target.text.value;

    // Insert a task into the collection
    Tasks.insert({
      text,
      createdAt: new Date(), // current time
    });

    // Clear form
    target.text.value = '';
  },
});
2

But you are seeing the rest - the delete button and the text? If so that seems pretty weird, your HTML looks in order. No error messages in your browser console?

3

quite the opposite
without import’./task.js",
with import’./task.js",

4

all my tasks just disapear once i put the import into the code so i assume the task.js is incorrect somehow
and typing anything in the text box with the import adds no tasks to the list