Skip to content

Commit 92d4856

Browse files
PaoloJrPaoloJr
committed
added change-color-react_source folder
1 parent d2fce0a commit 92d4856

File tree

11 files changed

+10708
-0
lines changed

11 files changed

+10708
-0
lines changed

‎change-color-react_source/.gitignore

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

‎change-color-react_source/README.md

Whitespace-only changes.

‎change-color-react_source/package.json

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "change-color-react",
3+
"version": "0.1.0",
4+
"private": true,
5+
"homepage": "https://paolojr90.github.io/react-apps/change-color-react/",
6+
"dependencies": {
7+
"@testing-library/jest-dom": "^5.16.5",
8+
"@testing-library/react": "^13.4.0",
9+
"@testing-library/user-event": "^13.5.0",
10+
"gh-pages": "^5.0.0",
11+
"node-sass": "^9.0.0",
12+
"react": "^18.2.0",
13+
"react-dom": "^18.2.0",
14+
"react-scripts": "5.0.1"
15+
},
16+
"scripts": {
17+
"start": "react-scripts start",
18+
"build": "react-scripts build",
19+
"test": "react-scripts test",
20+
"eject": "react-scripts eject",
21+
"deployToGitHub": "npm run build && npx gh-pages -d build"
22+
},
23+
"eslintConfig": {
24+
"extends": [
25+
"react-app",
26+
"react-app/jest"
27+
]
28+
},
29+
"browserslist": {
30+
"production": [
31+
">0.2%",
32+
"not dead",
33+
"not op_mini all"
34+
],
35+
"development": [
36+
"last 1 chrome version",
37+
"last 1 firefox version",
38+
"last 1 safari version"
39+
]
40+
}
41+
}

‎change-color-react_source/public/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta name="theme-color" content="#000000" />
7+
<meta
8+
name="description"
9+
content="Web site created using create-react-app"
10+
/>
11+
<title>Change Color React</title>
12+
</head>
13+
<body>
14+
<noscript>You need to enable JavaScript to run this app.</noscript>
15+
<div id="root"></div>
16+
</body>
17+
</html>

‎change-color-react_source/src/AppClass.jsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from "react";
2+
import { colors } from "./common/colors";
3+
import "./app.scss";
4+
5+
class AppClass extends React.Component {
6+
constructor(props) {
7+
super();
8+
//console.log("constructor");
9+
this.state = {};
10+
}
11+
12+
componentDidMount() {
13+
//console.log("componentDidMount");
14+
const randomIndex = Math.floor(Math.random() * colors.length);
15+
document.body.style.backgroundColor = colors[randomIndex];
16+
//console.log(randomIndex);
17+
this.setState({ currentIndexColor: randomIndex });
18+
}
19+
render() {
20+
//console.log("render");
21+
return (
22+
<div id="app">
23+
<h1 id="current-color">{colors[this.state.currentIndexColor]}</h1>
24+
<div className="colors">
25+
{colors.map((color, index) => {
26+
return (
27+
<button
28+
key={`color-${index}`}
29+
style={{ backgroundColor: color }}
30+
className={
31+
index === this.state.currentIndexColor ? "active" : ""
32+
}
33+
onClick={() => {
34+
document.body.style.backgroundColor = colors[index];
35+
this.setState({ currentIndexColor: index });
36+
console.log("clicked!", index);
37+
}}
38+
></button>
39+
);
40+
})}
41+
</div>
42+
</div>
43+
);
44+
}
45+
}
46+
47+
export default AppClass;

‎change-color-react_source/src/AppFooter.jsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// import { useState } from "react";
2+
import "./app.scss";
3+
4+
function AppFooter() {
5+
// const [state, setState] = useState({ currentIndexColor: 0 });
6+
// console.log(state);
7+
// console.log(setState);
8+
9+
return (
10+
<footer className="footer"> PJ Angeloni - First React Assignment</footer>
11+
);
12+
}
13+
14+
export default AppFooter;

