\n
\n );\n });\n this.setState({ pictures: pictures });\n });\n }\n\n render() {\n return (\n <>\n {/* \n \n First Name: {person.name.first}\n \n \n Gender: {person.gender}\n \n \n Age: {person.dob.age}\n \n \n Country: {person.location.country}\n \n \n
\n Hi there
*/}\n\n
\n \n \n );\n }\n loadingAnimation() {\n return (\n \n {this.state.loading\n ? this.loadingAnimation()\n : this.state.pictures}\n
\n \n \n \n \n\n \n \n \n
\n );\n }\n}\n\nexport default App;\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport \"./index.css\";\nimport App from \"./App\";\n\nReactDOM.render(
36 | 
48 |
66 | );
67 | });
68 | this.setState({ pictures });
69 | });
70 | }
71 |
72 | render() {
73 | return (
74 | <>
75 |
49 |
62 |
65 | First Name
50 |: {person.name.first}
51 |Gender
52 |: {person.gender}
53 |Age
54 |: {person.dob.age}
55 |Country
56 |: {person.location.country}
57 |Phone
58 |: {person.phone}
59 |DOB
60 |: {person.dob.date.slice(0, 10)}
61 |
84 |
90 |
91 | );
92 | }
93 | }
94 |
95 | export default App;
96 |
--------------------------------------------------------------------------------
/src/components/Loader.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | function Loading() {
4 | return (
5 |
85 |
89 |
86 | {this.state.loading ?
88 |
6 |
7 |
8 |
9 |
10 | );
11 | }
12 |
13 | export default Loading;
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | margin: 100px;
5 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
6 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
7 | sans-serif;
8 | -webkit-font-smoothing: antialiased;
9 | -moz-osx-font-smoothing: grayscale;
10 | background-color: #8080ff;
11 | }
12 |
13 | code {
14 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
15 | monospace;
16 | }
17 |
18 | h2{
19 | margin:12px 0;
20 | }
21 |
22 | .profile-pic {
23 | box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.2), 0 8px 30px 0 rgba(0, 0, 0, 0.19);
24 | }
25 |
26 | .random-btn {
27 | margin: 10% 15%;
28 | height: 50px;
29 | width: 70%;
30 | align-self: center;
31 | border-radius: 10px;
32 | box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.2), 0 8px 30px 0 rgba(0, 0, 0, 0.19);
33 | border-width: 0;
34 | background-color: #ff337d;
35 | font-size: 1rem;
36 | color: #fff;
37 | cursor: pointer;
38 | }
39 |
40 | .loader{
41 | width: 100%;
42 | height: 60vh;
43 | display: flex;
44 | justify-content: center;
45 | flex-direction: row;
46 | align-items: center;
47 | position: relative;
48 | }
49 |
50 | .bubble {
51 | width: 20px;
52 | height: 20px;
53 | margin: 2px;
54 | box-sizing: border-box;
55 | border-radius: 50%;
56 | background-color: gray;
57 | animation: in-out-all 1s infinite;
58 | }
59 | .bubble-first {
60 | width: 18px;
61 | height: 18px;
62 | }
63 | .bubble-second {
64 | animation-delay: 250ms;
65 | }
66 | .bubble-third {
67 | animation-delay: 500ms;
68 | }
69 | @keyframes in-out-all {
70 | 0% {
71 | width: 20px;
72 | height: 20px;
73 | }
74 | 50% {
75 | width: 10px;
76 | height: 10px;
77 | }
78 | 100% {
79 | width: 20px;
80 | height: 20px;
81 | }
82 | }
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import "./index.css";
4 | import App from "./App";
5 |
6 | ReactDOM.render(
6 | {persons.map(results => (
7 |
14 | );
15 | };
16 |
17 | export default Persons;
18 |
--------------------------------------------------------------------------------
/src/picture.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Pictures = ({ pictures }) => {
4 | return (
5 |
8 |
12 | ))}
13 | {results.dob.age}
9 |{results.gender}
10 |{results.name.first}
11 |
6 | {pictures.map(picture => (
7 |
8 | ))}
9 |
10 | );
11 | };
12 |
13 | export default Pictures;
14 |
--------------------------------------------------------------------------------