Skip to content

Commit ed64f1c

Browse files
calculitocalculito
committed
footer
1 parent 66b4343 commit ed64f1c

File tree

10 files changed

+11510
-6921
lines changed

10 files changed

+11510
-6921
lines changed

‎package-lock.json

Lines changed: 11340 additions & 6769 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"react-iframe": "^1.8.0",
2424
"react-memo": "^0.3.1",
2525
"react-query": "^2.23.1",
26-
"react-scripts": "3.4.3",
26+
"react-scripts": "^4.0.0",
2727
"react-speech-kit": "^3.0.1",
2828
"serve": "^11.3.2",
2929
"sweetalert2": "^10.6.1",

‎src/App.css

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -487,14 +487,14 @@ img {
487487
justify-content: space-evenly;
488488
}
489489
.outPopUpText {
490+
top: -40vw;
491+
left: -50vh;
492+
transform: translate(-50%, -50%);
493+
z-index: 1000;
490494
font: 400 13.3333px Arial;
491495
position: fixed;
492496
width: 300px;
493497
height: 500px;
494-
z-index: 15;
495-
top: 20%;
496-
left: 50%;
497-
margin: -100px 0 0 -150px;
498498
}
499499
.bigWindowForText {
500500
height: 60vh;
@@ -1153,4 +1153,14 @@ h4 {
11531153
border-radius: 95% 1% 92% 1.5%/2% 97% 1% 98%;
11541154
transform: rotate(0.31deg);
11551155
}
1156+
.outPopUpText {
1157+
top: -60vh;
1158+
left: 45vw;
1159+
transform: translate(-50%, -50%);
1160+
z-index: 1000;
1161+
font: 400 13.3333px Arial;
1162+
position: fixed;
1163+
width: 280px;
1164+
height: 300px;
1165+
}
11561166
}

