Latest solutions
Responsive App w/ React, React Router, and CSS Modules
#accessibility#react#react-router#fetchSubmitted over 3 years agoResponsive Tip Calculator using React and Mobile-First design
#accessibility#reactSubmitted over 3 years ago
Latest comments
- @tarik310@tkressma
Hey there! Great solution - it works as it should. The web app is very responsive as well!
I have one general tip for you. In JavaScript, there is a concept called Event delegation.
Consider your code: on lines 52,56, 94-98 and 183-187, you create many separate event listeners to perform the same event upon being clicked: ActivatingReset(), erasevalueoncustom(), makeCalculations().
Using Event delegation, you can apply a single event listener to the parent container (class="percent") and have whatever child you click on "bubble" up towards the event listener. This will allow your code to follow the D.R.Y. principle.
For example, you can replace all of those repetitive lines of code with this:
document.querySelector(".percent") .addEventListener('click', event => { if (event.target.className === 'percentBtn') { //Assign inputs a class of "percentBtn" makecalculations(); } });
You can read more here: https://dmitripavlutin.com/javascript-event-delegation/, but certaintly watch some YouTube videos on this powerful concept. Happy coding!
- @jesseburn@tkressma
Hey Jesse, good job.
I HIGHLY recommend you put your script in a seperate file (E.G. script.js) then import it at the end of your body - or, at the very beginning of the body tag using defer.
Similar to what Haybuka said, you first need to "fill" your localStorage with an item before trying to access it. You would want to do this upon successfully fetching some data from the API. You can do this by writing localStorage.setItem('<some name resembling the url data>', <the object recieved from the api call>). Then, when you want to retrieve the localStorage data, you would write localStorage.getItem('<name you decided on calling the item'>).
Check out more about localStorage on the docs: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage