From 1b7b41829efa8690e75d3a0bf28257103901ed2f Mon Sep 17 00:00:00 2001 From: Patrick Hund Date: Thu, 3 Nov 2016 16:38:40 +0100 Subject: [PATCH] delayed rendering of text Change-Id: I1eb1223d09e344340101187c9cc4a0032fb7c3ea --- public/index.html | 2 +- src/App.css | 9 +++++---- src/App.js | 36 ++++++++++++++++++++++++++++++++---- src/index.css | 6 ++++++ 4 files changed, 44 insertions(+), 9 deletions(-) diff --git a/public/index.html b/public/index.html index f1e0afe..7fbfbf3 100644 --- a/public/index.html +++ b/public/index.html @@ -26,6 +26,6 @@ -
+
diff --git a/src/App.css b/src/App.css index 69c1e38..1a4d839 100644 --- a/src/App.css +++ b/src/App.css @@ -1,7 +1,3 @@ -.App { - text-align: center; -} - .App-logo { animation: App-logo-spin infinite 20s linear; height: 80px; @@ -12,12 +8,17 @@ height: 150px; padding: 20px; color: darkolivegreen; + text-align: center; } .App-intro { font-size: large; } +.App-technical-note { + font-size: small; + text-align: right; +} @keyframes App-logo-spin { from { transform: rotate(0deg); diff --git a/src/App.js b/src/App.js index e19fd83..751cbe8 100644 --- a/src/App.js +++ b/src/App.js @@ -2,9 +2,25 @@ import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; +const delay = { + choMessage: 10 +}; + class App extends Component { + + constructor(props) { + super(props); + this.state = { + choMessage: null + }; + window.setTimeout(() => this.setState({ + choMessage: "Trees cover up a multitude of sins. All kinds of happy little splashes. And just raise cain. When things happen - enjoy them. They're little gifts. It's important to me that you're happy. Let's put some happy little bushes on the other side now. We'll paint one happy little tree right here. In life you need colors. Automatically, all of these beautiful, beautiful things will happen. This present moment is perfect simply due to the fact you're experiencing it. Isn't that fantastic? You can just push a little tree out of your brush like that. Just let go - and fall like a little waterfall. We want to use a lot pressure while using no pressure at all. This is your world, whatever makes you happy you can put in it. Go crazy. Let that brush dance around there and play. Pretend you're water. Just floating without any effort. Having a good day. We don't have to be concerned about it. We just have to let it fall where it will. I like to beat the brush. Maybe there's a little something happening right here. See there, told you that would be easy. Let's put some happy little clouds in our world. There is no right or wrong - as long as it makes you happy and doesn't hurt anyone. Look around, look at what we have. Beauty is everywhere, you only have to look to see it. You don't want to kill all your dark areas they are very important. That is when you can experience true joy, when you have no fear. You can get away with a lot. Only eight colors that you need. We'll have a super time. Work that paint. All you have to do is let your imagination go wild." + }), delay.choMessage); + + } render() { - const articleContent = document.getElementById('root').getAttribute('data-article-content'); + const customerQuote = document.getElementById('root').getAttribute('data-customer-quote'); + const { choMessage } = this.state; return (
@@ -18,9 +34,21 @@ class App extends Component {

Here's what our customers have to say:

- - {articleContent} - +
+ {customerQuote} +
+

+ (text comes from a data attribute in the static HTML page's DOM) +

+

+ A personal message from our CHO (Chief Happiness Officer): +

+
+ {choMessage} +
+

+ (text set {delay.choMessage} ms after component was initially rendered via component.setState) +

); } diff --git a/src/index.css b/src/index.css index f73d44b..4ad67d0 100644 --- a/src/index.css +++ b/src/index.css @@ -5,3 +5,9 @@ body { padding: 0; font-family: sans-serif; } + +sup { + font-size: smaller; +} + +