I want to make a Nepali Random Name Generator

[shivajikobardan]

TL;DR Summary

Random Name Generator

What's the full process for it? Don't I need an API for names? We don't have that yet. So, how will I do this? Can you guide me step by step? without telling me any code? I'm planning to do this in javascript so that I can deploy the application on the web(blogger).

 

[jedishrfu]

Make an array of first names and an array of last names. Use a random number generator to get an index into the firstname array and a second call to get an index into the lastname array.

 

[shivajikobardan]

Make an array of first names and an array of last names. Use a random number generator to get an index into the firstname array and a second call to get an index into the lastname array.

great idea. Thank you. This will be my weekend's project. Hopefully I finish it.

 

[Vanadium 50]

This works provided first and last names have no correlation. In the US, Yo-yo Ma is a plausible name, as is Mordecai Shapiro, but Yo-yo Shapiro would be unlikely.

 

[jedishrfu]

We do have people who combine their given first name with their married name to get the blended cultural name.

Yoko Lennon vs Yoko Ono are often used interchangeably.

 

[berkeman]

TL;DR Summary: Random Name Generator

What's the full process for it? Don't I need an API for names? We don't have that yet. So, how will I do this? Can you guide me step by step? without telling me any code? I'm planning to do this in javascript so that I can deploy the application on the web(blogger).

The main reason for that disagreement is the underdefined OP of yours. What are the requirements of this assignment? How believable do the names need to be? Can they be complete gibberish, or can they be combinations of first and last names that make no sense, like Fred Shivajikobardan?

Please restate your OP with much better parameters on the types of names that you want to generate. If you tried to register here at PF as Fred Shivajikobardan I can guarantee that our PF AI would put that registration application into the Mentor Queue for Moderation...

 

[shivajikobardan]

https://github.com/techgaun/nepali-names
Here're Nepali Names(first name only). I want to just display first name of male and female.
In the future, I plan to build a site which generates a baby name when given father and mother name.

 

[mfb]

If you just want to draw a random first name then you only need to store all of them in an accessible way, e.g. a file with one name per line. Do separate files with male and female names if you want to distinguish them. Your data source already has these files prepared. Draw a random number from 1 to the number of names, pick the corresponding line.

 

[shivajikobardan]

do I need to use nodejs->Thus react js for file processing? Can this be done in vanilla js? This honestly sounds like a simple but interesting and useful project idea. If I want to incorporate random name recommendations based on the name of mother and father, what should I learn and use for it?

 

[pbuk]

do I need to use nodejs->Thus react js for file processing?

No.

Can this be done in vanilla js?

Yes.

This honestly sounds like a simple but interesting and useful project idea.

I agree. Although you don't need to implement this using JavaScript classes, this might be a useful additional learning point for you. Loading files in the browser is not trivial so I'll do that bit for you to give you a head start.

// This is a stand-alone function to do the 'heavy lifting' of loading a remote
// file into an array.
const load = async (url) => {
  const response = await fetch(url);
  if (!response.ok) throw new Error('Not found');
  const fileContent = await response.text();
  return fileContent.split(/[\n\r]+/);
};

class NameSelector {
  static STATE_LOADING = 'loading';
  static STATE_LOADED = 'loaded';
  static STATE_ERROR = 'error';

  femaleNames = [];
  maleNames = [];
  state = null;

  async loadNames() {
    try {
      this.state = NameSelector.STATE_LOADING;
      // If using these files be sure to respect the terms of use of jsDelivr
      // https://www.jsdelivr.com/terms and the rights of the author at
      // https://github.com/techgaun/nepali-names.
      [this.femaleNames, this.maleNames] = await Promise.all([
        load('https://cdn.jsdelivr.net/gh/techgaun/nepali-names/female.txt'),
        load('https://cdn.jsdelivr.net/gh/techgaun/nepali-names/male.txt'),
      ]);
      this.state = NameSelector.STATE_LOADED;
    } catch (e) {
      this.state = NameSelector.STATE_ERROR;
      this.error = e;
    }
  }
}

 

[Drakkith]

do I need to use nodejs->Thus react js for file processing? Can this be done in vanilla js? This honestly sounds like a simple but interesting and useful project idea.

I haven't used javascript before, so I can't say anything about it. In general, you would read the names from a file into something like an array or list for quick retrieval, generate a random number which will be used as the index of the array, and then fetch whichever name is at that particular index in the array. Use different arrays for sexes, first and last names, regions, etc. This is an extremely simple program and shouldn't pose too much difficulty.

