Combination of Front-end & Back-end using HTML, CSS & JavaScript(web3Js) to Interact with Smart Contract

In order to interact with a smart contract, one has to create a webpage by HTML, CSS and use JavaScript(web3js) to interact with EVM. Apart from writing, compiling, and deploying a smart contract, chainIDE allows one to build and preview webpages.

Creating WebPages by HTML

HTML is the hypertext markup language which is the standard markup language for creating web pages. It describes the structure of a web page and it contains a series of elements that tell the browser how to display the content and also HTML elements label pieces of the content.
```
<!DOCTYPE html>
<html>
<head>
<title>Project Title</title>
</head>
<body>
<h1></h1>
</body>
</html>
```
Basic Grammar/Structure
HTML elements is everything from the start tag to the end tag.
```
<tagname>Content goes here</tagname>
```
Start HTML with <!DOCTYPE html> HTML elements contains other elements i.e ``` a tag for hyperlink reference img tag for images in HTML page
p tag for paragraphs
h1 for headers <!-- comments -- > comments
div tag (inline comment) button

CSS(Cascading Style Sheets)

CSS is for the presentational layer. CSS can be added into a project in three ways i.e

inline styling: style attribute is added inside HTML elements.

<h1 style="text-color: blue">The main header</h1>
<p style="text-color: white">Paragraph tag</p>

Internal styling: style elements are added to the head section using a style tag

<!DOCTYPE html>
<html>
<head>
<title>Project Title</title>
<style>
body {
text-align: center;
margin: auto;
}
.one {
justiffy-content: center;
text-color: blue
}
</style>
</head>
<body>
<h1 class="one"></h1>
</body>
</html>

External styling: to external stylesheet

style.css
body {
overflow: hidden;
font-weight: 300px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #333;
line-height: 1.4;
font-weight: 700;
}

Use JavaScript to vivid the page

JavaScript is a scripting programming language which implements complex functions of webpage. JavaScript on HTML file uses the <script></script> element.

document.getElementById() //specific elements that are predefined
<script>
function click123() {
var a = document.getElementByID("info")
a.innerHTML = a.innerHTML + "<h5>" + "123" + "</h5>" 
}
</script>

change content of it by innerHTML variable. Get value of text by document.getElementById(xxid).value

Import JavaScript library to HTML
```
<script src="myScript.js"></script>
```
Advantages
separate HTML and code.
makes HTML and JavaScript easier to read and maintain
cached JavaScript can speed up page loading

To interact with EVM we need the web3js library.

<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

Web3js is a collection of libraries that allow you to interact with local/remote Ethereum nodes using HTTP, IPC, or Websocket. Web3Class is an umbrella package to house all Ethereum related modules.

<script>
async function loadWeb3() {
if(window.ethereum) {
  window.web3 = new.Web3(window.ethereum);
  window.ethereum.enable();
}
}
loading();
</script>

Interact with contract:

Contract ABI(Application Binary Interface) is a standard way to interact with element contracts in the Ethereum ecosystem, both from the outside of the blockchain and for contract-to-contract interaction. Data is encoded according to its type, the encoding is not self-describing.
Address: contract address is a collection of code on the Ethereum blockchain that executes functions. Contract address is deployed to the Ethereum blockchain. Externally owned address and contract address shares the same format of 42 characters which includes prefix (0x)

Interact with contract code using web3js package in the HTML file

async 
var abi = [...]  /*After compiling your smart contract an ABI will be autogenerated on your chainIDE copy it here*/
Var contractAddress = "0x......" // copy your contractAddress probably the metamask one that you're using to deploy contract*/

The async function knows how to expect the possibility of the await keyword being used to invoke async functions with regular JavaScript code. Await only works inside async functions on regular JavaScript code. Await also puts in front of the async promise-based function to pause your code on that line until the promise fulfills the return of the resulting value.

This is an overview of how to integrate the front-end with the smart contract(backend) using HTML, CSS, JS, and web3js by adding the contract ABI and contract address. Web development skills are still important in Blockchain development especially front-end development skills apart from solidity and ability to use IDEs like chainIDE that allows you to write, compile & deploy smart contract code.

Thanks for reading my articles on blockchain development, I'm approaching the end of this series but as time goes we'll more content related to Defi, smart contract, and entire blockchain development. Leave any comments or suggestions probably even on good solidity learning resources.

Combination of Front-end & Back-end using HTML, CSS & JavaScript(web3Js) to Interact with Smart Contract

Creating WebPages by HTML

Basic Grammar/Structure

CSS(Cascading Style Sheets)

Use JavaScript to vivid the page

Advantages

Interact with contract code using web3js package in the HTML file

Did you find this article valuable?