<div class="container">
<div class="box">
<div class="cursos-header">
<div class="title">Cursos DevCode</div>
</div>
<div class="cursos-row">
<a class="link" href="https://devcode.la/cursos/">
<div class="curso-section">
<div class="logo">
<img src="https://s3-us-west-2.amazonaws.com/devcode/media/courses/kotlin_01-01(1).png" width="75" height="75" alt="Kotlin">
</div>
<div class="info">
<div class="curso">Fundamentos de Kotlin</div>
<div class="date">30/01/2017</div>
</div>
</div>
</a>
<div class="tags-section">
<a class="tag">Android</a>
<a class="tag">Mobile</a>
</div>
</div>
<div class="cursos-row">
<a class="link" href="https://devcode.la/cursos/">
<div class="curso-section">
<div class="logo">
<img src="https://s3-us-west-2.amazonaws.com/devcode/media/courses/PHP_7-02.png" width="75" height="75" alt="PHP7">
</div>
<div class="info">
<div class="curso">Fundamentos de PHP7</div>
<div class="date">19/01/2017</div>
</div>
</div>
</a>
<div class="tags-section">
<a class="tag">Backend</a>
<a class="tag">Web</a>
</div>
</div>
<div class="cursos-row">
<a class="link" href="https://devcode.la/cursos/django-fundamentos">
<div class="curso-section">
<div class="logo">
<img src="https://s3-us-west-2.amazonaws.com/devcode/media/courses/django_2-01.png" width="75" height="75" alt="Django">
</div>
<div class="info">
<div class="curso">Fundamentos de Django 1.10</div>
<div class="date">Disponible</div>
</div>
</div>
</a>
<div class="tags-section">
<a class="tag">Backend</a>
<a class="tag">Web</a>
</div>
</div>
<div class="cursos-row">
<a class="link" href="https://devcode.la/cursos/javascript-fundamentos/">
<div class="curso-section">
<div class="logo">
<img src="https://s3-us-west-2.amazonaws.com/devcode/media/courses/11-02.png" width="75" height="75" alt="JavaScript">
</div>
<div class="info">
<div class="curso">Fundamentos de JavaScript</div>
<div class="date">Disponible</div>
</div>
</div>
</a>
<div class="tags-section">
<a class="tag">Frontend</a>
<a class="tag">Web</a>
</div>
</div>
<div class="cursos-row">
<a class="link" href="https://devcode.la/cursos/wordpress-fundamentos">
<div class="curso-section">
<div class="logo">
<img src="https://s3-us-west-2.amazonaws.com/devcode/media/courses/i%CC%81cono_wordpress-01.png" width="75" height="75" alt="JavaScript">
</div>
<div class="info">
<div class="curso">Fundamentos de WordPress</div>
<div class="date">Disponible</div>
</div>
</div>
</a>
<div class="tags-section">
<a class="tag">CMS</a>
<a class="tag">Web</a>
</div>
</div>
</div>
<div><br>
<code>
<span>document.querySelectorAll('.cursos-row')[<input id="indice" type="number" onchange="actualizar()" value="1">
</input>];
</span>
</code>
<br />
<code>
<span>padre.querySelectorAll('<input id="selector" onkeyup="actualizar()" value=".tag"></input>);
</span>
</code>
<br>
<div class="resultados"> Resultados
<div class="selection"></div>
</div>
</div>
</div>
body {
font-family: Roboto, sans-serif;
margin: 0;
}
.container {
display: flex;
}
.box {
width: 220px;
}
.curso-section {
display: flex;
}
.logo {
width: 40%;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
}
.info {
width: 60%;
margin: 10px 0;
}
.cursos-header .title{
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
}
.title {
font-size: 20px;
}
.tags-section {
margin: 10px 20px;
}
.tag {
text-decoration: none;
margin-right: 5px;
margin-bottom: 5px;
padding: 5px 10px;
border-radius: 4px;
background-color: #ececec;
color: #333;
border: 1px solid #ccc;
font-size: 13px;
}
.link{
text-decoration: none;
color: #000;
}
.curso-title {
font-size: 18px;
}
.date {
font-size: 14px;
}
.selection {
padding: 5px;
border: 1px solid black;
font-size: 13px;
}
#selector {
width: 50px;
}
#indice {
width: 25px;
}
var text = document.querySelector('.container .selection');
actualizar();
function actualizar() {
var inputind = document.querySelector('#indice');
var padre = document.querySelectorAll('.cursos-row')[Number(inputind.value)];
var inputsel = document.querySelector('#selector');
var elementos = padre.querySelectorAll(inputsel.value);
text.innerHTML = "";
for(i=0;i<elementos.length;i++){
text.innerHTML += elementos[i].innerText + "<br>";
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.