luizfonseca · March 22, 2018 21:27
diff --git a/browser.js b/browser.js
 /**
 ** GET https://wagon-garage-api.herokuapp.com/137/cars
 ** POST https://wagon-garage-api.herokuapp.com/137/cars
 ** body:
  {
    "brand": "PEUGEOT",
    "model": "106",
    "owner": "ssaunier",
    "plate": "123AZ56"
  }
 ** GET https://wagon-garage-api.herokuapp.com/cars/100
 ** DELETE  https://wagon-garage-api.herokuapp.com/cars/:id
 **/

 console.log("Hello from src/browser.js");
 const url = "https://wagon-garage-api.herokuapp.com/137/cars"
 const urlTo = "https://wagon-garage-api.herokuapp.com/cars/"


 // GEt an specific Car by ID
 const getCarById = (id) => {
  // "https://wagon-garage-api.herokuapp.com/cars/:id"
  fetch(urlTo + id)
  .then(response => response.json())
  .then((data) => {
    console.log(data)
  })
 }


 // Create a new car using body info
 const postCar = (car) => {
  fetch(url, { method:'POST', body: JSON.stringify({
    "brand": car.brand,
    "model": car.model,
    "owner": car.owner,
    "plate": car.plate
    }),
    headers: {
      "Content-Type": "application/json"
    }
  })
  .then(response => response.json())
  .then((data) => {
    console.log(data)
  })
 }


 // Delete car By ID
 const deleteCar = (id) => {
  fetch(urlTo + id, {method:'delete'})
  .then(response => response.json())
  .then((data) => {
    console.log(data)
  })
 }


 // We are just saving the HTML element 
 // Straight in this variable
 // so we can keep creating cars whenever I want
 const carHTML = (car) => {
  return `<li class="car">
    <div class="image">
      <img src="http://placehold.it/100x100"/>
    </div>
    <div class="info">
      <div class="brand">${car.brand}</div>
      <div class="brand">${car.model}</div>
      <div class="brand">${car.owner}</div>
      <div class="brand">${car.plate}</div>
    </div>
  </li>`
 }


 // THis is the UL that holds the CAR HTML above 
 const carList = document.querySelector('ul.car-grid');

 // GET all cars
 const getCars = () => {
  fetch(url)
  .then(response => response.json())
  .then((data) => {
    carList.innerHTML = "";
    data.forEach((car) => {
      carList.insertAdjacentHTML('beforeend', carHTML(car))
    })
  })
 }



 // We are getting the form
 const newCarForm = document.querySelector('form.new-car');

 // And binding the submit event 
 // So we can create cars and also refresh
 newCarForm.addEventListener('submit', (event) => {
  event.preventDefault();
  const car = {}
  car.brand = document.querySelector('input[name="brand"]').value;
  car.model = document.querySelector('input[name="model"]').value;
  car.owner = document.querySelector('input[name="owner"]').value;
  car.plate = document.querySelector('input[name="plate"]').value;


  postCar(car);
  getCars();

 })


 // Initialize the program
 getCars();
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="UTF-8">
    <title>Playground - JavaScript 101</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <div class="sidebar">
          <h3>Put a car in the garage</h3>
          <form class="new-car" action="#">
            <label>Brand<input type="text" name="brand"></label>
            <label>Model<input type="text" name="model"></label>
            <label>Owner<input type="text" name="owner"></label>
            <label>Plate<input type="text" name="plate"></label>
            <input type="submit" value="Put the car in the garage!" class="btn btn-primary">
          </form>
      </div>


      <div class="cars-list">
          <ul class="car-grid"></ul>
      </div>

    </div>


    <script src="build/application.js"></script>
  </body>
 </html>
