Skip to content

Commit 1b5d9aa

Browse files
VivekShingalaVivekShingala
committed
commit before creating a branch
1 parent c5b41d4 commit 1b5d9aa

File tree

2 files changed

+199
-0
lines changed

2 files changed

+199
-0
lines changed

Diff for: ‎day5.html

+119
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Fullstackreact Tutorials Day 4</title>
6+
<!-- Script tags including React -->
7+
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
8+
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
9+
<script crossorigin src="https://unpkg.com/babel-standalone/babel.min.js"></script>
10+
11+
<!-- css -->
12+
<link href="timeline.css" rel="stylesheet" type="text/css" />
13+
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
14+
</head>
15+
<body>
16+
<div class="demo">
17+
<div id="app"></div>
18+
</div>
19+
<script type="text/babel">
20+
const activities = [
21+
{
22+
timestamp: new Date().getTime(),
23+
text: "Ate lunch",
24+
user:{
25+
id: 1,
26+
name: 'Nate',
27+
avatar: "http://www.croop.cl/UI/twitter/images/doug.jpg"
28+
},
29+
comments: [{from: "Ari",text:"me too!"}]
30+
},
31+
{
32+
timestamp: new Date().getTime(),
33+
text: "Woke up early for a beautiful run",
34+
user:{
35+
id: 2,
36+
name: 'Ari',
37+
avatar: "http://www.croop.cl/UI/twitter/images/doug.jpg"
38+
},
39+
comments: [{from: "Nate",text:"I am so jealous"}]
40+
}
41+
];
42+
{/* Header */}
43+
class Header extends React.Component{
44+
render(){
45+
return(
46+
<div className="header">
47+
<div className="menuIcon">
48+
<div className="dashTop"></div>
49+
<div className="dashBottom"></div>
50+
<div className="circle"></div>
51+
</div>
52+
53+
<span className="title">{this.props.title}</span>
54+
55+
<input type="text" className="searchInput" placeholder="Search ..."/>
56+
<div className="fa fa-search searchIcon"></div>
57+
</div>
58+
)
59+
}
60+
}
61+
62+
{/* ActivityItem */}
63+
class ActivityItem extends React.Component{
64+
render(){
65+
const {activity} = this.props; // ES6 destructuring
66+
return(
67+
<div className="item">
68+
<div className="avatar">
69+
<img src={activity.user.avatar} alt={activity.text} />
70+
{activity.user.name}
71+
</div>
72+
<span className="time">{activity.timestamp}</span>
73+
<p>{activity.text}</p>
74+
<div className="commentCount">{activity.comments.length}</div>
75+
</div>
76+
)
77+
}
78+
}
79+
80+
{/* Content */}
81+
class Content extends React.Component{
82+
render(){
83+
const {activities} = this.props; // ES6 destructuring
84+
return(
85+
<div className="content">
86+
<div className="line"></div>
87+
88+
{/* Timeline item */}
89+
{activities.map((activity) => {
90+
return(
91+
<ActivityItem activity={activity}/>
92+
)
93+
})}
94+
{/*...*/}
95+
</div>
96+
)
97+
}
98+
}
99+
100+
{/* container */}
101+
class App extends React. Component{
102+
render(){
103+
return (
104+
<div className="notificationsFrame">
105+
<div className="panel">
106+
{/* content goes here */}
107+
<Header title="Timeline Dynamic"/>
108+
<Content activities={activities}/>
109+
</div>
110+
</div>
111+
)
112+
}
113+
}
114+
115+
var mount = document.querySelector('#app');
116+
ReactDOM.render(<App/>,mount);
117+
</script>
118+
</body>
119+
</html>

Diff for: ‎day6.html

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Fullstackreact Tutorials Day 6</title>
6+
<!-- Script tags including React -->
7+
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
8+
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
9+
<script crossorigin src="https://unpkg.com/babel-standalone/babel.min.js"></script>
10+
</head>
11+
<body>
12+
<div class="demo">
13+
<div id="app"></div>
14+
</div>
15+
<script type="text/babel">
16+
class Clock extends React.Component{
17+
constructor(props){
18+
super(props);
19+
this.state = this.getTime();
20+
}
21+
22+
setTimer(){
23+
clearTimeout(this.timeout);
24+
this.timeout = setTimeout(this.updateClock.bind(this), 1000);
25+
}
26+
27+
updateClock(){
28+
const currentTime = new Date();
29+
this.setState({currentTime:currentTime},this.setTimer);
30+
}
31+
32+
getTime(){
33+
const currentTime = new Date();
34+
return {
35+
hours: currentTime.getHours(),
36+
minutes: currentTime.getMinutes(),
37+
seconds: currentTime.getSeconds(),
38+
ampm: currentTime.getHours() >= 12 ? 'pm' : 'am'
39+
}
40+
}
41+
42+
render(){
43+
const {hours, minutes, seconds, ampm} = this.state;
44+
return(
45+
<div className="clock">
46+
{
47+
hours == 0 ? 12 : (hours > 12) ? hours -12 : hours
48+
}
49+
:
50+
{
51+
minutes > 9 ? minutes : `0${minutes}`
52+
}
53+
:
54+
{
55+
seconds > 9 ? seconds : `0${seconds}`
56+
} {ampm}
57+
</div>
58+
);
59+
}
60+
}
61+
62+
{/* container */}
63+
class App extends React. Component{
64+
render(){
65+
return (
66+
<div className="notificationsFrame">
67+
<div className="panel">
68+
{/* content goes here */}
69+
<Clock/>
70+
</div>
71+
</div>
72+
)
73+
}
74+
}
75+
76+
var mount = document.querySelector('#app');
77+
ReactDOM.render(<App/>,mount);
78+
</script>
79+
</body>
80+
</html>

0 commit comments

Comments
 (0)