Merge pull request #1140 from kiselova/ColorChanger-kiselova

ColorChanger project
thinkswell · Jun 11, 2024 · a0d6570 · a0d6570
2 parents f875994 + 05f64a4
commit a0d6570
Show file tree

Hide file tree

Showing 3 changed files with 163 additions and 0 deletions.
diff --git a/ColorChanger-MiniApp/kiselova/index.html b/ColorChanger-MiniApp/kiselova/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Color Generator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="random-element">
+        <h1>Color Changer</h1>
+        <h2>CLICK ANY ONE OF THESE ELEMENTS</h2>
+        <div class="color-pallets-div">
+            <div class="pallet" data-color="red"></div>
+            <div class="pallet" data-color="green"></div>
+            <div class="pallet" data-color="purple"></div>
+            <div class="pallet" data-color="blue"></div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="wrapper">
+            R<input type="range" min="0" max="255" value="0" id="red" oninput="colors()">
+        </div>
+        <div class="wrapper">
+            G<input type="range" min="0" max="255" value="0" id="green" oninput="colors()">
+        </div>
+        <div class="wrapper">
+            B<input type="range" min="0" max="255" value="0" id="blue" oninput="colors()">
+        </div>
+        <span id="output">rgb(0, 0, 0)</span>
+
+        <script src="script.js"></script>
+
+</body>
+
+</html>
diff --git a/ColorChanger-MiniApp/kiselova/script.js b/ColorChanger-MiniApp/kiselova/script.js
@@ -0,0 +1,19 @@
+function colors() {
+  var red = document.getElementById("red").value;
+  var green = document.getElementById("green").value;
+  var blue = document.getElementById("blue").value;
+  document.body.style.backgroundColor =
+    "rgb(" + red + "," + green + "," + blue + ")";
+  document.getElementById("output").innerHTML =
+    "rgb(" + red + "," + green + "," + blue + ")";
+}
+
+function myFunction() {
+  document.getElementById("myDIV").style.backgroundColor = "lightblue";
+}
+
+document.querySelectorAll(".pallet").forEach((pallet) => {
+  pallet.addEventListener("click", () => {
+    document.body.style.backgroundColor = pallet.getAttribute("data-color");
+  });
+});
diff --git a/ColorChanger-MiniApp/kiselova/style.css b/ColorChanger-MiniApp/kiselova/style.css
@@ -0,0 +1,105 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: #142b37;
+}
+
+.random-element {
+  width: 60%;
+  border: 4px solid black;
+  margin: 2em auto;
+  padding: 1em;
+  border-radius: 10px;
+  background-color: white;
+}
+
+h1 {
+  font-size: 100px;
+  margin-bottom: 0.2em;
+}
+
+h1,
+h2 {
+  text-align: center;
+}
+
+h2 {
+  font-weight: 500;
+}
+
+.color-pallets-div {
+  display: flex;
+  align-items: center;
+  gap: 1em;
+  justify-content: center;
+  margin-top: 1.5em;
+}
+
+.pallet {
+  cursor: pointer;
+  width: 55px;
+  height: 55px;
+  border-radius: 7px;
+  background-color: blue;
+}
+
+[data-color="red"] {
+  background-color: red;
+}
+
+[data-color="green"] {
+  background-color: green;
+}
+
+[data-color="purple"] {
+  background-color: purple;
+}
+
+.container {
+  background-color: #ffffff;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+  width: 60%;
+  padding: 20px 0;
+  box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.2);
+  font-family: "Work Sans", sans-serif;
+  font-size: 20px;
+  font-weight: 500;
+  color: #142b37;
+  border-radius: 5px;
+  display: grid;
+  justify-items: center;
+  margin-top: 6em;
+}
+
+.wrapper {
+  width: 100%;
+  text-align: center;
+}
+
+input[type="range"] {
+  display: inline-block;
+  width: 80%;
+  margin-left: 10px;
+  margin-top: 25px;
+}
+
+span {
+  display: inline-block;
+  text-align: center;
+  margin: 20px 0;
+  background-color: #0075ff;
+  color: #ffffff;
+  padding: 10px 30px;
+  font-size: 18px;
+  letter-spacing: 0.5px;
+  border-radius: 2px;
+}