feat: invert whole body after typing

25sprout · Nov 22, 2017 · d462bb0 · d462bb0
1 parent a2c4955
commit d462bb0
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/src/css/index.css b/src/css/index.css
@@ -1,3 +1,4 @@
-.hello {
-	content: 'world';
+body.invert {
+	background-color: #000;
+	filter: invert(1);
 }
diff --git a/src/js/index.js b/src/js/index.js
@@ -10,6 +10,8 @@ import { catTypeing } from './appConfig';
 import countdown from './countdown';
 import updateTime from './updateTime';
 
+const reversedCatTyping = [...catTypeing].reverse().join('');
+
 /**
  * first shot
  */
@@ -22,15 +24,26 @@ setInterval(() => {
 	updateTime(countdown());
 }, 1000);
 
+const comingAgain = (typeObject, inputString) => {
+	document.body.classList.add('invert');
+
+	setTimeout(() => {
+		document.body.classList.remove('invert');
+		typeObject.rewrite(inputString, () => {
+			comingAgain(typeObject, inputString === catTypeing ? reversedCatTyping : catTypeing);
+		});
+	}, 1000);
+};
+
 /**
  * init typing animation
  */
-/* eslint-disable no-new */
-new TypeWriting({
-/* eslint-enable no-new */
+const typeWriting = new TypeWriting({
 	targetElement: document.querySelector('.confused-typing'),
 	inputString: catTypeing,
 	typingInterval: 50,
 	blinkInterval: '1s',
 	cursorColor: palette.darkBlack,
+}, () => {
+	comingAgain(typeWriting, reversedCatTyping);
 });