//TIP With Search Everywhere, you can find any action, file, or symbol in your project. Press , type in terminal, and press . Then run in the terminal and click the link in its output to open the app in the browser. export function setupCounter(element) { //TIP Try on to see its usages. You can also use this shortcut to jump to a declaration – try it on on line 13. let counter = 0;

const adjustCounterValue = value => { if (value >= 100) return value - 100; if (value <= -100) return value + 100; return value; };

const setCounter = value => { counter = adjustCounterValue(value); //TIP WebStorm has lots of inspections to help you catch issues in your project. It also has quick fixes to help you resolve them. Press on and choose Inline variable to clean up the redundant code. const text = ${counter}; element.innerHTML = text; };

document.getElementById('increaseByOne').addEventListener('click', () => setCounter(counter + 1)); document.getElementById('decreaseByOne').addEventListener('click', () => setCounter(counter - 1)); document.getElementById('increaseByTwo').addEventListener('click', () => setCounter(counter + 2)); //TIP In the app running in the browser, you’ll find that clicking -2 doesn't work. To fix that, rewrite it using the code from lines 19 - 21 as examples of the logic. document.getElementById('decreaseByTwo')

//TIP Let’s see how to review and commit your changes. Press and look for commit. Try checking the diff for a file – double-click main.js to do that. setCounter(0); }

//TIP To find text strings in your project, you can use the shortcut. Press it and type in counter – you’ll get all matches in one place. setupCounter(document.getElementById('counter-value'));

//TIP There's much more in WebStorm to help you be more productive. Press and search for Learn WebStorm to open our learning hub with more things for you to try.