petrusnog · September 29, 2020 03:49
diff --git a/listas.html b/listas.html
 <!DOCTYPE html>
 <html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title>Lista de contatos</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

        <style media="screen">

            #vueroot{
                max-width: 1200px;
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 100px;
            }

            ul{
                list-style: none;
                padding: 0;
                margin: 0;
            }

            .contatos{
                margin-bottom: 20px;
            }

            .contato{
                width: 300px;
                border: 1px solid gray;
                border-radius: 5px;
                padding: 20px 30px;
                margin-bottom: 10px;
            }

            .contato ul li {
                margin-bottom: 5px;
            }

            .contato ul li:last-child{
                margin-bottom: 0px;
            }

            .warnings{
              color: darkorange;
              font-weight: bold;
              letter-spacing: 1px;
            }

            label{
                margin-bottom: 10px;
                display: block;
            }

        </style>

    </head>
    <body>
        <div id="vueroot">
            <h1>Lista de contatos</h1>
            <ul class="contatos">
                <li class="contato" v-for="contato in contatos">
                    <ul>
                        <li><strong>Nome:</strong> {{ contato.nome }}</li>
                        <li><strong>Telefone:</strong> {{ contato.telefone }}</li>
                        <li><strong>Operadora:</strong> {{ contato.operadora }}</li>
                    </ul>
                </li>
            </ul>

            <div class="warnings">
              {{ warnings }}
            </div>

            <h2> Adicionar novo contato </h2>
            <label><strong>Nome</strong><br>
                <input v-model="new_nome" type="text">
            </label><br>
            <label><strong>Telefone</strong><br>
                <input v-model="new_telefone" type="text">
            </label><br>
            <label><strong>Operadora</strong><br>
                <input v-model="new_operadora" type="text">
            </label><br>
            <button class="trapaca" @click="addContato()">Adicionar</button><br><br>

            <h2>Remover contato pelo seu nome</h2>
            <input v-model="remove_by_name" placeholder="Nome do contato">
            <button class="trapaca" @click="removeByName()">Remover</button>

        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript">

            var app = new Vue({
                el: "#vueroot",
                data: {
                    "contatos": [],

                    "new_nome" : "",
                    "new_telefone" : "",
                    "new_operadora" : "",

                    "remove_by_name": "",
                    "warnings": ""
                },
                methods: {
                  addContato() {
                      window.scrollTo(0, 0);
                      var contato = {
                        "nome" : this.new_nome,
                        "telefone" : this.new_telefone,
                        "operadora" : this.new_operadora
                      };
                      if ( this.new_nome == "" || this.new_telefone == "" || this.new_operadora == "" ) {
                          this.warnings = "Um ou mais campos estão vazios!";
                      } else {
                          this.contatos.push(contato);
                          this.warnings = "Adicionado com sucesso!";
                          this.new_nome = '';
                          this.new_telefone = '';
                          this.new_operadora = '';
                      }
                  },
                  removeByName() {
                      window.scrollTo(0, 0);

                      var new_contatos = [],

                      has_contato_to_remove = this.contatos.filter( element => element.nome === this.remove_by_name ).length;

                      this.contatos.forEach(function( contato ) {
                          if ( contato.nome !== app.remove_by_name ) { //Chamando 'app', pois 'this' está fora do escopo
                              new_contatos.push( contato );
                          }
                      });

                      this.contatos = new_contatos;

                      console.log( has_contato_to_remove );

                      if ( has_contato_to_remove ) {
                          this.warnings = "Removido com sucesso";
                          this.remove_by_name = '';
                      } else {
                          this.warnings = "Nenhum nome bate com os contatos da lista";
                      }
                  }
                }
            });

        </script>
    </body>
 </html>
	<!DOCTYPE html>
	<html lang="pt-br">
	<head>
	<meta charset="utf-8">
	<title>Lista de contatos</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

	<style media="screen">

	#vueroot{
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100px;
	}

	ul{
	list-style: none;
	padding: 0;
	margin: 0;
	}

	.contatos{
	margin-bottom: 20px;
	}

	.contato{
	width: 300px;
	border: 1px solid gray;
	border-radius: 5px;
	padding: 20px 30px;
	margin-bottom: 10px;
	}

	.contato ul li {
	margin-bottom: 5px;
	}

	.contato ul li:last-child{
	margin-bottom: 0px;
	}

	.warnings{
	color: darkorange;
	font-weight: bold;
	letter-spacing: 1px;
	}

	label{
	margin-bottom: 10px;
	display: block;
	}

	</style>

	</head>
	<body>
	<div id="vueroot">
	<h1>Lista de contatos</h1>
	<ul class="contatos">
	<li class="contato" v-for="contato in contatos">
	<ul>
	<li><strong>Nome:</strong> {{ contato.nome }}</li>
	<li><strong>Telefone:</strong> {{ contato.telefone }}</li>
	<li><strong>Operadora:</strong> {{ contato.operadora }}</li>
	</ul>
	</li>
	</ul>

	<div class="warnings">
	{{ warnings }}
	</div>

	<h2> Adicionar novo contato </h2>
	<label><strong>Nome</strong><br>
	<input v-model="new_nome" type="text">
	</label><br>
	<label><strong>Telefone</strong><br>
	<input v-model="new_telefone" type="text">
	</label><br>
	<label><strong>Operadora</strong><br>
	<input v-model="new_operadora" type="text">
	</label><br>
	<button class="trapaca" @click="addContato()">Adicionar</button><br><br>

	<h2>Remover contato pelo seu nome</h2>
	<input v-model="remove_by_name" placeholder="Nome do contato">
	<button class="trapaca" @click="removeByName()">Remover</button>

	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">

	var app = new Vue({
	el: "#vueroot",
	data: {
	"contatos": [],

	"new_nome" : "",
	"new_telefone" : "",
	"new_operadora" : "",

	"remove_by_name": "",
	"warnings": ""
	},
	methods: {
	addContato() {
	window.scrollTo(0, 0);
	var contato = {
	"nome" : this.new_nome,
	"telefone" : this.new_telefone,
	"operadora" : this.new_operadora
	};
	if ( this.new_nome == "" \|\| this.new_telefone == "" \|\| this.new_operadora == "" ) {
	this.warnings = "Um ou mais campos estão vazios!";
	} else {
	this.contatos.push(contato);
	this.warnings = "Adicionado com sucesso!";
	this.new_nome = '';
	this.new_telefone = '';
	this.new_operadora = '';
	}
	},
	removeByName() {
	window.scrollTo(0, 0);

	var new_contatos = [],

	has_contato_to_remove = this.contatos.filter( element => element.nome === this.remove_by_name ).length;

	this.contatos.forEach(function( contato ) {
	if ( contato.nome !== app.remove_by_name ) { //Chamando 'app', pois 'this' está fora do escopo
	new_contatos.push( contato );
	}
	});

	this.contatos = new_contatos;

	console.log( has_contato_to_remove );

	if ( has_contato_to_remove ) {
	this.warnings = "Removido com sucesso";
	this.remove_by_name = '';
	} else {
	this.warnings = "Nenhum nome bate com os contatos da lista";
	}
	}
	}
	});

	</script>
	</body>
	</html>
No results found