index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dinographic</title>
    <!-- Include Google fonts: Frijole, Open Sans, Oswald -->
    <link href="https://fonts.googleapis.com/css?family=Frijole|Open+Sans|Oswald&display=swap" rel="stylesheet">
    <!-- Normalize browser styles -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <link href="app.css" rel="stylesheet">
    <!-- Link to app.js with defer till HTML render -->
    <script defer src="app.js"></script>
</head>

<body>
    <header>
        <h2>Natural History Museum</h2>
        <h1>Dinosaurs</h1>
        <h3>How do you compare?</h3>
    </header>
    <!-- Form to get user input -->
    <form id="dino-compare">
        <div class="form-container">
            <label for="name">Name:</label>
            <input id="name" class="form-field__full" type="name" name="name">
            <!-- Select metric or imperial units -->
            <fieldset>
                <legend>
                    <p>Units</p>
                </legend>
                <label for="metric">Metric:</label>
                <input type="radio" id="metric" name="units" value="metric" onclick="unitsChange()" checked>
                <label for="imperial">Imperial:</label>
                <input type="radio" id="imperial" name="units" value="imperial" onclick="unitsChange()">
            </fieldset>
            <!-- Metric form elements, can be shown or hidden -->
            <div id="metric-form" class="metric-form">
                <label for="height-metric">
                    <p>Height (cm)</p>
                </label>
                <input id="height-metric" class="form-field__short" type="number">
                <label for="weight-metric">
                    <p>Weight (kg)</p>
                </label>
                <input id="weight-metric" class="form-field__full" type="number">
            </div>
            <!-- Imperial form elements, can be shown or hidden -->
            <div id="imperial-form" class="imperial-form">
                <fieldset>
                    <legend>
                        <p>Height</p>
                    </legend>
                    <label for="feet">Feet:</label>
                    <input id="feet" class="form-field__short" type="number">
                    <label for="inches">Inches:</label>
                    <input id="inches" class="form-field__short" type="number">
                </fieldset>
                <label for="weight-imperial">
                    <p>Weight (lbs)</p>
                </label>
                <input id="weight-imperial" class="form-field__full" type="number" name="weight">
            </div>
            <label for="diet">
                <p>Diet:</p>
            </label>
            <select id="diet" class="form-field__full" name="diet">
                <option>herbivore</option>
                <option>omnivore</option>
                <option>carnivore</option>
            </select>
            <input id="btn" type="submit" value="Compare Me!">
        </div>
        <!-- Holds an error message for form validation -->
        <div id="error" class="error"></div>
    </form>
    <!-- .grid to attach tiles to -->
    <main id="grid"></main>
    <button id="repeat-btn" class="repeat-btn">Go Again</button>
    <footer>
        <!-- Include information source -->
        <p class="fine-print">Data sourced from <a href="https://www.wikipedia.org/">Wikipedia.org</a>. All numbers
            are
            approximations.</p>
        <p class="signoff-text">A project for Udacity's Intermediate JavaScript Nanodegree</p>
    </footer>
</body>

</html>