Hello. This is from a previous Udemy exercise that I typed up. I actually figured out the basics of a similar exercise and copied the JS over because the HTML (for this exercise) was to be left alone and only used for reference.
Here is the 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>
And here is the code I’ve pulled in from a similar exercise I did. The modifications I’ve made aren’t referenced right, which was the issue in the previous exercise I posted, and fixed.
// 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 product = document.querySelector('#product')
const quantity = document.querySelector('#qty')
list.addEventListener('submit', function (e) {
e.preventDefault()
const shopper = itemForm.elements.shopper
const items = itemForm.elements.items
addComment(shopper.value, items.value)
product.value = ""
list.value = ""
})
const addItem = (qty, product) => {
const newItem = document.createElement('li')
newItem.append(`: ${items}`)
itemFormContainer.append(newItem)
}
I appreciate the help.
