Replace hard coded data in this (Html) java script with using JSON (the main point is Json) (I did put css in bottom too) I did put some json file that I had in bottom ,but I dont know where to put in and fix it and I am not sure I did right or not!

HTML html: < html lang="en"> < head> < meta charset="utf-8"> < title>Parham Ice Cream Store | Home Page < link rel="stylesheet" href="assets/css/styles.css"> < /head> < body> < div id="main-container"> < header> < h1 id="logo">Ice cream < nav id="top-nav"> < ul> < li id="login"> < div id="authorized"> < span class="icon-user authorized-icon"> < span id="user-authorized">admin < br/> < a id="profile-link" href="javascript:void(0);">profile | logout < /div> < form id="login-form"> < span class="icon-user login-form-icons"> < input id="username" name="username" type="text" placeholder="username" autocomplete="off" /> & nbsp; < input id="password" name="password" type="password" placeholder="password"/> < /form> < a id="login-submit" href="javascript:void(0)">login& nbsp;< /a> < a id="login-link" class="show-form" href="javascript:void(0)">login < /li> < li id="top-menu-items"> < ul> < li> < a href="javascript:void(0)">HOME < /li> < li> < a href="javascript:void(0)">ABOUT < /li> < li> < a href="javascript:void(0)">PRODUCTS < /li> < li> < a href="javascript:void(0)">COUPONS < /li> < /ul> < /li> < /ul> < /nav> < /header> < div id="main" role="main"> < section id="main-top-section"> < div id="donation-address"> < p class="donation-address"> Parham Ice Cream store is THE place in town where you can determine the exact flavor combination that is best suited for you! Ask for samples of more than 100 ice cream flavors we have available, including many National Award Winning flavors Scoops, milkshakes, fresh fruit smoothies, chillers, homemade hand-dipped ice cream, waffle cones and bowls, water ice... < br/> There are so many that youll have to come back for more! < /p> < button class="donate-button" id="donate-botton"> < span class="donate-botton-header">Order Ice cream Now! < br/>

< /button> < /div> < div id="donate-form-container"> < h3>Order Ice Cream Online and we ship it for you anywhere you are < form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post"> < input type="hidden" name="cmd" value="_xclick"> < input type="hidden" name="business" value="email-registered-in-paypal@site-url.com"> < input type="hidden" name="item_name" value="Donation"> < input type="hidden" name="currency_code" value="USD"> < div class="donation-form-section"> < label class="donation-heading">Please select the flavor < br/> you like < input type="radio" name = "amount" id= "d10" value = "Vanilla"/> < label for = "d10">Vanilla < br/> < input type="radio" name = "amount" id = "d20" value="Choc" /> < label for = "d20">Choc < br/> < input type="radio" name = "amount" id="d50" checked="checked" value="Strawberry" /> < label for="d50">Strawberry < br/> < input type="radio" name = "amount" id="d100" value="Rainbow Sherbet" /> < label for="d100">Rainbow Sherbet < br/> < input type="radio" name = "amount" id="d200" value="Mint Choc Chips" /> < label for="d200">Mint Choc Chips < label class="donation-heading">Other Flavor: < input id="customAmount" name="amount" value="" type="text" autocomplete="off" /> < /div> < div class="donation-form-section"> < label class="donation-heading">Delivery Address < input type="text" id="full_name" name="full_name" placeholder="full name *" required> < input type="email" id="email_addr" name="email_addr" placeholder="email *" required> < input type="text" id="street_address" name="street_address" placeholder="address"> < input type="text" id="city" name="scty" placeholder="city"> < input type="text" id="zip" name="zip" placeholder="zip/postal code"> < select name="state" id="states"> < /select> < select name="country" id="country"> < /div> < div class="donation-form-section make-payment"> < h4>We accept only Paypal payments < span class="donate-botton-header">Make Payment Now