If I want to incorporate random name recommendations based on the name of mother and father, what should I learn and use for it?

That depends on how complex you're going to make things. If you just want the new name to have the same family name (surname) and new first (given) name then you'd just fetch a random first name and use the surname given/selected by the user. A similar method can be used if you want the new middle name to be based on the parents names.

If you have something more complicated in mind then the program would probably be substantially more complicated depending on what you want to implement.

 

[shivajikobardan]

No.Yes.I agree. Although you don't need to implement this using JavaScript classes, this might be a useful additional learning point for you. Loading files in the browser is not trivial so I'll do that bit for you to give you a head start.

// This is a stand-alone function to do the 'heavy lifting' of loading a remote
// file into an array.
const load = async (url) => {
  const response = await fetch(url);
  if (!response.ok) throw new Error('Not found');
  const fileContent = await response.text();
  return fileContent.split(/[\n\r]+/);
};

class NameSelector {
  static STATE_LOADING = 'loading';
  static STATE_LOADED = 'loaded';
  static STATE_ERROR = 'error';

  femaleNames = [];
  maleNames = [];
  state = null;

  async loadNames() {
    try {
      this.state = NameSelector.STATE_LOADING;
      // If using these files be sure to respect the terms of use of jsDelivr
      // https://www.jsdelivr.com/terms and the rights of the author at
      // https://github.com/techgaun/nepali-names.
      [this.femaleNames, this.maleNames] = await Promise.all([
        load('https://cdn.jsdelivr.net/gh/techgaun/nepali-names/female.txt'),
        load('https://cdn.jsdelivr.net/gh/techgaun/nepali-names/male.txt'),
      ]);
      this.state = NameSelector.STATE_LOADED;
    } catch (e) {
      this.state = NameSelector.STATE_ERROR;
      this.error = e;
    }
  }
}

thank you, my work is already reduced by 80%.

 

[shivajikobardan]

I made it.

// This is a stand-alone function to do the 'heavy lifting' of loading a remote
// file into an array.
const load = async (url) => {
  const response = await fetch(url);
  if (!response.ok) throw new Error('Not found');
  const fileContent = await response.text();
  return fileContent.split(/[\n\r]+/);
};

class NameSelector {
  static STATE_LOADING = 'loading';
  static STATE_LOADED = 'loaded';
  static STATE_ERROR = 'error';

  femaleNames = [];
  maleNames = [];
  state = null;

  async loadNames() {
    try {
      this.state = NameSelector.STATE_LOADING;
      // If using these files be sure to respect the terms of use of jsDelivr
      // https://www.jsdelivr.com/terms and the rights of the author at
      // https://github.com/techgaun/nepali-names.
      [this.femaleNames, this.maleNames] = await Promise.all([
        load('https://cdn.jsdelivr.net/gh/techgaun/nepali-names/female.txt'),
        load('https://cdn.jsdelivr.net/gh/techgaun/nepali-names/male.txt'),
      ]);
      this.state = NameSelector.STATE_LOADED;
    } catch (e) {
      this.state = NameSelector.STATE_ERROR;
      this.error = e;
    }
  }
}const nameSelector = new NameSelector();

document.addEventListener("DOMContentLoaded", function () {
  const randomNameGenerator = document.getElementById("random-name-generator");
  //create a button to generate random name
  const generateButton = document.createElement("button");
  generateButton.textContent = "Generate Random Name";
  const randomNameDisplay = document.createElement("p");
  generateButton.addEventListener("click", function () {
    nameSelector.loadNames().then(() => {
      //console.log(nameSelector.femaleNames);
      //console.log(nameSelector.maleNames);
      const randomIndex = Math.floor(Math.random() * nameSelector.maleNames.length);
      const randomName = nameSelector.maleNames[randomIndex];
      randomNameDisplay.textContent = randomName;
    }).catch((error) => {
      console.error(error);
    });  });
  randomNameGenerator.appendChild(generateButton);
  randomNameGenerator.appendChild(randomNameDisplay);})

 

[shivajikobardan]

I will now make male and female name generator with 2 buttons. Wait a while. I made that as well. It's just few lines of code.

 

[pbuk]

I made it.

Nice, your coding has improved lots!

If you are using loadNames() like that I think would change it to

  async loadNames(force = false) {
    try {
      if (this.state === NameSelector.STATE_LOADED && !force) return;
      // ...

to avoid unnecessarily reloading.