‎src/components/Admin.js

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,13 @@ function Admin() {
9797
},
9898
}
9999
);
100+
const openWindowUser = () => {
101+
setopenInputWindowUser(true);
102+
};
103+
104+
const openWindowClass = () => {
105+
setopenInputWindow(true);
106+
};
100107
return (
101108
<div className="flex-container">
102109
{isLoading ? (
@@ -125,10 +132,7 @@ function Admin() {
125132
key={index + "buttonAddUser"}
126133
>
127134
{" "}
128-
<button
129-
className="buttonHW"
130-
onClick={(e) => setopenInputWindowUser(true)}
131-
>
135+
<button className="buttonHW" onClick={openWindowUser}>
132136
Add an user
133137
</button>
134138
</div>
@@ -137,10 +141,7 @@ function Admin() {
137141
role="columnheader"
138142
key={index + "buttonAddClass"}
139143
>
140-
<button
141-
className="buttonHW"
142-
onClick={(e) => setopenInputWindow(true)}
143-
>
144+
<button className="buttonHW" onClick={openWindowClass}>
144145
Add a class
145146
</button>
146147
</div>

‎src/components/Book.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,9 @@ import {
1111
} from "./Impex.js";
1212

1313
function Book() {
14-
console.log("render...");
15-
function openRequestedPopup(link) {
14+
const openRequestedPopup = (link) => {
1615
window.open(link, "_blank", "noopener, noreferrer");
17-
}
16+
};
1817
const booklinks = [
1918
"https://migracode-barcelona.github.io/syllabus/html-css/",
2019
"https://migracode-barcelona.github.io/syllabus/js-core/",
@@ -35,6 +34,7 @@ function Book() {
3534
6: bookall,
3635
7: addbook,
3736
};
37+
3838
return (
3939
<div className="tabcontent">
4040
<div className="contLogoBooks">
@@ -44,7 +44,7 @@ function Book() {
4444
className="logoBooks"
4545
src={bookcovers[i]}
4646
alt={bookcovers[i]}
47-
onClick={(e) => openRequestedPopup({ data })}
47+
onClick={() => openRequestedPopup(data)}
4848
/>
4949
))}
5050
</div>

‎src/components/Bookall.js

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎src/components/ChangeColor.js

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import React, { useState, useEffect } from "react";
2+
import { sound, ReadTextWindow } from "./Impex";
3+
4+
function ChangeColor() {
5+
const [openInputWindow, setopenInputWindow] = useState(false);
6+
const [colorSet, setcolorSet] = useState("blue");
7+
let varName = [
8+
"--background-page-color",
9+
"--background-tabA-color",
10+
"--background-tabN-color",
11+
"--font-dark-color",
12+
"--font-2light-color",
13+
"--webkit-filter",
14+
"--filter",
15+
];
16+
let blue = [
17+
"#96c4d8",
18+
"#cbe3ee",
19+
"#548ba1",
20+
"#214753",
21+
"white",
22+
"invert(0)",
23+
"invert(0)",
24+
];
25+
let coffee = [
26+
"#dbc1ac",
27+
"#ece0d1",
28+
"#a38068",
29+
"#66462F",
30+
"#ecede3",
31+
"invert(0)",
32+
"invert(0)",
33+
];
34+
let gray = [
35+
"black",
36+
"#2e2e2e",
37+
"#5c5c5c",
38+
"rgb(199, 199, 199)",
39+
"rgb(25, 25, 25)",
40+
"invert(1)",
41+
"invert(1)",
42+
];
43+
console.log("render...");
44+
useEffect(() => {
45+
varName.map((data, index) => {
46+
colorSet === "blue" &&
47+
document.documentElement.style.setProperty(data, blue[index]);
48+
colorSet === "coffee" &&
49+
document.documentElement.style.setProperty(data, coffee[index]);
50+
colorSet === "gray" &&
51+
document.documentElement.style.setProperty(data, gray[index]);
52+
});
53+
}, [colorSet]);
54+
const changeWindowStatus = () => {
55+
setopenInputWindow(false);
56+
};
57+
return (
58+
<div className="infoContButtons">
59+
<button
60+
className="buttonHW"
61+
style={{ height: "22px" }}
62+
onClick={(e) => setcolorSet("blue")}
63+
>
64+
<ReadTextWindow />
65+
</button>
66+
<button
67+
className="buttonHW"
68+
style={{ height: "22px" }}
69+
onClick={(e) => setcolorSet("blue")}
70+
>
71+
blue
72+
</button>
73+
<button
74+
className="buttonHW"
75+
style={{ height: "22px" }}
76+
onClick={(e) => setcolorSet("coffee")}
77+
>
78+
coffee
79+
</button>
80+
<button
81+
className="buttonHW"
82+
style={{ height: "22px" }}
83+
onClick={(e) => setcolorSet("gray")}
84+
>
85+
gray
86+
</button>
87+
</div>
88+
);
89+
}
90+
export default React.memo(ChangeColor);

‎src/components/Footer.js

Lines changed: 3 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,10 @@
1-
import React, { useState, useEffect } from "react";
2-
import { useSpeechSynthesis } from "react-speech-kit";
3-
import { sound } from "./Impex";
1+
import React from "react";
2+
import { ChangeColor } from "./Impex";
43

54
function Footer() {
6-
const { speak } = useSpeechSynthesis();
7-
const [openInputWindow, setopenInputWindow] = useState(false);
8-
const [textToRead, settextToRead] = useState("");
9-
const [colorSet, setcolorSet] = useState("blue");
10-
let varName = [
11-
"--background-page-color",
12-
"--background-tabA-color",
13-
"--background-tabN-color",
14-
"--font-dark-color",
15-
"--font-2light-color",
16-
"--webkit-filter",
17-
"--filter",
18-
];
19-
let blue = [
20-
"#96c4d8",
21-
"#cbe3ee",
22-
"#548ba1",
23-
"#214753",
24-
"white",
25-
"invert(0)",
26-
"invert(0)",
27-
];
28-
let coffee = [
29-
"#dbc1ac",
30-
"#ece0d1",
31-
"#967259",
32-
"#66462F",
33-
"#ecede3",
34-
"invert(0)",
35-
"invert(0)",
36-
];
37-
let gray = [
38-
"black",
39-
"#2e2e2e",
40-
"#5c5c5c",
41-
"rgb(199, 199, 199)",
42-
"rgb(25, 25, 25)",
43-
"invert(1)",
44-
"invert(1)",
45-
];
46-
console.log("render...");
47-
useEffect(() => {
48-
varName.map((data, index) => {
49-
colorSet === "blue" &&
50-
document.documentElement.style.setProperty(data, blue[index]);
51-
colorSet === "coffee" &&
52-
document.documentElement.style.setProperty(data, coffee[index]);
53-
colorSet === "gray" &&
54-
document.documentElement.style.setProperty(data, gray[index]);
55-
});
56-
}, [colorSet]);
57-
/////////// SOUND READ LOUD /////////////
58-
function soundloud() {
59-
speak({
60-
text: textToRead,
61-
});
62-
setopenInputWindow(false);
63-
settextToRead("");
64-
}
655
return (
666
<div className="header" style={{ height: "30px" }}>
677
<div className="iconsRefferer">
68-
{openInputWindow !== false && (
69-
<div className="outPopUpText">
70-
<form className="form-container" onSubmit={soundloud}>
71-
<label>
72-
Insert your text:
73-
<textarea
74-
className="bigWindowForText"
75-
autoFocus
76-
type="text"
77-
placeholder="xyz..."
78-
value={textToRead}
79-
onChange={(e) => settextToRead(e.target.value)}
80-
/>
81-
</label>
82-
<input type="submit" value="Submit" className="buttonHW" />
83-
</form>
84-
</div>
85-
)}
868
<div className="invisibleMobile">
879
Icons made by{" "}
8810
<a
@@ -107,41 +29,7 @@ function Footer() {
10729
<div className="invisibleMobile">
10830
made with love and sweat by Jose + Thiago + Ion 2020
10931
</div>
110-
<div className="infoContButtons">
111-
<button
112-
className="buttonHW"
113-
style={{ height: "22px" }}
114-
onClick={(e) => setcolorSet("blue")}
115-
>
116-
<img
117-
className="linkSymbols"
118-
src={sound}
119-
alt="speaker"
120-
onClick={(e) => setopenInputWindow(1)}
121-
/>
122-
</button>
123-
<button
124-
className="buttonHW"
125-
style={{ height: "22px" }}
126-
onClick={(e) => setcolorSet("blue")}
127-
>
128-
blue
129-
</button>
130-
<button
131-
className="buttonHW"
132-
style={{ height: "22px" }}
133-
onClick={(e) => setcolorSet("coffee")}
134-
>
135-
coffee
136-
</button>
137-
<button
138-
className="buttonHW"
139-
style={{ height: "22px" }}
140-
onClick={(e) => setcolorSet("gray")}
141-
>
142-
gray
143-
</button>
144-
</div>
32+
<ChangeColor />
14533
</div>
14634
</div>
14735
);

‎src/components/Impex.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,11 @@ export { default as Recordings } from "./Recordings";
1010
export { default as Calendar } from "./Calendar";
1111
export { default as Links } from "./Links";
1212
export { default as Admin } from "./Admin";
13-
export { default as API } from "../Api.js";
13+
export { default as ReadTextWindow } from "./ReadTextWindow";
14+
export { default as ChangeColor } from "./ChangeColor";
1415
export { default as NewRecording } from "./NewRecording";
16+
export { default as API } from "../Api.js";
17+
1518
export { default as Graffiti } from "../images/graffiti.svg";
1619
export { default as bookhtml } from "../images/bookhtml.png";
1720
export { default as bookjavascript1 } from "../images/bookjavascript1.png";

0 commit comments

Comments
 (0)