chritianegozza/attribute-dynamic-binding.markdown

## attribute-dynamic-binding.markdown

      
    Raw
  

              attribute-dynamic-binding.markdown
            
          
    Attribute dynamic binding

A Pen by christiane gozza on CodePen.
License.

  
## index.html

<html lang="pt-br">
<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">
    <script src="https://jsonplaceholder.typicode.com/users"></script>
    <title>Vough</title>
  </head>
<body>
   <header>
    <div id="app">

       </header>

    <!-- modal -->
    <input type="checkbox" id="checkmodal">
    <div class="modal" id="modal">
        <div class="modal_in" id="modal_in"></div>
    </div>

    <script src="script.js"></script>
    </body>


    </header>

    <div id="listasApp">
      <h1>Cadastro de Clientes</h1>
          <form v-on:submit="addTarefa">
              <input type="text" v-model="novaTarefa.titulo" placeholder="cadastro">
            <button type="button" onclick="Evento()">Add</button>
          </form>
        <hr>

    <section class="sidebyside">
        <div>
            <h1> Empresas </h1>
            <div class="company col" id="company">
            </div>
        </div>
        <div>
            <h1> Pessoas</h1>
            <div class="usuarios col" id="usuarios">
            </div>
        </div>
    </section>

    <!-- modal -->
    <input type="checkbox" id="checkmodal">
    <div class="modal" id="modal">
        <div class="modal_in" id="modal_in"></div>
    </div>

    <script src="script.js"></script>
    </body>
    </html>


<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>

## script.js
function Evento(){
        alert('Cadastro adicionado')
    }


var categorias = []

async function mostrar(url){
    dados =  await fetch(url)
    json = await dados.json()
    return json
}


const x = mostrar("https://jsonplaceholder.typicode.com/users")


x.then(e=>{

    //mostra usuarios na tela
    for(obj of e)
        usuarios.innerHTML += `
        <div onclick="renderizarModalUsuario('${obj.name}')" class='card' el="${obj.name}" id="n${obj.id}">
        ${obj.name}
        </div>`

    //preenche lista de categorias
    for(obj of e){
        obj.company.bs.split(" ").map(e=>{
            if(!categorias.includes(e)) categorias.push(e);
        })
    }

    // mostra categorias na tela
    for(obj of categorias)
        company.innerHTML += `<label class="card"><input type='checkbox'>${obj}</label>`
})


// comportamento do modal
modal.onclick = (e) => {

    if(e.target.className == "modal")
        checkmodal.checked=false

}

function renderizarModalUsuario(nome_do_usuario){
    // data = json.find(e=>e.name=="Ervin Howell")
    checkmodal.checked = true
    data = json.find(e=>e.name == nome_do_usuario)

    modal_in.innerHTML = `
        <div>
        <img src="imgs/pessoa.svg"><br>
        name: ${data.name}<br>
        username: ${data.username}<br>
        email: ${data.email}<br>
        phone: ${data.phone}<br>
        website: <a target="_blank" href='http://${data.website}'>${data.website}</a><br>
        </div>
        <div>
        <img src="imgs/store.svg"><br>
        name: ${data.company.name}<br>
        catchPhrase: ${data.company.catchPhrase}<br>
        bs: ${data.company.bs}<br>
        </div>
        <iframe src="map.html?${data.address.geo.lat},${data.address.geo.lng}"></iframe>
    `
}


company.onclick=function(){
    ar = []

    for(i of company.querySelectorAll("label > input:checked")){
        ar.push(i.parentElement.innerText)
    }

    ar = ar.join("|")

    obj = json.filter(e=> e.company.bs.match(ar))

    usuarios.innerHTML = ""
    for(i of obj){
        usuarios.innerHTML += `
        <div onclick="renderizarModalUsuario('${i.name}')" class='card' el="${i.name}" id="n${i.id}">
        ${i.name}
        </div>
        `
    }

}


## scripts
<script src="https://unpkg.com/vue@next"></script>

## style.css
.h1{
  font-family: "Roboto Mono", monospace;
  color: white;
  text-align: center;
  margin: 5px 0;
}


.ListaPronta {
          text-decoration: line-through;
        }

        body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #eaedf2;
}

