app.js

// GET CARS
// DONE - define the url to make the requests to
// DONE - use fetch to send a request to the url
// DONE - for each element response of the fecth insert the html into the page
//  DONE - loop through the cars
//  DONE - inside the loop store the data of the cars into well named variables
//  DONE - query selector to select the car list element
//  DONE - create the html string
//  DONE - insert into the page

const garage = 'reparator-2000';
const url = `https://wagon-garage-api.herokuapp.com/${garage}/cars`;

// const generateCarHtml = () => {}
function generateCarHtml(car) {
  return `<div class="car">
  <div class="car-image">
    <img src="http://loremflickr.com/280/280/${car.brand} ${car.model}" />
  </div>
  <div class="car-info">
    <h4>${car.brand} ${car.model}</h4>
    <p><strong>Owner:</strong> ${car.owner}</p>
    <p><strong>Plate:</strong> ${car.plate}</p>
  </div>
  </div>`;
}

const getCars = () => {
  fetch(url)
    .then(response => response.json())
    .then((data) => {
      console.log('hello 1');

      data.forEach((car) => {
        const list = document.querySelector(".cars-list");
        const carHtml = generateCarHtml(car);
        list.insertAdjacentHTML("beforeend", carHtml);
      });
    });
};

document.querysle;

// CREATE A CAR
// DONE - Add event listener to the form
// DONE - Get the inputs from the car (Use query selector to get the input elements of the form)
// DONE - Create the body of the post request
// DONE - Use fetch to post the information

/* <input id="brand" type="text" class="form-control" placeholder="Ferrari" />
<input id="model" type="text" class="form-control" placeholder="308 GTS" />
<input id="plate" type="text" class="form-control" placeholder="56E-478" />
<input id="owner" type="text" class="form-control" placeholder="Thomas Magnum" />
<input type="submit" class="btn btn-cta" value="Add a Car" /> */

const carForm = document.querySelector('.car-form');
carForm.addEventListener("submit", (event) => {
  event.preventDefault();

  const newCar = {
    brand: document.querySelector("#brand").value,
    model: document.querySelector("#model").value,
    owner: document.querySelector("#plate").value,
    plate: document.querySelector("#owner").value,
  };

  const result = fetch(url, {
    method: "POST",
    body: JSON.stringify(newCar),
    headers: {
      'Content-Type': 'application/json'
    },
  })
  .then(() => {
    getCars();
  })


});

getCars();