JSFiddle - React, Tailwind, and code Playground

by Esther Mun

HTML

<body>
    <!-- <input type="button" value="show list" onclick="fullList(libraryList)"> -->
   
    <p id = "title"> List of Public Libraries in Toronto:
        </p>
    <button> Show</button> 
    <button> Hide </button>
    <p id="full_list"></p>
    
    <p id="address"></p>
    <p id="list"></p>
</body>

CSS

p {
    font-family: "Georgia", Arial, Verdana;
    font-size: 14px;
    text-indent: 15px;
}
#title {
    font-weight: bold;
    color: #3333CC;
}
button {
     font-family: "Georgia", Arial, Verdana;
     margin-left: 50px;
}

JavaScript

var libraryList = {
    "results": [{
        "address_components": [{
            "long_name": "Bloor/Gladstone Library",
                "short_name": "Bloor/Gladstone Library",
                "types": ["point_of_interest", "establishment"]
        }, {
            "long_name": "1101",
                "short_name": "1101",
                "types": ["street_number"]
        }, {
            "long_name": "Bloor Street West",
                "short_name": "Bloor St W",
                "types": ["route"]
        }, {
            "long_name": "Dufferin Grove",
                "short_name": "Dufferin Grove",
                "types": ["neighborhood", "political"]
        }, {
            "long_name": "Old Toronto",
                "short_name": "Old Toronto",
                "types": ["sublocality", "political"]
        }, {
            "long_name": "Toronto",
                "short_name": "Toronto",
                "types": ["locality", "political"]
        }, {
            "long_name": "Toronto Division",
                "short_name": "Toronto Division",
                "types": ["administrative_area_level_2", "political"]
        }, {
            "long_name": "Ontario",
                "short_name": "ON",
                "types": ["administrative_area_level_1", "political"]
        }, {
            "long_name": "Canada",
                "short_name": "CA",
                "types": ["country", "political"]
        }, {
            "long_name": "M6H 1M7",
                "short_name": "M6H 1M7",
                "types": ["postal_code"]
        }],
            "formatted_address": "Bloor/Gladstone Library, 1101 Bloor Street West, Toronto, ON M6H 1M7, Canada",
            "geometry": {
            "location": {
                "lat": 43.6600221,
                    "lng": -79.43405849999999
            },
                "location_type": "APPROXIMATE",
                "viewport": {
                "northeast": {
                    "lat": 43.6613710802915,
           ...