Restart-Bootcamp-Javascript-Session/index.html at main · Apollo-Level2-Web-Dev/Restart-Bootcamp-Javascript-Session · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Interactive DOM Playground</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body
    class="bg-gradient-to-r from-gray-600 via-white to-gray-500 min-h-screen flex items-center justify-center p-6"
  >
    <!-- Card Container -->
    <div class="bg-white rounded-3xl shadow-2xl p-12 w-full max-w-2xl">
      <h1
        class="text-5xl font-extrabold text-center text-gradient bg-clip-text text-transparent bg-purple-700 mb-8"
      >
        DOM Playground
      </h1>

      <!-- Input Field -->
      <input
        id="inputText"
        type="text"
        placeholder="Type something..."
        class="w-full p-6 rounded-2xl border-2 border-purple-300 focus:border-purple-500 focus:ring-4 focus:ring-purple-200 mb-6 text-2xl outline-none"
      />

      <!-- Buttons Grid -->
      <div class="grid grid-cols-2 gap-6 mb-8">
        <button
          id="addBtn"
          class="p-5 text-xl rounded-2xl bg-green-500 hover:bg-green-600 font-bold"
        >
          Add Item
        </button>
        <button
          id="removeBtn"
          class="p-5 text-xl rounded-2xl bg-red-500 hover:bg-red-600 font-bold"
        >
          Remove Last
        </button>

        <button
          id="changeHTMLBtn"
          class="p-5 text-xl rounded-2xl bg-yellow-500 hover:bg-yellow-600 font-bold"
        >
          innerHTML
        </button>
        <button
          id="changeStyleBtn"
          class="p-5 text-xl rounded-2xl bg-indigo-500 hover:bg-indigo-600 font-bold"
        >
          Change Style
        </button>
      </div>

      <!-- List Container -->
      <ul id="itemList" class="space-y-4">
        <li
          class="p-6 bg-purple-100 rounded-2xl shadow-lg hover:shadow-2xl transition cursor-pointer text-xl"
        >
          Example Item 1
        </li>
      </ul>
    </div>

    <!-- JS File -->
    <script src="dom.js"></script>
  </body>
</html>