JSFiddle - React, Tailwind, and code Playground

by Alma Grace

HTML

<body class="page page-id-813 page-child parent-pageid-8 page-template-default header-image content-sidebar">
    <div id="wrap">
        <div id="header">
            <div class="wrap">
                <div id="title-area">
                    <p id="title"><a href="http://www.bridgesrestaurant.com/" title="Bridges Restaurant">Bridges Restaurant</a>

                    </p>
                    <p id="description">Granville Island</p>
                </div>
                <div class="widget-area header-widget-area">
                    <div id="nav_menu-3" class="widget widget_nav_menu">
                        <div class="widget-wrap">
                            <div class="menu-main-menu-container">
                                <ul id="menu-main-menu" class="menu genesis-nav-menu js-superfish">
                                    <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="http://www.bridgesrestaurant.com/location/">Location</a>

                                    </li>
                                    <li id="menu-item-48" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-48"><a href="#">Food</a>

                                        <ul class="sub-menu">
                                            <li id="menu-item-916" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-813 current_page_item menu-item-916"><a href="http://www.bridgesrestaurant.com/food/upper-dining-room/">Upper Dining Room</a>

                                            </li>
                                            <li id="menu-item-915" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-915"><a href="http://www.bridgesrestaurant.com/food/bistro-bar/">Bistro &#038; Bar</a>

                                            </li>
                             ...

JavaScript

//displays description
var descBridges = document.querySelector('#description').textContent;
alert(descBridges);

//displays More About Bridges and location
var moreInfo = document.querySelectorAll('.textwidget');
for (var j = 0; j < moreInfo.length; j++) {
    alert(moreInfo[j].textContent);}
    
/* displays all menu items 
var allMenuItems = document.querySelectorAll('h3');
for (var i = 0; i < allMenuItems.length; i++) {
    alert(allMenuItems[i].textContent);}
*/

/* displays all starters */
var allStarters = document.querySelectorAll('#tostart');
for (var k = 0; k < allStarters.length; k++) {
    alert(allStarters[k].textContent);}

/* displays all main dishes */
var allMainDishes = document.querySelectorAll('#main');
for (var m = 0; m < allMainDishes.length; m++) {
    alert(allMainDishes[m].textContent);}

/* displays all vegetable dishes */
var allVegDishes = document.querySelectorAll('#vegetables');
for (var n = 0; n < allVegDishes.length; n++) {
    alert(allVegDishes[n].textContent);}

/* displays all desserts */
var allDesserts = document.querySelectorAll('#dessert');
for (var p = 0; p < allDesserts.length; p++) {
    alert(allDesserts[p].textContent);}