JSFiddle - React, Tailwind, and code Playground

Entrevista: Consola que se muestra sólo en dispositivos móviles.

by Yolanda Robles

HTML

<div id="content">
            <h1>Contenido de la página</h1>
            <p>mucho mucho contenido</p>
            <p>mucho mucho contenido</p>
            <p>mucho mucho contenido</p>
        </div>
<div id="flip">Mobile Console</div>
            <div id="console"></div>

CSS

/*@media screen and (min-width: 0px) and (max-width: 400px) {
    #flip { display: block; } 
    #panel { display: block; } 

}
*/ 

/*#content {
    padding-bottom: 25px; 
}*/
/*
#footer {
    position: absolute;
    width: 100%;
	clear: both;
    bottom: 0;
	padding: 0;
    margin: 0;
    height: 25px; 
}*/


@media only screen and (min-width: 768px) {
    #flip {
        display: block;
    }
    #console {
        display: block;
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
    #flip {
        display: none;
    }
    #console {
        display: none !important;
    }
}


#console, #flip {
    /*padding:5px;*/
    text-align:center;
    background-color:white;
    border:solid 1px #c3c3c3;
}
#console {
    text-align:left;
    padding:5px;
    display:none;
    height:100px;
    overflow: auto;
}

.logt{
    line-height:8px;
}

.debugt{
    line-height:8px;
    color: red;
}

JavaScript

$("#flip").click(function () {
      Log('holaaa');
      Debug('its ok');
      $("#console").slideToggle("fast");
      $("#console")[0].scrollTop=$("#console")[0].scrollHeight;
  });

//Function to write text in console
function Log(text)
{
    $('#console').append('<p class="logt">Log: ' + text + '</p>');
}

function Debug(text)
{
    $('#console').append('<p class="debugt">Debug: ' + text + '</p>');
}