index.html

---
---
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>What is FED?</title>
    <style>

        html,
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica, sans-serif;
            text-align: center;
            color: #444;
        }

        .page {
            margin-top: 60px;
        }

        h1 {
            font-size: 20px;
            font-weight: normal;
            margin: 0 0 20px 0;
        }

        .output {
            font-size: 40px;
            margin: 0;
        }
        .output a {
            color: inherit;
            text-decoration: none;
        }

        .github {
            margin-top: 120px;
        }
        .github a {
            color: #777;
        }

    </style>
</head>
<body>

    <div class="page">

        <h1>What is FED?</h1>

        <p class="output"><a href="#" id="what">Front End Developer</a></p>

        <p class="github"><a href="https://github.com/thefeds/what-is-fed">Add more meanings on GitHub</a></p>

    </div>

    <script type="text/javascript">

        var meanings = {{ site.data.meanings | jsonify }};

        var what = document.getElementById('what');
        what.addEventListener('click', function (event) {
            event.preventDefault();
            changeTheText();
        });

        function changeTheText () {
            what.innerHTML = randomValue(meanings);
        }

        function randomValue (array) {
        	return array[randomBetween(0, array.length - 1)];
        }

        function randomBetween (min, max) {
        	return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        changeTheText();

    </script>

</body>
</html>