JSFiddle - React, Tailwind, and code Playground

by Peter

HTML

<!DOCTYPE html>

    <!--zona do cabeçalho da página. Inclui logotipo e barra de navegacao-->
    <header>		
        <h1 id="site_title"><a href="index.html">Pesquisa de Imagens</a></h1>
        
        
        <!-- Main Menu -->
        <h2>Main menu</h2>
	<nav class="main-navigation">
            <ol>
                <li><a class="menu" href="index.html">Home</a></li>
                <li><a class="menu" href="search_bar.html">Barra Pesquisa</a></li>
                <li><a class="menu" href="color_search.html">Pesquisa por cor dominante</a></li>
                <li class="current"><a class="menu" href="image_search.html">Pesquisa por imagens</a></li>
                <li><a class="menu" href="contact_us.html">Contacte-nos</a></li>
            </ol>
	</nav>
        
        
        
    </header>
    
    <!-- zona de conteúdo da página. Inclui logotipo e barra de navegacao -->
    <article>
        <nav class="cloud">
            <ul>
                <li><a href="#">beach</a></li>
                <li><a href="#">birthday</a></li>
                <li><a href="#">face</a></li>
                <li><a href="#">indoor</a></li>
                <li><a href="#">manmade</a></li> <!-- alterar para todos de uma maneira bacana -->
                <li><a href="#">marriage</a></li>
                <li><a href="#">nature</a></li>
                <li><a href="#">no people</a></li>
                <li><a href="#">outdoor</a></li>
                <li><a href="#">party</a></li>
                <li><a href="#">people</a></li>
                <li><a href="#">snow</a></li>
            </ul>
        </nav>
        
        <!-- Primeira secção -->
        <section class="search_bar">
            
            <h2>Pesquisa por imagens</h2>
            <p>Pesquisa por pastas</p>
            <input type="file" id="files" name="files[]" multiple/>
            <output id="list"></output>
            
            
            <p>Ou arrasta a imagem para o quadrado a tracejado</p>
         ...

JavaScript

function clearResults () {
	$(".grelha_resultados").empty();
	$("#numberResults").html( "(nenhum)" );
}

function setNumberResults (number) {
	$("#numberResults").html(number); // If this indeed a number, consider using text method http://api.jquery.com/text/
}

function appendResult (xmlImage) {
	$(".grelha_resultados").append("<img class='result' src='" + xmlImage.getElementsByTagName("path")[0].childNodes[0].nodeValue + "'>");
}

function showAllImages ()
{
	var XML_S = new XML_Search();
   
	var xmlDoc = XML_S.loadXML();
	var x = xmlDoc.getElementsByTagName("image");
    
	for (i = 0; i < x.length; i++)
	{
	   appendResult( x[i] );
	}    
	
	setNumberResults(x.length);
}

function showAllImagesFromCategory (category) {
	var XML_S = new XML_Search();   
	var xmlDoc = XML_S.loadXML();
	var x = xmlDoc.getElementsByTagName("image");
	
	var num_Img = 0;
	 for (i = 0; i < x.length; i++){
		try {
			if(x[i].getAttribute("class").toUpperCase() === category.toUpperCase() ) {
			
		    	appendResult( x[i] );
		   
		    	num_Img++;
			}
		} 
        catch (err) {
		}
	}    
    
    setNumberResults(num_Img);
}

function showAllImagesFromQuery( query ) {
	var XML_S = new XML_Search();   
	var xmlDoc = XML_S.loadXML();
	var x = xmlDoc.getElementsByTagName("image");
	
	var num_Img = 0;
	for (i = 0; i < x.length; i++)
	{
		try {
			if( x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue.toUpperCase().indexOf( query.toUpperCase()) > -1 ) {
			
		    	appendResult( x[i] );
		    	
		    	num_Img++;
		    }
		} 
        catch(err) {
		}
	}    
    
    setNumberResults( num_Img );
}

/* http://stackoverflow.com/questions/9585973/javascript-regular-expression-for-rgb-values */
function rgb2array( rgb ) {
	var matchColors = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/;
	var match = matchColors.exec( rgb );
	
	return [parseInt(match[1]), parseInt(match[2]), parseInt(match[3])];
}

/* http://jsfiddle.net/ZsrM6/ */
function hex2rgb( hex ) {
	var bigint = parseInt(hex,...