index.html

<!DOCTYPE html>
<html>
<head class="no-js" dir="ltr" lang="sv">
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Arbetsprov på HM för Jonas Fors Lellky - Claremont AB</title>

    <meta name="description" content="Detta är ett arbetsprov av Jonas Fors Lellky för att visa folket på HM att jag duger som frontendutvecklare för hm.com">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1">
    <meta name="theme-color" content="">

    <meta name="apple-mobile-web-app-title" content="Arbetsprov HM">
</head>
<body>


<h1>Hello World!</h1>

<img src="img/powered-by-google-on-white.png" alt="Google logo"/>

<input id="searchTextField" type="text" size="50" placeholder="Sök svenska städer">

<section id="result"></section>


<!-- Load script without given protocol so that protocol doesnt matter -->
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

<script>
    var input = document.getElementById('searchTextField');

    function initialize(element) {
        var input = element;
        var options = {
            types: ['geocode'],
            componentRestrictions: {country: 'se'}
        };

        var autocomplete = new google.maps.places.Autocomplete(input, options);

        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            prepareBox(autocomplete);
            input.value = '';
        });
    }

    function prepareBox(autocomplete) {
        if(place === 'undefined')
            return;

        var place = autocomplete.getPlace();
        var val = place.address_components[0].short_name;

        addBox(val);
    }

    function getDateTime() {
        /* Stolen from the internet */
        var d = new Date();
        return (
                d.getFullYear() + '-' +
                ('00' + d.getDate()).slice(-2) + '-' +
                ('00' + (d.getMonth() + 1)).slice(-2) + ' ' +
                ('00' + d.getHours()).slice(-2) + ':' +
                ('00' + d.getMinutes()).slice(-2)
        );
    }

    function addBox(string) {
        var $resultContainer = $('#result');
        var $newElement = $('<article>');
        var date = getDateTime();

        $newElement.append('<h1>' + string + '</h1>');
        $newElement.append('<p>' + date + '</p>')

        $resultContainer.append($newElement);
    }

    google.maps.event.addDomListener(window, 'load', initialize(input));

</script>
</body>
</html>