Interactive web page with AJAX loading JSON data
1. Add several buttons to your HTML elements, as well add a div that can be used to output content to the user. 2. Using document.querySelector() select the page elements. document.querySelector() will select the first matching result. You can check the page element in the console using the variable. 3. Add an event listener to the first button, when pressed it should update the value of a counter variable. 4. Create a function to update the page element with the value of the counter, invoke this function every time the counter is updated. 5. Create an event that loads the value of the counter, using the JSON data from the json file. This should update the counter once it loads. 6. Add an event to the second button, once clicked it should make a request to the JSON file and update the counter with the JSON file value for counter. ```html <body> <div> <div class="output"></div> <button class="btn">Click Me</button> <button class="btn1">Reset</button> </div> </div> <script src="apps.js"></script> </body> ``` **APPS.JS** ```js const btn = document.querySelector('.btn'); const btn1 = document.querySelector('.btn1'); const output = document.querySelector('.output'); let counter = 0; const url = 'json.json'; console.log(btn); output.innerHTML = '<h1>Hello World</h1>'; document.addEventListener('DOMContentLoaded', (e) => { getValues(); }) function getValues(){ fetch(url) .then(rep => rep.json()) .then(data => { console.log(data); counter = data.counter; updater(); }) } //output.textContent = '<h1>Hello World</h1>'; btn.onclick = (e) => { console.log(e.target); //adder(); } btn.onclick = adder; btn1.onclick = resetCounter; function updater(){ output.innerHTML = `<h1>Counter:${counter}</h1>`; } function adder(e){ console.log(e.target); counter++; updater(); } function resetCounter(e){ getValues(); } ``` JSON.JSON ```json { "counter": 25 } ```