index.js

// DOM
// special document variable
// object
// you can access it in client side js

// selector functions
// querySelector
// querySelectorAll
// const h1 = document.getElementsByTagName("h1")[0]

// creating element functions
// createElement
// insertAdjacentHTML
// insertAdjacentElement
// h1.insertAdjacentHTML("afterend", "<h2>hello world</h2>")

// removing elements
// element.removeChild()

// changing CSS
// adding, toggling and removing classes
// .add
// .remove
// .toggle
// .style
// h1.style

// events
// => arguments, string name of the event, a callback function

// const form = document.querySelector("form")
// form.addEventListener("submit", (event) => {
//   event.preventDefault()
//   const name = event.target[0].value
//   // send this data to an api OR to a web server
//   // fetch
// })