/random-password-generator

This is a solution to Random Password Generator solo project on Scrimba 🔑

Primary LanguageCSSOtherNOASSERTION

Scrimba - Random password generator solution

This is a solution to the Random password generator project on Scrimba. Scrimba helps you improve your coding skills by building realistic projects.

Table of contents

Overview

The challenge

Users should be able to:

  • Generate 4 passwords by 8-12 characters clicking on the button
  • Set the password length by slider
  • See passwords' length in real time
  • Copy passwords to the clipboard clicking on the them
  • See hover states for interactive elements

Screenshot

screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid Layout
  • Mobile-first workflow
  • Vanilla Javascript

What I learned

With this project I improved my CSS and JS skills. The newest things I learnt are:

  • How to create a responsive grid made up of 2 columns and 2 rows of the same dimensions
.downSection {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, 1fr);
  gap: 1em;
}

@media (max-width: 520px) {
  .downSection {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}
  • How to store all elements with same class in a variable and how to change their CSS styles via Javascript
function changeColorPasswords() {
  let allPasswords = document.getElementsByClassName("generatedPassword");
  for (let i = 0; i < allPasswords.length; i++) {
    allPasswords[i].style.color = "var(--clr-bright-green)";
  }
}

Continued development

I'd like to:

  • Implement the ability to set the password length
  • Add 1-click copy password to the clipboard

Useful resources

Author