JSFiddle - React, Tailwind, and code Playground

by Alma Grace

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;
alert(aboutTequilas);

/* returns list of all tequilas */
var allTequilas = document.body.querySelectorAll('h3');
for (var i = 0; i < allTequilas.length; i++) {
    $("#all").after(allTequilas[i].textContent + "<br>");

}

/* 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');

for (var i = 0; i < justBlancoTequilaNames.length; i++) {
    $("#blancos").after(justBlancoTequilaNames[i].textContent + "<br>");
}

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

for (var i = 0; i < listOfBlancosPrice.length; i++) {
    $("#blanco-prices").after(listOfBlancosPrice[i].textContent + "<br>");
}

alert(document.getElementById("#scroll-blanco").textContent);

var tequilaTypeName = document.body.querySelectorAll('h2');
alert(tequilaTypeName.length);
for (var i = 0; i < tequilaTypeName.length; i++) {
   ...