JSFiddle - React, Tailwind, and code Playground

by thvinic

HTML

<div id="corpo" style="width: 100px; height: 100px; background-color: white;"></div>
<input type="color" id="corSelecionada">
<input type="range" min="0" max="50" step="1" value="0" id="borderRadiusRange">
<input type="range" min="0" max="1" step="0.1" value="1" id="opacidadeRange">
<input type="range" min="50" max="500" step="10" value="100" id="larguraRange">
<input type="range" min="50" max="500" step="10" value="100" id="alturaRange">

JavaScript

// Obtenha a referência para a div e os controles
var corpoDiv = document.getElementById('corpo');
var corSelecionada = document.getElementById('corSelecionada');
var borderRadiusRange = document.getElementById('borderRadiusRange');
var opacidadeRange = document.getElementById('opacidadeRange');
var larguraRange = document.getElementById('larguraRange');
var alturaRange = document.getElementById('alturaRange');

// Defina as propriedades iniciais baseadas no valor do localStorage ou padrão
corpoDiv.style.backgroundColor = localStorage.getItem('corFundo') || 'white';
corSelecionada.value = localStorage.getItem('corFundo') || '#ffffff';
corpoDiv.style.borderRadius = localStorage.getItem('borderRadius') || '0px';
borderRadiusRange.value = localStorage.getItem('borderRadius') || 0;
corpoDiv.style.opacity = localStorage.getItem('opacidade') || 1;
opacidadeRange.value = localStorage.getItem('opacidade') || 1;
corpoDiv.style.width = localStorage.getItem('largura') || '100px';
larguraRange.value = localStorage.getItem('largura') || 100;
corpoDiv.style.height = localStorage.getItem('altura') || '100px';
alturaRange.value = localStorage.getItem('altura') || 100;

// Adicione ouvintes de evento para detectar a mudança nos controles e salvar no localStorage
corSelecionada.addEventListener('input', function() {
   corpoDiv.style.backgroundColor = corSelecionada.value;
   localStorage.setItem('corFundo', corSelecionada.value);
});

borderRadiusRange.addEventListener('input', function() {
   corpoDiv.style.borderRadius = borderRadiusRange.value + 'px';
   localStorage.setItem('borderRadius', borderRadiusRange.value);
});

opacidadeRange.addEventListener('input', function() {
   corpoDiv.style.opacity = opacidadeRange.value;
   localStorage.setItem('opacidade', opacidadeRange.value);
});

larguraRange.addEventListener('input', function() {
   corpoDiv.style.width = larguraRange.value + 'px';
   localStorage.setItem('largura',...