js_scroll/index.html at a0420c1b2c42a084f2ec079ef10c957c84e4c0af · codingdojoco/js_scroll · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<html>
<head>
	<title>Javascript Demo</title>
	<style>
		body {
			background-color:black;
			font-family: monospace;
			color:white;
			font-size:50px;
			text-align: center;
			margin-top:20%;
		}

		#magic{
			color: #777;
			border-right: 1px solid #777;
			padding-right: 7px;
			display: inline;
		}
	</style>
</head>
<body>

	Coding is <div id="magic"></div>

	<script>

		// wrap variable definitions in immediate function
		(function()
		{
			var words = ["fun", "exciting", "about not giving up", "being helpful", "being open", "what I learned at CodingDojo!"],
				el = document.getElementById('magic'),
				word_counter = 0,
				character_counter = 0;

			function updateText()
			{
				// if a space is encountered, add a blank space and increment counter
				if(words[word_counter][character_counter] == ' ')
				{
					el.innerHTML += '&nbsp;';

					character_counter++;
				}
				else
				{
					// else, preceed as usual
					el.innerHTML = el.innerHTML+words[word_counter][character_counter++];
				}

				// added 1 to length so we don't switch words before displaying final character in phrase
				if(character_counter == words[word_counter].length + 1)
				{
					// choose a different word
					word_counter++;
					// start over with the first character of the word
					character_counter = 0;
					// set the html to be blank
					el.innerHTML = '';

					// if we're displaying the last word, go back to the first word
					if(word_counter == words.length)
						word_counter = 0;
				}
			}

			setInterval(updateText,300);

		}());


	</script>

</body>

</html>