web-html5-scripts/cards/react-0-2-0article-cards/script.js

83 lines
2.5 KiB
JavaScript
Raw Normal View History

2020-01-20 21:00:54 +01:00
/*
App
<App />
*/
var App = React.createClass({ displayName: "App",
getInitialState: function () {
return {
articles: {
'article': {
"color": "FEC006",
"title": "Snow in Turkey Brings Travel Woes",
"thumbnail": "",
"category": "News",
"excerpt": "Heavy snowstorm in Turkey creates havoc as hundreds of villages left without power, and hundreds of roads closed",
"date": new Date() },
'article-1': {
"color": "2196F3",
"title": "Landslide Leaving Thousands Homeless",
"thumbnail": "",
"category": "News",
"excerpt": "An aburt landslide in the Silcon Valley has left thousands homeless and on the streets.",
"date": new Date() },
'article-2': {
"color": "FE5621",
"title": "Hail the size of baseballs in New York",
"thumbnail": "",
"category": "News",
"excerpt": "A rare and unexpected event occurred today as hail the size of snowball hits New York citizens.",
"date": new Date() },
'article-3': {
"color": "673AB7",
"title": "Earthquake destorying San Fransisco",
"thumbnail": "",
"category": "News",
"excerpt": "A massive earthquake just hit San Fransisco leaving behind a giant crater.",
"date": new Date() } } };
},
renderArticle: function (key) {
return (
React.createElement("div", { className: "column" },
React.createElement(Article, { key: key, index: key, details: this.state.articles[key] })));
},
render: function () {
return (
React.createElement("div", { className: "app" },
React.createElement("div", { className: "container" },
Object.keys(this.state.articles).map(this.renderArticle))));
} });
/*
Article
<Article />
*/
var Article = React.createClass({ displayName: "Article",
render: function () {
var details = this.props.details,
styles = {
backgroundColor: '#' + details.color };
return (
React.createElement("article", { className: "article" },
React.createElement("h3", { className: "article__category", style: styles }, details.category),
React.createElement("h2", { className: "article__title" }, details.title),
React.createElement("p", { className: "article__excerpt" }, details.excerpt)));
} });
ReactDOM.render(React.createElement(App, null), document.querySelector('#app'));