index. html
<!DOCTYPE html>
<head>
<title>Grocery List</title>
<!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
<script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<h1>Grocery List</h1>
<form action="/nowhere">
<label for="item">Enter A Product</label>
<input type="text" id="product" name="product">
<label for="item">Enter A Quantity</label>
<input type="number" id="qty" name="qty">
<button>Submit</button>
</form>
<ul id="list"></ul>
</body>
</html>
app.js
`// Leave the next line, the form must be assigned to a variable named 'form' in order for the
exercise test to pass
const form = document.querySelector('form');
const qty = document.querySelector('#qty');
const product = document.querySelector('#product');
const ul = document.querySelector('#list');
form.addEventListener('submit',function(e){
e.preventDefault()
const productVal = product.value;
const qtyVal = product.value;
const newLi = ul.createElement('li');
newLi.innerText = `${qtyVal } ${productVal}`;
ul.appendChild('newLi');
product.value = '';
qty.value = '';
});`
This is the code I am finding trouble with please see the attached pic and help me with the solution Thank you,