@DandyHypeSubmitted about 2 months ago
P
clickglue
@clickglueAll comments
- @Johanh0Submitted 11 months ago
Password Generator
-
What did you find difficult while building the project?
CSS: I found some difficult styling the input range, specially having two different colors on the input.
JavaScript: I found some difficult when I try to create a function that check if all my checkbox inputs were unchecked or at least one were checked. Because depends on this the generate button would be able or not. Also I didn't know how copy with the clipboard, looking on internet I found an old way to do it (deprecated). I'll let the way below of how you copy a value on your clipboard just because I didn't know until this project and maybe can help somebody:
const myInput = document.querySelector("#my-input").value; const submitBtn = document.querySelector("#submit"); function copyClipboard() { try { // This line copy what you have on your input. navigator.clipboard.writeText(myInput); } catch (err) { console.log("Error with the clipboard API", err); } } submitBtn.addEventListener("click", copyClipboard);-
Which areas of your code are you unsure of?
I would say that the area of my code that I'm unsure is on the Strength level bars. They don't are really analyzing the password an making sure if is really a strong password or not. they're just checking how many checkboxes are marked and depends on this make a result.
@clickgluePosted about 2 months agoHi Johan, what I like is that your code is clean, easy to read and well commented. So it is easy to follow. I think the overall result misses some details (slider, :hover, copied indication) compared to the figma file, but those are details. Good work, one or two iterations and it should be excellent!
0 -
- @fernandogadebarrosSubmitted about 2 months ago@clickgluePosted about 2 months ago
Hi, great solution. There are some design differences but that is positive creativity I guess. I liked the fancy confirmation when copied! I see you used react, typescript and SCSS (even tailwind), and that is very interesting (I used just HTML, CSS and JS, three files only). I'm curious about your workflow and if you are happy with the speed of developing with these frameworks. I tried to find where you calculate the strength (because I thought that was an interesting part of the challenge) but I couldn't find it. Congratulations with the result!
0 - @DandyHypeSubmitted about 2 months ago@clickgluePosted about 2 months ago
Hi, Great solution. The code looks clean and well organised. I can learn from your disciplined implementation of BEM. I tried to understand how you did the strength calculation, but didn't. But it works very well, congratualtions.
0 - @arsh-deSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I am proud that i was able to get the design and it looks dynamic according screen size of the device. I also changed the background color for input form as it was barely visible beforehand. I will try to improve my class names next and maybe use tailwind or bootstrap to finish the project. I will also practice more on JS as this time I was unable to get it right.
What challenges did you encounter, and how did you overcome them?I was unable to make JS work, I tried many times and failed every time, making my JS file a mess with different variable names that I didn't remember, and in the end I had to look at other people's solution to know what i was doing wrong. Next time I will do it on my own.
What specific areas of your project would you like help with?After this project, the part where I need to make the most effort is my JS skills and I will simply have to do more projects. Now I am going to challenge myself for making 1 project a day or even half of it at least. I am looking for some feedback, if someone can help me with variables naming and improve my design.
@clickgluePosted about 2 months agoHi, I think your solution is visually very good! There is a bit of an issue with the responsiveness around 768 px, but I think you can solve that. Functionally it doesn't work as it should. Your JS looks quite complicated, I suggest you take a look at other solutions of the same challenge and then try to simplify. If you've read the article on refactoring: there is a lot of value in writing DRY and simple JS, with just one task for each function! Good luck and keep on the good work!
Marked as helpful0 - @DandyHypeSubmitted about 2 months ago@clickgluePosted about 2 months ago
Hi Dumitru, I liked your solution, great job! Some small issues with the functionality:
- It takes default two persons after reset, while the field displays '0'
- If I apply a custom amount, it takes 5%
Your JS code look quite organized, so I guess it will be easy to maintain and fix!
0 - @MajeedatwahabSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of how i was able to navigate writing my Html code in such a way that it became sort of easy for me to style accordingly.
What challenges did you encounter, and how did you overcome them?Styling, a million times............
i made a lot of research and watched a couple videos on YouTube.
@clickgluePosted about 2 months agoHi, very interesting to see how you made everything work with relatively straightforward JS. Maybe next step is to see if you can be more precise with the design (font weights, sizes etc.) and reponsiveness (issues between 700-1000). But very well done! You might also be interested in learning React as a next step!
Marked as helpful0 - @webdevbynightSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I used the
What challenges did you encounter, and how did you overcome them?:has()selector to select, within the form, the paragraph which does not have one single child.To display the label, the error message and the field, I first used flexbox; but, when submitting the form with invalid input, the alignment between the label and the error message was buggy on Safari. To fix this problem, I used a grid.
What specific areas of your project would you like help with?Do not hesitate over giving feedback about accessibility if there are improvements in my code to make form validation fails correctly rendered by screen readers.
@clickgluePosted 2 months agoHi, goodnight. Fine solution, looks good. Something a bit off when you start typing an email address: it turns red immediatly, but maybe that is on purpose? Thank you for the link to the article on form validation, very interesting. I do have the feeling you maybe 'overorganize' a bit. There are many SCSS files for example. Are they really nescessary? It might become difficult to identify issues. Or maybe it is boilerplate, I don't know. But the end-result is very good, and that's what counts!
0 - @ash-109Submitted 2 months ago@clickgluePosted 2 months ago
Hi, I think you have build a clean and solid solution. The code is easy to read and maintainable, the design is good. The responsiveness is a bit unpredictable between appr 375 and 768.
Marked as helpful0 - @KorneyChervonenkoSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
in my opinion it is rather "Intermediate" than "Junior"
@clickgluePosted 2 months agoGreat solution! I learned a lot from looking how you structured and build the project. Also very precise! I have no remarks that could help you further improve.
0 - @tedaussie75Submitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I used React js and Styled components to make this page
What challenges did you encounter, and how did you overcome them?I had to understand all the states managements and how to pass the props properly to correct components
What specific areas of your project would you like help with?The optimization
@clickgluePosted 2 months agoGreat solution, very clean and precise. Fully functional and responsive. I see you use some kind of testing library, I will look into that. I don't have any remarks or comments that can help you, very good and I learned a lot.
Marked as helpful0 - @lois-mSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
Declare my color in variables.
Next time i will declare it without HSL to add it when i need it.
What challenges did you encounter, and how did you overcome them?Manage gap in grid. There are some different spacing between element in the page that i didn't see at first
@clickgluePosted 2 months agoWell done Lois! Made good use of flex and grid, variables in CSS, reset etc! A problem that I often have is that after many iterations, the code becomes quit complicated. That is probably not good for performance and maintenace. What I try then is rebuilding the solution but with simplified structure. Also, I think it would be good if you apply 'semantic HTML': See here
Marked as helpful1
