Recipe-Search-Function/RecipeSearch.html at master · eira132/Recipe-Search-Function · 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" content="text/html" http-equiv="content-type"/>
    <meta content="your description goes here" name="description"/>
    <meta name="keywords" content="Recipe Database Search" />
    <meta name="author" content="Baldur Siegel" />
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link type="text/css" rel="stylesheet" href="RDB.css" />
    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <title>Recipe Database Search</title>
</head>
<body>
<div class="container">
    <div class="siteTitle">
        <h1>Siegel Recipes</h1>
        <h2>Search Input</h2>
    </div>
    <div class="menu">
        <div class="menuIcon" id="menuIcon">
            <div class="menuIconLine menuIconT"></div>
            <div class="menuIconLine menuIconM"></div>
            <div class="menuIconLine menuIconB"></div>
        </div>
        <div class="menuExtended" id="menuExtended">
            <a href="RecipeList.php">List All</a>
            <div class="dropdown">
                <button id="navDrop">Navigation</button>
                <div class="dropContent">
                    <a href="../Cooking.php">Home</a>
                    <a href="../MenuDB/DisplayMenuWeek.php">Menu</a>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="search">
            <h2 id="searchHeader">Recipe Database Search</h2>
            <div class="searchInputs">
                <img class="loadIcon hidden" id="loadIcon" src="RecipePictures/loading.gif" alt="ldg...">
                <div class="autocompleteWrapper"><input type="text" class="searchBar" id="searchBar" name="searchBar"><label for="searchBar"></label></div><button class="sButton1 TBborder" onclick="hideOptions()">^</button><button class="sButton2" id="search" onclick="initiateSearch()">Search</button>
            </div>
            <div class="optionPanel hidden" id="optionPanel">
                <label class="checkContainer"><input type="checkbox" name="searchParameter" class="optionCheck" id="strictParse"><span class="checkbox"></span></label>Strict Parsing Only
                <label class="checkContainer"><input type="checkbox" name="searchParameter" class="optionCheck" id="forceExact"><span class="checkbox"></span></label>Force Exact Search
            </div>
        </div>
        <div class="searchInfo">
            <div class="searchError" id="searchError"></div>
            <div class="hidden" id="searchData">
                <h5>Displaying <span id="resultNum"></span> Recipes:</h5>
            </div>
        </div>
        <div class="primaryError"><h3 id="displayError"></h3></div>
        <div class="results" id="results"></div>
    </div>
</div>
<script src="../js/jquery-3.1.1.js"></script>
<script src="RecipeSearchJS.js"></script>
<script>
    function displayMiniMenu() {
        let menu = document.getElementById('menuExtended');
        (menu.style.display === 'flex' ? menu.style.display = 'none' : menu.style.display = 'flex');
        menu.classList.toggle('miniMenu');
        menu.classList.toggle('fadeIn');
        this.classList.toggle('change');
    }
    document.getElementById('menuIcon').addEventListener('click', displayMiniMenu, false);
    window.onkeypress = function(event) {if (event.key === 'Enter') {document.getElementById('search').click();}};
    $('document').ready(function(){
        autocomplete(document.getElementById('searchBar'), food);
        document.getElementById('searchBar').focus();
        document.getElementById('searchHeader').classList.add('searchHeaderLarge');
        readURLnUpdate();
    });
</script>
</body>
</html>