# Code Review: Password Generator
### _Code by: Huseyin_
### _Reviewer: Felicity Evans_
### Live-demo -> https://passwordgenerator-huey.netlify.app/


## What you did well
- Semantic use of <output> tag
- Commented code
- Separation of logic in functions
- Set password length

## Questions
1.Still I am scared of CSS side, please check my css, is it DRY?

2.there are some width problems for the password output containers, how can I prevent that? Also for the background, when screen size is small. It puts white color as a background.

3.did make it right parent-child relations in HTML?

some tips would be nice for the js side. 

## What could be improved
- Use const for values that won't be reassigned
- Inconsistencies as to where clicks are handled (inline or with event listeners)
    - If you weren't sure how to bind the same function to multiple elements consider using forEach()
- Unchecking all options. Gives alert but still produces error
    Move alert inside event listener
    Maybe dynamically add/remove disabled attribute if only oe checkbox ticked to avoid this
- remove height: 100vh from body to fix white bg
- Remove divs wrapping passwords: 
    flex applies to immediate children only
- Word wrap for passwords:
     word-wrap: break-word;
- Responsive styles for mobile:
    Don't use a % max-width for .container
    Change flex direction for generate options
- Copy to clipbaord
    See code sample: https://www.w3schools.com/howto/howto_js_copy_clipboard.asp
    
    
## Code edits


if (characters.length < 1) {
    alert("Please select at least one character type!");
    return
}

@media screen and (max-width: 480px) {
    .generate {
        flex-direction: column;
    }
}

.checkbox-list li {
    display: flex;
    gap: 10px;
}

<ul class="checkbox-list">
    <li>Uppercase<input type="checkbox" id="upperCh"></li>
    <li>Lowercase<input type="checkbox" id="lowerCh"></li>
    <li>Numbers<input type="checkbox" id="numbersCh"></li>
    <li>Symbols<input type="checkbox" id="symbolsCh"></li>
</ul>