JSFiddle - React, Tailwind, and code Playground

by ededev

HTML

<button id="button-plus">+</button>
	<button id="button-minus">-</button>

	<p id="target">
		É um facto estabelecido de que um leitor é distraído pelo conteúdo legível de uma página quando analisa a sua mancha gráfica. Logo, o uso de Lorem Ipsum leva a uma distribuição mais ou menos normal de letras, ao contrário do uso de "Conteúdo aqui, conteúdo aqui", tornando-o texto legível. Muitas ferramentas de publicação electrónica e editores de páginas web usam actualmente o Lorem Ipsum como o modelo de texto usado por omissão, e uma pesquisa por "lorem ipsum" irá encontrar muitos websites ainda na sua infância. Várias versões têm evoluído ao longo dos anos, por vezes por acidente, por vezes propositadamente (como no caso do humor).
	</p>

CSS

body {
			font-family: Ubuntu;
		}

JavaScript

// Declaração de variáveis
		var $plus = document.getElementById('button-plus'),
			$minus = document.getElementById('button-minus'),
			$target = document.getElementById('target');

			// atribuir tamanho de fonte 14px ao id target 
			$target.style.fontSize = '14px';
			// nao funcionou desta maneira
			//$target = $target.style.getFontSize;

			// Evento que fica à escuta do evento clique no id plus
			$plus.addEventListener('click', function(argument) { 
				// alteracao do font size
				$target.style.fontSize = (getFontSize($target) + 1) + 'px';
			});

			$minus.addEventListener('click', function(argument) {
				$target.style.fontSize = (getFontSize($target) - 1) + 'px';
			});

			// Funcao principal que recebe o parametro $target
			function getFontSize($target) {
				// atribui à variável fontSize ??????????
				var fontSize = ($target.style.fontSize || '').replace(/\D/g,'');
				return parseInt(fontSize, 10);
			}