COMO CRIAR UMA BARRA DE PESQUISA INTERATIVA, ABRE E FECHA INTERAGINDO COM O USÚARIO FEITO COM HTML CSS E JAVASCRIPT

José satchova António janeiro 19, 2023

APRENDA COMO CRIAR UMA BARRA DE PESQUISA INTERATIVA, ABRE E FECHA INTERAGINDO COM O  USÚARIO FEITO COM HTML CSS E JAVASCRIPT,INPUT SEARCH, INPUT DE PESQUISA

CÓDIGO FONTE:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>barra de pesquisa</title>


    <style>
        * {
            margin: 0;
            padding: 0;
            background-color: #02033b;
        }
form{
    width: 90%;
    height: auto;
    margin: 20vh 5%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

}
        input {
            width: 55%;
            height: 40px;
            background-color: #ffffff;
            border-radius: 15px 0 0 15px;
            text-align: center;
            color: #02033b;
            border: none;
            outline: none;
        }
        button {
            width: 5%;
             height: 40px;
            background-color: #cccccc;
            border: none;
            outline: none;
              border-radius: 0 15px 15px 0;
            text-align: center;
            cursor: pointer;
           
        }


        button img{
            background-color: transparent;
        }


button:hover{
    background-color: #b5baff;
}

input#input_curto{
    width: 0;
    transition: 0.5s;
}
button#input_curto{
    border-radius: 10px;
    background-color: #ffffff;
}

    </style>


</head>

<body>

   
   <form action="">

            <input type="search" name="" id="" placeholder="pesquise aqui">
            <button type="submit"><img src="search.png" alt=""></button>
       
 </form>
   
   <center style="display: flex; align-items: center; justify-content: center;">
   
            <input type="search" name="" id="input_curto" placeholder="pesquise aqui">
            <button type="submit" id="input_curto"><img src="search.png" alt=""></button>
   </center>

<script>
let posicao=0
let inputcurto=document.querySelector('input#input_curto')
let botaocurto=document.querySelector('button#input_curto')

botaocurto.onclick=()=>{
inputcurto.style.width='55%'
botaocurto.style.borderRadius="0px 15px 15px 0"
botaocurto.style.backgroundColor='#cccccc'
posicao+=1
    botaocurto.onmouseenter=()=>{
        botaocurto.style.backgroundColor='#b5baff'
    }    
    botaocurto.onmouseout=()=>{
        botaocurto.style.backgroundColor='#ffffff'
    }

if(posicao==2){
   posicao=0
    inputcurto.style.width='0'
    botaocurto.style.borderRadius='10px'
    botaocurto.style.backgroundColor='#ffffff'
}

}

</script>

</body>

</html>
José satchova António

Postado por José satchova António

Postar um comentário

1 Comentários

Ad Code