-
Notifications
You must be signed in to change notification settings - Fork 0
/
index2.html
159 lines (157 loc) · 4.75 KB
/
index2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- REACT LIBRARY -->
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<!-- REACT DOM LIBRARY -->
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<!-- BABEL LIBRARY -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>FriendLy</title>
</head>
<body>
<div id="app">React has not rendered yet</div>
<script type="text/babel">
// FriendLy Complex Component
function FriendLy(props) {
var friendlyStyle = {
display: 'inline-block',
margin: 20,
height: 300,
width: 200,
padding: 0,
backgroundColor: "#FFF",
WebkitFilter: "drop-shadow(0px 0px 5px #555)",
filter: "drop-shadow(0px 0px 5px #555)"
}
return(
<div style={friendlyStyle}>
<Avatar img={props.img}/>
<UserName name={props.name}/>
<GetConnected/>
</div>
);
}
// Avatar Component
function Avatar(props) {
var avatarStyle = {
marginLeft: 27,
marginTop: 20,
width: 150,
height: 150,
borderRadius: "50%"
}
return(
<img src={props.img} alt="profile pic" style={avatarStyle}/>
);
}
// UserName Component
function UserName(props) {
var nameStyle = {
fontSize: 24,
textAlign: "center",
fontFamily: "Arial, Helvetica, sans-serif",
margin: 20
}
return(
<h1 style={nameStyle}>{props.name}</h1>
);
}
// GetConnected Complex Component
function GetConnected() {
var getConnectedStyle = {
marginLeft: 15
}
return(
<div style={getConnectedStyle}>
<Like/>
<Share/>
<Add/>
</div>
);
}
var iconStyle = {
margin: 20
}
// Like Component
function Like() {
return(
<i className="fa fa-thumbs-o-up" aria-hidden="true" style={iconStyle}></i>
);
}
// Share Component
function Share() {
return(
<i className="fa fa-share" aria-hidden="true" style={iconStyle}></i>
);
}
// Add Component
function Add() {
return(
<i className="fa fa-users" aria-hidden="true" style={iconStyle}></i>
);
}
// Challenge - Mass produce individual FriendLy cards using props
// Challenge 1 - Use props to pass the name of the person from ReactDOM.render() method to parent FriendLy
// component to child UserName component
// Challenge 2 - Use props to pass the image URL from ReactDOM.render() method to parent FriendLy component
// to child Avatar component
// Challenge 3 - Mass produce individual FriendLy cards by providing props and values in our ReactDOM.render()
// method
// IMAGE URLS TAKE FROM PEXELS.COM
// BECAUSE THEIR FREE IMAGES CHANGE
// MAKE SURE THE URL'S ARE VALID
// BY TESTING THEM OUT IN YOUR BROWSER
ReactDOM.render(
<div>
<FriendLy
name="Rob"
img="https://pbs.twimg.com/profile_images/699422966556168193/zUm4vhAo.jpg"
/>
<FriendLy
name="Charles"
img="https://static.pexels.com/photos/38630/bodybuilder-weight-training-stress-38630.jpeg"
/>
<FriendLy
name='Alex'
img="https://static.pexels.com/photos/91227/pexels-photo-91227.jpeg"
/>
<FriendLy
name='Natalie'
img="https://static.pexels.com/photos/509195/pexels-photo-509195.jpeg"
/>
<FriendLy
name='Jenny'
img="https://pbs.twimg.com/profile_images/874276197357596672/kUuht00m_400x400.jpg"
/>
<FriendLy
name='Sarah'
img="https://static.pexels.com/photos/324658/pexels-photo-324658.jpeg"
/>
<FriendLy
name='Josh'
img="https://pbs.twimg.com/profile_images/874276197357596672/kUuht00m_400x400.jpg"
/>
<FriendLy
name='Kenny'
img="https://pbs.twimg.com/profile_images/874276197357596672/kUuht00m_400x400.jpg"
/>
<FriendLy
name='John'
img="https://static.pexels.com/photos/45882/man-crazy-funny-dude-45882.jpeg"
/>
<FriendLy
name='Alisha'
img="https://pbs.twimg.com/profile_images/874276197357596672/kUuht00m_400x400.jpg"
/>
</div>,
document.getElementById("app")
);
</script>
</body>
</html>