crimson-projects
diff --git a/‎.DS_Store
6 KB b/‎.DS_Store
6 KB
diff --git a/‎.gitattributes
+2 b/‎.gitattributes
+2
diff --git a/‎README.md
+9 b/‎README.md
+9
diff --git a/‎admin/.DS_Store
6 KB b/‎admin/.DS_Store
6 KB
diff --git a/‎admin/base.png
26.6 KB b/‎admin/base.png
26.6 KB
diff --git a/‎index.html
+22 b/‎index.html
+22
diff --git a/‎main.js
+50 b/‎main.js
+50
diff --git a/‎style.css
+50 b/‎style.css
+50
@@ -0,0 +1,2 @@
+*.md linguist-language=JavaScript
+*.css linguist-language=JavaScript
@@ -0,0 +1,9 @@
+<div align="center">
+
+# Random Gradient Color with JavaScript | Crimson
+
+<img src="admin/base.png">
+
+### by <a href="https://github.com/shahnozahaydarova">Shakhnoza Haydarova</a>
+
+</div>
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Random Gradient Color with JavaScript | Crimson</title>
+</head>
+<body>
+    <div class="container">
+        <h1>Random Gradient Color</h1>
+        <small>Click me</small>
+    </div>
+
+    <p class="color-text">linear-gradient( 41deg, #fd1148, #4988ff )</p>
+    <small class="copyright">
+        by  <a href="https://github.com/shahnozahaydarova">Shakhnoza Haydarova</a>
+    </small>
+    <script src="main.js"></script>l
+</body>
+</html>
@@ -0,0 +1,50 @@
+const body = document.querySelector('body')
+const container = document.querySelector('.container')
+const colorText = document.querySelector('.color-text')
+const values = [
+  '0',
+  '1',
+  '2',
+  '3',
+  '4',
+  '5',
+  '6',
+  '7',
+  '8',
+  '9',
+  'a',
+  'b',
+  'c',
+  'd',
+  'e',
+  'f',
+]
+
+// random color function
+function getGradient() {
+  let color = '#'
+  for (let i = 0; i < 6; i++) {
+    const randomNumber = Math.trunc(Math.random() * values.length)
+    color += values[randomNumber]
+  }
+
+  return color
+}
+
+// set color to body
+function setGradient() {
+  const color1 = getGradient()
+  const color2 = getGradient()
+  const randomDeg = Math.trunc(Math.random() * 360)
+  const bgColor = `linear-gradient(
+    ${randomDeg}deg,
+    ${color1},
+    ${color2}
+  )`
+  body.style.background = bgColor
+  colorText.textContent = bgColor
+}
+
+setGradient()
+
+container.addEventListener('click', setGradient)
@@ -0,0 +1,50 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    color: #fff;
+}
+body{
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+    font-family: sans-serif;
+    background-color: #333;
+    background-image: linear-gradient( 41deg, #fd1148, #4988ff );
+}
+.container{
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    background-color: rgba(204, 204,204, 0.5);
+    padding: 15px 25px;
+    border-radius: 10px;
+    user-select: none;
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.5s;
+    margin-bottom: 25px;
+}
+.container:hover {
+    box-shadow: 0px 26px 70px 1px rgba(0, 0, 0, 0.4);
+    transform: scale(1.001);
+  }
+  
+  .container h1 {
+    font-weight: 500;
+  }
+  
+  .copyright {
+    position: absolute;
+    bottom: 50px;
+  }
+  
+  @media (max-width: 460px) {
+    .container h1 {
+      font-size: 22px;
+    }
+  }
+
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+*.md linguist-language=JavaScript`
	`2`	`+*.css linguist-language=JavaScript`