Untitled

//HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flickr</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <!--<link rel="stylesheet" type="text/css" href="css/screen.css">-->
    <link rel="stylesheet" type="text/css" href="css/responsive.css">

</head>
<body>
<div id="container">

<header>
    <h1>Flickr</h1>
    <h2>Find your favorite images! </h2>
</header>
<hr>
<form>
    <label for="search">Geef hier uw zoekopdracht!</label>
    <input type="text" id="search" />
    <input type="submit" id="zoek" value="Search!">
</form>

<div id="photos">

</div>


    <div id="userPhotos">
    </div>

    <div id="map">
    </div>
<script type="text/javascript" src="scripts/jquery.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD1rG8KRkQoCmBeOM_HszD_SpHaBVfkXAA&callback=nothing"
            async defer></script>
    <!--<script type="text/javascript" src="scripts/flickrapi.dev.js"></script>-->
<script type="text/javascript" src="scripts/script.js"></script>

</div>
</body>
</html>

//JAVASCRIPT


var normalSearch = function(e){
    e.preventDefault();
    $("").hide();
    var search = $("#search").val();
    console.log("success");
    $.ajax({
        type: "GET",
        url: "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=df569b36f509079a0e5581ca644470fb&has_geo=1&jsoncallback=?",
        data: {
            format: "json",
            tags: search,
            extras: 'geo'
        },
        dataType: "json"
    }).done(function(data){
        console.log(data);
        foto = $("#photos");
        foto.html("");
        for(var i = 0; i < data.photos.photo.length; i++) {
            var farm = data.photos.photo[i].farm;
            var server = data.photos.photo[i].server;
            var id = data.photos.photo[i].id;
            var secret = data.photos.photo[i].secret;
            var owner = data.photos.photo[i].owner;
            var title = data.photos.photo[i].title;
            var latitude = data.photos.photo[i].latitude;
            var longitude = data.photos.photo[i].longitude;
            if (title === undefined){
                title = "no title available";
            }
            var url = "https://farm" + farm + ".staticflickr.com/" +server + "/" + id + "_" + secret + ".jpg";
            console.log(url);
            (foto.append("<div><h2 data-lat='"+latitude +"' data-long='" + longitude + "' id='testing' about='"+ id +"' class='"+ latitude + "'>" + title + "</h2><h3 about='"+ owner + "' class='" + longitude + "'>" + owner + "</h3>" + "<img src='" + url + "'>"));
            console.log($("h3").attr("about"));
            // $("#photos").append("<img src='"+ url + "'>");
            //https://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}.jpg
        }
    })
};


var showUsersPic = function(){
    console.log($("h2#testing").attr('class'));
    console.log($("h3").attr('class'));
    $("form").hide();
    $("#photos").hide();
    $("#userPhotos").show();
    var owner = $(this).attr('about');
    console.log(owner);
    $.ajax({
        type: "GET",
        url: "https://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=df569b36f509079a0e5581ca644470fb&has_geo=1&jsoncallback=?",
        data: {
            format: "json",
            user_id: owner
        },
        dataType: "json"
    }).done(function(data){
        console.log(data);
        user = $("#userPhotos");
        var foto = user;
        foto.html("");
        for (var i = 0; i< 100; i++){
            var farm = data.photos.photo[i].farm;
            var server = data.photos.photo[i].server;
            var id = data.photos.photo[i].id;
            var secret = data.photos.photo[i].secret;
            // var owner = data.photos.photo[i].owner;
            var title = data.photos.photo[i].title;
            var url = "https://farm" + farm + ".staticflickr.com/" + server + "/" + id + "_" + secret + ".jpg";
            user.append("<div><h3>" + title + "</h3>" + "<img src='" + url + "'>");
        }
        foto.prepend("<a>Return to the previous page!</a>");
    });
};

var initMap = function(){
    $("#photos").hide();
    $("#map").show();

    var lati = parseFloat($(this).attr('data-lat'));
    var longi = parseFloat($(this).attr('data-long'));
    // lati = lati.toString();
    // longi = longi.toString();
    console.log(lati);
    console.log(longi);
    var uluru = {lat: lati, lng: longi};
    console.log(uluru);
   var map = new google.maps.Map(document.getElementById('map'),
   {center: uluru,
   zoom: 8})
};

var nothing = function(){
    console.log("nothing");
};

$(document).ready(function(){
    //just to ignore those annoying duplicate "errors"
    var foto = $("div#photos");
    var form = $("form");

    //normalSearch = gewoon zoekopdracht, dus op tags
    form.on("submit", normalSearch);
    //showUsersPic = Toon de rest van de eigenaar zijn fotos --> nog back-button fixen!!!
    foto.on("click", "h3", showUsersPic);
    //nog afwerken, toont de maps, nog checken voor die terug button
    foto.on("click", "h2", initMap);
});

//CSS

/*for smartphone --> still to be looked after !!!!!*/
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3){
    body {
        width: 100px;
    }

}

/*for Desktop*/
body {
    background-color: #2c3539;
}

header {
    background-color: red;
}

header h1 {
    color: black;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    font-size: 80px;
}

header h2 {

    font-size: 15px;
    font-weight: bold;
}

form {
    padding-top: 60px;
    font-weight: bold;
    font-size: 30px;
}

input[type=text]{
    border: none;
    width: 15rem;
    height: 1.3rem;
    background-color: grey;
}

input[type=submit] {
    border: none;
    color: blue;
    font-weight: bold;
    font-size: 20px;
    background-color: red;
    height: 30px;
    width: 89px;
    border-radius: 4px;

}

img {
    width: 400px;
    height: 400px;
    padding-right: 20px;
}

div {
    float: left;
    padding-right: 10px;
}

div p {
    padding-bottom: 10px;
    font-weight: bold;
    font-size: 20px;
}
.hide{
    display: none;
}

#container {
    width: 80%;
    margin: auto;
}
.test {
    color: orange;
}