Caja contenedor de código html, css, js y php
En el siguiente ejercicio tenemos una caja para contener código, dentro de ella os dejaré el código.
Cómo crear una caja para insertar código sin utiliza codepen
- Creamos un contenedor en html que llamaremos con el id cajaCode
- Dentro de el cuatro botones, cuatro cajas de código y dentro de cada caja un div llamado (#codeHTML, #codeCSS , #codeJS, #codephp) dentro de estos div otros dos: uno con clase numeral y otro con el código class code
- Con CSS le damos forma a la caja principal y las diferentes cajas.
- Por ultimo con JQuery ocultaremos todas las cajas dejando visible la de #codeHTML
- Pondremos a la escucha los botones indicandoles que cuando se haga click en uno de ellos este se haga visible y el resto se oculten.
- Crearemos un for para cargar los números del div con clase numeral.
Tan solo tienes que copiar el código siguiente y copiar el tuyo en las cajas con clase code.
<CajaCodigo>
<div id="cajaCode">
<input class="tipoCode" type="button" value="html">
<input class="tipoCode" type="button" value="css">
<input class="tipoCode" type="button" value="JS">
<input class="tipoCode" type="button" value="php">
<div id="codeHTML">
<div class="numeral"></div>
<div class="code"><code><pre>
************html**********************
</pre></code></div>
</div>
<div id="codeCSS">
<div class="numeral"></div>
<div class="code"><code> <pre>
**********************css***************************
</pre></code></div>
</div>
<div id="codeJS">
<div class="numeral"></div>
<div class="code"><code><pre>
codeee*****************************************************
</pre></code></div>
</div>
<div id="codephp">
<div class="numeral"></div>
<div class="code"><code><pre>
code***********************
</pre></code></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
div#cajaCode{
background: darkslategrey;
border: 15px groove dimgrey;
width:80%;
height:250px;
border-radius:10px;
box-shadow: 5px 5px silver,
10px 10px darkgrey,
15px 15px grey ;
}
.numeral{
padding-left:2px;
color:lightslategrey;
font-weight:bolder;
align-content:center;
width:20px;
height: 1900px;
}
.tipoCode{
margin-top:10px;
margin-left:18px;
margin-bottom:0px;
width:15%;
background:silver;
font-size:1.2em;
font-weight: bolder;
color:purple;
}
.tipoCode:hover{
background:darkgrey;
}
.code{
margin-left: 5%;
}
#codeHTML, #codeCSS , #codeJS, #codephp {
width:90%;
height:150px;
margin: 10px auto;
padding:20px;
display: grid;
grid-template-columns: 25px 1fr;
background:black;
color:whitesmoke;
overflow-x: auto;
overflow-y: auto;
white-space: nowrap;
}
@media(max-width: 600px) {
div#caja{
width:90%;
}
#codeHTML, #codeCSS , #codeJS, #codephp {
width:80%;
}
.code{
margin-left: 10%;
}
input[value='html']{
width:20%;
}
}
CajaCode();
/*Con esta funcion creamos cajas de código, nuestra caja tiene
tres botones uno para mostrar el jS/JQ , html y php pomndremos todas las páginas ocultas
cuando pulsemos cada boton saltará una página. hemos creado una funcion llamada numeral
para cargar un div con numeros a la izquierda*/
function CajaCode(){
/************ocultamos todos los div menos el de html***************/
$("#codeCSS , #codeJS, #codephp").hide();
/**ponemos a la escula los botones y le indicamos que se haga visible el nuestro
ocultando el resto**/
$("input[value='css']").click(function(){
$("#codeCSS").show();
$(" #codeHTML , #codeJS, #codephp").hide();
});
$("#cajaCode input[value='css']").click(function(){
$("#codeCSS").show();
$(" #codeHTML , #codeJS, #codephp").hide();
});
$("#cajaCode input[value='html']").click(function(){
$("#codeHTML").show();
$(" #codeCSS , #codeJS , #codephp").hide();
});
$("#cajaCode input[value='JS']").click(function(){
$("#codeJS").show();
$(" #codeCSS , #codeHTML , #codephp").hide();
});
$("#cajaCode input[value='php']").click(function(){
$("#codephp").show();
$(" #codeCSS , #codeHTML , #codeJS").hide();
});
/**********creamos un for para llenar el div numeral con numeros de 1 a 100*************/
$(".numeral").html(C);
function C(){
let texto="";
for(let i = 1; i<100; i++){
texto += i+"<br>";
}
return texto;
}
}
***************si tienes php cargalo aquí***********************
