Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 85a1621

Browse files
base files
0 parents commit 85a1621

File tree

8 files changed

+133
-0
lines changed

8 files changed

+133
-0
lines changed

‎.DS_Store‎

6 KB
Binary file not shown.

‎.gitattributes‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
*.md linguist-language=JavaScript
2+
*.css linguist-language=JavaScript

‎README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div align="center">
2+
3+
# Random Gradient Color with JavaScript | Crimson
4+
5+
<img src="admin/base.png">
6+
7+
### by <a href="https://github.com/shahnozahaydarova">Shakhnoza Haydarova</a>
8+
9+
</div>

‎admin/.DS_Store‎

6 KB
Binary file not shown.

‎admin/base.png‎

26.6 KB
Loading[フレーム]

‎index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Random Gradient Color with JavaScript | Crimson</title>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h1>Random Gradient Color</h1>
13+
<small>Click me</small>
14+
</div>
15+
16+
<p class="color-text">linear-gradient( 41deg, #fd1148, #4988ff )</p>
17+
<small class="copyright">
18+
by <a href="https://github.com/shahnozahaydarova">Shakhnoza Haydarova</a>
19+
</small>
20+
<script src="main.js"></script>l
21+
</body>
22+
</html>

‎main.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
const body = document.querySelector('body')
2+
const container = document.querySelector('.container')
3+
const colorText = document.querySelector('.color-text')
4+
const values = [
5+
'0',
6+
'1',
7+
'2',
8+
'3',
9+
'4',
10+
'5',
11+
'6',
12+
'7',
13+
'8',
14+
'9',
15+
'a',
16+
'b',
17+
'c',
18+
'd',
19+
'e',
20+
'f',
21+
]
22+
23+
// random color function
24+
function getGradient() {
25+
let color = '#'
26+
for (let i = 0; i < 6; i++) {
27+
const randomNumber = Math.trunc(Math.random() * values.length)
28+
color += values[randomNumber]
29+
}
30+
31+
return color
32+
}
33+
34+
// set color to body
35+
function setGradient() {
36+
const color1 = getGradient()
37+
const color2 = getGradient()
38+
const randomDeg = Math.trunc(Math.random() * 360)
39+
const bgColor = `linear-gradient(
40+
${randomDeg}deg,
41+
${color1},
42+
${color2}
43+
)`
44+
body.style.background = bgColor
45+
colorText.textContent = bgColor
46+
}
47+
48+
setGradient()
49+
50+
container.addEventListener('click', setGradient)

‎style.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
color: #fff;
6+
}
7+
body{
8+
height: 100vh;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
flex-direction: column;
13+
text-align: center;
14+
font-family: sans-serif;
15+
background-color: #333;
16+
background-image: linear-gradient( 41deg, #fd1148, #4988ff );
17+
}
18+
.container{
19+
display: flex;
20+
flex-direction: column;
21+
gap: 5px;
22+
background-color: rgba(204, 204,204, 0.5);
23+
padding: 15px 25px;
24+
border-radius: 10px;
25+
user-select: none;
26+
cursor: pointer;
27+
font-weight: 500;
28+
transition: all 0.5s;
29+
margin-bottom: 25px;
30+
}
31+
.container:hover {
32+
box-shadow: 0px 26px 70px 1px rgba(0, 0, 0, 0.4);
33+
transform: scale(1.001);
34+
}
35+
36+
.container h1 {
37+
font-weight: 500;
38+
}
39+
40+
.copyright {
41+
position: absolute;
42+
bottom: 50px;
43+
}
44+
45+
@media (max-width: 460px) {
46+
.container h1 {
47+
font-size: 22px;
48+
}
49+
}
50+

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /