├── .gitignore
├── migrations
    ├── 2_deploy_contracts.js
    └── 1_initial_migration.js
├── bs-config.json
├── truffle-config.js
├── contracts
    ├── Migrations.sol
    └── TodoList.sol
├── package.json
├── test
    └── TodoList.test.js
└── src
    ├── index.html
    └── app.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | 


--------------------------------------------------------------------------------
/migrations/2_deploy_contracts.js:
--------------------------------------------------------------------------------
1 | var TodoList = artifacts.require("./TodoList.sol");
2 | 
3 | module.exports = function(deployer) {
4 |   deployer.deploy(TodoList);
5 | };
6 | 


--------------------------------------------------------------------------------
/migrations/1_initial_migration.js:
--------------------------------------------------------------------------------
1 | var Migrations = artifacts.require("./Migrations.sol");
2 | 
3 | module.exports = function(deployer) {
4 |   deployer.deploy(Migrations);
5 | };
6 | 


--------------------------------------------------------------------------------
/bs-config.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "server": {
 3 |     "baseDir": [
 4 |       "./src",
 5 |       "./build/contracts"
 6 |     ],
 7 |     "routes": {
 8 |       "/vendor": "./node_modules"
 9 |     }
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/truffle-config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   networks: {
 3 |     development: {
 4 |       host: "127.0.0.1",
 5 |       port: 7545,
 6 |       network_id: "*" // Match any network id
 7 |     }
 8 |   },
 9 |   solc: {
10 |     optimizer: {
11 |       enabled: true,
12 |       runs: 200
13 |     }
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/contracts/Migrations.sol:
--------------------------------------------------------------------------------
 1 | pragma solidity >=0.4.21 <0.6.0;
 2 | 
 3 | contract Migrations {
 4 |   address public owner;
 5 |   uint public last_completed_migration;
 6 | 
 7 |   constructor() public {
 8 |     owner = msg.sender;
 9 |   }
10 | 
11 |   modifier restricted() {
12 |     if (msg.sender == owner) _;
13 |   }
14 | 
15 |   function setCompleted(uint completed) public restricted {
16 |     last_completed_migration = completed;
17 |   }
18 | 
19 |   function upgrade(address new_address) public restricted {
20 |     Migrations upgraded = Migrations(new_address);
21 |     upgraded.setCompleted(last_completed_migration);
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "eth-todo-list",
 3 |   "version": "1.0.0",
 4 |   "description": "Blockchain Todo List Powered By Ethereum",
 5 |   "main": "truffle-config.js",
 6 |   "directories": {
 7 |     "test": "test"
 8 |   },
 9 |   "scripts": {
10 |     "dev": "lite-server",
11 |     "test": "echo \"Error: no test specified\" && sexit 1"
12 |   },
13 |   "author": "gregory@dappuniversity.com",
14 |   "license": "ISC",
15 |   "devDependencies": {
16 |     "bootstrap": "4.1.3",
17 |     "chai": "^4.1.2",
18 |     "chai-as-promised": "^7.1.1",
19 |     "chai-bignumber": "^2.0.2",
20 |     "lite-server": "^2.3.0",
21 |     "nodemon": "^1.17.3",
22 |     "truffle": "5.0.2",
23 |     "truffle-contract": "3.0.6"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/contracts/TodoList.sol:
--------------------------------------------------------------------------------
 1 | pragma solidity ^0.5.0;
 2 | 
 3 | contract TodoList {
 4 |   uint public taskCount = 0;
 5 | 
 6 |   struct Task {
 7 |     uint id;
 8 |     string content;
 9 |     bool completed;
10 |   }
11 | 
12 |   mapping(uint => Task) public tasks;
13 | 
14 |   event TaskCreated(
15 |     uint id,
16 |     string content,
17 |     bool completed
18 |   );
19 | 
20 |   event TaskCompleted(
21 |     uint id,
22 |     bool completed
23 |   );
24 | 
25 |   constructor() public {
26 |     createTask("Check out dappuniversity.com");
27 |   }
28 | 
29 |   function createTask(string memory _content) public {
30 |     taskCount ++;
31 |     tasks[taskCount] = Task(taskCount, _content, false);
32 |     emit TaskCreated(taskCount, _content, false);
33 |   }
34 | 
35 |   function toggleCompleted(uint _id) public {
36 |     Task memory _task = tasks[_id];
37 |     _task.completed = !_task.completed;
38 |     tasks[_id] = _task;
39 |     emit TaskCompleted(_id, _task.completed);
40 |   }
41 | 
42 | }
43 | 


--------------------------------------------------------------------------------
/test/TodoList.test.js:
--------------------------------------------------------------------------------
 1 | const TodoList = artifacts.require('./TodoList.sol')
 2 | 
 3 | contract('TodoList', (accounts) => {
 4 |   before(async () => {
 5 |     this.todoList = await TodoList.deployed()
 6 |   })
 7 | 
 8 |   it('deploys successfully', async () => {
 9 |     const address = await this.todoList.address
10 |     assert.notEqual(address, 0x0)
11 |     assert.notEqual(address, '')
12 |     assert.notEqual(address, null)
13 |     assert.notEqual(address, undefined)
14 |   })
15 | 
16 |   it('lists tasks', async () => {
17 |     const taskCount = await this.todoList.taskCount()
18 |     const task = await this.todoList.tasks(taskCount)
19 |     assert.equal(task.id.toNumber(), taskCount.toNumber())
20 |     assert.equal(task.content, 'Check out dappuniversity.com')
21 |     assert.equal(task.completed, false)
22 |     assert.equal(taskCount.toNumber(), 1)
23 |   })
24 | 
25 |   it('creates tasks', async () => {
26 |     const result = await this.todoList.createTask('A new task')
27 |     const taskCount = await this.todoList.taskCount()
28 |     assert.equal(taskCount, 2)
29 |     const event = result.logs[0].args
30 |     assert.equal(event.id.toNumber(), 2)
31 |     assert.equal(event.content, 'A new task')
32 |     assert.equal(event.completed, false)
33 |   })
34 | 
35 |   it('toggles task completion', async () => {
36 |     const result = await this.todoList.toggleCompleted(1)
37 |     const task = await this.todoList.tasks(1)
38 |     assert.equal(task.completed, true)
39 |     const event = result.logs[0].args
40 |     assert.equal(event.id.toNumber(), 1)
41 |     assert.equal(event.completed, true)
42 |   })
43 | 
44 | })
45 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
 8 |     <title>Dapp University | Todo List</title>
 9 | 
10 |     <!-- Bootstrap -->
11 |     <link href="vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
12 | 
13 |     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
14 |     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
15 |     <!--[if lt IE 9]>
16 |       <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
17 |       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
18 |     <![endif]-->
19 | 
20 |     <style>
21 |       main {
22 |         margin-top: 60px;
23 |       }
24 | 
25 |       #content {
26 |         display: none;
27 |       }
28 | 
29 |       form {
30 |         width: 350px;
31 |         margin-bottom: 10px;
32 |       }
33 | 
34 |       ul {
35 |         margin-bottom: 0px;
36 |       }
37 | 
38 |       #completedTaskList .content {
39 |         color: grey;
40 |         text-decoration: line-through;
41 |       }
42 |     </style>
43 |   </head>
44 |   <body>
45 |     <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
46 |       <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://www.dappuniversity.com/free-download" target="_blank">Dapp University | Todo List</a>
47 |       <ul class="navbar-nav px-3">
48 |         <li class="nav-item text-nowrap d-none d-sm-none d-sm-block">
49 |           <small><a class="nav-link" href="#"><span id="account"></span></a></small>
50 |         </li>
51 |       </ul>
52 |     </nav>
53 |     <div class="container-fluid">
54 |       <div class="row">
55 |         <main role="main" class="col-lg-12 d-flex justify-content-center">
56 |           <div id="loader" class="text-center">
57 |             <p class="text-center">Loading...</p>
58 |           </div>
59 |           <div id="content">
60 |             <form onSubmit="App.createTask(); return false;">
61 |               <input id="newTask" type="text" class="form-control" placeholder="Add task..." required>
62 |               <input type="submit" hidden="">
63 |             </form>
64 |             <ul id="taskList" class="list-unstyled">
65 |               <div class="taskTemplate" class="checkbox" style="display: none">
66 |                 <label>
67 |                   <input type="checkbox" />
68 |                   <span class="content">Task content goes here...</span>
69 |                 </label>
70 |               </div>
71 |             </ul>
72 |             <ul id="completedTaskList" class="list-unstyled">
73 |             </ul>
74 |           </div>
75 |         </main>
76 |       </div>
77 |     </div>
78 | 
79 |     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
80 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
81 |     <!-- Include all compiled plugins (below), or include individual files as needed -->
82 |     <script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
83 |     <script src="vendor/truffle-contract/dist/truffle-contract.js"></script>
84 |     <script src="app.js"></script>
85 |   </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
  1 | App = {
  2 |   loading: false,
  3 |   contracts: {},
  4 | 
  5 |   load: async () => {
  6 |     await App.loadWeb3()
  7 |     await App.loadAccount()
  8 |     await App.loadContract()
  9 |     await App.render()
 10 |   },
 11 | 
 12 |   // https://medium.com/metamask/https-medium-com-metamask-breaking-change-injecting-web3-7722797916a8
 13 |   loadWeb3: async () => {
 14 |     if (typeof web3 !== 'undefined') {
 15 |       App.web3Provider = web3.currentProvider
 16 |       web3 = new Web3(web3.currentProvider)
 17 |     } else {
 18 |       window.alert("Please connect to Metamask.")
 19 |     }
 20 |     // Modern dapp browsers...
 21 |     if (window.ethereum) {
 22 |       window.web3 = new Web3(ethereum)
 23 |       try {
 24 |         // Request account access if needed
 25 |         await ethereum.enable()
 26 |         // Acccounts now exposed
 27 |         web3.eth.sendTransaction({/* ... */})
 28 |       } catch (error) {
 29 |         // User denied account access...
 30 |       }
 31 |     }
 32 |     // Legacy dapp browsers...
 33 |     else if (window.web3) {
 34 |       App.web3Provider = web3.currentProvider
 35 |       window.web3 = new Web3(web3.currentProvider)
 36 |       // Acccounts always exposed
 37 |       web3.eth.sendTransaction({/* ... */})
 38 |     }
 39 |     // Non-dapp browsers...
 40 |     else {
 41 |       console.log('Non-Ethereum browser detected. You should consider trying MetaMask!')
 42 |     }
 43 |   },
 44 | 
 45 |   loadAccount: async () => {
 46 |     // Set the current blockchain account
 47 |     App.account = web3.eth.accounts[0]
 48 |   },
 49 | 
 50 |   loadContract: async () => {
 51 |     // Create a JavaScript version of the smart contract
 52 |     const todoList = await $.getJSON('TodoList.json')
 53 |     App.contracts.TodoList = TruffleContract(todoList)
 54 |     App.contracts.TodoList.setProvider(App.web3Provider)
 55 | 
 56 |     // Hydrate the smart contract with values from the blockchain
 57 |     App.todoList = await App.contracts.TodoList.deployed()
 58 |   },
 59 | 
 60 |   render: async () => {
 61 |     // Prevent double render
 62 |     if (App.loading) {
 63 |       return
 64 |     }
 65 | 
 66 |     // Update app loading state
 67 |     App.setLoading(true)
 68 | 
 69 |     // Render Account
 70 |     $('#account').html(App.account)
 71 | 
 72 |     // Render Tasks
 73 |     await App.renderTasks()
 74 | 
 75 |     // Update loading state
 76 |     App.setLoading(false)
 77 |   },
 78 | 
 79 |   renderTasks: async () => {
 80 |     // Load the total task count from the blockchain
 81 |     const taskCount = await App.todoList.taskCount()
 82 |     const $taskTemplate = $('.taskTemplate')
 83 | 
 84 |     // Render out each task with a new task template
 85 |     for (var i = 1; i <= taskCount; i++) {
 86 |       // Fetch the task data from the blockchain
 87 |       const task = await App.todoList.tasks(i)
 88 |       const taskId = task[0].toNumber()
 89 |       const taskContent = task[1]
 90 |       const taskCompleted = task[2]
 91 | 
 92 |       // Create the html for the task
 93 |       const $newTaskTemplate = $taskTemplate.clone()
 94 |       $newTaskTemplate.find('.content').html(taskContent)
 95 |       $newTaskTemplate.find('input')
 96 |                       .prop('name', taskId)
 97 |                       .prop('checked', taskCompleted)
 98 |                       .on('click', App.toggleCompleted)
 99 | 
100 |       // Put the task in the correct list
101 |       if (taskCompleted) {
102 |         $('#completedTaskList').append($newTaskTemplate)
103 |       } else {
104 |         $('#taskList').append($newTaskTemplate)
105 |       }
106 | 
107 |       // Show the task
108 |       $newTaskTemplate.show()
109 |     }
110 |   },
111 | 
112 |   createTask: async () => {
113 |     App.setLoading(true)
114 |     const content = $('#newTask').val()
115 |     await App.todoList.createTask(content)
116 |     window.location.reload()
117 |   },
118 | 
119 |   toggleCompleted: async (e) => {
120 |     App.setLoading(true)
121 |     const taskId = e.target.name
122 |     await App.todoList.toggleCompleted(taskId)
123 |     window.location.reload()
124 |   },
125 | 
126 |   setLoading: (boolean) => {
127 |     App.loading = boolean
128 |     const loader = $('#loader')
129 |     const content = $('#content')
130 |     if (boolean) {
131 |       loader.show()
132 |       content.hide()
133 |     } else {
134 |       loader.hide()
135 |       content.show()
136 |     }
137 |   }
138 | }
139 | 
140 | $(() => {
141 |   $(window).load(() => {
142 |     App.load()
143 |   })
144 | })
145 | 


--------------------------------------------------------------------------------