JSFiddle - React, Tailwind, and code Playground

by Maria

HTML

<body onload="MM_preloadImages('')">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <div xmlns:og="http://ogp.me/ns#" style="display:none;"></div>
    <div id="header">
        <!-- LOGO -->
        <div class="logo">	<a href="http://www.playacabana.ca/home">
			<img src="http://www.playacabana.ca/2014/images/playa-cabana-logo.png" alt="Playa Cabana" />
		</a>

        </div>
        <!-- MAIN NAVIGATION -->
        <ul class="menu">
            <li>	<a href="http://www.playacabana.ca/home" title="Home">
						Home					</a>

            </li>
            <li>	<a href="http://www.playacabana.ca/about" title="About">
						About					</a>

            </li>
            <li>	<a href="http://www.playacabana.ca/video" title="Video">
						Video					</a>

            </li>
            <li>	<a href="http://www.playacabana.ca/food" title="Food">
						Food					</a>

            </li>
            <li>	<a class="locations-btn" title="Locations">
						Locations					</a>

            </li>
            <li class='hover'>	<a href="http://www.playacabana.ca/tequila" title="Tequila">
						Tequila					</a>

            </li>
        </ul>
        <!-- SOCIAL NETWORKING -->
        <ul class="social">
            <li>	<a href="https://www.facebook.com/PlayaCabana1" target="_blank" title="Playa Cabana on Facebook">
					<img src="http://www.playacabana.ca/2014/images/playa-cabana-facebook.png" alt="Facebook" />
				</a>

            </li>
            <li>	<a href="https://twitter.com/PlayaCabana" target="_blank" title="Playa Cabana on Twitter">
					<img src="http://www.playacabana.ca/2014/images/playa-cabana-twitter.png" alt="Twitter" />
				</a>

            </li>
            <li>	<a href="http://instagram.com/playacabana/" target="_blank" title="Playa Cabana on Instagram">
					<img src="http://www.playacabana.ca/2014/images/playa-cabana-instagram.png" alt="Instagram" />
				</a>

        ...

JavaScript

/* Assignment #1
 * Find a website; copy + paste the HTML into your fiddle.  
 * Build a ‘screen scraper’, taking values from the HTML as 
 * text content, and add them to properties of an object. 
 * You are building a JSON object which represents a 
 * simplified view of the page. Use each of these functions 
 * for selecting elements:
 * getElementByID, querySelector, querySelectorAll,
 * getElementsByClassName, firstElementChild
 *
 * Extra marks for clever uses of for loops, and for 
 * structuring a JSON object that makes good sense. Base 
 * marks awarded simply for demonstrating correct use of 
 * selectors. Also, try to use selected elements as the 
 * base instead of document.
 */

/* returns definitions of the 3 different tequila types */
var aboutTequilas = document.body.querySelector('p').textContent;

/* returns list of all tequilas */
var allTequilas = document.body.querySelectorAll('h3');

/* BLANCO */
/* text content of id=scroll-blanco / all blanco tequilas */
var allBlancoTequilas = document.querySelector("#scroll-blanco");

/* returns a list of 'h3' children whose parent is a div that has
 * the class 'menu-item'
 */
var justBlancoTequilaNames = allBlancoTequilas.querySelectorAll('div.menu-item > h3');

/* returns list of prices for blanco tequilas */
var listOfBlancosPrice = document.getElementById('scroll-blanco').getElementsByClassName('menu-price');


/* REPOSADO */
var allReposadoTequilas = document.querySelector("#scroll-reposado-");
var justReposadoTequilaNames = allReposadoTequilas.querySelectorAll('div.menu-item > h3');
var listOfReposadosPrice = document.getElementById('show-reposado-').getElementsByClassName('menu-price');

/* ANEJO */
var allAnejoTequilas = document.querySelector("#scroll-aŇejo-");
var justAnejoTequilaNames = allAnejoTequilas.querySelectorAll('div.menu-item > h3');

var listOfAnejosPrice = document.getElementById('show-aŇejo-').getElementsByClassName('menu-price');

/* MY TEQUILA OBJECT */
var tequila =...