index.html

<!doctype html>
<html>
    <head>
        <title>APOD</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        <style>
            #speed-container {
                position: fixed;
                right: 2em;
                bottom: 0;
            }
            h1, h2, #start {
                color: white;
            }
            table {
                background-color: white;
                margin-bottom: 2em;
            }
        </style>
    </head>
    <body>

        <header class="row">
            <nav class="blue darken-1">
                <div class="nav-wrapper">
                    <div class="col s12">
                        <a href="#" class="brand-logo">Nasa Coding Challenge</a>
                    </div>
                </div>
            </nav>
        </header>
        <div class="container">
            <main>
                <section>
                    <h1 class="center-align">Astronomy Picture Of the Day</h1>
                    <div class="row">
                        <div class="col s12 m8 offset-m2">
                            <div id="apod" class="card">

                            </div>
                        </div>
                    </div>
                </section>
                <aside>
                    <h2>Astroid Feed</h2>
                    <form class="col s12">
                        <div class="row">
                            <div class="input-field col s6">
                                <input type="text" id="start" class="datepicker">
                                <label for="start">Approach Date</label>
                            </div>
                        </div>
                    </form>
                    <table id="afeedTable" class="striped hide">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Name</th>
                                <th>Is Dangerous</th>
                                <th>Magnitude</th>
                                <th>Min</th>
                                <th>Max</th>
                                <th>Miss Distance</th>
                                <th>Approach Date</th>
                            </tr>
                        </thead>
                        <tbody id="afeed">

                        </tbody>
                    </table>
                </aside>
            </main>
        </div>
        <footer class="page-footer blue darken-1">
            <div class="container">
                <div class="row">
                <div class="col l6 s12">
                    <h5 class="white-text">Nasas Coding Challenge</h5>
                    <p class="grey-text text-lighten-4">Make this in an hour or lesss ;) I failed</p>
                </div>
                <div class="col l4 offset-l2 s12">
                    <h5 class="white-text">Astronaut</h5>
                    <ul>
                        <li><a target="_blank" class="grey-text text-lighten-3" href="https://stackoverflow.com/users/3589092/kemicofa">kemicofa</a></li>
                    </ul>
                </div>
                </div>
            </div>
            <div class="footer-copyright">
                <div class="container">
                © 2018 kemicofa
                </div>
            </div>
        </footer>

        <div id="speed-container" class="range-field">
            <label for="speed-slider">Travel Speed</label>
            <input value="20" type="range" id="speed-slider" step="1" min="0" max="100" />
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
        <script src="nasa.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
        <script src="starfield.js"></script>
    </body>
</html>