I feel like I could've wrote this code with less syntax but any help on this?

. Form Events Exercise Time to get some practice working with forms and form events: index.html already has a form element that contains two sinput> elements, one for quantity and one for a product name. index.html also contains an empty cuts where you will append new

's. Watch the gif at the bottom for an overview of how your code should work. Your task is to follow these steps: Listen for the form submission When the form is submitted, prevent the default behavior . Grab the quantity input value and the product input value Create a new

element. Set the text on the new to include the quantity and product name from the form Append the new to the

on the page Reset the inputs Please note: 1. Udemy's interface does not yet recognize some of the newer JS syntax, e.g. append() You will need to use alternate (older) syntax for this method in order to get the tests to pass. 2. The form will need to be assigned to a variable named form for the test to pass, I've already included this line of code for you in the app.js code. Grocery List Enter A Quantity Submit Enter A Product 2 apples eggs asdasd Chicken breast dex.html ps 1 Leave the next line, the form must be assigned to a variable named 'fo 2 const form - document.querySelector('fo'); const ul-document.querySelectoralist): 04 const product.document.querySelector('product') 05 const qty document.querySelector('sty) 06 const inputAll document.querySelectorAll('input 7 form, addEventListener('submit'.ce) 8 e.preventDefault: 09 const pvolue-product.value 10 const qvolue aty.value ON const newidocument.createElement('') 012 const values.Value.concat( pvolue) On newli.inner Text-values) I 014 ul.appendChild(nent.) 15 inputAll volue 16 37 018 >>