<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id='nav-container'> <div id='navbar'> <div id='left'> <a href='#'><img src='https://5a5a57ff32a328601212-ee0df397c56b146e91fe14be42fa361d.ssl.cf1.rackcdn.com/icon/instagram_logos_glyph/03H5cHNMt-Jni4pe9u+7/glyph-logo_May2016_200.png' id='logo-icon'></a> <a href='#'><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Instagram_logo.svg/2000px-Instagram_logo.svg.png' id='logo-name'></a> </div> <div id='center'><input id="input-field" type="text" placeholder='Search' style="text-align: center"></div> <div id='right'> <a href='#'><img src='http://freeiconbox.com/icon/256/23228.png' class='nav-icon'></a> <a href='#'><img src='http://image.flaticon.com/icons/png/128/126/126471.png' class='nav-icon'></a> <a href='#'><img src='http://www.iconsfind.com/wp-content/uploads/2015/11/20151128_56592ddb44f95-210x210.png' class='nav-icon'></a> </div> </div> </div> <div class="main-body"></div> <div id='footer'> <a href='#'>ABOUT US</a> <a href='#'>SUPPORT</a> <a href='#'>BLOG</a> <a href='#'>PRESS</a> <a href='#'>API</a> <a href='#'>JOBS</a> <a href='#'>PRIVACY</a> <a href='#'>TERMS</a> <a href='#'>DIRECTORY</a> <a href='#'>LANGUAGE</a> <span id='copyright'>© 2016 INSTAGRAM</span> </div> <script> let jsonURL = "https://codesmith-precourse.firebaseio.com/instagram/-JqL35o8u6t3dTQaFXSV.json"; let username = "brandonn1231"; $(document).ready(function() { // slower, synchronous version // let newArr = []; // $.ajax({ // url: jsonURL, // async: false, // success: function(data) { // data.forEach(function(element) { // newArr.push(element); // }); // } // }); // newArr.forEach(function(element) { // $.ajax({ // url: element, // success: function() { // $('.main-body').append('<img src=' + element + '>'); // } // }) // }); // faster, asynchronous version $.ajax({ url: 'https://codesmith-precourse.firebaseio.com/instagram/-JqL35o8u6t3dTQaFXSV.json', success: function(data) { data.forEach(function(element) { $.ajax({ url: element, success: function() { $('.main-body').append( '<div class="header">' + '<span class="prf-pic"><img src="http://image.mp3.zdn.vn/thumb/165_165/avatars/f/3/f3ccdd27d2000e3f9255a7e3e2c48800_1349926257.jpg"></span>' + '<span class="account-name">' + username + '</span>' + '<span class="timestamp">12h</span>' + '</div>' + '<img src=' + element + ' class="feed-img">' + '<div class="img-footer">' + '<div class="comments">' + '<div class="comments-content"></div>' + '<div class="comments-field">' + '<span class="heart-pic"><img src="http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=110530409"></span>' + '<input type="text" class="text-box" placeholder="Add a comment..."></div>' + '</div>' + '</div>'); } }); }); } }); //code for like functionality $(document).on('dblclick', 'img.feed-img', function() { $(this).next().find('.heart-pic img').attr('src', 'http://www.pngall.com/wp-content/uploads/2016/04/Instagram-Heart-Free-Download-PNG.png'); // $(this).next().find('.comments-content').append('<span><b>' + username + ' likes this</b></span>'); }); //code for comment functionality $(document).on('keypress', 'input.text-box', function(value) { if (value.keyCode === 13) { let commentVal = $(this).val(); $(this).parent().parent().find('.comments-content').append('<span class="comment-name"><b>' + username + '</b></span>' + '<span class="posted-comment">' + commentVal + '</span></div></br>'); $(this).val(''); } }); }); //end of doc ready </script>

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"); body { margin: 0; background: #fbfbfb; } a { text-decoration: none; color: black; } #nav-container { width: 100%; text-align: center; border-bottom: 1px solid #e3e3e3; margin-bottom: 70px; background: white; } #navbar { min-width: 500px; max-width: 1000px; margin: 0 auto; padding: 25px 0 25px 0; } #left { float: left; width: 200px; height: 20px; } #center { display: inline-block; margin: 0 auto; min-width: 600px; } #right { float: right; width: 200px; height: 20px; } #input-field { width: 200px; border-radius: 3px; border: 1px solid #cccccc; height: 25px; padding-left: 5px; background-image: url('http://downloadicons.net/sites/default/files/system-of--magnifying-glass-icon-73291.png') } /* ::-webkit-input-placeholder input-field{ text-align: center; } */ #logo-icon { width: 30px; padding-right: 20px; padding-top: 3px; border-right: 1px solid black; float: left; } #logo-name { float: left; width: 120px; padding-left: 15px; } .nav-icon { float: right; width: 26px; padding: 0 15px 0 15px; } .header { width: 600px; height: 55px; margin: 0 auto; border: 1px solid #efefef; border-radius: 3px 3px 0 0; background: white; } .prf-pic img{ float: left; border-radius: 50%; margin: 12px 0 0 12px; width: 30px; } .account-name { font-family: Arial; font-weight: 700; font-size: 14px; float: left; line-height: 55px; margin-left: 10px; } .timestamp { font-family: Arial; color: #a2a2a2; float: right; line-height: 55px; margin-right: 15px; } .img-footer { width: 600px; margin: 0 auto; border: 1px solid #efefef; margin-bottom: 70px; margin-top: 0px; border-radius: 0 0 3px 3px; background: white; } .comments-content { /*the place where comments show up*/ margin: 20px; min-height: 30px; padding-bottom: 15px; /* background: red; */ border-bottom: 1px solid #efefef; } .comments-field { /*styling for the text-box*/ margin: 20px; /* background: green; */ } .comment-text { width: 600px; margin: 0 auto; border-style: solid; border-color: grey; border-width: 0 1px 0 1px; } .text-box { /*the place where comments are typed*/ width: 510px; border: none; } .text-box:focus { outline: none; } .comment-name { /*the name that shows up when you write a comment*/ font-family: Arial; float: left; margin-right: 5px; } .posted-comment { /*comment that shows up after you hit enter*/ float: left; } .heart-pic img{ /*the small, permanent heart*/ width: 20px; float: left; } .like-heart { /*the heart that occurs when you click*/ position: absolute; top: 50%; left: 50%; } .main-body { clear: both; width: 700px; margin: 0 auto; text-align: center; padding: 0px; } .feed-img { position: relative; display: block; margin: 0 auto; width: 600px; border-style: solid; border-color: #efefef; border-width: 0 1px 0 1px; } #footer { clear: both; width: 1000px; text-align: left; margin: 0 auto; font-family: Arial; font-size: 11px; font-weight: 700; } #footer a { margin-right: 1.2em; } #copyright { float: right; }