Random_Gradient_Color

You can get random gradient color by pressing space.
Darshan3690 · Oct 8, 2024 · 5eca4a1 · 5eca4a1
1 parent 2db1d30
commit 5eca4a1
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 0 deletions.
diff --git a/Random_Gradient_Color/README.md b/Random_Gradient_Color/README.md
@@ -0,0 +1 @@
+In this project youcan get random gradient colors by pressing space.
diff --git a/Random_Gradient_Color/index.html b/Random_Gradient_Color/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Random Linear Gradient Generator</title>
+    <link rel="stylesheet" href="./style.css" type="text/css">
+</head>
+<body>
+    <div class="container">
+        <p class="info">Press SPACE</p>
+        <p class="colors">
+            <span class="color" id="color-1">color-1</span>
+            <button class="btn">➡</button>
+            <span class="color" id="color-2">color-2</span>
+        </p>
+
+        <div class="output">
+            <p class="code">CSS Background Linear Gradient</p>
+        </div>
+    </div>
+    <script src="./script.js" type="text/javascript"></script>
+</body>
+</html>
diff --git a/Random_Gradient_Color/script.js b/Random_Gradient_Color/script.js
@@ -0,0 +1,36 @@
+//DOM Elements
+const color1Elem = document.getElementById('color-1');
+const color2Elem = document.getElementById('color-2');
+const codeElem = document.querySelector('.code');
+const btn = document.querySelector('.btn');
+const infoElem = document.querySelector('.info');
+
+//Generate HEX
+function getHEX(){
+    let randomHex = Math.random().toString(16).substr(-6);
+    let hexColor = `#${randomHex}`;
+    return hexColor;
+}
+
+//Update the UI
+function updateUI(){
+    infoElem.remove();
+
+    color1Elem.innerText = getHEX();
+    color2Elem.innerText = getHEX();
+
+    color1Elem.style.background = color1Elem.innerText;
+    color2Elem.style.background = color2Elem.innerText;
+
+    codeElem.innerText = `background: linear-gradient(90deg, ${color1Elem.innerText}, ${color2Elem.innerText});`;
+    document.body.style.background = `linear-gradient(90deg, ${color1Elem.innerText}, ${color2Elem.innerText})`;
+}
+
+//when user clicks SPACE or the arrow, then UpdateUI
+
+window.addEventListener('keydown', event => {
+    if(event.code === 'Space')
+        updateUI();
+});
+
+btn.addEventListener('click', updateUI);
diff --git a/Random_Gradient_Color/style.css b/Random_Gradient_Color/style.css
@@ -0,0 +1,59 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+html,
+body {
+  font-size: 10px;
+  font-family: 'lato', Arial, Helvetica, sans-serif;
+}
+body {
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+.colors {
+  font-size: 2.5rem;
+  margin-bottom: 5rem;
+}
+.color {
+  background: black;
+  color: white;
+  padding: 0.7rem 1rem;
+  border-radius: 5rem;
+  display: inline-block;
+  width: 12rem;
+  text-align: center;
+}
+.btn {
+  border: none;
+  cursor: pointer;
+  background: transparent;
+  font-size: 3rem;
+}
+.output {
+  font-size: 1.7rem;
+  background: black;
+  color: white;
+  border-radius: 0.5rem;
+  padding: 3rem;
+  width: 50rem;
+  text-align: center;
+}
+.info {
+  font-size: 3rem;
+  margin-bottom: 10rem;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		In this project youcan get random gradient colors by pressing space.