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>DuckDuckGo Advanced Search</title>
    <link rel="stylesheet" href="https://rawgit.com/amritpandeyy/flavoured.css/master/flavoured.css">
    <link rel="stylesheet" href="styles/styles.css">
</head>
<body>
    <div class="container">
        <form action="">

            <div class="search-field">
                <input type="text" class="search-input" id="search_bar" placeholder="Search">
                <a href="#" class="search-btn" role="button" target="_blank" id="search_button">Search</a>
            </div>
            
            <div class="form-element-group" style="margin-bottom: 1.5rem;">
                <label for="pre-config-search">Preconfigured Search: </label>
                <select name="pre-config-search" id="pre-config-searchs">
                    <option value="Null">Select one</option>
                    <option value="stackoverflow.com">StackOverflow</option>
                    <option value="amazon.com">Amazon</option>
                </select>
            </div>

            <fieldset>
                <legend>Custom Search</legend>

                <label for="strict">Strict Search</label>
                <input type="checkbox" id="strict">

                <label for="safe">Safe Search</label>
                <input type="checkbox" id="safe">
                
                <br>

                <div class="form-element-group">
                    <label for="site_bar">Site: </label>
                    <input type="text" id="site_bar">
                </div>

                <div class="form-element-group">
                    <label for="inurl_bar">Terms in url: </label>
                    <input type="text" id="inurl_bar">
                </div>

                <div class="form-element-group">
                    <label for="intitle_bar">Terms in title: </label>
                    <input type="text" id="intitle_bar">
                </div>
                
                <div class="form-element-group">
                    <label for="filetype">Filetype: </label>
                    <select name="filetypes" id="filetype">
                        <option value="Null">None</option>
                        <option value="pdf">PDF</option>
                        <option value="doc">Doc</option>
                        <option value="ppt">PPT</option>
                    </select>
                </div>

                <div class="toggle-form-group">
                    <div class="form-element-group">
                        <input type="checkbox" id="toggle_exclude_site">
                        <label for="exclude_site_bar">Exclude site:</label>
                        <input type="text" id="exclude_site_bar" disabled="true">
                    </div>

                    <div class="form-element-group">
                        <input type="checkbox" id="toggle_exclude_term">
                        <label for="exclude_term_bar">Exclude term:</label>
                        <input type="text" id="exclude_term_bar" disabled="true">
                    </div>
                </div>
            </fieldset>
        </form>
        <br>
        <b>Search history:</b>
        <ul id="recent_search_list" class="recent-search-list"></ul>
    </div>
    <script async="true" src="main.js"></script>

</body>
</html>