Ordenar e criar buscas(Resolvido)

Boa noite.

Quero saber como posso ordenar e criar buscas com esses cars templates.
Como posso criar uma function no javascript ou algo do tipo…
Não sei fazer essas buscas e ordenação.

Desde já agradeço!

HTML------------------------------------------------------------------------------------------------------

<div class="container">                     

            <div class="card">

                <img src="https://i.pinimg.com/originals/68/51/2c/68512c2a74a394fd18f3f96eb7e88b6e.jpg">

            <div class="status">

                    <h4>Homem-Aranha</h4>

                    <p>Peter Benjamin Parker</p>

                </div>

            </div>

            <div class="card">

                <img src="https://s.aficionados.com.br/imagens/homem-de-ferro_f.jpg">

                <div class="status">

                    <h4>Anthony Edward "Tony" Stark</h4>

                    <p>Homem de Ferro</p>

                </div>

            </div>

            <div class="card">

                <img src="https://terrigen-cdn-dev.marvel.com/content/prod/1x/cyclops_head.jpg">

                <div class="status">

                    <h4>Scott Summers</h4>

                    <p>Ciclope</p>

                </div>

            </div>

            <div class="card">

                <img src="https://nerdbreak.com.br/wp-content/uploads/2018/01/pantera-negra-tops-capa.jpg">

                <div class="divisor"></div>

                <div class="status">

                    <h4>T'Challa</h4>

                    <p>Pantera Negra</p>

                </div>

            </div>

            <div class="card">

                <img src="https://referencianerd.com/wp-content/uploads/2019/12/capa.jpg">

                <div class="divisor"></div>

                <div class="status">

                    <h4>Thor Odinson "Donald Blake"</h4>

                    <p>Thor</p>

                </div>

            </div>

            <div class="card">

                <img

                    src="https://www.einerd.com.br/wp-content/uploads/2019/02/capit%C3%A3o-am%C3%A9rica-hq-890x504.jpg">

                <div class="divisor"></div>

                <div class="status">

                    <h4>Steve Rogers</h4>

                    <p>Capitao América</p>

                </div>

            </div>

            <div class="card">

                <img src="https://upload.wikimedia.org/wikipedia/pt/a/a5/Gavi%C3%A3o_Arqueiro.jpg">

                <div class="divisor"></div>

                <div class="status">

                    <h4>Clint Barton</h4>

                    <p>Gavião-Arqueiro</p>

                </div>

            </div>

            <div class="card">

                <img src="https://www.aliancanerd.com.br/conteudo/wp-content/uploads/2019/11/Captura-de-Tela-84.png">

                <div class="divisor"></div>

                <div class="status">

                    <h4>Natasha Romanov</h4>

                    <p>Viúva-negra</p>

                </div>

            </div>

            <div class="card">

                <img src="https://psxbrasil.com.br/wp-content/uploads/2020/02/hulk-hq.jpg">

                <div class="divisor"></div>

                <div class="status">

                    <h4>Bruce Banner</h4>

                    <p>Hulk</p>

                </div>

            </div>

            <div class="card">

                <img src="https://litherarium.files.wordpress.com/2016/07/homem-formiga-quadrinhos.png">

                <div class="status">

                    <h4>Hank Pym</h4>

                    <p>Homem-Formiga</p>

                </div>

            </div>

            <div class="card">

                <img src="https://uploads.jovemnerd.com.br/wp-content/uploads/2016/07/vitrine-12.jpg">

                <div class="status">

                    <h4>Wade Wylson</h4>

                    <p>DeadPool</p>

                </div>

            </div>

            <div class="card">

                <img

                    src="https://upload.wikimedia.org/wikipedia/pt/thumb/e/e0/Blade_em_Deadpool_Vol_4_28_001.jpg/200px-Blade_em_Deadpool_Vol_4_28_001.jpg">

                <div class="status">

                    <h4>Eric Brooks</h4>

                    <p>Blade</p>

                </div>

            </div>

            <div class="card">

                <img src="https://img.elo7.com.br/product/zoom/17CBDF3/elektra-00-hq.jpg">

                <div class="status">

                    <h4>Elektra Natchios</h4>

                    <p>Elektra</p>

                </div>


            </div>

CSS-------------------------------------------------------------------------------------------------------

body{

    background: white;

    margin: 0;

    overflow-x: hidden;

     background-image: url("https://i.pinimg.com/originals/de/f4/73/def473f3b4380d977d23ac2502cb1d77.jpg"); */

        

}

main{

    background-color: rgba(0, 0,0, 0.5)

}

.container{

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    grid-template-rows: auto ;

    object-fit: fill;

    gap: 20px;

    margin: 0px 20px;

    

    padding-top: 10px;

    

}

.card{

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

    transition: 0.3s;

    width: 100%;

    height: 100%;

    position: relative;

    background: black;

    object-fit: fill;

    

    border-bottom-right-radius: 50px;

    overflow: hidden;

    

}

.card:hover{

    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);

    transition-duration: 1s;    

    background-color: red;

    height:105%;

    width: 105%;

    

}

.status{

    padding: 2px 16px;

}

div.card > img{

    width: 100%;

    height: 50%;

    object-fit: cover;

    

}

div.status > h4{

    font-family: 'Anton' , sans-serif;

    color: white;

    

}

div.status > p{

    font-family: 'Coming Soon', cursive;

    color: white;

    

}

div.status{

    display: flex;

    flex-direction: column;

    justify-content: space-evenly;

}

#divBusca{

    position: absolute;

    align-self: center;

    margin-left: 80%;

    

}

#campobusca{

    background:transparent;

    border-bottom-color:gray;

    width: 200px;

    height: 20px;

    color: white;

    

}

header{

    width: 100%;

    height: 60px;

    background-color: black;

    position: relative;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

}

header> img{

    width: auto;

    height: 100%;

    align-items: center;

}

@media only screen and (max-width: 800px) {

    .container {

     grid-template-columns: 1fr 1fr 1fr; 

     grid-template-rows: auto;

     margin: 0 auto;

     

}

}

Da uma pesquisada sobre filter e sort. Exemplos:

1 curtida

Opa meu amigo, deu certo! Muito Obrigado pela dica. E desculpe a demora. Abrcs.