Password Generator App

This is a solution to the Scrimba Password Generator Solo Project.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resource
• Author
• Acknowledgments

Overview

Users will be able to:

• generate random password on each button click,
• include or not include(toggle) numbers or symbols,
• copy password to clipboard on click of any of the password

Screenshot

Links

• Solution URL: github.com/Ifescohub/password-generator
• Live Site URL: https://transcendent-biscotti-763009.netlify.app/

My process

Built with

• HTML5 markup
• Pure CSS
• Vanilla JavaScript
• Flexbox
• CSS Grid
• Desktop-first workflow
• Google Fonts - For Fonts

What I learned

I learnt a lot through this project. I learnt how to use CSS to create a toggle switch. I was able add a feature that allows a user to include or not include numbers or symbols in the password. I also learnt how to create copy to clipboard with javascript. Like the code bellow

passwordElement.forEach((password) => {
    password.addEventListener("click", ()=>{
        navigator.clipboard.writeText(password.innerHTML);
        copyNotice.textContent = `Password copied to clipboard`;
        
        setTimeout(() => {
            copyNotice.textContent = `Click any password to copy to clipboard`;
        }, 2000);
    })
})

Useful resource

• https://alvarotrigo.com/blog/toggle-switch-css/ - This help me a lot while learning how to create toogle switch with CSS.

Author

• GitHub - Udeh Ifeanyi
• Frontend Mentor - @ifescohub
• Twitter - @UdehIfeanyi10

Acknowledgments

I acknowledge scrimba tutors for creating a solo project challenge like this to help learnings apply what they are learning. You can also learn from Scrimba. Check the Links below.

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

Happy Coding!