Video summary

C# Asp.net Core mvc NET 5 Create a TO DO LIST APP with Bootstrap html css | Javascript Part 2 -2022

Main summary

Key takeaways

Technology

Overview

This video is Part 2 of a tutorial building an ASP.NET Core MVC (.NET 5) To-Do List app. It uses:

  • JavaScript + HTML + CSS (with Bootstrap for styling)
  • A SQLite database for persistence

What the tutorial adds (from Part 1 to Part 2)

  • Demo walkthrough of the “final app” features
    • Add new to-dos and have them saved to the database
    • Search/filter to-dos as you type (no refresh)
    • Mark items as completed via a checkbox-like toggle (check/undo)
    • Edit existing items
    • Delete items
    • Persistence: refresh doesn’t clear items because data is stored in the database

Step-by-step technical implementation (key concepts)

  1. Completed/Checked UI using CSS

    • Adds a CSS class (e.g., check) that applies line-through text decoration to visually indicate completion.

  2. Toggle completed state with JavaScript event handling

    • Selects all table rows (tr elements).
    • Iterates through rows and attaches a click event listener.
    • On click, it inspects the clicked cell (td) and checks whether it contains the completion class.
    • Uses classList.remove(...) / classList.add(...) to toggle completed styling.

  3. Search bar UI (Bootstrap-styled input)

    • Adds an <input> element with:
      • an id like searchBar
      • type "text"
      • Bootstrap classes such as form-control
      • placeholder like “Search content”

  4. Live filtering logic (keyup event)

    • Adds a keyup event listener to the search input.
    • Reads the input value, converts it to uppercase, and filters to-dos by comparing with each row/cell’s text (also converted to uppercase).
    • For each to-do row:
      • If the match is found (indexOf(...) > -1), sets style.display to show it
      • Otherwise sets style.display = "none" to hide it
    • Includes a troubleshooting note: the correct DOM selection method must target the right elements (e.g., using getElementsByTagName or the correct tag name selector for the to-do rows).

  5. Verification steps

    • Tests:
      • filtering by different keywords (e.g., “cars”, “cleaning”, “shopping”)
      • editing and deleting items still work
      • refresh behavior confirms persistence (saved items remain)

Main speakers / sources

  • Speaker/source: The tutorial creator hosting the channel (referred to as “hey guys welcome back…” / “hi guys…”), demonstrating the implementation in Visual Studio 2019 and showing the running app demo.

Original video