diff --git a/app_7/color2.html b/app_7/color2.html
new file mode 100644
index 0000000000000000000000000000000000000000..1aa9781349e9b52d9ec2348a113ed3d536fd5be0
--- /dev/null
+++ b/app_7/color2.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Color test</title>
+    <script>
+        // use arrow funtion
+        document.addEventListener('DOMContentLoaded', () => {
+            document.querySelectorAll('.color-change').forEach(button => {
+                button.onclick = () => {
+                    alert(button.dataset.color)
+                    document.querySelector('#hello').style.color = button.dataset.color
+                }
+            })
+        })
+
+    </script>
+</head>
+<body>
+    <h1 id="hello">Hello</h1>
+    <button class="color-change" data-color="red">Red</button>
+    <button class="color-change" data-color="blue">Blue</button>
+    <button class="color-change" data-color="green">Green</button>
+</body>
+</html>
\ No newline at end of file
diff --git a/app_7/color3.html b/app_7/color3.html
new file mode 100644
index 0000000000000000000000000000000000000000..df084c21a8bc2a97a8b6cbd3cfd6499b1eea28b4
--- /dev/null
+++ b/app_7/color3.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Color test3</title>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            document.querySelector('#color-change').onchange = function() {
+                alert(this.value)
+                document.querySelector("#hello").style.color = this.value;
+            }
+        });
+
+    </script>
+</head>
+<body>
+    <h1 id="hello">Hello</h1>
+    <select id="color-change">
+        <option value="black">Black</option>
+        <option value="red">Red</option>
+        <option value="blue">Blue</option>
+        <option value="green">Green</option>
+
+    </select>
+</body>
+</html>
\ No newline at end of file