html/apicallex.html at main · Tejkumar-hacker/html · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>One Piece Arcs</title>

<style>
    body {
        font-family: Arial, sans-serif;
        background: #f2f2f2;
    }

    .box {
        max-width: 750px;
        margin: 30px auto;
        padding: 20px;
        text-align: center;
    }

    .btn {
        background: #020222;
        color: white;
        border: none;
        padding: 10px 16px;
        border-radius: 5px;
        cursor: pointer;
        margin: 5px;
    }

    .btn:hover {
        background: #7171b8;
    }

    input {
        padding: 8px;
        margin: 5px;
        width: 200px;
    }

    .post {
        background: #111;
        color: white;
        padding: 15px;
        margin-top: 12px;
        border-radius: 6px;
        text-align: left;
    }

    .post h3 {
        color: gold;
        margin-top: 0;
    }
</style>
</head>

<body>

<div class="box">
    <h2>One Piece Arcs</h2>

    <!-- Add Arc -->
    <input type="text" id="name" placeholder="Arc Name" >
    <input type="text" id="saga" placeholder="Saga">
    <input type="text" id="episodes" placeholder="Episodes">
    <input type="text" id="villain" placeholder="Main Villain">
    <br>
    <button class="btn" onclick="addArc()">Add Arc</button>
    <button class="btn" onclick="delArc()">Delete Arc</button>
    <button class="btn" onclick="ondisplay()">Fetch Arcs</button>

    <div id="posts"></div>
</div>

<script>
const API_URL = "http://localhost:3000/arcs";

// Fetch & display arcs
function ondisplay() {
    fetch(API_URL)
        .then(res => res.json())
        .then(arcs => {
            const postsDiv = document.getElementById("posts");
            postsDiv.innerHTML = "";

            arcs.forEach(arc => {
                postsDiv.innerHTML += `
                    <div class="post">
                        <h3>${arc.name}</h3>
                        <p><strong>Saga:</strong> ${arc.saga}</p>
                        <p><strong>Episodes:</strong> ${arc.episodes}</p>
                        <p><strong>Main Villain:</strong> ${arc.mainVillain}</p>
                    </div>
                `;
            });
        })
        .catch(err => console.error(err));
}

// Add new arc
function addArc() {
    const name = document.getElementById("name").value.trim();
    const saga = document.getElementById("saga").value.trim();
    const episodes = document.getElementById("episodes").value.trim();
    const mainVillain = document.getElementById("villain").value.trim();

    if (!name || !saga || !episodes || !mainVillain) {
        alert("Fill all fields");
        return;
    }

    fetch(API_URL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name, saga, episodes, mainVillain })
    })
    .then(() => {
        document.querySelectorAll("input").forEach(i => i.value = "");
        ondisplay();
    });
}
// Delete arc by name
function delArc() {
    const name = document.getElementById("name").value.trim();

    if (!name) {
        alert("Enter arc name to delete");
        return;
    }

    // Step 1: Fetch all arcs
    fetch(API_URL)
        .then(res => res.json())
        .then(arcs => {
            // Step 2: Find arc by name
            const arcToDelete = arcs.find(
                arc => arc.name.toLowerCase() === name.toLowerCase()
            );

            if (!arcToDelete) {
                alert("Arc not found");
                return;
            }

            // Step 3: Delete using ID
            fetch(`${API_URL}/${arcToDelete.id}`, {
                method: "DELETE"
            })
            .then(() => {
                alert(`"${arcToDelete.name}" deleted successfully`);
                ondisplay(); // refresh the list
            });
        })
        .catch(err => console.error("Delete error:", err));
}
</script>

</body>
</html>