Scrimba - The Frontend Developer Carrer Path - Module 3 - Password Generator project

Hello and welcome! Thank you for stopping by.🤠

This is a solution to the Scoreboard projects from Module 3 - JavaScript challenges - part 2 chapter of the The Frontend Career Path.

Table of contents

• Overview
  • The project
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author
• Acknowledgments
• About Scrimba

Overview

The project

Users should be able to:

• Generate two completely random passwords consisting of 15 characters including lower and upper case letters, numbers and other symbols

Screenshot

State: Inactive

State: Active

Links

• Solution URL: Github Repository
• Live Site URL: Github Pages

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS var() functions
• CSS hover pseudo-class
• Vanilla JavaScript
  • Onclick events
  • Functions
  • for Loop
  • getElementById method
  • textContent property
• JS Math Object
  • floor method
  • random method
• Flexbox

What I learned

On the project, I mainly practiced how to work with the Math object and its .floor and .random methods. Also I practiced how to use a for loop in JavaScript.

Random passwords generation function with for loop and Math objects methods:

function getPasswords() {
  passwordOneEl.textContent = "";
  passwordTwoEl.textContent = "";

  for (let i = 0; i <= 15; i++) {
    let char1 = Math.floor(Math.random() * characters.length);
    let char2 = Math.floor(Math.random() * characters.length);
    passwordOneEl.textContent += characters[char1];
    passwordTwoEl.textContent += characters[char2];
  }
}

Continued development

In the future, I would like to add an extension where the user will be able to choose how long the password should be (number of characters) and what specific characters the password should contain. I would also like to add a button that will copy the selected password to clipboard.

Author

• Website - to be added...
• GitHub - @PetrValenta92
• LinkedIn - @valentapetr
• Instagram - @petr.codes

Acknowledgments

I would love to thank whole Scrimba team for such amazing project they have created. Also I want to thank the Scrimba community and specialy the Junior Guru Community community! 🐣

About Scrimba

At Scrimba our goal is to create the best possible coding school at the cost of a gym membership! 💜 If we succeed with this, it will give anyone who wants to become a software developer a realistic shot at succeeding, regardless of where they live and the size of their wallets 🎉 The Frontend Developer Career Path aims to teach you everything you need to become a Junior Developer, or you could take a deep-dive with one of our advanced courses 🚀

• Our courses
• The Frontend Career Path
• Become a Scrimba Pro member

Happy Coding!