Merge pull request Kushal997-das#1277 from AmrutaJayanti/Rgb

RGB Color Slider
ParnaRoyChowdhury777 · Jul 19, 2024 · 822c93f · 822c93f
2 parents 820714e + 0ed14f2
commit 822c93f
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 0 deletions.
diff --git a/Web Development/Basic/RGB Color Slider/README.md b/Web Development/Basic/RGB Color Slider/README.md
@@ -0,0 +1,7 @@
+# RGB Color Slider 
+
+You can view my project at [Link](https://rgb-color-slider-ebon.vercel.app/)
+
+Here's a preview, 
+
+![Screenshot 2024-06-28 103530](https://github.com/AmrutaJayanti/Project-Guidance/assets/142327526/79126243-edbd-4750-9da7-62e4824dafb9)
diff --git a/Web Development/Basic/RGB Color Slider/index.html b/Web Development/Basic/RGB Color Slider/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <title>RGB Color Slider</title>
+</head>
+<body>
+    <div class="container well well-lg">
+        <div class="jumbotron ">
+            <h1><span style="color : red">R</span><span style="color: green">G</span><span style="color: blue;">B</span> Color Slider</h1>
+        </div>
+    </div>
+    <p style="display: flex; justify-content: center; font-weight: 100; font-family: sans-serif; font-size: larger;">Adjust Your Values</p>
+    <div class="container col">
+        <!-- Row for R -->
+        <div class="row col-lg-4">
+            <div class="col-sm-4">
+                <p style="color: red;">R</p>
+            </div>
+            <div class="col-sm-4 slidecontainer">
+                <input type="range" min="0" max="255" value="0" class="slider" id="R">
+            </div>
+            <div class="col-sm-4" id="OutputR"></div>
+        </div>
+        <!-- Row for G -->
+        <div class="row col-lg-4">
+            <div class="col-sm-4">
+                <p style="color: green;">G</p>
+            </div>
+            <div class="col-sm-4 slidecontainer">
+                <input type="range" min="0" max="255" value="0" class="slider" id="G">
+            </div>
+            <div class="col-sm-4" id="OutputG"></div>
+        </div>
+        <!-- Row for B -->
+        <div class="row col-lg-4">
+            <div class="col-sm-4">
+                <p style="color: blue;">B</p>
+            </div>
+            <div class="col-sm-4 slidecontainer">
+                <input type="range" min="0" max="255" value="0" class="slider" id="B">
+            </div>
+            <div class="col-sm-4" id="OutputB"></div>
+        </div>
+    </div>
+    <div class="container " id="square" ></div>
+    <div class="H">
+    <div class="hexacode" id="hexa"></div>
+</div>
+    <script src="script.js"></script>
+
+</body>
+</html>
diff --git a/Web Development/Basic/RGB Color Slider/script.js b/Web Development/Basic/RGB Color Slider/script.js
@@ -0,0 +1,56 @@
+var sliderR = document.getElementById("R");
+var sliderG = document.getElementById("G");
+var sliderB = document.getElementById("B");
+var square = document.getElementById("square");
+
+var outputR = document.getElementById("OutputR");
+var outputG = document.getElementById("OutputG");
+var outputB = document.getElementById("OutputB");
+
+outputR.innerHTML = sliderR.value;
+outputG.innerHTML = sliderG.value;
+outputB.innerHTML = sliderB.value;
+
+sliderR.oninput = function() {
+  outputR.innerHTML = this.value;
+  changeColor();
+}
+
+sliderG.oninput = function() {
+  outputG.innerHTML = this.value;
+  changeColor();
+}
+
+sliderB.oninput = function() {
+  outputB.innerHTML = this.value;
+  changeColor();
+}
+
+function rgbToHex(r, g, b) {
+  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
+}
+
+function changeColor() {
+  var r = sliderR.value;
+  var g = sliderG.value;
+  var b = sliderB.value;
+  var hexColor = rgbToHex(parseInt(r), parseInt(g), parseInt(b));
+  square.style.backgroundColor = `rgb(${r},${g},${b})`;
+  document.querySelector(".hexacode").innerText = hexColor;
+}
+
+function handleKeyDown(event) {
+  const step = event.shiftKey ? 10 : 1;
+  if (event.key === 'ArrowUp' || event.key === 'ArrowRight') {
+      this.value = Math.min(parseInt(this.value) + step, 255);
+  } else if (event.key === 'ArrowDown' || event.key === 'ArrowLeft') {
+      this.value = Math.max(parseInt(this.value) - step, 0);
+  }
+  changeColor();
+}
+
+sliderR.addEventListener('keydown', handleKeyDown);
+sliderG.addEventListener('keydown', handleKeyDown);
+sliderB.addEventListener('keydown', handleKeyDown);
+
+changeColor();
diff --git a/Web Development/Basic/RGB Color Slider/style.css b/Web Development/Basic/RGB Color Slider/style.css
@@ -0,0 +1,28 @@
+.container , .H
+  {
+    display:flex;
+    justify-content: center;
+  }
+
+#square {
+    height: 200px;
+    width: 200px;
+    background-color: rgb(0,0,0);
+
+  }
+
+body{
+  background-color: rgb(220, 220, 220);
+} 
+#hexa
+{
+  font: bolder;
+  font-size: larger;
+  font-weight: bolder;
+  border:black 2px solid;
+
+}
+.H
+{
+  padding: 5px;
+}
diff --git a/Web Development/README.md b/Web Development/README.md
@@ -38,6 +38,8 @@
 | 64. | [White Board](https://github.com/Kushal997-das/Project-Guidance/tree/main/Web%20Development/Basic/White%20Board) | 65. | [Blurry Loading](https://github.com/Kushal997-das/Project-Guidance/tree/main/Web%20Development/Basic/blurry_loading) | 66. | [Flipbook](https://github.com/Kushal997-das/Project-Guidance/tree/main/Web%20Development/Basic/flipbook) |
 | 67. | [Pinterest Static](https://github.com/Kushal997-das/Project-Guidance/tree/main/Web%20Development/Basic/pinterest-static) | 68. | [Food Menu Cart](https://github.com/Kushal997-das/Project-Guidance/tree/main/Web%20Development/Basic/Food%20Menu%20Cart) |  69. | [Weight Converter](https://github.com/Kushal997-das/Project-Guidance/tree/main/Web%20Development/Basic/Weight-Converter) |
 | 70. | [Zomato Landing Page](https://github.com/Kushal997-das/Project-Guidance/tree/main/Web%20Development/Basic/Zomato-Landing-Page) | 71. | [MarkdownPreviewer](https://github.com/Kushal997-das/Project-Guidance/tree/main/Web%20Development/Basic/Markdown%20Previewer) | 72. | [Amazon-Clone](https://github.com/Kushal997-das/Project-Guidance/tree/main/Web%20Development/Basic/Amazon-Clone)
+| 73. | [RGB Color Slider](https://github.com/Kushal997-das/Project-Guidance/tree/main/Web%20Development/Basic/RGB%20Color%20Slider) |
+