How to calculate area of circle dynamically using amp-bind-macro in Google AMP ?

Last Updated : 25 Oct, 2020

With the help of amp-bind-macro, one can create an HTML program to calculate the area of circle dynamically. When the input is given, the page will respond to the user input, find the area of the circle with the radius provided and print it without refreshing the page.

Setup: To use amp-bind-macro in our AMP page, we have to import amp-bind script in the head of the document.

HTML

<script async custom-element="amp-bind" src= 
"https://cdn.ampproject.org/v0/amp-bind-0.1.js"> 
</script>

Example:

HTML

<!doctype html> 
<html amp> 
  
<head> 
    <meta charset="utf-8"> 
    <title>Foofle AMP amp-bind</title> 
  
    <link rel="canonical" href= 
"https://amp.dev/documentation/examples/components/amp-bind/index.html"> 
  
    <meta name="viewport" content= 
"width=device-width,minimum-scale=1,initial-scale=1"> 
  
    <script async src= 
        "https://cdn.ampproject.org/v0.js"> 
    </script> 
  
    <!-- Import amp-bind component in header -->
    <script async custom-element="amp-bind" 
src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"> 
    </script> 
  
    <style amp-boilerplate> 
        body { 
            -webkit-animation: -amp-start 8s  
                steps(1, end) 0s 1 normal both; 
              
            -moz-animation: -amp-start 8s  
                steps(1, end) 0s 1 normal both; 
              
            -ms-animation: -amp-start 8s  
                steps(1, end) 0s 1 normal both; 
              
            animation: -amp-start 8s  
                steps(1, end) 0s 1 normal both 
        } 
  
        @-webkit-keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
  
        @-moz-keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
  
        @-ms-keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
  
        @-o-keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
  
        @keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
    </style> 
  
    <noscript> 
        <style amp-boilerplate> 
            body { 
                -webkit-animation: none; 
                -moz-animation: none; 
                -ms-animation: none; 
                animation: none 
            } 
        </style> 
    </noscript> 
  
    <style amp-custom> 
        h1 { 
            color: forestgreen; 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h1> 
        Geeks For Geeks 
    </h1> 
      
    <!-- [`amp-bind-macro`] makes it possible  
        to reuse expressions across different  
        actions -->
    <div style="padding: 1em; 
                  color: crimson;"> 
        <amp-bind-macro id="circleArea" 
            arguments="radius" 
            expression="3.14 * radius * radius"> 
  
            <label> 
                <u>Enter the radius of the circle</u>:  
            </label> 
            <input type="number" min="0" max="100" 
                value="0" on="input-throttled:AMP.setState({ 
                      radius: event.value })"> 
            <br> 
              
            <div> 
                <h4> 
                    The circle has an area of 
                    <span ="circleArea(radius)">0</span>. 
                </h4> 
            </div> 
        </amp-bind-macro> 
    </div> 
</body> 
  
</html>