Question

1 Approved Answer

Posted on Sep 22, 2024

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

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 the some json file that I had in bottom ,but is has error I dont know how to put in and fix it.

Parham Ice Cream Store | Home Page

Ice cream

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...
There are so many that youll have to come back for more!

Order Ice Cream Online and we ship it for you anywhere you are

Please select the flavor
you like Vanilla
Choc
Strawberry
Rainbow Sherbet
Mint Choc Chips Other Flavor:

Delivery Address

We accept only Paypal payments

I'll Buy later

Video header goes here

More video link

increase map's size

---------------

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"; }