Olá! Estou tentando criar um programa que aumente o raio da borda de uma div a cada clique sobre a mesma. Já tentei algumas coisas, porém não obtive sucesso. Podem me ajudar? Abaixo deixo trechos de como meu código HTML, CSS e JS se encontram, além de um link para o codePen.
HTML e CSS
<body>
<div class="container">
<h1 class="title"></h1>
</div>
<style>
.box {
background-color: khaki;
border-radius: 0%;
height: 200px;
width: 200px;
margin-bottom: 2rem;
}
</style>
<script src="./script.js"></script>
</body>Javacript
// Creates exercise title - IIFE
(function createTitle() {
const title = document.querySelector('.title');
title.textContent = '08 - Radius growth';
})();
// Creates some HTML - IIFE
(function createHTML() {
const markup = `<div class="box"></div>`;
document.body.insertAdjacentHTML('beforeend', markup);
})();
const box = document.querySelector('.box');
box.addEventListener('click', radiusGrowth);
function radiusGrowth(event) {
let bRadius = parseInt(event.currentTarget.style.borderRadius + 10);
event.currentTarget.style.borderRadius = bRadius.toString;
}