Here, in this tutorial we will be looking at building your 1st Blockchain App.

Assuming you know all the basics of Smart Contract ABI, Adresses, Use of Metamask Test Networks in Remix-IDE using Injected Web3 option

Let's get started

So as of now you have a Solidity Smart Contract having two types of functionality

• One method which takes User Input and shows Output (Say 'methodOne( userInputArgument )' )
• Another one which only shows output (Say 'methodTwo( )')

To connect with frontend 1st you run the following command in your project folder in command prompt

npm init

Basically this will create the required JSON files in your folder and will add necessary NPM modules

If you have a frontend HTML page for your Solidity contract to interact then you copy paste the following web3.js, jquery scripts

<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<!-- web3 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/web3/1.4.0/web3.min.js"></script>  

Then copy paste the following code to connect your Frontend with Meta Mask

Don't forget to copy paste your ABI inside var ABI & copy paste your smart contract adress inside var Address

 <script type="text/javascript">
    async function loadweb3(){
        if(window.ethereum){
            window.web3=new Web3(window.ethereum);
            window.ethereum.enable(); 
        } 
    }        
       
     async function loadContract(){
          //ABI & address of owner who deployed it on metamask network in RemixIDE
        var ABI = ///Copy paste your Smart Contract ABI
        var Addresss = ///Copy paste your Smart Contract Address inside '  '
          return await new window.web3.eth.Contract( ABI, Address); 
      } 
      
        
      async function load(){
            await loadweb3();
         window.contract = await loadContract();
        }
         
      
    load();  
      
</script>

Boom! you are ready to go with Meta Mask connected to your smart contract....

Now let's interact with smart contract functions 

let's say we have buttons to interact with smart contract functions methodOne(userInputArgument) & methodTwo( ) as defined earlier

///////////////////////// Interact with smart contract methods which takes user input and shows output /////////////////////

<input type="text" id="userInputArgument" >                                                 //Here we take user input & stored it in id ="userInputArgument"
<button type="button"  onclick="callMethodOne( );"> mOne </button>       //Here on clicking button mOne a javascript function callMethodOne( ) will be called
<script>
     async function callMethodOne( )
{
          var amtA = 0;

          //We stored the valued captured by input field through id ="userInputArgument" inside a variable "amtA"
          amtA = $('#userInputArgument').val( );    
                                             
          web3.eth.getAccounts().then(function(accountsA){
              var accA = accountsA[0];

              //Here we call the smart contract method that we defined earlier methodOne(userInputArgument)
              return contract.methods.methodOne(amtA).send({from:accA});                                         

                            
          })
 } 


</script>
///////////////////////// Interact with smart contract methods which only shows output without taking any input /////////////////////

<button type="button"  onclick="callMethodTwo( );"> mTwo </button>     //Here on clicking button "mTwo" a javascript function callMethodTwo( ) will be called

<script>
 async function callMethodTwo( ){

           //Here we call the smart contract method that we defined earlier methodTwo( )
          const amtB = await window.contract.methods.methodTwo( ).call();                   
         
      }

</script>

and that's all......

You are now good to go on your journey of building smart contracts......

For many more exciting tutorials keep following my username @BlockTalks_Raj

!!!!!HAPPY LEARNING!!!!!