Astrid birthday doodle

by Kai Carver

HTML

<body>
  <h1>A Message for Astrid on June 13, 2014:</h1>
  <div id="texty">...</div>
  <!--
  <p>
    <input type="text" id="txt" value="Hello, $title!" />
    <input type="button" id="btnb" value="bakward" />
    <input type="button" id="btnf" value="forward" />
  </p>
  -->
<div id="words" style="font-family: Courier; "><pre>
h
ha
haha
hap
haphap
haphappy birbirthday
habby
happy
yappy
yapph
yepph
yppeh
hppey
happy
hddey
happy
Happy
hAppy
haPpy
hapPy
happY
hapPY
haPPY
hAPPY
HAPPY
HaPPY
HApPY
HAPpY
HAPPy
happy
yappy
happy
heppy
happy
haqpy
happy
hapby
happy
happh
happy
hhappy
hhaappy
hhaapppy
hhaappppy
hhaappppyy
happy
hhappy
haappy
happpy
happpy
happyy
happy
 appy
h ppy
ha py
hap y
happ
hap,
hap, hap,
hap, hap, hap, ...
happy birthday Astrid!
!!!!! !!!!!!!! !!!!!!!
happy birthday Astrid!
!!!!! !!!!!!!! !!!!!!!
happy birthday Astrid!
!!!!! !!!!!!!! !!!!!!!
happy birthday Astrid!
!!!!! !!!!!!!! !!!!!!!
happy birthday Astrid!
!!!!! !!!!!!!! !!!!!!!
</pre></div>
</body>

CSS

body {
  background: #eee; 
}
 
#texty { font-size: 1em; font-family: Courier; }
#words { display: none; }

JavaScript

var texts = [
  { text: "The art pits pretty abominable writers hard and trying. All such artists crave is deliverance.", delay: 8000},
  { text: " he a t pi s pre ty  bo inable wr ters ha d a d  ry ng. Al  suc   rtists cr ve is deli erance.", delay: 3000},
  { text: " he a t pi s p e ty  bo in bl  wr te s ha d a d  ry  g. Al  s c   rt  ts cr ve is de i er nce.", delay: 3000},
  { text: " h  a t p  s p e  y  b  i  b    r t  s h  d a d   y  g  A   s c    t  t   r v  i  d  i e  n e ", delay: 3000},
  { text: " h  a   p    p    y  b  i       r t    h  d a     y     A   s      t      r    i  d  ! !  ! ! ", delay: 5000},
  { text: " h  a  p  p  y       b  i  r  t  h  d  a  y             A   s   t   r   i   d        !!!!!!!! ", delay: 8000},
]
lots = document.getElementById("words").innerText
var lotsarray = lots.split("\n")
for (var i = 0; i < lotsarray.length; i++) {
  texts.push({ text: lotsarray[i], delay: 200})
}
texts.push(  { text: "happy birthday Astrid!!!",  delay: 5000}
)
var frameNumber = 0


$(function() {
  /*
  $('#btnf').on('click', function() {
    var frame = nextFrame()
    display(frame)
  });
  */
  next();
});

function next() {
  var frame = getFrame()
  display(frame)
  nextFrame()
  setTimeout(next, frame.delay/2);
}
function getFrame() {
  return texts[frameNumber]
}
function nextFrame() {
  frameNumber += 1
  if (frameNumber >= texts.length) frameNumber = 0
  //if (frameNumber >= 6) frameNumber = 0
  return getFrame()
}
function display(frame) {
  var texty = document.getElementById('texty');
  texty.innerHTML = "<pre>" + frame.text + "</pre>";
}