.fundo-1{
    background-color: #eaedf2;
}

.card{
    padding:10px;
    background-color: white;
    box-sizing: border-box;
    border-radius: 5px;
    margin:5px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.card input{
    overflow: hidden;
    height: 0px;
    width: 0px;
    transition:0.5s;
    vertical-align: middle;
    border-radius: 100%;
}

.card input:checked{
    height: 20px;
    width: 15px;
    transition:0.5s
}

.card:hover{
    background-color: #3498db;
    color: white;
    cursor: pointer;
}
.card img{
    vertical-align: middle;
}

/* usuarios */


.sidebyside{
    display: flex;
}

.sidebyside > div{
    flex:1;
    margin:0px 20px;
}

/* modal */

#checkmodal{
   display: none;
}

#checkmodal + div{pointer-events: none;}

#checkmodal:checked + div{
    visibility: visible;
    opacity: 1;
    transition: 0.2s;
    pointer-events: unset;
}

#checkmodal:checked + div > div{transform: translateY(0px);transition: 0.2s;}
#checkmodal + div > div{transform: translateY(-50px);transition: 0.2s;}

.modal{
    width: 100%;
    height: 100%;
    background-color: #00000055;
    position:fixed;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: 0.2s;
}

.modal > div{
    padding:10px;
    width: 550px;
    height: 600px;
    max-height: 90%;
    max-width: 90%;
    background-color: white;
    box-shadow: 0px 0px 10px #00000055;
    overflow: auto;
    border-radius: 10px;
}

.modal > div iframe{
    display: block;
    width: 100%;
    border:none;
    height: 300px;
    box-sizing: border-box;
}

