ronaiza-cardoso/test.html

## test.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul id="list"></ul>

    <script>
      const END_POINT = "http://191.252.93.122/desafio-front-end/api";

      function listData() {
        const list = document.getElementById("list");
        const END_POINT = "http://191.252.93.122/desafio-front-end/api";

        fetch(`${END_POINT}/index.php`, {
          method: "GET",
        })
          .then((res) => res.json())
          .then((res) => {
            res.forEach((element) => {
              console.log("element :>> ", element);
              const entry = document.createElement("li");
              const markup = `
              <li>
                <strong>id: </strong> ${element.id} <br/>
                <strong>destido: </strong> ${element.destino} <br/>
                <strong>estado: </strong> ${element.estado} <br/>
                <strong>origem: </strong> ${element.origem} <br/>

                <buton onclick="editData(${element.id}, 'novo-estado')"> editar </>
              </li>
              `;

              entry.innerHTML = markup;
              list.appendChild(entry);
            });
          });
      }

      function editData(id, estado) {
        fetch(
          `${END_POINT}/update.php?id=${encodeURIComponent(
            id
          )}&estado=${encodeURIComponent(estado)}`,
          {
            method: "GET",
          }
        )
          .then((res) => res.json())
          .then((res) => alert(`estado: ${res.status}`));
      }

      listData();
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<ul id="list"></ul>

	<script>
	const END_POINT = "http://191.252.93.122/desafio-front-end/api";

	function listData() {
	const list = document.getElementById("list");
	const END_POINT = "http://191.252.93.122/desafio-front-end/api";

	fetch(`${END_POINT}/index.php`, {
	method: "GET",
	})
	.then((res) => res.json())
	.then((res) => {
	res.forEach((element) => {
	console.log("element :>> ", element);
	const entry = document.createElement("li");
	const markup = `
	<li>
	<strong>id: </strong> ${element.id} <br/>
	<strong>destido: </strong> ${element.destino} <br/>
	<strong>estado: </strong> ${element.estado} <br/>
	<strong>origem: </strong> ${element.origem} <br/>

	<buton onclick="editData(${element.id}, 'novo-estado')"> editar </>
	</li>
	`;

	entry.innerHTML = markup;
	list.appendChild(entry);
	});
	});
	}

	function editData(id, estado) {
	fetch(
	`${END_POINT}/update.php?id=${encodeURIComponent(
	id
	)}&estado=${encodeURIComponent(estado)}`,
	{
	method: "GET",
	}
	)
	.then((res) => res.json())
	.then((res) => alert(`estado: ${res.status}`));
	}

	listData();
	</script>
	</body>
	</html>