Created
September 12, 2018 10:14
-
-
Save dnhn/9bf157502f6b76b2b2ea4a5abf47b831 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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>Job finder</title> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: sans-serif; | |
| font-size: 20px; | |
| } | |
| form { | |
| margin: auto; | |
| padding: 30px; | |
| width: 400px; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 10px; | |
| font-weight: bold; | |
| } | |
| input, | |
| select { | |
| display: block; | |
| border: 1px solid grey; | |
| border-radius: 4px; | |
| width: 100%; | |
| height: 30px; | |
| padding: 10px; | |
| background-color: #eee; | |
| font-size: 15px; | |
| } | |
| input:focus, | |
| select:focus { | |
| background-color: #fff; | |
| } | |
| input:focus, | |
| select:focus, | |
| button:focus { | |
| outline: none; | |
| box-shadow: 0 0 10px #ccc; | |
| } | |
| button { | |
| width: 100%; | |
| height: 30px; | |
| font-size: 15px; | |
| background-color: #ddd; | |
| } | |
| button:hover, | |
| button:focus { | |
| background-color: #fff; | |
| } | |
| .group { | |
| margin-bottom: 15px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <form action="#"> | |
| <div class="group"> | |
| <label for="job_title">Job title</label> | |
| <input type="text" id="job_title" name="job_title" autofocus> | |
| </div> | |
| <div class="group"> | |
| <label for="country">Country</label> | |
| <select id="country" name="country"></select> | |
| </div> | |
| <button type="submit">Find</button> | |
| </form> | |
| <script> | |
| var countries = [ | |
| "Afghanistan", | |
| "Albania", | |
| "Algeria", | |
| "Andorra", | |
| "Angola", | |
| "Antigua and Barbuda", | |
| "Argentina", | |
| "Armenia", | |
| "Aruba", | |
| "Australia", | |
| "Austria", | |
| "Azerbaijan", | |
| "Bahamas", | |
| "Bahrain", | |
| "Bangladesh", | |
| "Barbados", | |
| "Belarus", | |
| "Belgium", | |
| "Belize", | |
| "Benin", | |
| "Bhutan", | |
| "Bolivia", | |
| "Bosnia and Herzegovina", | |
| "Botswana", | |
| "Brazil", | |
| "Brunei", | |
| "Bulgaria", | |
| "Burkina Faso", | |
| "Burma", | |
| "Burundi", | |
| "Cambodia", | |
| "Cameroon", | |
| "Canada", | |
| "Cabo Verde", | |
| "Central African Republic", | |
| "Chad", | |
| "Chile", | |
| "China", | |
| "Colombia", | |
| "Comoros", | |
| "Democratic Republic of the Congo", | |
| "Republic of the Congo", | |
| "Costa Rica", | |
| "Cote d'Ivoire", | |
| "Croatia", | |
| "Cuba", | |
| "Curacao", | |
| "Cyprus", | |
| "Czechia", | |
| "Denmark", | |
| "Djibouti", | |
| "Dominica", | |
| "Dominican Republic", | |
| "Ecuador", | |
| "Egypt", | |
| "El Salvador", | |
| "Equatorial Guinea", | |
| "Eritrea", | |
| "Estonia", | |
| "Eswatini", | |
| "Ethiopia", | |
| "Fiji", | |
| "Finland", | |
| "France", | |
| "Gabon", | |
| "Gambia", | |
| "Georgia", | |
| "Germany", | |
| "Ghana", | |
| "Greece", | |
| "Grenada", | |
| "Guatemala", | |
| "Guinea", | |
| "Guinea-Bissau", | |
| "Guyana", | |
| "Haiti", | |
| "Holy See", | |
| "Honduras", | |
| "Hong Kong", | |
| "Hungary", | |
| "Iceland", | |
| "India", | |
| "Indonesia", | |
| "Iran", | |
| "Iraq", | |
| "Ireland", | |
| "Israel", | |
| "Italy", | |
| "Jamaica", | |
| "Japan", | |
| "Jordan", | |
| "Kazakhstan", | |
| "Kenya", | |
| "Kiribati", | |
| "Kosovo", | |
| "Kuwait", | |
| "Kyrgyzstan", | |
| "Laos", | |
| "Latvia", | |
| "Lebanon", | |
| "Lesotho", | |
| "Liberia", | |
| "Libya", | |
| "Liechtenstein", | |
| "Lithuania", | |
| "Luxembourg", | |
| "Macau", | |
| "Macedonia", | |
| "Madagascar", | |
| "Malawi", | |
| "Malaysia", | |
| "Maldives", | |
| "Mali", | |
| "Malta", | |
| "Marshall Islands", | |
| "Mauritania", | |
| "Mauritius", | |
| "Mexico", | |
| "Micronesia", | |
| "Moldova", | |
| "Monaco", | |
| "Mongolia", | |
| "Montenegro", | |
| "Morocco", | |
| "Mozambique", | |
| "Namibia", | |
| "Nauru", | |
| "Nepal", | |
| "Netherlands", | |
| "New Zealand", | |
| "Nicaragua", | |
| "Niger", | |
| "Nigeria", | |
| "North Korea", | |
| "Norway", | |
| "Oman", | |
| "Pakistan", | |
| "Palau", | |
| "Palestinian Territories", | |
| "Panama", | |
| "Papua New Guinea", | |
| "Paraguay", | |
| "Peru", | |
| "Philippines", | |
| "Poland", | |
| "Portugal", | |
| "Qatar", | |
| "Romania", | |
| "Russia", | |
| "Rwanda", | |
| "Saint Kitts and Nevis", | |
| "Saint Lucia", | |
| "Saint Vincent and the Grenadines", | |
| "Samoa", | |
| "San Marino", | |
| "Sao Tome and Principe", | |
| "Saudi Arabia", | |
| "Senegal", | |
| "Serbia", | |
| "Seychelles", | |
| "Sierra Leone", | |
| "Singapore", | |
| "Sint Maarten", | |
| "Slovakia", | |
| "Slovenia", | |
| "Solomon Islands", | |
| "Somalia", | |
| "South Africa", | |
| "South Korea", | |
| "South Sudan", | |
| "Spain", | |
| "Sri Lanka", | |
| "Sudan", | |
| "Suriname", | |
| "Sweden", | |
| "Switzerland", | |
| "Syria", | |
| "Taiwan", | |
| "Tajikistan", | |
| "Tanzania", | |
| "Thailand", | |
| "Timor-Leste", | |
| "Togo", | |
| "Tonga", | |
| "Trinidad and Tobago", | |
| "Tunisia", | |
| "Turkey", | |
| "Turkmenistan", | |
| "Tuvalu", | |
| "Uganda", | |
| "Ukraine", | |
| "United Arab Emirates", | |
| "United Kingdom", | |
| "Uruguay", | |
| "Uzbekistan", | |
| "Vanuatu", | |
| "Venezuela", | |
| "Vietnam", | |
| "Yemen", | |
| "Zambia", | |
| "Zimbabwe" | |
| ]; | |
| document.addEventListener('DOMContentLoaded', function() { | |
| var countrySelect = document.getElementById('country'); | |
| var options = ''; | |
| for (var i = 0; i < countries.length; ++i) { | |
| options += `<option value=${i}>${countries[i]}</option>`; | |
| } | |
| countrySelect.innerHTML = options; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment