exercicio

Bruno Marcos Keil · Bruno Marcos Keil · commit 14bd55e5263c · 2023-11-03T18:12:29.000-03:00
diff --git a/CRUD.html b/CRUD.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+    <title>CRUD de Animais</title>
+</head>
+
+<body>
+    <div class="container">
+        <h1>CRUD de Animais</h1>
+
+        <form id="animal_form">
+            <label for="animal_name">Nome do Animal:</label>
+            <input type="text" id="animal_name" required>
+            <button type="submit">Adicionar</button>
+        </form>
+
+        <table>
+            <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>Nome do Animal</th>
+                    <th>Ações</th>
+                </tr>
+            </thead>
+            <tbody id="animal_list">
+            </tbody>
+        </table>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="CRUD.js"></script>
+</body>
+
+</html>
diff --git a/CRUD.js b/CRUD.js
@@ -0,0 +1,65 @@
+$(document).ready(function () {
+    listAnimals();
+
+    $('#animal_form').submit(function (e) {
+        e.preventDefault();
+        const animalName = $('#animal_name').val();
+
+        $.post('http://cafepradev.com.br:21020/animals/insert', { animal: animalName }, function () {
+            $('#animal_name').val('');
+            listAnimals();
+        });
+    });
+
+    function listAnimals() {
+        $.get('http://cafepradev.com.br:21020/animals/list', function (data) {
+            const animalList = $('#animal_list');
+            animalList.empty();
+
+            data.forEach(function (animal) {
+                animalList.append(`
+                    <tr>
+                        <td>${animal.id}</td>
+                        <td>${animal.animal}</td>
+                        <td>
+                            <button class="edit-btn" data-id="${animal.id}">Editar</button>
+                            <button class="delete-btn" data-id="${animal.id}">Deletar</button>
+                        </td>
+                    </tr>
+                `);
+            });
+
+            $('.edit-btn').click(function () {
+                const animalId = $(this).data('id');
+                editAnimal(animalId);
+            });
+
+            $('.delete-btn').click(function () {
+                const animalId = $(this).data('id');
+                deleteAnimal(animalId);
+            });
+        });
+    }
+
+    function editAnimal(id) {
+        const newAnimalName = prompt('Editar Nome do Animal:');
+        if (newAnimalName !== null) {
+            $.ajax({
+                url: `http://cafepradev.com.br:21020/animals/update/${id}`,
+                type: 'PUT',
+                data: { animal: newAnimalName },
+                success: listAnimals,
+            });
+        }
+    }
+
+    function deleteAnimal(id) {
+        if (confirm('Tem certeza que deseja deletar este animal?')) {
+            $.ajax({
+                url: `http://cafepradev.com.br:21020/animals/delete/${id}`,
+                type: 'DELETE',
+                success: listAnimals,
+            });
+        }
+    }
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,53 @@
+body {
+    font-family: Arial, sans-serif;
+}
+
+.container {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 20px;
+    text-align: center;
+}
+
+table {
+    width: 100%;
+    margin-top: 20px;
+}
+
+table th {
+    background-color: #f2f2f2;
+    padding: 10px;
+}
+
+table td {
+    border-bottom: 1px solid #ccc;
+    padding: 10px;
+}
+
+form {
+    margin: 20px 0;
+}
+
+form label {
+    font-weight: bold;
+}
+
+form input[type="text"] {
+    width: 100%;
+    padding: 10px;
+    margin-top: 5px;
+}
+
+form button {
+    display: block;
+    margin-top: 10px;
+    background-color: #007BFF;
+    color: #fff;
+    padding: 10px;
+    border: none;
+    cursor: pointer;
+}
+
+form button:hover {
+    background-color: #0056b3;
+}
