Build a Ezoic Ads or Google Adsense Income Revenue Calculator Web App in Browser Using HTML5 & Javascript Full Project For Beginners

 

 

 

 

 

FREE LIVE TOOL Demo

 

 

Source Code

 

 

index.html

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ezoic Ads Or Google Adsense Income Calculator</title>
</head>

<body>
    <div class="container">
        <h1 class="text-center">
            Ezoic Ads or Google Adsense Income Calculator
        </h1>
        <br>
        <form>
            <div class="form-group">

                <label for="views">Website Visitors (Daily Visitors):</label>
                <input class="form-control" id="views" type="number" value="1000">
            </div>
            <div class="form-group">
                <label for="ecpmv">ECPMV or RPM:</label>
                <input class="form-control" id="epmv" type="number" value="5">
            </div>
    </div>
    </form>
    
    </div>

    <div class="container">
        <h2 class="text-center">Ezoic Earnings</h2>
        <br>
                  
        <table class="table table-striped table-bordered">
          <thead>
            <tr>
              <th>Time</th>
              <th>Earnings</th>
            </tr>
          </thead>
          <tbody id="result">
           
          </tbody>
        </table>
      </div>
</body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    var result = ``
    var epmv=5,views=1000

    $(document).ready(function(){
        lastfive = views/1000 * epmv

        result = `

        <tr>
        <td>1 Day</td>    
        <td>$${Math.round(views/1000*epmv*1)}</td>
        </tr>
        
        <tr>
        <td>5 Days</td>    
        <td>$${Math.round(views/1000*epmv*5)}</td>
        </tr>

        <tr>
        <td>10 Days</td>    
        <td>$${Math.round(views/1000*epmv*10)}</td>
        </tr>

        <tr>
        <td>30 Days</td>    
        <td>$${Math.round(views/1000*epmv*30)}</td>
        </tr>

        <tr>
        <td>180 Days</td>    
        <td>$${Math.round(views/1000*epmv*180)}</td>
        </tr>

        <tr>
        <td>1 Year</td>    
        <td>$${Math.round(views/1000*epmv*365)}</td>
        </tr>

        <tr>
        <td>1 Year</td>    
        <td>$${Math.round(views/1000*epmv*365)}</td>
        </tr>

        <tr>
        <td>1 Year</td>    
        <td>$${Math.round(views/1000*epmv*365)}</td>
        </tr>

        <tr>
        <td>5 Years</td>    
        <td>$${Math.round(views/1000*epmv*1825)}</td>
        </tr>

        <tr>
        <td>10 Years</td>    
        <td>$${Math.round(views/1000*epmv*3650)}</td>
        </tr>
    
        
        `

        $("#result").html(result)
    })
    $("#views").on("keyup", function () {
        views = $(this).val()

        lastfive = views/1000 * epmv

        result = `

        <tr>
        <td>1 Day</td>    
        <td>$${Math.round(views/1000*epmv*1)}</td>
        </tr>
        
        <tr>
        <td>5 Days</td>    
        <td>$${Math.round(views/1000*epmv*5)}</td>
        </tr>

        <tr>
        <td>10 Days</td>    
        <td>$${Math.round(views/1000*epmv*10)}</td>
        </tr>

        <tr>
        <td>30 Days</td>    
        <td>$${Math.round(views/1000*epmv*30)}</td>
        </tr>

        <tr>
        <td>180 Days</td>    
        <td>$${Math.round(views/1000*epmv*180)}</td>
        </tr>

        <tr>
        <td>1 Year</td>    
        <td>$${Math.round(views/1000*epmv*365)}</td>
        </tr>

        <tr>
        <td>1 Year</td>    
        <td>$${Math.round(views/1000*epmv*365)}</td>
        </tr>

        <tr>
        <td>1 Year</td>    
        <td>$${Math.round(views/1000*epmv*365)}</td>
        </tr>

        <tr>
        <td>5 Years</td>    
        <td>$${Math.round(views/1000*epmv*1825)}</td>
        </tr>

        <tr>
        <td>10 Years</td>    
        <td>$${Math.round(views/1000*epmv*3650)}</td>
        </tr>
    
        `

        $("#result").html(result)


    })

    $("#epmv").on("keyup", function () {
       epmv = $(this).val()


        result = `

        <tr>
        <td>1 Day</td>    
        <td>$${Math.round(views/1000*epmv*1)}</td>
        </tr>
        
        <tr>
        <td>5 Days</td>    
        <td>$${Math.round(views/1000*epmv*5)}</td>
        </tr>

        <tr>
        <td>10 Days</td>    
        <td>$${Math.round(views/1000*epmv*10)}</td>
        </tr>

        <tr>
        <td>30 Days</td>    
        <td>$${Math.round(views/1000*epmv*30)}</td>
        </tr>

        <tr>
        <td>180 Days</td>    
        <td>$${Math.round(views/1000*epmv*180)}</td>
        </tr>

        <tr>
        <td>1 Year</td>    
        <td>$${Math.round(views/1000*epmv*365)}</td>
        </tr>

        <tr>
        <td>1 Year</td>    
        <td>$${Math.round(views/1000*epmv*365)}</td>
        </tr>

        <tr>
        <td>1 Year</td>    
        <td>$${Math.round(views/1000*epmv*365)}</td>
        </tr>

        <tr>
        <td>5 Years</td>    
        <td>$${Math.round(views/1000*epmv*1825)}</td>
        </tr>

        <tr>
        <td>10 Years</td>    
        <td>$${Math.round(views/1000*epmv*3650)}</td>
        </tr>
        
        `

        $("#result").html(result)
    })
</script>

</html>

Leave a Reply