Skip to content

Commit ca73ad0

Browse files
Gradient-LoverGradient-Lover
committed
inital commit
1 parent 846a610 commit ca73ad0

File tree

6 files changed

+50
-52
lines changed

6 files changed

+50
-52
lines changed

‎public/favicon.ico‎

11.3 KB
Binary file not shown.

‎public/index.html‎

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -10,34 +10,14 @@
1010
content="Web site created using create-react-app"
1111
/>
1212
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<!--
14-
manifest.json provides metadata used when your web app is installed on a
15-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16-
-->
13+
1714
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
19-
Notice the use of %PUBLIC_URL% in the tags above.
20-
It will be replaced with the URL of the `public` folder during the build.
21-
Only files inside the `public` folder can be referenced from the HTML.
2215

23-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24-
work correctly both with client-side routing and a non-root public URL.
25-
Learn how to configure a non-root public URL by running `npm run build`.
26-
-->
27-
<title>React App</title>
16+
<title>FIND MY GRADIENT</title>
2817
</head>
2918
<body>
3019
<noscript>You need to enable JavaScript to run this app.</noscript>
3120
<div id="root"></div>
32-
<!--
33-
This HTML file is a template.
34-
If you open it directly in the browser, you will see an empty page.
3521

36-
You can add webfonts, meta tags, or analytics to this file.
37-
The build step will place the bundled scripts into the <body> tag.
38-
39-
To begin the development, run `npm start` or `yarn start`.
40-
To create a production bundle, use `npm run build` or `yarn build`.
41-
-->
4222
</body>
4323
</html>

‎public/logo192.png‎

3.68 KB
Loading

‎public/logo512.png‎

16.3 KB
Loading

‎src/App.css‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@
55
border-radius: 5px;
66
border: 1px solid rosybrown;
77
}
8-
button{
9-
background: linear-gradient(to right, #fff700 , #ff0000);
10-
}
8+
119
input{
1210
width: 100px;
1311
min-width: 100%;
@@ -24,4 +22,30 @@ background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%,
2422
.color{
2523
display: flex;
2624
justify-content: space-between;
25+
}
26+
27+
.control{
28+
background: black;
29+
color: white;
30+
padding: 5px;
31+
margin: 5px;
32+
width: 20%;
33+
transition: 1s;
34+
}
35+
36+
.color-input{
37+
border:solid 1px white;
38+
opacity:0.2;
39+
transition:1s
40+
}
41+
42+
.color-input:hover{
43+
border:solid 1px white;
44+
opacity:1;
45+
}
46+
47+
.control:hover{
48+
background: white;
49+
color: black;
50+
2751
}

‎src/App.js‎

Lines changed: 21 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,18 @@ import { useState } from "react";
33
export default function App() {
44
const [leftColor, setLeftColor] = useState("#fff700");
55
const [rightColor, setRightColor] = useState("#ff0000");
6-
7-
const [radialGradient, setRadialGradient] = useState(
8-
`radial-gradient(${leftColor} , ${rightColor})`
9-
);
10-
const [linearGradient, setLinearGradient] = useState(
11-
`linear-gradient(to right , ${leftColor} , ${rightColor})`
12-
);
13-
const [gradientType, setGradientType] = useState("radial");
6+
const [gradientType, setGradientType] = useState("linear");
147

158
const copyCode = () => {
16-
navigator.clipboard.writeText(
17-
`linear-gradient(to right, ${leftColor} , ${rightColor})`
18-
);
9+
if (gradientType == "linear") {
10+
navigator.clipboard.writeText(
11+
`linear-gradient(to right, ${leftColor} , ${rightColor})`
12+
);
13+
} else {
14+
navigator.clipboard.writeText(
15+
`radial-gradient(${leftColor} , ${rightColor})`
16+
);
17+
}
1918
};
2019

2120
return (
@@ -24,25 +23,21 @@ export default function App() {
2423
className="container"
2524
style={{
2625
background:
27-
gradientType === "radial" ? radialGradient : linearGradient,
26+
gradientType === "radial"
27+
? `radial-gradient(${leftColor} , ${rightColor})`
28+
: `linear-gradient(to right, ${leftColor} , ${rightColor})`,
2829
height: "90vh",
2930
display: "flex",
3031
justifyContent: "space-around",
3132
alignItems: "center",
3233
}}
3334
>
34-
<div className="left-color">
35+
<div className="left-color color-input">
3536
<input
3637
value={leftColor}
3738
onChange={(event) => {
3839
console.log(event.target.value);
3940
setLeftColor(event.target.value);
40-
setLinearGradient(
41-
`linear-gradient(to right, ${leftColor} , ${rightColor})`
42-
);
43-
setRadialGradient(
44-
`raidal-gradient(${leftColor} , ${rightColor})`
45-
);
4641
}}
4742
type="color"
4843
/>
@@ -59,17 +54,11 @@ export default function App() {
5954
</div>
6055
</div>
6156

62-
<div className="right-color">
57+
<div className="right-color color-input">
6358
<input
6459
value={rightColor}
6560
onChange={(event) => {
6661
setRightColor(event.target.value);
67-
setLinearGradient(
68-
`linear-gradient(to right, ${leftColor} , ${rightColor})`
69-
);
70-
setRadialGradient(
71-
`raidal-gradient(${leftColor} , ${rightColor})`
72-
);
7362
}}
7463
type="color"
7564
/>
@@ -91,14 +80,19 @@ export default function App() {
9180

9281
<div style={{ textAlign: "center" }} className="panel">
9382
<button
83+
className="control"
9484
onClick={() => {
9585
setGradientType("linear");
9686
}}
9787
>
9888
Linear Gradient
9989
</button>
100-
<button onClick={copyCode}> Copy Gradient code </button>
90+
<button className="control" onClick={copyCode}>
91+
{" "}
92+
Copy Gradient code{" "}
93+
</button>
10194
<button
95+
className="control"
10296
onClick={() => {
10397
setGradientType("radial");
10498
}}

0 commit comments

Comments
 (0)