---
# System prepended metadata

title: Todo Blockchain

---

# Todo Blockchain

**Simple Todo Web Application using blockchain**  
Implemented by following tutorial: [GregoryBlog](https://www.dappuniversity.com/articles/blockchain-app-tutorial).
![](https://i.imgur.com/cc2e5tj.jpg)

## Dependencies
* ganache-cli
* Truffle
* npm
* web3
* nodeJs
* metamask
## Following through steps:

* Installing dependencies
* Launching ganache-cli getting used to interface
* Initializing truffle project and loading basic html, js file
    * Loading web3 from Metamask
    * Checking MetaMask connection to ganache-cli
    * Checking app.js connection through web3.js
    * Loading contracts to client ( to be able to interact with our smartContract)
    * Accessing web3 accounts from client(browser) 
* Rendering tasks in browser
    * Preventing double rendering using flags
    * Updating account in navBar
    * Fetching taskCount and looping through it
    * Getting taskTemplate from html and using it to append to html lists
* Testing
    ![](https://i.imgur.com/40Grw78.jpg)

    * Loading a copy of smart contract
    * Testing address validity
    * Testing Task's id, content, completed vars
* Creating Tasks
    * Adding event on creating a task
    * Checking task creation using event
    * Extracting content from form in js
    * Accessing the createTask method using truffle contract and passing content to it, then reloading the page
    * Trying task creation on browser
    ![](https://i.imgur.com/zPhACaI.png)
    ![](https://i.imgur.com/NmWAZZF.jpg)

        * we type the content press enter
        * open up metamask to authorize transaction to contract
        * it reloads the page and our task is added
* Completing tasks
    * Adding toggle function in contract file (.sol) with event
    * Testing the toggle function using event
![](https://i.imgur.com/wXML02Q.jpg)

    * Re-compiling and checking full working
![](https://i.imgur.com/x1Kg7Pt.png)

## Acknowledgement
* [YT VOD *to follow by* freeCodeCamp.](https://youtu.be/coQ5dg8wM2o)
* [Blog: Gregory from Dapp University! ](https://www.dappuniversity.com/articles/blockchain-app-tutorial)
* [Legacy Web3 Support](https://docs.metamask.io/guide/provider-migration.html#replacing-window-web3)
* [Digital Currency Tutorials](https://youtube.com/playlist?list=PL6gx4Cwl9DGCB3bm4ZuFAm4eADj0VMy_D)
* https://blockchainhub.net/blockchain-intro/

