Merge pull request #1122 from rajanarahul93/master

NitkarshChourasia · web-flow · commit 1360d4b4a02c · 2024-05-07T15:34:18.000+05:30
Created a Color Changer Mini-App
diff --git a/color changer mini app#1115/index.html b/color changer mini app#1115/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+    <title>Color Changer Mini-App</title>
+</head>
+<body>
+    <div id="colorChangerApp">
+        <h1>Color Changer Mini-App</h1>
+        <label for="elementSelector">Select Element:</label>
+        <select id="elementSelector">
+            <option value="background">Background</option>
+            <option value="text">Text</option>
+        </select>
+
+        <label for="colorPicker">Choose Color:</label>
+        <input type="color" id="colorPicker" value="#ff0000">
+
+        <button onclick="changeColor()">Apply Color</button>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/color changer mini app#1115/script.js b/color changer mini app#1115/script.js
@@ -0,0 +1,13 @@
+function changeColor() {
+    var selectedElement = document.getElementById('elementSelector').value;
+    var newColor = document.getElementById('colorPicker').value;
+
+    var elementToChange = document.body; 
+    if (selectedElement === 'background') {
+        elementToChange = document.body;
+    } else if (selectedElement === 'text') {
+        elementToChange = document.getElementById('colorChangerApp');
+    }
+
+    elementToChange.style.backgroundColor = newColor;
+}
diff --git a/color changer mini app#1115/styles.css b/color changer mini app#1115/styles.css
@@ -0,0 +1,15 @@
+body {
+    font-family: 'Arial', sans-serif;
+    text-align: center;
+}
+
+#colorChangerApp {
+    margin: 50px;
+}
+
+button {
+    padding: 10px;
+    margin-top: 10px;
+    cursor: pointer;
+}
+