< /button> < a id="donate-later-link" href="javascript:void(0);">I'll Buy later < /div> < /form> < /div> < /section> < section id="main-bottom-section"> < div id="video-container"> < video controls="controls" poster="assets/media/intro.GIF" width="390px" height="240" preload="metadata"> < source src="assets/media/intro.mp4" type="video/mp4"> < source src="assets/media/intro.webm" type="video/webm"> < p>Sorry, your browser doesn't support the video element

< /video> < !--Note: looping (or any sort of seeking, for that matter) in< video > elements on Chrome only works if the video file was served up by a server that understands partial content requests --> < h3>Video header goes here < h5>More video link < /div>

< div id="map-container"> < div id="location-map"> < div id="location-ui"> < a id="resize-map" href="javascript:void(0);">increase map's size < /div>

< /section> < /div> < footer> < section id="temp-project-name-container"> < b>project 11: Geolocation. Google maps. JSON < /section> < section id="social-icons"> < a href="javascript:void(0)" title="Our Facebook page"> < a href="javascript:void(0)" title="Our Google Plus page"> < a href="javascript:void(0)" title="Our Twitter">& nbsp; < a href="javascript:void(0)" title="Email us"> < /section> < /footer> < /div> < script src="http://maps.googleapis.com/maps/api/js?sensor=false"> < script src="js/main.js"> < /body> < /html> < style> --------- CSS * { margin: 0; padding: 0; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } ul li, ol li { list-style: none; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } /* Links */ body { font: .81em/150% "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; color: #444; } a { color: #6685CC; text-decoration: none; } a:visited { color: #551a8b; } a:hover { color: #B8CC66; } a:focus { outline: none; } /* Main content #main-container is wrapper for all page content */ #main-container { background: url(../img/bg-1.png) no-repeat; width: 980px; margin: 0 auto; } header { height: 80px; } /* Logo and h1 heading */ header h1#logo { background: url(../img/logo.png) no-repeat; width: 300px; height: 80px; float: left; margin-top: 30px; text-indent: -9999px; } /* ------------------------- login section */ .login-form-icons { font-size: 1.4em; color: #63747e; vertical-align: middle; } /* intup fields placeholders */ ::-webkit-input-placeholder { color: #ccc; } :-moz-placeholder { color: #ccc; } :-ms-input-placeholder { color: #ccc; } li#login input:focus::-webkit-input-placeholder { /*color: transparent;*/ color: #ebebeb; outline: none; } li#login input:focus:-moz-placeholder { /*color: transparent;*/ color: #ebebeb; outline: none; } li#login input { width: 122px; padding: 4px; border: 1px solid #ddd; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; } li#login, li#top-menu-items { clear: both; } li#login { text-align: right; height: 40px; padding-top: 10px; margin-bottom: 12px; } li#login form { float: left; display: none; margin-top: 2px; } /* show login form link*/ li#login a.show-form { font-size: 0.9em; float: right; width: 100px; text-align: center; padding: 3px 12px 2px 12px; margin-right: 2px; display: block; position: relative; border: 1px solid #aaa; border-radius: 90px; -moz-border-radius: 90px; -webkit-border-radius: 90px; } li#login a.show-form:link { background: #fff; color: #999; } li#login a.show-form:link span { color: #999; } li#login a.show-form:hover { color: #333; } li#login a.show-form:hover span { color: #333; } /* login form submit link */ a#login-submit { display: none; width: 100px; float: left; padding: 3px 12px; margin-left: 20px; text-align: center; border-radius: 90px; -moz-border-radius: 90px; -webkit-border-radius: 90px; } a#login-submit:link { background: #555; } a#login-submit:hover { background: #B8CC66 } #authorized { display: none; width: 140px; height: 40px; float: right; text-align: left; line-height: 17px; position: relative; top: -7px; } #user-authorized { font-weight: bold; color: #666; font-size: 1em; } .authorized-icon { width: 40px; height: 40px; font-size: 30px; color: #999; display: block; float: left; position: relative; top: 9px; } #authorized a { display: inline; background: none; font-size: 0.9em; padding: 0; } #authorized a:link { color: #119bf6; } #authorized a:hover { color: #555; } /* ------------------------------ Navigation menu */ nav { float: right; } li#top-menu-items ul li { float: left; margin-left: 1px; } nav ul li a { text-decoration: none; display: block; padding: 7px 12px; border-radius: 4px; } nav ul li a:link { background: #6685CC; color: #fff; } nav ul li a:hover { background: #B8CC66; color: #fff; } /* ------------------------- Main content */ div#main { clear: both; min-height: 480px; } /* ------------------------- Main top section */ #main-top-section { background: url(../img/child-1.gif) no-repeat right bottom, url(../img/bg-2.PNG) no-repeat 40% bottom; width: 100%; height: 320px; margin-top: 18px; border-bottom: 1px dotted #555; } .donate-button { background: #ffa600; background: -webkit-gradient(linear, left top, left bottom, from(#feca69), to(#ffa600)); background: -webkit-linear-gradient(top, #feca69, #ffa600); background: -moz-linear-gradient(top, #feca69, #ffa600); background: -ms-linear-gradient(top, #feca69, #ffa600); background: -o-linear-gradient(top, #feca69, #ffa600); width:180px; display: block; margin-left:160px; padding: 14px 27px; border: 0; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; vertical-align: middle; cursor: pointer; } .donate-button:hover { background: #B8CC66; color: #ffffff; } .donate-button:active { background: #1b435e; } .donate-button-submit { margin:0; } .donate-botton-header { font-size:16px; font-weight:bold; color:#fff; text-transform: uppercase; } .donate-2nd-line { font-size:12px; font-weight:bold; color:#fff; } p.donation-address { padding: 4em 46% 2.5em 2em; } /* Donation form */ .donation-form-section { width: 220px; float: left; } #donate-form-container { display: none; padding-top: 20px; } /* some basic styles for form elements; more advanced styling - see step 2 */ #donate-form-container select, input[type=text], input[type=email] { width: 150px; margin-bottom: 5px; color: #999; } /* #donate-form-container input[type=submit] { width: 150px; height: 60px; } */ #donate-form-container h3 { font-size: 1.4em; font-weight: normal; /*color:#B8CC66;*/ } #donate-later-link { width: 180px; height: auto; margin-top: 10px; text-align: center; display: block; } .make-payment h4 { padding: 12px 0 8px 0; color: #666; } .make-payment p { background: #fff; font-size: 0.9em; margin-bottom: 1.2em; } label.donation-heading { display: block; padding: 12px 0 8px 0; color: #666; font-weight: bold; font-size: 0.9em; line-height: 130%; } /* Main botttom section */ #main-bottom-section { width: 100%; height: 348px; padding-top: 20px; position: relative; } #video-container { width:390px; height:330px; float: right; text-align: center; } #map-container { width:300px; height:330px; position: relative; float: right; margin-right: 10px } #location-map { background: #eee; width:300px; height:240px; border: 4px solid #ccc; } #location-ui { width:300px; position: absolute; top:240px; left:0; padding-top: 8px; font-size:0.9em; line-height:130%; text-align:center; } #location-ui h3 { margin-bottom: 6px } #resize-map { visibility: hidden; position: absolute; top:300px; left:90px; font-weight: bold; } .reduced { width: 300px; height: 240px; top: 0; left: 0; } .increased { width: 500px; height: 500px; top: -270px; left: -90px; } .infowindow { font-size: 0.9em; line-height: 130%; overflow:hidden; } /* Footer */ footer { border-top: 1px dotted #555; text-align: right; padding-top: 20px; } footer #temp-project-name-container { float: left; } footer #social-icons { float: right; } footer #social-icons a { font-size: 28px; } /* Icon Fonts */ @font-face { font-family: 'icomoon'; src: url('../fonts/icomoon.eot'); src: url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('../fonts/icomoon.svg#icomoon') format('svg'), url('../fonts/icomoon.woff') format('woff'), url('../fonts/icomoon.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before { font-family: 'icomoon'; content: attr(data-icon); speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; } /* Use the following CSS code if you want to have a class per icon */ [class^="icon-"]:before, [class*=" icon-"]:before { font-family: 'icomoon'; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; } .icon-user:before { content: "\21"; } .icon-locked:before { content: "\22"; } .icon-enter:before { content: "\23"; } .icon-facebook:before { content: "\24"; } .icon-gplus:before { content: "\25"; } .icon-feed:before { content: "\26"; } .icon-twitter:before { content: "\27"; } .icon-cancel:before { content: "\28"; } .icon-mail:before { content: "\29"; } < /style> ------- Main JS

/** * @author */ window.onload = function() {

/* --------- login module start -------------- */ (function() {

//login section elements var loginLink = document.getElementById("login-link"); var loginForm = document.getElementById("login-form"); var loginSubmit = document.getElementById('login-submit'); var logoutLink = document.getElementById('logout-link'); var profileLink = document.getElementById('profile-link'); var authorizedSection = document.getElementById("authorized");

var userName = document.getElementById('username'); var userPassword = document.getElementById('password');

function showLoginForm() { loginLink.style.display = "none"; loginForm.style.display = "block"; loginSubmit.style.display = "block"; }

loginLink.addEventListener('click', showLoginForm, false);

function showAuthorizedSection() { authorizedSection.style.display = "block"; loginForm.style.display = "none"; loginSubmit.style.display = "none"; }

function logIn() { //check credential var userNameValue = userName.value; var userNameValueLength = userName.value.length; var userPasswordValue = userPassword.value; var userPasswordLength = userPassword.value.length;

if (userNameValueLength == 0 || userPasswordLength == 0) { if (userNameValueLength == 0) { console.log('username is empty'); } if (userPasswordLength == 0) { console.log('password is empty'); } } else if (userNameValue != 'admin' || userPasswordValue != '1234') { console.log('username or password is invalid'); } else if (userNameValue == 'admin' && userPasswordValue == '1234') { showAuthorizedSection(); } }

loginSubmit.addEventListener('click', logIn, false);

function logOut() { userName.value = ''; userPassword.value = ''; authorizedSection.style.display = "none"; loginLink.style.display = "block"; }

logoutLink.addEventListener('click', logOut, false);

function getProfile() { console.log('Profile link was clicked'); }

profileLink.addEventListener('click', getProfile, false);

})(); /* --------- login module end -------------- */

/* --------- make donation module start -------------- */ (function() { var donateBotton = document.getElementById('donate-botton'); var donationAddress = document.getElementById('donation-address'); var donateFormContainer = document.getElementById('donate-form-container'); var customAmount = document.getElementById('customAmount'); var donateForm = document.forms['_xclick']; var donateLaterLink = document.getElementById('donate-later-link'); var checkedInd = 2;

function showDotationForm() { donationAddress.style.display = "none"; donateFormContainer.style.display = "block"; }

donateBotton.addEventListener('click', showDotationForm, false);

//uncheck selected radio buttons if custom amount was choosen function onCustomAmountFocus() { for (var i = 0; i < donateForm.length; i++) { if (donateForm[i].type == 'radio') { donateForm[i].onclick = function() { customAmount.value = ''; } } if (donateForm[i].type == 'radio' && donateForm[i].checked == true) { checkedInd = i; donateForm[i].checked = false; } } }

customAmount.addEventListener('focus', onCustomAmountFocus, false);

function onCustomAmountBlur() { var value = customAmount.value; if (value == '') { donateForm[checkedInd].checked = true; } }

customAmount.addEventListener('blur', onCustomAmountBlur, false);

function donateLater() { donationAddress.style.display = "block"; donateFormContainer.style.display = "none"; }

donateLaterLink.addEventListener('click', donateLater, false);

})(); /* --------- make donation module end -------------- */

/* --------- start // google maps | multi markers | json data -------------- */

(function() {

var geocoder = new google.maps.Geocoder();

var locationUI = document.getElementById('location-ui'); var locationMap = document.getElementById('location-map');

var resizeMapLink = document.getElementById('resize-map');

// latitude = 39.8097343 longitude = -98.55561990000001 // Lebanon, KS 66952, USA Geographic center of the contiguous United States // the center point of the map var latitudeOfMapCenter = 39.8097343; var longitudeOfMapCenter = -98.55561990000001;

var campaignsCount = 0;

//setup map's options var mapOptions = { center : new google.maps.LatLng(latitudeOfMapCenter, longitudeOfMapCenter), zoom : 3, mapTypeId : google.maps.MapTypeId.ROADMAP, mapTypeControlOptions : { style : google.maps.MapTypeControlStyle.DROPDOWN_MENU, position : google.maps.ControlPosition.TOP_RIGHT } };

var map = new google.maps.Map(locationMap, mapOptions);

function resizemap() { var textCont = resizeMapLink.textContent; var locationMap = document.getElementById('location-map'); if (textCont == "increase map's size") { locationMap.className = "increased"; //other option - works in modern browsers //locationMap.classList.remove('reduced'); //locationMap.classList.add('increased'); resizeMapLink.textContent = "reduce map's size"; google.maps.event.trigger(map, "resize"); } else if (textCont == "reduce map's size") { locationMap.className = "reduced"; //other option - works in modern browsers //locationMap.classList.remove('increased'); //locationMap.classList.add('reduced'); resizeMapLink.textContent = "increase map's size"; google.maps.event.trigger(map, "resize"); } }

resizeMapLink.addEventListener('click', resizemap, false);

function createCampaignsMap(campaigns) {

var infowindow = new google.maps.InfoWindow(); var marker;

// self invoking function, passing the number of iterations as an argument i.e. campaigns count (function getCoordinatesByAddress(e) {

var address = campaigns.items[e - 1].location; var campaignsTitle = campaigns.items[e - 1].title; var campaignsDescription = campaigns.items[e - 1].description;

//get latitude and longitude by city name from json data geocoder.geocode({ 'address' : address, 'country' : 'USA' }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { //we should waiting for google's geocoder.geocode results and than call function again

//getting coordinates var latitude = results[0].geometry.location.lat(); var longitude = results[0].geometry.location.lng(); //create marker marker = new google.maps.Marker({ position : new google.maps.LatLng(latitude, longitude), map : map, title : address }); //adding click event to the marker to show info-bubble with data from json google.maps.event.addListener(marker, 'click', (function(marker) { return function() { var content = '

' + campaignsTitle + ' ' + campaignsDescription + ' ' + address + '

'; infowindow.setContent(content); infowindow.open(map, marker); } })(marker)); if (--e) { getCoordinatesByAddress(e); }

} else { console.log('Error getting location data'); } });

})(campaignsCount);

}

function showCampaignsInfo(campaigns) { //get data from parsed json data campaignsCount = campaigns.items.length;

var message = "

" + campaigns.header + "

" + "On " + campaigns.timestamp + " we run " + campaignsCount + " campaigns."; locationUI.innerHTML = message + locationUI.innerHTML; resizeMapLink.style.visibility = "visible";

createCampaignsMap(campaigns); }

function loadData(dataUrl) { var xhr = new XMLHttpRequest(); xhr.open('GET', dataUrl);

xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { var jsonData = xhr.responseText;

//parse the campaign data var campaignsData = JSON.parse(jsonData).campaigns; showCampaignsInfo(campaignsData); } else { console.log(xhr.statusText); // Show the error on the Web page tempContainer.innerHTML += '

Error getting ' + target.name + ": "+ xhr.statusText + ",code: "+ xhr.status + "

"; } } } xhr.send(); }

var dataUrl = 'data/campaignsdata.json'; loadData(dataUrl);

})(); /* --------- google maps | multi markers | json data // end -------------- */

} -------- THE FILE THAT I MADE FOR JSON BUT I dont know where to put it and I am not sure I did right or not?!

