change font size with javascript only

Question

Hello,
In this exercise I must be able to execute the following by using javascript and only:
-make + and - buttons work.
-both buttons allow to increase and decrease the size of the font used on the web page

I am learning javascript and I cannot figure out the correct code to activate the buttons and also the DOM.
Could you please help?
Many thanks.

Answer 1

// Get elements
const decreaseBtn = document.querySelector('.js-decrease-btn');
const increaseBtn = document.querySelector('.js-increase-btn');
const text = document.querySelector('.js-text');

// Set inital size
text.style.fontSize = '1.5rem';

// Decrease the size when decrease button is clicked
decreaseBtn.addEventListener('click', () => {
increaseFontSize(text, -0.1);
});

// Increase the size when increase button is clicked
increaseBtn.addEventListener('click', () => {
increaseFontSize(text);
});

function increaseFontSize(elem, change = 0.1) {

// Remove 'rem' and cast number type
let initSize = Number(elem.style.fontSize.replace('rem', ''));

// Get the new size by adding the change
let newSize = initSize + change;

// Update the element with the new size
elem.style.fontSize = `${newSize}rem`;
}

https://code.sololearn.com/W4jTxrGZGA1N