‎change-color-react_source/src/AppFunction.jsx

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import { useEffect, useState } from "react";
2+
import colors from "./colors.js";
3+
4+
function AppFunction() {
5+
// useEffect is a hook that runs after the first render
6+
// it accepts a callback function that will run after the first render
7+
// useEffect(() => {
8+
// console.log("h1");
9+
// const randomIndex = Math.floor(Math.random() * colors.length);
10+
11+
// document.body.style.backgroundColor = colors[randomIndex];
12+
// console.log(randomIndex);
13+
// }, []);
14+
const [state, setState] = useState("");
15+
// console.log(state);
16+
// console.log(setState);
17+
18+
useEffect(() => {
19+
const randomIndex = Math.floor(Math.random() * colors.length);
20+
document.body.style.backgroundColor = colors[randomIndex];
21+
setState({ currentIndexColor: randomIndex });
22+
}, []);
23+
24+
function generateRandomColor() {
25+
const letters = "0123456789ABCDEF";
26+
let newColor = "#";
27+
for (let i = 0; i < 6; i++) {
28+
newColor += letters[Math.floor(Math.random() * 16)];
29+
}
30+
return newColor;
31+
}
32+
33+
function generateRandomColorsArray(length) {
34+
const newColors = [];
35+
for (let i = 0; i < length; i++) {
36+
const randomColor = generateRandomColor();
37+
newColors.push(randomColor);
38+
}
39+
return newColors;
40+
}
41+
// console.log(generateRandomColorsArray(10));
42+
43+
return (
44+
<>
45+
<div id="app">
46+
<h1 id="current-color">{colors[state.currentIndexColor]}</h1>
47+
48+
<div className="colors">
49+
{colors.map((color, index) => {
50+
return (
51+
<button
52+
key={`color-${index}`}
53+
className={index === state.currentIndexColor ? "active" : ""}
54+
style={{ backgroundColor: color }}
55+
onClick={() => {
56+
document.body.style.backgroundColor = colors[index];
57+
setState({ currentIndexColor: index });
58+
}}
59+
></button>
60+
);
61+
})}
62+
</div>
63+
<button
64+
style={{
65+
backgroundColor: "black",
66+
color: "white",
67+
fontSize: "20px",
68+
borderColor: "white",
69+
borderRadius: "5px",
70+
borderWidth: "3px",
71+
width: "200px",
72+
height: "40px",
73+
}}
74+
onClick={() => {
75+
const newColors = generateRandomColorsArray(colors.length);
76+
<h1 id="current-color">{newColors[state.currentIndexColor]}</h1>;
77+
console.log(`new colors: ${newColors}`);
78+
79+
const newButtons = newColors.map((color, index) => {
80+
return (
81+
<button
82+
key={`color-${index}`}
83+
className={index === state.currentIndexColor ? "active" : ""}
84+
style={{ backgroundColor: color }}
85+
onClick={() => {
86+
document.body.style.backgroundColor = newColors[index];
87+
setState({ currentIndexColor: index });
88+
}}
89+
></button>
90+
);
91+
});
92+
setState({
93+
buttons: newButtons,
94+
currentIndexColor: 0,
95+
});
96+
}}
97+
>
98+
Change Color Set
99+
</button>
100+
</div>
101+
</>
102+
);
103+
}
104+
105+
export default AppFunction;

‎change-color-react_source/src/app.scss

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
@import url("https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css");
2+
3+
body {
4+
transition: background-color 0.2s ease;
5+
text-align: center;
6+
}
7+
8+
.btn {
9+
font-size: 1.5rem;
10+
margin: 0 10px;
11+
border-radius: 0%;
12+
width: 250px;
13+
height: 60px;
14+
border: 7px solid black;
15+
background-color: #fff;
16+
}
17+
18+
.footer {
19+
position: fixed;
20+
bottom: 0;
21+
width: 100%;
22+
height: 46px;
23+
background-color: #f5f5f5;
24+
display: flex;
25+
align-items: center;
26+
justify-content: center;
27+
font-size: 1.5rem;
28+
}
29+
30+
#app {
31+
#current-color {
32+
font-size: clamp(1rem, 9vw, 4rem);
33+
margin-top: 150px !important;
34+
font-family: monospace;
35+
text-shadow: 2px 2px 0 #fff;
36+
}
37+
38+
.colors {
39+
position: absolute;
40+
margin-top: 50px;
41+
bottom: 90px;
42+
width: 100%;
43+
44+
button {
45+
margin: 0 10px;
46+
border-radius: 50%;
47+
width: 80px;
48+
height: 80px;
49+
border: 7px solid #fff;
50+
}
51+
}
52+
.active {
53+
border-color: black !important;
54+
}
55+
}

‎change-color-react_source/src/colors.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const colors = [
2+
"crimson",
3+
"deeppink",
4+
"deepskyblue",
5+
"gold",
6+
"lightgrey",
7+
"pink",
8+
"orange",
9+
"mediumturquoise",
10+
"lemonchiffon",
11+
"indigo",
12+
];
13+
14+
export default colors;

‎change-color-react_source/src/index.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom/client";
3+
// import AppClass from "./AppClass";
4+
import AppFunction from "./AppFunction";
5+
import AppFooter from "./AppFooter";
6+
7+
const root = ReactDOM.createRoot(document.getElementById("root"));
8+
root.render(
9+
<>
10+
<AppFunction />
11+
{/* <AppClass /> */}
12+
<AppFooter />
13+
</>
14+
);

0 commit comments

Comments
 (0)