// insert this Script in document load function $.each(data.Country, function(i, v) { $('#Country').append('

' + v.countryName + '

'); }); $.each(data.states, function(i, v) { $('#states').append('

' + v.name + '

'); }); //Find the json files below: and name accordingly //states "states":[ { "name": "Alabama", "abbreviation": "AL" }, { "name": "Alaska", "abbreviation": "AK" }, { "name": "American Samoa", "abbreviation": "AS" }, { "name": "Arizona", "abbreviation": "AZ" }, { "name": "Arkansas", "abbreviation": "AR" }, { "name": "California", "abbreviation": "CA" }, { "name": "Colorado", "abbreviation": "CO" }, { "name": "Connecticut", "abbreviation": "CT" }, { "name": "Delaware", "abbreviation": "DE" }, { "name": "District Of Columbia", "abbreviation": "DC" }, { "name": "Federated States Of Micronesia", "abbreviation": "FM" }, { "name": "Florida", "abbreviation": "FL" }, { "name": "Georgia", "abbreviation": "GA" }, { "name": "Guam", "abbreviation": "GU" }, { "name": "Hawaii", "abbreviation": "HI" }, { "name": "Idaho", "abbreviation": "ID" }, { "name": "Illinois", "abbreviation": "IL" }, { "name": "Indiana", "abbreviation": "IN" }, { "name": "Iowa", "abbreviation": "IA" }, { "name": "Kansas", "abbreviation": "KS" }, { "name": "Kentucky", "abbreviation": "KY" }, { "name": "Louisiana", "abbreviation": "LA" }, { "name": "Maine", "abbreviation": "ME" }, { "name": "Marshall Islands", "abbreviation": "MH" }, { "name": "Maryland", "abbreviation": "MD" }, { "name": "Massachusetts", "abbreviation": "MA" }, { "name": "Michigan", "abbreviation": "MI" }, { "name": "Minnesota", "abbreviation": "MN" }, { "name": "Mississippi", "abbreviation": "MS" }, { "name": "Missouri", "abbreviation": "MO" }, { "name": "Montana", "abbreviation": "MT" }, { "name": "Nebraska", "abbreviation": "NE" }, { "name": "Nevada", "abbreviation": "NV" }, { "name": "New Hampshire", "abbreviation": "NH" }, { "name": "New Jersey", "abbreviation": "NJ" }, { "name": "New Mexico", "abbreviation": "NM" }, { "name": "New York", "abbreviation": "NY" }, { "name": "North Carolina", "abbreviation": "NC" }, { "name": "North Dakota", "abbreviation": "ND" }, { "name": "Northern Mariana Islands", "abbreviation": "MP" }, { "name": "Ohio", "abbreviation": "OH" }, { "name": "Oklahoma", "abbreviation": "OK" }, { "name": "Oregon", "abbreviation": "OR" }, { "name": "Palau", "abbreviation": "PW" }, { "name": "Pennsylvania", "abbreviation": "PA" }, { "name": "Puerto Rico", "abbreviation": "PR" }, { "name": "Rhode Island", "abbreviation": "RI" }, { "name": "South Carolina", "abbreviation": "SC" }, { "name": "South Dakota", "abbreviation": "SD" }, { "name": "Tennessee", "abbreviation": "TN" }, { "name": "Texas", "abbreviation": "TX" }, { "name": "Utah", "abbreviation": "UT" }, { "name": "Vermont", "abbreviation": "VT" }, { "name": "Virgin Islands", "abbreviation": "VI" }, { "name": "Virginia", "abbreviation": "VA" }, { "name": "Washington", "abbreviation": "WA" }, { "name": "West Virginia", "abbreviation": "WV" }, { "name": "Wisconsin", "abbreviation": "WI" }, { "name": "Wyoming", "abbreviation": "WY" } ] // country: "country": [ { "countryName": "Andorra" }, { "countryName": "United Arab Emirates" }]