viernes, 16 de marzo de 2018

Buscador con JS Puro




Buenas compañeros, les compartimos este Buscador con JS Puro.


DESCARGA EL CODIGO AQUI :

 clic

CODIGO HTML

 <div class="wrapper">
    <input type="text" class="search" placeholder='Buscador'>
    <div class="output"></div>
</div>
CODIGO CSS

@import url('https://fonts.googleapis.com/css?family=Lato');
$font: 'Lato', sans-serif;
$color: #aaa;


*{
    box-sizing: border-box;
}
html,body{
    padding: 0;
    margin: 0;
}
body{
    background: $color * 1.47;
}
.wrapper{
    position: absolute;
    padding: 1.5em;
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.search{
    padding: .7em 0.5em .7em;
    width: 100%;
    font-family: $font;
    margin-top: 2em;
    border: 1px solid $color;
    &:focus::placeholder{
        transition: .3s ease;
        letter-spacing: 1.5em;
        color: $color*1.4;
    }
}
.err{
    color: $color * .9;
    font: $font;
    text-align: center;
}
table{
    width: 100%;
    font-family: $font;
    margin-top: 1em;
    thead{
        background: $color;
        color: #fff;
        text-transform: uppercase;
    }
    tr{
        transition: 1.3s ease;
       
    }
    td{
        padding: .5em .5em;
    }
    tr:nth-of-type(2n){
        background: $color * 1.4;
        box-shadow: 1px 1px 2px $color;
    }
    tr.tran,h3.tran{
        animation-duration: 1s;
        animation-name: opac;
        animation-timing-function: ease;
    }
}
@media screen and (max-width: 930px){
    .wrapper{
        width: 100%;
    }
    .search{
        width: 100%;
    }
}
@media screen and (max-width: 500px){
    .wrapper{
        padding: .5em;
    }
    table{
        font-size: .8em;
    }
}
@keyframes opac{
    0%{
        opacity: 0;
        transform: translateX(-20%);
    }
    70%{
        opacity: 1;
        transform: translateX(5%);
    }
    100%{
        transform: translateX(0%);
    }
}


CODIGO JS

let input = document.querySelector('.search');
let output = document.querySelector('.output');
let data = [
    {
        name: 'Juan Carlos',
        age: 45,
        prof: 'General'
    },
    {
        name: 'Juan',
        age: 23,
        prof: 'test'
    },
    {
        name: 'Erick ',
        age: 40,
        prof: 'test'
    },
    {
        name: 'Prueba',
        age: 30,
        prof: 'test'
    },
    {
        name: 'Prueba',
        age: 42,
        prof: 'test'
    },
    {
        name: 'Prueba',
        age: 43,
        prof: 'Hodor'
    },
    {
        name: 'Prueba Prueba',
        age: 35,
        prof: 'test'
    },
    {
        name: 'Prueba',
        age: 22,
        prof: 'test'
    }
];

function isMatch(value, regExp){
    value += '';
    if(value.match(regExp)){
        return true;
    }else{
        return false;
    }
}
function draw (data, container) {
    if(data.length){
        let outHTML = `<table><thead><td>Nombree</td><td>Edad</td><td>Profesion</td></thead>`;
        data.forEach((value, index)=>{
            outHTML += `<tr class="tran" style="animation-delay: ${index / 30}s">
                                        <td>${value.name}</td>
                                        <td>${value.age}</td>
                                        <td>${value.prof}</td>
                                    </tr>`;
        });
        container.innerHTML = outHTML + `</table>`;
    }else{
        container.innerHTML = `<h3 class="err tran">No hay :( </h3>`;
    }
}
draw([...data], output);
input.addEventListener('keyup',(e)=>{
    let inputData = e.target.value;
    if (inputData !== ''){
        let reg = new RegExp(inputData, 'gi');
        let outar = [...data].filter((value, index)=>{
            return isMatch(value.age, reg)
                         ||
                         isMatch(value.name, reg)
                         ||
                         isMatch(value.prof, reg)
        });
        draw(outar, output);
    }else{
        draw([...data], output);
    }
});
 


 MAS IMAGENES 





Checa esto

¿Que temas debe de haber en la pagina?

Posts Populares

Popular Posts

Recent Posts