I am doing some JavaScript practice and tried writing a simple script that asks for the following details from a user:

1. Username
2. Password
3. First Name
4. Last Name
5. Email
6. Job Title

I then store all the details in an object. I am using alert() to display the messages and prompt() to ask the questions. There is no database integration, I am just learning how to write the JavaScript. My question then, is the code any good? Is there anything I could have done better or optimized in the context of the learning?

//Get user username
let username = prompt("Enter your username")
while (validateUsername(username) == false) {
    username = prompt("Enter your username")
}

//Validate username
function validateUsername(username) {
    if (username === null || username.length < 5 || username.length > 10 || username === "") {
        alert("Username must be from 5 to 10 characters. Try again!")
        return false
    } else {
        return true
    }
}

//Get user password
let userPassword = prompt("Enter your password")
let userPassConfirm = prompt("Confirm your passsword")
while (validatePassword(userPassword) == false) {
    userPassword = prompt("Password is invalid. Please try again!")
    userPassConfirm = prompt("Confirm your passsword")
}
while (userPassConfirm !== userPassword && userPassConfirm !== null) {
    userPassConfirm = prompt("Confirm password does not match, Try again.")
}

//Validate password
function validatePassword(userPassword) {
    if (userPassword == null || userPassword.length < 6 || userPassword.length > 20) {
        alert("Password must be from 6 to 20 characters. Try again!")
        return false
    } else {
        return true
    }
}

//Get user profile
let firstName = prompt("What's your First name?")
while (firstName === "") {
    alert("Your First name cannot be empty! Try again!")
    firstName = prompt("What's your First name?")
}

let lastName = prompt(`Hello ${firstName}, what's your Last name?`)
while (lastName == "") {
    alert("Your Last name cannot be empty! Try again!")
    lastName = prompt(`Hello ${firstName}, what's your Last name?`)
}

let userEmail = prompt(`Enter your email address, ${firstName}.`)
while (userEmail == "") {
    alert("Your email address cannot be empty! Try again!")
    userEmail = prompt(`Enter your email address, ${firstName}.`)
}

let userJobTitle = prompt("What is your job title?")
while (userJobTitle == "") {
    alert("Your job title cannot be empty! Try again!")
    userJobTitle = prompt("What is your job title?")
}

alert(`Great to finally meet you ${firstName} ${lastName}!`)

//Store user details in object
const userDetails = {username, userPassword, firstName, lastName, userEmail, userJobTitle}

//Display user details
alert(`Username: ${userDetails.username} \n First Name: ${userDetails.firstName} \n Last Name: ${userDetails.lastName} \n Email: ${userDetails.userEmail} \n Job Title: ${userDetails.userJobTitle}`)

console.log(`User Details: \n Username: ${userDetails.username} \n First Name: ${userDetails.firstName} \n Last Name: ${userDetails.lastName} \n Email: ${userDetails.userEmail} \n Job Title: ${userDetails.userJobTitle}`)

CodePudding user response：

More readable with functions

//Get user username
let username;
let password;
let confirmPassword;
let firstName;
let lastName;
let jobTitle;
let email;

const getUsername = () => {
  username = prompt("Enter your username");
  if (username === null || username.length < 5 || username.length > 10) {
    alert("Username must be from 5 to 10 characters. Try again!");
    return getUsername(username);
  } else {
    return;
  }
};

getUsername();

const getPassword = () => {
  password = prompt("Enter your password");
  if (password == null || password.length < 6 || password.length > 20) {
    alert("Password must be from 6 to 20 characters. Try again!");
    return getPassword(password);
  } else {
    return getConfirmPassword();
  }
};

getConfirmPassword = () => {
  confirmPassword = prompt("Confirm your password");
  if (confirmPassword !== password) {
    alert("Password does not match. Try again!");
    return getPassword();
  } else {
    return true;
  }
};

getPassword();

//Get user profile
const getFirstName = () => {
  firstName = prompt("Enter your first name");
  if (firstName === null) {
    alert("Your First name cannot be empty! Try again!");
    return getFirstName(firstName);
  } else {
    return false;
  }
};

getFirstName();

const getLastName = () => {
  lastName = prompt(`What is your last name, ${firstName}?`);
  if (lastName === null) {
    alert("Your Last name cannot be empty! Try again!");
    return getLastName(lastName);
  } else {
    return false;
  }
};

getLastName();

const getUserEmail = () => {
  email = prompt(`What is your email, ${firstName}?`);
  if (email === null) {
    alert("Your Email cannot be empty! Try again!");
    return getUserEmail(email);
  } else {
    return false;
  }
};

getUserEmail();

const getUserJobTitle = () => {
  jobTitle = prompt(`What is your job title, ${firstName}?`);
  if (jobTitle === null) {
    alert("Your Job title cannot be empty! Try again!");
    return jobTitle(jobTitle);
  } else {
    return false;
  }
};

getUserJobTitle();

alert(`Great to finally meet you ${firstName} ${lastName}!`);

//Store user details in object
const userDetails = {
  username,
  password,
  firstName,
  lastName,
  email,
  jobTitle,
};

//Display user details
alert(
  `Username: ${userDetails.username}
First Name: ${userDetails.firstName}
Last Name: ${userDetails.lastName}
Email: ${userDetails.email}
Job Title: ${userDetails.jobTitle}`
);

console.log(
  `User Details:
  Username: ${userDetails.username}
  First Name: ${userDetails.firstName}
  Last Name: ${userDetails.lastName}
  Email: ${userDetails.email}
  Job Title: ${userDetails.jobTitle}`
);

CodePudding user response：

From @Juan IWK3 code:

This statement: if (username === null || username.length < 5 || username.length > 10) will malfunction because when one of the conditions return true it will execute and ignore the rest.

Fix: if (username === null && username.length < 5 && username.length > 10)

Return statement: return getUsername(username); It will loop forever and doesn't return what left over

Fix: Just wrap the whole block in while and return it when done

const getUsername = () => {
  while (true) { // see here
    username = prompt("Enter your username");
    if (username === null || username.length < 5 || username.length > 10) {
      alert("Username must be from 5 to 10 characters. Try again!");
    } else {
      return username; // and here
    }
  }
};

Running functions: getUsername(); and so on and the return data goes into the trash

Fix: username = getUsername();