Skip to content

Instantly share code, notes, and snippets.

@paulusm

paulusm/index.html

Last active August 29, 2015 14:16
Show Gist options
  • Save paulusm/cc7e6dda5fb2c8806a41 to your computer and use it in GitHub Desktop.
Save paulusm/cc7e6dda5fb2c8806a41 to your computer and use it in GitHub Desktop.
Download ZIP
JS Demo Mad Lib DOM example 2// source http://jsbin.com/kelufe
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>JS Demo 1</title>
<style>
body{font-family:helvetica, sans-serif; font-size:2em;}
input{font-family:helvetica, sans-serif; font-size:1em; display:block; margin:auto; }
#output{padding:2% 10% 2% 5%;}
</style>
<meta name="description" content="Simple DOM example 2">
</head>
<body>
<input type="button" id="control" value="Transform the VC's Message">
<input type="button" id="reset" value="Reset" onclick="window.location.reload();">
<div id="output">
<h1>Welcoming our <span class="adjective"></span> students</h1>
<p>
This weekend we will see over 6,000 <span class="adjective">new</span> students join us. Throughout their first week,
they will have the opportunity to take part in many activities including <span class="activity">welcome parties</span>,
<span class="activity">cookery demonstrations</span> and <span class="activity">the Freshers' Fair</span>.
</p>
<p>
I always look forward to meeting our new students at the welcome events, to hear about their
<span class="noun">hopes and aspirations</span>, and to personally share some of our
<span class="noun">ambitions for the coming years</span>.
It really is a <span class="adjective">n exciting</span> time for us and them, and
really captures the core of what we are about - <span class="core-mission">transforming futures
through the opportunities we create for our students</span>.
<p>
</p>
I would like to thank all those who have worked incredibly hard to make <span class="activity">registration</span>
a smooth process, and all those who have organised the <span class="noun">activities</span> and
<span class="noun">events</span> that are on offer. I'm sure we will still have a few snags to iron out,
but I am confident everyone will pull together to do the best we can to help our
students <span class="student-aim">settle in</span>, at what can be a daunting
but <span class="adjective">exciting</span> time.
<p>
</p>
As our students find their way around, I encourage you to wear your <span class="personal-item">staff identity card</span>
visibly so we can all point any lost students in the right direction and show
what a <span class="adjective">welcoming</span> university ours is.
Having a <span class="adjective">friendly</span> face and a <span class="adjective">'can do'</span>
attitude really helps - it makes a difference to how you feel if you know you
can ask for <span class="noun">help</span>.
</p>
</div>
</body>
</html>
<script id="jsbin-javascript">
var VCTranslate = function(e){
//"use strict";
var coreMission = "defeating our Dalek overlords";
var nouns = ["cake", "crisps", "nuts","class As","drugs","alcohol"];
var activities = ["smooching", "drinking heavily", "forgetting where they live","the debauchery"];
var adjectives = ["immature", "scary", "lovely", "epic", "fruity", "gorgeous"];
var nounCount = 0,activityCount = 0,adjIndex;
// Find the span elements on the page
var spans = document.getElementsByTagName("span");
//console.log(spans);
for(var i=0; i<spans.length; i++){
// choose whichlists to pull from based on classes
switch(spans[i].className){
case "core-mission":
spans[i].textContent=coreMission;
break;
case "noun":
spans[i].textContent=nouns[nounCount];
nounCount ++;
break;
case "activity":
spans[i].textContent=activities[activityCount];
activityCount ++;
break;
case "adjective":
adjIndex = Math.round(Math.random()*5);
spans[i].textContent=adjectives[adjIndex];
break;
default:
console.log(spans[i].className);
break;
}
}
};
//hook up the event here to the "control" button
document.getElementById("control").addEventListener("click", function(e){VCTranslate();});
</script>
<script id="jsbin-source-javascript" type="text/javascript">var VCTranslate = function(e){
//"use strict";
var coreMission = "defeating our Dalek overlords";
var nouns = ["cake", "crisps", "nuts","class As","drugs","alcohol"];
var activities = ["smooching", "drinking heavily", "forgetting where they live","the debauchery"];
var adjectives = ["immature", "scary", "lovely", "epic", "fruity", "gorgeous"];
var nounCount = 0,activityCount = 0,adjIndex;
// Find the span elements on the page
var spans = document.getElementsByTagName("span");
//console.log(spans);
for(var i=0; i<spans.length; i++){
// choose whichlists to pull from based on classes
switch(spans[i].className){
case "core-mission":
spans[i].textContent=coreMission;
break;
case "noun":
spans[i].textContent=nouns[nounCount];
nounCount ++;
break;
case "activity":
spans[i].textContent=activities[activityCount];
activityCount ++;
break;
case "adjective":
adjIndex = Math.round(Math.random()*5);
spans[i].textContent=adjectives[adjIndex];
break;
default:
console.log(spans[i].className);
break;
}
}
};
//hook up the event here to the "control" button
document.getElementById("control").addEventListener("click", function(e){VCTranslate();});</script></body>
</html>
Raw
jsbin.kelufe.js
var VCTranslate = function(e){
//"use strict";
var coreMission = "defeating our Dalek overlords";
var nouns = ["cake", "crisps", "nuts","class As","drugs","alcohol"];
var activities = ["smooching", "drinking heavily", "forgetting where they live","the debauchery"];
var adjectives = ["immature", "scary", "lovely", "epic", "fruity", "gorgeous"];
var nounCount = 0,activityCount = 0,adjIndex;
// Find the span elements on the page
var spans = document.getElementsByTagName("span");
//console.log(spans);
for(var i=0; i<spans.length; i++){
// choose whichlists to pull from based on classes
switch(spans[i].className){
case "core-mission":
spans[i].textContent=coreMission;
break;
case "noun":
spans[i].textContent=nouns[nounCount];
nounCount ++;
break;
case "activity":
spans[i].textContent=activities[activityCount];
activityCount ++;
break;
case "adjective":
adjIndex = Math.round(Math.random()*5);
spans[i].textContent=adjectives[adjIndex];
break;
default:
console.log(spans[i].className);
break;
}
}
};
//hook up the event here to the "control" button
document.getElementById("control").addEventListener("click", function(e){VCTranslate();});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment