Week12JavaScriptPractice/cool.html at master · jayRoney/Week12JavaScriptPractice · 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

<!DOCTYPE html>
<html>
<head>
    <title>Initial Setup</title>
    <style>
        @keyframes fader{0%{opacity:0;}30%{opacity:1;}85%{opacity:1;}100%{opacity:0;}}
        @-moz-keyframes fader{0%{opacity:0;}30%{opacity:1;}85%{opacity:1;}100%{opacity:0;}}
        @-webkit-keyframes fader{0%{opacity:0;}30%{opacity:1;}85%{opacity:1;}100%{opacity:0;}}
        html{font:300 100% 'Helvetica Neue', Sans-Serif;}
        body,figure{padding:0;margin:0;}
        figure,footer{display:-webkit-flex;-webkit-align-items:center;-webkit-justify-content:center;}
        figure{animation:fader 3.001s infinite;-moz-animation:fader 3.001s infinite;-webkit-animation:fader 3.001s infinite;height:100vh;width:inherit;font-size:300%;}
        footer{box-sizing:border-box;width:100%;position:absolute;bottom:0;padding:15px;text-align:center;}
    </style>
</head>
<body>
<figure id='greeting'></figure>
<footer>&copy;2015 Joshua Maroney </footer>
<script>
    var m = [
                'Un',  //  Counting from one to ten in French...
                'Deux',
                'Trois',
                'Quatre',
                'Cinq',
                'Six',
                'Sept',
                'Huit',
                'Neuf',
                'Dix',
            ],
            i = 0;

    function update() {
        document.getElementById('greeting').innerHTML = m[i];
        i++;
        if (i >= m.length) i = 0;
    }

    update();
    setInterval(update, 3000);

    //  Sometimes the CSS and JavaScript have trouble lining up when switching to another application or when
    //  you change tabs in your browser. This should only be viewed for a short duration to get a glimpse of
    //  the project. I am not interested in fixing this as it is not a practical application.
</script>
</body>
</html>