.modal > div{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* colunas */
.col{
    display: grid;
    grid-template-columns: repeat(3,1fr);
}

/* .col > div{width: 50%;} */

@media (max-width: 800px){
    .col{
        grid-template-columns: repeat(2,1fr);
    }
}


@media (max-width: 600px){
    .col{
        grid-template-columns: repeat(1,1fr);
    }
}
#mapid { height: 100%; }
    body{
        margin:0px;
    }

	<html lang="pt-br">
	<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">
	<script src="https://jsonplaceholder.typicode.com/users"></script>
	<title>Vough</title>
	</head>
	<body>
	<header>
	<div id="app">

	</header>

	<!-- modal -->
	<input type="checkbox" id="checkmodal">
	<div class="modal" id="modal">
	<div class="modal_in" id="modal_in"></div>
	</div>

	<script src="script.js"></script>
	</body>


	</header>

	<div id="listasApp">
	<h1>Cadastro de Clientes</h1>
	<form v-on:submit="addTarefa">
	<input type="text" v-model="novaTarefa.titulo" placeholder="cadastro">
	<button type="button" onclick="Evento()">Add</button>
	</form>
	<hr>

	<section class="sidebyside">
	<div>
	<h1> Empresas </h1>
	<div class="company col" id="company">
	</div>
	</div>
	<div>
	<h1> Pessoas</h1>
	<div class="usuarios col" id="usuarios">
	</div>
	</div>
	</section>

	<!-- modal -->
	<input type="checkbox" id="checkmodal">
	<div class="modal" id="modal">
	<div class="modal_in" id="modal_in"></div>
	</div>

	<script src="script.js"></script>
	</body>
	</html>


	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
	integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
	crossorigin=""/>
	function Evento(){
	alert('Cadastro adicionado')
	}



	var categorias = []

	async function mostrar(url){
	dados = await fetch(url)
	json = await dados.json()
	return json
	}


	const x = mostrar("https://jsonplaceholder.typicode.com/users")


	x.then(e=>{

	//mostra usuarios na tela
	for(obj of e)
	usuarios.innerHTML += `
	<div onclick="renderizarModalUsuario('${obj.name}')" class='card' el="${obj.name}" id="n${obj.id}">
	${obj.name}
	</div>`

	//preenche lista de categorias
	for(obj of e){
	obj.company.bs.split(" ").map(e=>{
	if(!categorias.includes(e)) categorias.push(e);
	})
	}

	// mostra categorias na tela
	for(obj of categorias)
	company.innerHTML += `<label class="card"><input type='checkbox'>${obj}</label>`
	})


	// comportamento do modal
	modal.onclick = (e) => {

	if(e.target.className == "modal")
	checkmodal.checked=false

	}

	function renderizarModalUsuario(nome_do_usuario){
	// data = json.find(e=>e.name=="Ervin Howell")
	checkmodal.checked = true
	data = json.find(e=>e.name == nome_do_usuario)

	modal_in.innerHTML = `
	<div>
	<img src="imgs/pessoa.svg"><br>
	name: ${data.name}<br>
	username: ${data.username}<br>
	email: ${data.email}<br>
	phone: ${data.phone}<br>
	website: <a target="_blank" href='http://${data.website}'>${data.website}</a><br>
	</div>
	<div>
	<img src="imgs/store.svg"><br>
	name: ${data.company.name}<br>
	catchPhrase: ${data.company.catchPhrase}<br>
	bs: ${data.company.bs}<br>
	</div>
	<iframe src="map.html?${data.address.geo.lat},${data.address.geo.lng}"></iframe>
	`
	}


	company.onclick=function(){
	ar = []

	for(i of company.querySelectorAll("label > input:checked")){
	ar.push(i.parentElement.innerText)
	}

	ar = ar.join("\|")

	obj = json.filter(e=> e.company.bs.match(ar))

	usuarios.innerHTML = ""
	for(i of obj){
	usuarios.innerHTML += `
	<div onclick="renderizarModalUsuario('${i.name}')" class='card' el="${i.name}" id="n${i.id}">
	${i.name}
	</div>
	`
	}

	}
	.h1{
	font-family: "Roboto Mono", monospace;
	color: white;
	text-align: center;
	margin: 5px 0;
	}


	.ListaPronta {
	text-decoration: line-through;
	}

	body{
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background-color: #eaedf2;
	}

	.fundo-1{
	background-color: #eaedf2;
	}

	.card{
	padding:10px;
	background-color: white;
	box-sizing: border-box;
	border-radius: 5px;
	margin:5px;
	display: flex;
	align-items: center;
	overflow: hidden;
	}

	.card input{
	overflow: hidden;
	height: 0px;
	width: 0px;
	transition:0.5s;
	vertical-align: middle;
	border-radius: 100%;
	}

	.card input:checked{
	height: 20px;
	width: 15px;
	transition:0.5s
	}

	.card:hover{
	background-color: #3498db;
	color: white;
	cursor: pointer;
	}
	.card img{
	vertical-align: middle;
	}

	/* usuarios */



	.sidebyside{
	display: flex;
	}

	.sidebyside > div{
	flex:1;
	margin:0px 20px;
	}

	/* modal */

	#checkmodal{
	display: none;
	}

	#checkmodal + div{pointer-events: none;}

	#checkmodal:checked + div{
	visibility: visible;
	opacity: 1;
	transition: 0.2s;
	pointer-events: unset;
	}

	#checkmodal:checked + div > div{transform: translateY(0px);transition: 0.2s;}
	#checkmodal + div > div{transform: translateY(-50px);transition: 0.2s;}

	.modal{
	width: 100%;
	height: 100%;
	background-color: #00000055;
	position:fixed;
	top: 0px;
	left: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	visibility: hidden;
	opacity: 0;
	transition: 0.2s;
	}

	.modal > div{
	padding:10px;
	width: 550px;
	height: 600px;
	max-height: 90%;
	max-width: 90%;
	background-color: white;
	box-shadow: 0px 0px 10px #00000055;
	overflow: auto;
	border-radius: 10px;
	}

	.modal > div iframe{
	display: block;
	width: 100%;
	border:none;
	height: 300px;
	box-sizing: border-box;
	}

	.modal > div{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	}

	/* colunas */
	.col{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	}

	/* .col > div{width: 50%;} */

	@media (max-width: 800px){
	.col{
	grid-template-columns: repeat(2,1fr);
	}
	}


	@media (max-width: 600px){
	.col{
	grid-template-columns: repeat(1,1fr);
	}
	}
	#mapid { height: 100%; }
	body{
	margin:0px;
	}