Uncaught (in promise) Error: TodoList has not been deployed to detected network (network/artifact mismatch)

[Smit-05]

Issue

I am new to truffle and blockchain world and I have tried following a youtube video to make this project. But I am getting an error in deploying the contract.

Uncaught (in promise) Error: TodoList has not been deployed to detected network (network/artifact mismatch)
at truffle-contract.js:456:17
at async Object.loadContract (app.js:60:20)
at async Object.load (app.js:13:5)

Forgive me for the rudeness as it is my first issue.

TodoList.sol

pragma solidity ^0.5.0;

contract TodoList{
    uint public taskCount=0;

    struct Task{
        uint id;
        string taskName;
        bool completed;
    }

    mapping(uint => Task) public tasks;

    constructor () public {
        createTask("Start doig tasks now :)");
    }

    function createTask(string memory content) public {
        taskCount++;
        tasks[taskCount] = Task(taskCount,content,false);

    }
}

app.js

var print = console.log

Web3 = require('web3')
App = {
  loading:false,
  contracts: {},

  load: async () => {
    await App.loadWeb3()
    await App.loadAccount()
    await App.loadContract()
    await App.render()
  },

  loadWeb3: async () => {
    
    if (typeof web3 !== 'undefined') {
      App.web3Provider = web3.currentProvider
      web3 = new Web3(web3.currentProvider)
    } else {
      window.alert("Please connect to Metamask.")
    }
    // Modern dapp browsers...
    if (window.ethereum) {
      window.web3 = new Web3(ethereum)
      try {
        // Request account access if needed
        await ethereum.enable()
        // Acccounts now exposed
        web3.eth.sendTransaction({/* ... */})
      } catch (error) {
        // User denied account access...
      }
    }
    // Legacy dapp browsers...
    else if (window.web3) {
      App.web3Provider = web3.currentProvider
      window.web3 = new Web3(web3.currentProvider)
      // Acccounts always exposed
      web3.eth.sendTransaction({/* ... */})
    }
    // Non-dapp browsers...
    else {
      console.log('Non-Ethereum browser detected. You should consider trying MetaMask!')
    }
  },

  loadAccount: async () => {
    App.account = window.web3.eth.accounts[0]
    print(App.account)
  },

  loadContract: async () => {
    const todoList = await $.getJSON('TodoList.json')
    App.contracts.TodoList = TruffleContract(todoList)
    App.contracts.TodoList.setProvider(App.web3Provider)
    print(todoList)
    App.todoList = await App.contracts.TodoList.deployed()
    print(App.todoList)
  },

  render: async () => {

    if(App.loading){
      return
    }
    App.setLoading(true)


    $("#account").html(App.account)

    App.setLoading(false)
  },


  setLoading: (boolean) => {
    App.loading = boolean
    const loader = $('#loader')
    const content = $('#content')
    if (boolean) {
      loader.show()
      content.hide()
    } else {
      loader.hide()
      content.show()
    }
  }

}

$(() => {
  $(window).load(() => {
    App.load()
  })
})

2_deploy_contracts.js

var TodoList = artifacts.require("./TodoList.sol");

module.exports = function(deployer) {
  deployer.deploy(TodoList);
};

Environment

• Operating System: Windows 10
• Truffle version (truffle version):
  Truffle v5.0.2 (core: 5.0.2)
  Solidity v0.5.0 (solc-js)
• node version (node --version): v16.15.0
• npm version (npm --version): 8.12.1