Help in Javascript contact list program

Question

Help in Javascript contact list program

Asked 5 years, 7 months ago

Viewed 224 times

0

I have to make a simple Javascript program that will show the user’s contact list and allow him to enter a new contact, as in the image below and the description of the problem is as follows: Each contact should have a first and last name. The program will Handle an array of Contacts and Offer the user a Choice of the two Features:

View each contact
Quit

The program should run until the user chooses to Exit. It must also use Objects to Manage Contacts.

Two initial Contacts to put in the program are: John Smith Jane Doe

I started studying JS a short time ago and I’m having difficulty knowing where to create objects and how to handle the names/surnames in the Array to show if the user chooses the contact list.

Are you sure it’s Javascript? how inputs will be made? what is the user interface?

– Leandro Angelo

2018/11/08 at 18:44
Yes, it’s in Javascript, I’m also seeing how the inputs will be made. It is a simple program, pro user will appear only the options and the result of each.

– Ozzott

2018/11/08 at 19:05

1 answer

Browser other questions tagged javascript array array-push

You are not signed in. Login or sign up in order to post.

by Alvaro Alves • **1,065** points · Answer 1 · 2018-11-08T18:24:28+00:00

Below is an example I took from here, will not work here for security reasons because it is a sandbox, but if you put in a local file will work perfectly.

Take a look at the code, I know the example is quite complex for you getting started, but it’s a good way for you to exercise your ability to interpret code.

Any doubt I’m available, and good studies.

//contact array
contacts = [];
//construtor
function Person(firstName, lastName, contactDetails){
	this.first 		= firstName || "Entre com o primeiro nome: ";
	this.last 		= lastName || "Entre com o último nome: ";
	this.contact 	= contactDetails || "Entre com os detalhes: ";
}

function userInput( inputs ){
	for(ui in inputs){
		do{
			 var iData = prompt( inputs[ui],"");
		}while( iData.length==0);
		inputs[ui] = iData;
	}
	return inputs;
}

// Pede o pin de segurança salvo no local storage
if( !localStorage.getItem("secure") ){
	localStorage.setItem("secure",prompt("Defina um pin de segurança")); 
}


function process( fm ){
	var action = isNaN( fm ) ? fm.getAttribute("data-button") : fm;
	console.log("> "+(fm.value || fm) +" : " + action);
	switch( action - 0 ){
		case 0:// Carregamento
			if( localStorage.getItem("contacts-list") ) contacts = JSON.parse( localStorage.getItem("contacts-list"));
		break;

	case 1: // Listar contatos
		if( contacts.length ){
		for(var str="",c=0; c<contacts.length; c++){
			str += (c+1) + ".";
				for( cd in contacts[c] ){
					str += "[" + cd + "]: " + contacts[c][cd] + "\t";
				}
				str += "\r\n";
			}
		}else{
			str = "Sem registros";
		}
		target.display.value = str;
	break;

	case 2: // adiciona uma nova pessoa
		contacts.push( userInput( new Person() ) );
		process(1);
	break;

	case 3: // remove uma pessoa
			target.display.value = "É necessário permissão de admin para deletar...\r\n\r\nInsira o código\r\n";
			var code = prompt("Code");
			if(localStorage.getItem("secure")===code){
				process(1);
				var n = prompt("Insira o número do registro que você quer deletar :") - 1;
				var c = confirm("Contato: " + (n+1) +" : "+contacts[n].first+" "+contacts[n].last+"\r\n"+contacts[n].contact+"\r\nSerá removido");
				if( c ) contacts.splice( n,1);
				process(5);
			}

	break;

	case 4: // limpa a tela
			target.display.value = defaultDisplay;
	break;

	case 5: // salva 
			target.display.value = "saved";
			var save = JSON.stringify( contacts );
			localStorage.setItem("contacts-list",save); 
			process(0); // carrega os dados.
			process(1); // mostra os dados
	break;

	case 6:// Mudar o pin
		target.display.value = "Necessita login de administrador...\r\n\r\nEntre com o código\r\n";
			var code = prompt("Code");
			var str = "not ";
			if(localStorage.getItem("secure")===code){
					do{
						var a = prompt("Insira o novo pin:");
						var b = prompt("Re-digite o pin:");
					}while( a!=b);
				localStorage.setItem("secure",a);
				str = "";
				}
				target.display.value = "Pin "+str+" alterado";
	break;

	default:
			process(4); 

}

}


window.onload = function(){
	target = document.forms.contacts;
	defaultDisplay = target.display.value;
	process(0); 
}

<!DOCTYPE html>
<html>
<head>
<title>Lista de contatos</title>
</head>
<body>
	<form name="contacts" action="javascript:;" >
		<input name="action" type="button" value="Load" data-button="0" onclick="process( this );"><br>
		<textarea name="display" cols="80" rows="20">Bem vindo!</textarea><br>
		<input name="action" type="button" value="Mostrar contatos" data-button="1" onclick="process( this );">
		<input name="action" type="button" value="Adicionar" data-button="2" onclick="process( this );">
		<input name="action" type="button" value="Remover" data-button="3" onclick="process( this );">
		<input name="action" type="button" value="Limpar tela" data-button="4" onclick="process( this );">
		<input name="action" type="button" value="Salvar" data-button="5" onclick="process( this );">
		<input name="action" type="button" value="Mudar Pin" data-button="6" onclick="process( this );">
	</form>
</body>
</html>