This is a solution to the Password generator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- Generate a password based on the selected inclusion options
- Copy the generated password to the computer's clipboard
- See a strength rating for their generated password
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Live Site URL: ( https://saram7619.github.io/FEM-Password-Generator/)
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- Typescript - Typescript
- Styled Components - For styles
-
Typescript I switched from working in Reactjs to working with Typescript for this challenge. I learned a lot about working with Props, Interfaces, components and children.
-
I learned to use Styled Components and webkit to build a range slider. I found it was more effective to use Styled Components instead of css styles.
More projects with Typescript and making media queries.
- [Dave Gray ] YouTube Typescript- This helped me for Learning about the layout of components, children, interfaces and props.
- [Jack Harrington no bs ts book] - This is an amazing book which helped me finally understand Typescript. I'd recommend it to anyone still learning this concept.
- Frontend Mentor - @saram7619