diff --git a/style.css b/style.css
 .container {
  display: grid;
  grid-template-columns: 25% 75%;
  height: 90vh;
 }


 .car-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
 }

 .car {
  display: flex;
  list-style-type: none;
  box-shadow: 0 1px 5px #aaa;
 }
	/**
	** GET https://wagon-garage-api.herokuapp.com/137/cars
	** POST https://wagon-garage-api.herokuapp.com/137/cars
	** body:
	{
	"brand": "PEUGEOT",
	"model": "106",
	"owner": "ssaunier",
	"plate": "123AZ56"
	}
	** GET https://wagon-garage-api.herokuapp.com/cars/100
	** DELETE https://wagon-garage-api.herokuapp.com/cars/:id
	**/

	console.log("Hello from src/browser.js");
	const url = "https://wagon-garage-api.herokuapp.com/137/cars"
	const urlTo = "https://wagon-garage-api.herokuapp.com/cars/"


	// GEt an specific Car by ID
	const getCarById = (id) => {
	// "https://wagon-garage-api.herokuapp.com/cars/:id"
	fetch(urlTo + id)
	.then(response => response.json())
	.then((data) => {
	console.log(data)
	})
	}


	// Create a new car using body info
	const postCar = (car) => {
	fetch(url, { method:'POST', body: JSON.stringify({
	"brand": car.brand,
	"model": car.model,
	"owner": car.owner,
	"plate": car.plate
	}),
	headers: {
	"Content-Type": "application/json"
	}
	})
	.then(response => response.json())
	.then((data) => {
	console.log(data)
	})
	}


	// Delete car By ID
	const deleteCar = (id) => {
	fetch(urlTo + id, {method:'delete'})
	.then(response => response.json())
	.then((data) => {
	console.log(data)
	})
	}


	// We are just saving the HTML element
	// Straight in this variable
	// so we can keep creating cars whenever I want
	const carHTML = (car) => {
	return `<li class="car">
	<div class="image">
	<img src="http://placehold.it/100x100"/>
	</div>
	<div class="info">
	<div class="brand">${car.brand}</div>
	<div class="brand">${car.model}</div>
	<div class="brand">${car.owner}</div>
	<div class="brand">${car.plate}</div>
	</div>
	</li>`
	}


	// THis is the UL that holds the CAR HTML above
	const carList = document.querySelector('ul.car-grid');

	// GET all cars
	const getCars = () => {
	fetch(url)
	.then(response => response.json())
	.then((data) => {
	carList.innerHTML = "";
	data.forEach((car) => {
	carList.insertAdjacentHTML('beforeend', carHTML(car))
	})
	})
	}



	// We are getting the form
	const newCarForm = document.querySelector('form.new-car');

	// And binding the submit event
	// So we can create cars and also refresh
	newCarForm.addEventListener('submit', (event) => {
	event.preventDefault();
	const car = {}
	car.brand = document.querySelector('input[name="brand"]').value;
	car.model = document.querySelector('input[name="model"]').value;
	car.owner = document.querySelector('input[name="owner"]').value;
	car.plate = document.querySelector('input[name="plate"]').value;


	postCar(car);
	getCars();

	})


	// Initialize the program
	getCars();
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Playground - JavaScript 101</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div class="container">
	<div class="sidebar">
	<h3>Put a car in the garage</h3>
	<form class="new-car" action="#">
	<label>Brand<input type="text" name="brand"></label>
	<label>Model<input type="text" name="model"></label>
	<label>Owner<input type="text" name="owner"></label>
	<label>Plate<input type="text" name="plate"></label>
	<input type="submit" value="Put the car in the garage!" class="btn btn-primary">
	</form>
	</div>


	<div class="cars-list">
	<ul class="car-grid"></ul>
	</div>

	</div>


	<script src="build/application.js"></script>
	</body>
	</html>
	.container {
	display: grid;
	grid-template-columns: 25% 75%;
	height: 90vh;
	}


	.car-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
	}

	.car {
	display: flex;
	list-style-type: none;
	box-shadow: 0 1px 5px #aaa;
	}