Javascript

Javascript Solutions

Part I - DOM

2.

Inside script.js:

alert('Hello World!')

Inside script.js:

console.log('Hello World!')

3.

Inside script.js:

let products = document.getElementById('products')
console.log(products)

Inside script.js:

window.addEventListener('load', function() {
  let products = document.getElementById('products')
  console.log(products)
})

Modify index.html:

<script src="script.js" defer></script>

4.

Inside script.js:

console.log(document.getElementsByTagName('form')[0])

console.log(document.querySelector('form label:nth-child(2) input'))
console.log(document.querySelector('form input[name=quantity]'))  //alternative

let inputs = document.querySelectorAll('form input')
for (let i = 0; i < inputs.length; i++)
  console.log(inputs[i])

Then, replace last line with:

console.log(inputs[i].outerHTML)

5.

Inside script.js:

let form = document.getElementsByTagName('form')[0]
form.addEventListener('submit', function(event) {
  alert('Submitted!')
  event.preventDefault()
})

6.

Inside script.js:

let form = document.getElementsByTagName('form')[0]

form.addEventListener('submit', function(event) {
  let line = document.createElement('tr')

  let description = document.querySelector('form input[name=description]').value
  let quantity = document.querySelector('form input[name=quantity]').value

  line.innerHTML = `<tr><td>${description}</td><td><input value="${quantity}"></td><td><input type="button" value="Remove"></tr>`

  let table = document.getElementById('products')
  table.append(line)

  event.preventDefault()
})

7.

Inside script.js:

let form = document.getElementsByTagName('form')[0]

form.addEventListener('submit', function(event) {
  let line = document.createElement('tr')

  let description = document.querySelector('form input[name=description]').value
  let quantity = document.querySelector('form input[name=quantity]').value

  line.innerHTML = `<tr><td>${description}</td><td><input value="${quantity}"></td><td><input type="button" value="Remove"></tr>`

  let table = document.getElementById('products')
  table.append(line)

  let remove = line.querySelector('input[type=button]')

  remove.addEventListener('click', function() {
      this.parentNode.parentNode.remove()
  })

  event.preventDefault()
})

8.

Create this function inside script.js:

function updateTotal() {
  let total = 0
  let lines = document.querySelectorAll('table tr')
  for (let i = 0; i < lines.length; i++) {
    console.log(lines[i])
    let input = lines[i].getElementsByTagName('input')[0]
    if (input != null)
    total += Number(input.value)
  }
  let span = document.getElementById('total')
  span.innerHTML = total
}

Call it when a new line is added:

form.addEventListener('submit', function(event) {
  ...
  updateTotal()
  event.preventDefault()
})

When a line is removed:

remove.addEventListener('click', function() {
    this.parentNode.parentNode.remove()
    updateTotal()
})

When a value is modified:

form.addEventListener('submit', function(event) {
  ...
  let input = line.getElementsByTagName('input')[0]
  input.addEventListener('change', updateTotal)
  ...
})

Complete script:

let form = document.getElementsByTagName('form')[0]

form.addEventListener('submit', function(event) {
  let line = document.createElement('tr')

  let description = document.querySelector('form input[name=description]').value
  let quantity = document.querySelector('form input[name=quantity]').value

  line.innerHTML = `<tr><td>${description}</td><td><input value="${quantity}"></td><td><input type="button" value="Remove"></tr>`

  let input = line.getElementsByTagName('input')[0]
  input.addEventListener('keyup', updateTotal)

  let table = document.getElementById('products')
  table.append(line)

  let remove = line.querySelector('input[type=button]')

  remove.addEventListener('click', function() {
      this.parentNode.parentNode.remove()
      updateTotal()
  })

  updateTotal()
  event.preventDefault()
})

function updateTotal() {
  let total = 0
  let lines = document.querySelectorAll('table tr')
  for (let i = 0; i < lines.length; i++) {
    console.log(lines[i])
    let input = lines[i].getElementsByTagName('input')[0]
    if (input != null)
    total += Number(input.value)
  }
  let span = document.getElementById('total')
  span.innerHTML = total
}

Part II - Ajax

• Complete solutions: solution_javascript_part2.zip