Nodejs How to pass user form data into defined class

Question

I am just trying build a blockchain after watching a youtube video.

app.js:

const SHA256 = require('crypto-js/sha256');

class Block {
    constructor(data, previousHash = ''){
        this.previousHash = previousHash;
        this.data = data;
        this.hash = this.calculateHash();
    }

    calculateHash(){
        return SHA256(this.previousHash + JSON.stringify(this.data)).toString();
    }
}

class Blockchain{
    constructor(){
        this.chain = [this.createGenesisBlock()];
    }

    createGenesisBlock(){
        return new Block("Genesis Block", "0");
    }

    getLatestBlock(){
        return this.chain[this.chain.length - 1];
    }

    addBlock(newBlock){
        newBlock.previousHash = this.getLatestBlock().hash;
        newBlock.hash = newBlock.calculateHash();
        this.chain.push(newBlock);
    }

    isChainValid(){
        for(let i = 1; i < this.chain.length; i++){
            const currentBlock = this.chain[i];
            const previousBlock = this.chain[i - 1];

            if(currentBlock.hash !== currentBlock.calculateHash()){
                return false;
            }

            if(currentBlock.previousHash !== previousBlock.hash){
                return false;
            }
        }
        return true;
    }
}

let xyzcOin = new Blockchain();

xyzcOin.addBlock(new Block({amount: 8}));
xyzcOin.addBlock(new Block({amount: 80}));

// console.log("Is blockchain is valid? " + xyzcOin.isChainValid());

// xyzcOin.chain[1].data = {amout: 100};

// console.log("Is blockchain is valid? " + xyzcOin.isChainValid());

console.log(JSON.stringify(xyzcOin, null, 4));

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xyzcOin Blockchain</title>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
    <div class="container">
        <div class="input">
            <form method="post">
                <label for="data">Please enter data:</label>
                <input type="text" name="data" id="data">
                <button type="submit" onclick="addData()">Add Data</button>
            </form>
        </div>
        <div class="result">
            <h4>Blocks Added</h4>
            <ul onload="appendData()">
                <li>Block 1:</li>
                <li>Block 2:</li>
                <li>Block 3:</li>
            </ul>
        </div>
        <div class="validate">
            <button type="submit">Validate Chain</button>
            <p>Chain validated? true or false</p>
        </div>
    </div>
</body>
</html>

Query:

1) User entered data should be taken as data for a block(on submitting add data button) and it should append to listitem dynamically after data entered in above textbox.

2)To validate the blockchain for any tampering, I have created a button to validate the chain and result should be shown.

digger · Answer 1 · Sep 19, 2018

This should do your work:

// select the form
const formData = document.querySelector('.form-data');

// attach an event listener
formData.addEventListener('submit', (evt) => {
  evt.preventDefault(); 

  const inputVal =  evt.target[0].value;

  // enter url as first arg and data as second arg
  postData('http://example.com/answer', { data: inputVal })
  .then(data => {
     // JSON from `response.json()` call
    // do something with the data
    console.log(data)
  })
  .catch(error => console.error(error))
})

// helper function for making posts with fetch api 
function postData(url, data) {
  return fetch(url, {
    body: JSON.stringify(data), 
    headers: {
      'content-type': 'application/json'
    },
    method: 'POST', 
  })
  .then(response => response.json()) // parses response to JSON
}

<form class="form-data">
    <label for="data">Please enter data:</label>
    <input type="text" name="data" id="data">
    <button type="submit">Add Data</button>
</form>