Pure Js is Hard #3

Hey everyone the previous relevant post can be found here.

Pure Js is Hard #2

Antonio-Bennett ・ Dec 17 '21 ・ 4 min read

#opensource #javascript #hacktoberfest #osd600

Issue

This issue this time is that we must be able to filter and show tasks that are due soon. I opted to show tasks that are due the next day.

So assuming you read that this one wasn't terribly difficult building unto what we had.

PR

The PR has some kinks but it is mostly done. I will be ironing stuff out and updating this as needed. But here we go.

The first thing I did was add the DueSoon button in the filter code.

<div class="form-floating" id="filter-wrapper${list}">
    <input type="text" name="filter${list}" id="filter${list}" class="form-control" placeholder="filter" />
    <label for="filter${list}">Search for task</label>
    <input id="due${list}" type="#" class="btn btn-success" value="Due Soon" />
</div>

This means this only shows after more than 3 tasks just like the search filter option.

Next all we have to do is create a dueDate property for the task when we create it like such

    let taskDue = 0;
    if (event.target.previousSibling.previousSibling.value) taskDue = event.target.previousSibling.previousSibling.value;

    if (taskName.length) {
      let task = {
        name: taskName,
        status: 'pending',
        date: new Date().getTime(),
        dueDate: new Date(taskDue),
        order: '',
      };

Then in the filter function we check if the event is searching key strokes or the click of the due soon button. If it is the click we go through each task of that tasklist and check if it's due date is the next day and if it is we keep it visible otherwise hide the rest.

    if (event) {
      if (event.target.value != 'Due Soon') {
        const text = event.target.value.toLowerCase();
        document.querySelectorAll(`#tasklist${selected}`).forEach(function (task) {
          if (task.querySelector('.form-check-label').textContent.toLowerCase().trim().indexOf(text) !== -1) {
            task.setAttribute('style', 'display: flex !important');
          } else {
            task.setAttribute('style', 'display: none !important ');
          }
        });
      } else {
        let i = 0;
        document.querySelectorAll(`#tasklist${selected}`).forEach(function (task) {
          let date2 = tasklists[selected].tasks[i].dueDate;
          let date1 = new Date();
          let date1_tomorrow = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate() + 1);
          if (
            date1_tomorrow.getFullYear() == date2.getFullYear() &&
            date1_tomorrow.getMonth() == date2.getMonth() &&
            date1_tomorrow.getDate() == date2.getDate()
          ) {
            task.setAttribute('style', 'display: flex !important');
          } else {
            task.setAttribute('style', 'display: none !important ');
          }
        });
      }
    }

Overall Thoughts

Again I can't stress it enough. Use a framework if having fun and figuring stuff out isn't your goal. It is fun figuring out how to manage the state and how to design architecture but the pains of pure js in web apps like this are super annoying. I love this project though as it helps me to figure out new ways of doing things in JS.