JSFiddle - React, Tailwind, and code Playground

by robschmuecker

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <link rel="shortcut icon" href="icon.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://pirateofdw.gotdns.com/themes/Test.min.css" />
        <link rel="stylesheet" href="http://pirateofdw.gotdns.com/themes/jquery.mobile.icons.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile.structure-1.4.3.min.css" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
        <style>
            html, body, #map-canvas {
                height: 100%;
                margin: 0px;
                padding: 0px
            }
        </style>
    </head>
    
    <body>
        <div data-role="page" id="homepage">
            <div data-role="panel" id="myPanel" data-dismissible="false">
                 <h2>Your Pull List</h2>

                <div id="itemList"></div>
            </div>
            <div data-role="header" data-position="fixed">
                 <h1>Weekly Pull List</h1>
 <a href="#myPanel" onclick="setItemList()" class="ui-alt-icon ui-btn ui-corner-all ui-shadow ui-icon-bars ui-btn-icon-notext" data-transition="slide"></a>

            </div>
            <div data-role="main" class="ui-content"> <a href="#catpage" id="releasesButton" class="ui-disabled ui-alt-icon ui-btn ui-corner-all ui-shadow ui-icon-bars ui-btn-icon-right" data-transition="flip">Releases For: </a>

                <div data-role="collapsible">
                     <h1>Total Cost Calculator</h1>
 <a href="#" onClick="getLocation()" class="ui-alt-icon ui-btn ui-corner-all ui-shadow ui-icon-location ui-btn-icon-right" data-transition="slideup">Use Location</a>

                    <p>OR ENTER ZIP CODE</p>
         ...

JavaScript

var comics = new Array();
    var checkedItems = new Array();
    var url = "http://www.midtowncomics.com/rssfeed/rssallnewrelease.xml";
    var cat = "";
    var zip;
    var lat;
    var long;

    $(document).on("pageshow", "#catpage", function () {
        $("li").click(function (e) {
            cat = e.target.id;
        });
    });

    $(document).on("pagebeforeshow", "#totalpage", function () {
        if (checkedItems) {
            var output = "";
            var total = 0.0;
            $.each(checkedItems, function (itemIndex, checkedItem) {
                var price = 0.0;
                var title = checkedItem;

                $.each(comics, function (comicIndex, comic) {

                    if (checkedItem === comic.title) {
                        price = parseFloat(comic.price);
                    }

                });

                total = total + price;

                output += '<p>' + title + ' - $' + price + '</p>';

            });

            total = total.toFixed(2);

            output += '<h1>Total: $' + total + '</h1>';
            $('#comicPriceList').html(output);
        }
    });

    $(document).on("pagebeforeshow", "#emailpage", function () {
        if (checkedItems) {
            var output = "";
            var total = 0.0;
            $.each(checkedItems, function (itemIndex, checkedItem) {
                var price = 0.0;
                var title = checkedItem;

                $.each(comics, function (comicIndex, comic) {

                    if (checkedItem === comic.title) {
                        price = parseFloat(comic.price);
                    }

                });

                total = total + price;

                output += '<p>' + title + ' - $' + price + '</p>';

            });

            total = total.toFixed(2);

            output += '<h1>Total: $' + total + '</h1>';
            $('#comicEmailList').html(output);
        }
    });

    function sendMail() {
        var list =...