Creating a digital contact book- Guidance needed

Projects Personal Projects
1

Hi guys, I want to create a kind of contact book using code, where I can create profiles for each of my contacts and put in various information of my choosing on each profile.
I also want to easily be able to search through my contacts using multiple parameters.
It is just for me, so it doesn’t need to be pretty, it just needs to work.

I’m very new to coding and I have no idea where to start. I have started learning JavaScript on a friends recommendation, but I would love some more advice on how to start this project. I want to start building but I’m not sure what I need to have learned before I start. Please point me in the right direction :slight_smile:

2

Hi @chip8975832294
Welcome to the forum!
What you want to do, I think you need some basics like:

  • Functions
  • Arrays
  • Objects
  • Classes

You can find that in this course:
https://www.codecademy.com/learn/introduction-to-javascript

And when you reached the classes lessons, you should have the basic knowledge needed for the Javascript part.
It also sounds like you want to maintain your data in a browser? Then you would need some HTML, too. You could find what you need for that in this (PRO) course:
Building Interactive JavaScript Websites

3

Thank you for your advice!
I’m almost at classes so hopefully I can start building in a couple of days!

Also, why would I need to maintain my data in a browser? Could it just be somewhere on my computer? Is it safe on a browser? I don’t want it to be publicaly available.

Thanks again for the help!!

4

Yes, you can store it locally on your computer. That would also make it easier to as you would have to save your data in a database if you’d host it remotely.
I was just imagining how you would want to add and fetch the data? Independently of whether you would store the data on your computer or not – how do you want to interact with it?

5

I’m not entirely sure how to answer this question, but right now I imagine that I manually create some profiles, which I can edit later without too much complication, and be able to retrieve profiles based on search results (have a search feature that allows me to find profiles that fit certain criteria). Does that make sense? Sorry I’m an amateur.

6

No worries. I’m just trying to understand what you’re trying to do.

Let’s say you have a name, an address and a phone number. What’s next?
Do you want to hard code them as Javascript objects in a Javascript file? Or do you want to type them into a terminal? Or into a form in your browser?

7

Okay so,

I’m not sure what you mean by a terminal, I’m not opposed to hard coding them but I imagine that would be less efficient than having some kind of template or form prepared that I could easily fill out, maybe that’s the form in the browser that you mentioned?
That would be my preferred option.

Also, I’d like to be able to create some form of tags. For example, I make a profile and list say, 5 hobbies, one of which is football. Another profile works with football. If I search just ‘football’ I want both to pop up even though one is in “hobbies” and one is in “profession”.

8

What exactly you store in the file does not make a big difference for the effort it takes to code such a contact book.
The easiest way to do that would be hard coding it in a JS file. But indeed, that would be the least efficient to maintain. You would have to add each new contact as a hard coded object to the Javascript file. That’s close to having a contact book on paper, I guess. On the other hand – when you almost reached the classes course you will have the knowledge to do that soon or even now. And you could write functions/methods that log your contacts to the console matching certain criteria, for example.
By typing your contacts into a terminal, I meant the terminal in VS Code or any other IDE/code editor.
If you want to add new data via terminal or the browser window, you would need to save your data in a JSON file. If you fancy that, you should also take a look at node.js.

9

Okay, I think I understand.
I’ll see how it goes once I’ve learned these things and then I will probably come back for more guidance.
Thank you so much for your help!

1 Like
10

So, I have basically finished the classes lesson and I have a few practical questions.
Should I use the factory function or classes to create profiles?

Right now I have built a basic example with a few profiles, using the factory function but I can’t see how I can “search” through the objects.

const profileFactory = (name, nationality, hobby, favFood, profession, languagesSpoken) => {
return {
name,
nationality,
hobby,
favFood,
profession,
languagesSpoken
};
};
const anna = profileFactory(‘anna’, ‘britain’, ‘dancing’, ‘rice’, ‘student’, ‘english’);
const david = profileFactory(‘david’, ‘sweden’, [‘football’, ‘painting’], ‘meatballs’, ‘networker’, [‘Swedish’, ‘English’, ‘Spanish’, ‘French’, ‘Italian’, ‘German’, ‘Dutch’]);
const helen = profileFactory(‘helen’, ‘sweden’, [‘knitting’, ‘painting’] , ‘vegetables’, ‘retired’, [‘English’, ‘French’, ‘Dutch’, ‘Spanish’, ‘Greek’, ‘Swedish’, ‘Hungarian’, ‘Italian’]);

For the code above, how could I return only the profiles that have nationality = swedish, hobby = painting, and languagesSpoken = English, Swedish and Italian for example? I want it to return the full profile of both david and helen.
What would the code look like?

Right now I’m imagining that I need to use classes instead so that it knows which objects to search through? but is it possible using just the factory funtion? Should I use a loop?

Thanks again for the help!

11

When you post code, please make sure to format it according to this guide:
Format code in posts

If you use classes or factory functions is up to you, I guess. What you want to do can be achieved with both ways.
But the code you posted above is not a working factory function. An object should have a key and a paired value for the properties you pass as arguments. It should rather look like this:

const profileFactory = (name, nationality, hobby, food) => {
  return {
    name: name,
    nationality: nationality,
    hobby: hobby,
    food: food
  }
}

I would recommend reviewing this lesson:
Factory functions

12

I will review it over the weekend, but I’m pretty sure in that lesson they show the code format I used as shorthand and also a perfectly usable… I tested it and it worked fine, but maybe for certain things it’s better to use the full version?

13

Yes, you’re right. I forgot about the shorthand syntax and should have checked first, sorry!

You can gather all contacts in an array like that:
const contacts = [anna, david, helen];

Than you could write functions which filter the array, for example:

const findContact = (attr, value) => {
	const matches = contacts.filter(contact => {
  	return contact[attr].includes(value)
  });
  return matches.map(match => match.name).join(', ');
}

console.log(findContact('languagesSpoken', 'Spanish')); // logs david, helen
But then the data type of each attribute has to be the same. Maybe that would be easier with classes.

1 Like