I seem to have a problem with submit event, it keeps refreshing whenever I press enter, or click submit. Link to the site where you can see the problem. I am using preventDefault(); function to stop the refresh which works if the event lister type is click but doesn't on submit event. Link to the files.
HTML
<body>
<header>
<h1>My TODO List</h1>
</header>
<form>
<input type="text" class="todo-input" />
<button class="todo-button" type="submit">
<i class="bi bi-plus-square-fill"></i>
</button>
</form>
<div class="todo-wrapper">
<ul class="todo-list">
<div class="todo"></div>
</ul>
</div>
<script src="sandbox.js"></script>
JavaScript
const todoInput = document.querySelector('.todo-input');
const todoButton = document.querySelector('.todo-button');
const todoList = document.querySelector('.todo-list');
todoButton.addEventListener('submit', e => {
e.preventDefault();
const todoDiv = document.createElement('div');
todoDiv.classList.add('todo-items');
const newTask = document.createElement('li');
newTask.textContent ='Test';
newTask.classList.add('task');
todoDiv.appendChild(newTask);
const finishButton = document.createElement('button')
finishButton.innerHTML = '<i class="bi bi-check2"></i>';
finishButton.classList.add('finish-button');
todoDiv.appendChild(finishButton);
const deleteButton = document.createElement('button')
deleteButton.innerHTML = '<i class="bi bi-trash-fill"></i>';
deleteButton.classList.add('delete-button');
todoDiv.appendChild(deleteButton);
});