<div>
Hello World!
</div>
<input type="text" min=6 max=6 value="#535355">
<button>Update</button>
div {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
font-size: 2rem;
color: #535355;
width: 300px;
height: 100px;
box-shadow: 2px 2px 8px 0 currentColor;
border-radius: 6px;
}
const button = document.querySelector('button');
const div = document.querySelector('div');
const input = document.querySelector('input');
button.addEventListener('click', () => {
div.style.color = input.value;
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.