Skip to content

Instantly share code, notes, and snippets.

@kaicarver

kaicarver/index.html

Last active January 16, 2016 22:06
Show Gist options
  • Save kaicarver/1b7cb25651d8eab6966d to your computer and use it in GitHub Desktop.
Save kaicarver/1b7cb25651d8eab6966d to your computer and use it in GitHub Desktop.
Download ZIP
Hahappy Babirthday
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>$title</title>
<style src="style.css"></style>
$styles
</head>
<body>
<script src="script.js"></script>
<h1>A Message for Astrid:</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>
The art pits pretty abominable writers hard and trying. All such artists crave is deliverance.
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.
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.
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
happy</pre></div>
$scripts
</body>
</html>
Raw
script.js
var texts = [
{ text: "ha", delay: 2000},
{ text: "aha!", delay: 500},
{ text: "ha...", delay: 2000},
{ text: "ahaha...", delay: 500},
{ text: "aha", delay: 1000},
{ text: "hap", delay: 1000},
{ text: "hap, ", delay: 1000},
{ text: "hap, hap,", delay: 1000},
{ text: "hap, hap, hap", delay: 1000},
{ text: "happy", delay: 1000},
{ text: "hap happy...", delay: 1000},
{ text: "happy birthday Astrid!!!", delay: 5000}
]
texts = []
lots = document.getElementById("words").innerText
var lotsarray = lots.split("\n")
for (var i = 0; i < lotsarray.length; i++) {
texts.push({ text: lotsarray[i], 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
return getFrame()
}
function display(frame) {
var texty = document.getElementById('texty');
texty.innerHTML = "<pre>" + frame.text + "</pre>";
}
Raw
style.css
body {
background: #eee;
}
#texty { font-size: 1em; font-family: Courier; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment