Javascript Clear form After Submit

<!DOCTYPE html>
<html>
<head></head>
<body>
    <div id="app">
        <form id="form" onsubmit="resetForm(event)">
            <input type="text" name="name" placeholder="Enter Name" /><br><br>
            <input type="email" name="email" placeholder="Enter E-mail" /><br><br>
            <textarea name="address" placeholder="Enter Address"></textarea><br><br>
            <button type="submit">Submit</button>
        </form>
    </div>
  <script>
    function resetForm(event) {
        event.preventDefault(); 
       document.querySelector('input[name="name"]').value = '';
        document.querySelector('input[name="email"]').value = '';
        document.querySelector('textarea[name="address"]').value = '';
        alert('Form submitted and fields reset.');
    }
</script>
    <style>
        #app {
            text-align: center;
        }

#form {
            display: inline-block;
            text-align: left;
            margin-top: 20px;
        }

input[type="text"],
        input[type="email"],
        textarea {
            width: 300px;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

input[type="text"]:focus,
        input[type="email"]:focus,
        textarea:focus {
            outline: none;
            border-color: #4caf50;
        }

button {
            padding: 10px 20px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: right
        }

button:hover {
            background-color: #45a049;
        }

button:focus {
            outline: none;
        }
    </style>

</body>

</html>