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