JSFiddle - React, Tailwind, and code Playground

by Margus Martsepp

HTML

<script src="http://allison.house/assets/js/jquery.typed.js"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine&effect=fire-animation">
<style>
    body {
        background:black;
        font-family:'Tangerine', serif;
        font-size: 48px;
    }
    #story{
margin: 0 auto;
width: 800px;
    }
</style>
<div id="story" class="font-effect-fire-animation"></div>

JavaScript

$(function () {
            var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
            var dayOfWeekIndex = (new Date()).getDay();
            var dayOfWeek = weekdays[dayOfWeekIndex];
            var dayOfWeekPastIndex = Math.floor(weekdays.length * Math.random());
            var dayOfWeekPast;
            var hourOfDay = new Date().getHours();
            var timeOfDay;
            // choose day of week other than current one
            if (dayOfWeekPastIndex == dayOfWeekIndex) {
                dayOfWeekPast = weekdays[(dayOfWeekPastIndex + 1) % weekdays.length];
            } else {
                dayOfWeekPast = weekdays[dayOfWeekPastIndex];
            }
            // assign time of day to the hour
            if ((hourOfDay >= 4) && (hourOfDay <= 11)) {
                timeOfDay = "morning";
            } else if ((hourOfDay >= 12) && (hourOfDay <= 16)) {
                timeOfDay = "afternoon";
            } else {
                timeOfDay = "evening";
            }
            // make conversation
            $('#story').typed({
                strings: ["Well, here we are.^2000 \nAin't much to look at, is it?^2000 \nCame here on a " + dayOfWeekPast + " night once.^1000 \nIt was actually pretty crowded.^1000 \nBut on a " + dayOfWeek + " " + timeOfDay + " .^300 .^300 .^1000 \nI guess it's just you^1000 and me.^3000 \nHeh."],
                typeSpeed: 20,
                backDelay: 500,
                loop: false,
                loopCount: false,
            });
        });