index.html

<!DOCTYPE html>

<html>

<head>
    <title>Recipe App</title>
    <link rel="icon" href="/images/favicon.png">
    <link rel="stylesheet" href="/styles/styles.css">
</head>

<body>
    <header class="header">
        <div class="container">
            <h1 class="header__title">Recipe App</h1>
            <h2 class="header__subtitle">Get organized and make dinner.</h2>
        </div>
    </header>
    <div class="actions">
        <div class="actions__container">
            <label>
                Search Recipes: <input id="search-text" type="text" class="input"placeholder="search recipe">
                </label>
            <select id="filter-by" class="dropdown">
                    <option disabled selected value="default">Click to Sort Recipes</option>
                    <option value="byEdited">Sort by last edited</option>
                    <option value="byCreated">Sort by recently created</option>
                    <option value="byAlpha">Sort alphabetically</option>
                </select>
        </div>
    </div>
    <div class="container">
        <div id="recipes"></div>
        <button id="create-button" class="button">Create recipe</button>
    </div>
    <script src="/scripts/uuidv4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
    <script src="/scripts/recipes-functions.js"></script>
    <script src="/scripts/index.js"></script>
</body>

</html>