Skip to content

Instantly share code, notes, and snippets.

/index.html

Created March 15, 2016 19:59
Show Gist options
  • Save anonymous/9a1cf9d62b74431ea9f9 to your computer and use it in GitHub Desktop.
Save anonymous/9a1cf9d62b74431ea9f9 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/duwuquniqi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.p1 {
color: darkblue;
font-family: helvetica;
font-size: 3em;
font-weight: bold;
text-align: center;
}
@-webkit-keyframes fadeIn {
from { opacity:0; opacity: 0; }
to { opacity:1; } }
@-moz-keyframes fadeIn {
from { opacity:0; opacity: 0; }
to { opacity:1; } }
@keyframes fadeIn {
from { opacity:0; opacity: 0; }
to { opacity:1; } }
.fade-in {
opacity:0;
animation:fadeIn ease-in 1;
/* -webkit-animation:fadeIn ease-in 1; */
/* -moz-animation:fadeIn ease-in 1; */
animation-fill-mode:forwards;
/* -webkit-animation-fill-mode:forwards; */
/* -moz-animation-fill-mode:forwards; */
animation-duration:1s;
/* -webkit-animation-duration:1s; */
/* -moz-animation-duration:1s; */
}
.fade-in.delay {
animation-delay: 0.5s;
/* -webkit-animation-delay: 0.5s; */
/* -moz-animation-delay: 0.5s; */
}
</style>
</head>
<body>
<p>i think therefore i am.</p>
<script id="jsbin-javascript">
var capitalizeString = function(string) {
var words = string.split(" ");
newString = words[0].charAt(0).toUpperCase() + words[0].slice(1);
for (var i = 1; i < words.length; i++) {
if (words[i] === "i") {
modifiedWord = words[i].charAt(0).toUpperCase() + words[i].slice(1);
newString = newString + " " + modifiedWord;
} else {
newString = newString + " " + words[i];
}
}
return newString;
};
window.onload = function() {
var paragraphs = document.getElementsByTagName("p");
for (i = 0; i < paragraphs.length; i++) {
currentParagraph = paragraphs[i];
currentParagraph.innerHTML = capitalizeString(currentParagraph.innerHTML);
currentParagraph.setAttribute("class", "p1 fade-in delay");
}
};
</script>
<script id="jsbin-source-css" type="text/css">.p1 {
color: darkblue;
font-family: helvetica;
font-size: 3em;
font-weight: bold;
text-align: center;
}
@-webkit-keyframes fadeIn {
from { opacity:0; opacity: 0; }
to { opacity:1; } }
@-moz-keyframes fadeIn {
from { opacity:0; opacity: 0; }
to { opacity:1; } }
@keyframes fadeIn {
from { opacity:0; opacity: 0; }
to { opacity:1; } }
.fade-in {
opacity:0;
animation:fadeIn ease-in 1;
/* -webkit-animation:fadeIn ease-in 1; */
/* -moz-animation:fadeIn ease-in 1; */
animation-fill-mode:forwards;
/* -webkit-animation-fill-mode:forwards; */
/* -moz-animation-fill-mode:forwards; */
animation-duration:1s;
/* -webkit-animation-duration:1s; */
/* -moz-animation-duration:1s; */
}
.fade-in.delay {
animation-delay: 0.5s;
/* -webkit-animation-delay: 0.5s; */
/* -moz-animation-delay: 0.5s; */
}</script>
<script id="jsbin-source-javascript" type="text/javascript">
var capitalizeString = function(string) {
var words = string.split(" ");
newString = words[0].charAt(0).toUpperCase() + words[0].slice(1);
for (var i = 1; i < words.length; i++) {
if (words[i] === "i") {
modifiedWord = words[i].charAt(0).toUpperCase() + words[i].slice(1);
newString = newString + " " + modifiedWord;
} else {
newString = newString + " " + words[i];
}
}
return newString;
};
window.onload = function() {
var paragraphs = document.getElementsByTagName("p");
for (i = 0; i < paragraphs.length; i++) {
currentParagraph = paragraphs[i];
currentParagraph.innerHTML = capitalizeString(currentParagraph.innerHTML);
currentParagraph.setAttribute("class", "p1 fade-in delay");
}
};</script></body>
</html>
Raw
jsbin.duwuquniqi.css
.p1 {
color: darkblue;
font-family: helvetica;
font-size: 3em;
font-weight: bold;
text-align: center;
}
@-webkit-keyframes fadeIn {
from { opacity:0; opacity: 0; }
to { opacity:1; } }
@-moz-keyframes fadeIn {
from { opacity:0; opacity: 0; }
to { opacity:1; } }
@keyframes fadeIn {
from { opacity:0; opacity: 0; }
to { opacity:1; } }
.fade-in {
opacity:0;
animation:fadeIn ease-in 1;
/* -webkit-animation:fadeIn ease-in 1; */
/* -moz-animation:fadeIn ease-in 1; */
animation-fill-mode:forwards;
/* -webkit-animation-fill-mode:forwards; */
/* -moz-animation-fill-mode:forwards; */
animation-duration:1s;
/* -webkit-animation-duration:1s; */
/* -moz-animation-duration:1s; */
}
.fade-in.delay {
animation-delay: 0.5s;
/* -webkit-animation-delay: 0.5s; */
/* -moz-animation-delay: 0.5s; */
}
Raw
jsbin.duwuquniqi.js
var capitalizeString = function(string) {
var words = string.split(" ");
newString = words[0].charAt(0).toUpperCase() + words[0].slice(1);
for (var i = 1; i < words.length; i++) {
if (words[i] === "i") {
modifiedWord = words[i].charAt(0).toUpperCase() + words[i].slice(1);
newString = newString + " " + modifiedWord;
} else {
newString = newString + " " + words[i];
}
}
return newString;
};
window.onload = function() {
var paragraphs = document.getElementsByTagName("p");
for (i = 0; i < paragraphs.length; i++) {
currentParagraph = paragraphs[i];
currentParagraph.innerHTML = capitalizeString(currentParagraph.innerHTML);
currentParagraph.setAttribute("class", "p1 fade-in delay");
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment