happymishra/issueWODeThEx.html

## issueWODeThEx.html
<html>
    <body>
        <label>Search</label>
        <!-- Renders an HTML input box -->
        <input type="text" id="search-box">

        <p>No of times user actually clicked</p>
        <p id='show-api-call-count'></p>

    </body>

    <script>
        var searchBoxDom = document.getElementById('search-box');

        function makeAPICall() {
            // This represents a very heavy method. Which takes a lot of time to
            // execute
        }

        // Event listener on the input box
        searchBoxDom.addEventListener('input', function () {
            var apiCallCountDom = document.getElementById('show-api-call-count');
            var apiCallCount = apiCallCountDom.innerHTML || 0;
            apiCallCount = parseInt(apiCallCount) + 1;

            // Updates the number of times makeAPICall method is called
            apiCallCountDom.innerHTML = apiCallCount;

            // A very heavy method which takes a lot of time to execute
            makeAPICall()
        })
    </script>
</html>
	<html>
	<body>
	<label>Search</label>
	<!-- Renders an HTML input box -->
	<input type="text" id="search-box">

	<p>No of times user actually clicked</p>
	<p id='show-api-call-count'></p>

	</body>

	<script>
	var searchBoxDom = document.getElementById('search-box');

	function makeAPICall() {
	// This represents a very heavy method. Which takes a lot of time to
	// execute
	}

	// Event listener on the input box
	searchBoxDom.addEventListener('input', function () {
	var apiCallCountDom = document.getElementById('show-api-call-count');
	var apiCallCount = apiCallCountDom.innerHTML \|\| 0;
	apiCallCount = parseInt(apiCallCount) + 1;

	// Updates the number of times makeAPICall method is called
	apiCallCountDom.innerHTML = apiCallCount;

	// A very heavy method which takes a lot of time to execute
	makeAPICall()
	})
	</script>
	</html>