Trying to do a Tip Calculator – Blancer.com Tutorials and projects

I am trying to do a Tip Calculator and I don’t even know how to start a function to calculate that.

<!DOCTYPE html> 
<html lang="eng">
 <head>
<title>Tip Calculator</title> 
<meta charset="utf-8"
</head>
<body>
<header>
  
   </header>
  <main>
    <form> 
      <fieldset>
      <legend>Tip Calculator</legend>
        
        <label for="costofdinner">
          Cost of the dinner:</label> 
        <input type="text" name="cost" id="cost" size="10">
        <br>
        <br> 
        <div>
        <button type="button" title="calculatetip">Calculate Tip</button>
        </div> 
        <br>
        <label for="tip15"> 15% of the dinner:</label>
        <input type="text" id="tip15" name="tip15" size="8">
        <br>
        <label for="20tip"> 20% of the dinner:</label>
        <input type="text" id="20tip" name="20tip" size="8">
        <br>
        <br>
        <label for="25tip">Dinner plus 25% tip</label> 
        <input type="text" id="dinnerplustip" name="dinnerplustip" size="12">    
        </fieldset> 
        
    </main> 
    <footer>
   </footer>
 </body> 
 </html>