Latest solutions
Fullstack app Interactive Comments Section with NextJS and MongoDB
#mongodb#next#react#sass/scss#typescriptSubmitted over 2 years agoPassword Generator App using NextJS, CSS Module, and SCSS
#react#sass/scss#nextSubmitted almost 3 years ago
Latest comments
- @Pawel-Gnat@ledminh
I always appreciate people who try to code using only vanilla JS. I used it once, coding a small game. It was time-consuming, but I learned a lot from that. Anyway, check out my solution for this challenge. It was coded in NextJS, but I decided to do one step further by making it become a full stack app with mongoDB for database and nextauth for authentication. I guess one advantage of using framework is that it allows you to do more and make your app look more like a production-level app.
- P@Jason-Donmoyer@ledminh
I guess it's because Safari does not support linear-gradient. This article might help.
Or use
ms-fill-lower
for the left color andms-fill-upper
for the right color in the CSS, like what I did in my solution.Something like this:
input[type=range]::-ms-fill-lower { background: base.$color5; } input[type=range]::-ms-fill-upper { background: base.$color4; }
If you try, please tell me which one works (or neither of them). I really need to know.
Marked as helpful - @jyoung0930@ledminh
Hello jyoung0930,
I love that you safeguarded your app from error by requiring character length must be greater than 5. Here is my idea for improvement, you can count how many options are checked and set it to be the minimum value character length must have.
- @Hanka8@ledminh
I really love the fact that you build this project on vanilla JS. It is the best way to learn javascript. I tried it once on this personal project, it was a very fulfilling experience.
And here are some suggestions for improvement. First, the Generate button should have another outlook when it is disabled. Second, I see that sometimes the generated password does not satisfy all of the requirements. I checked on lowercase, uppercase, and number but the password only contains uppercase and number. Third, to satisfy all rules, password's length should be equal or greater than the number of rules.
I hope you find it helpful.
Marked as helpful - @wesleyjacoby@ledminh
Yes, I feel your pain. Not all browsers are created equal. I spent a whole day just researching how to make the background behind the thumb green. Then, I figured out that not all browsers are created equal in terms of CSS but they are the same in terms of javascript, especially when you use webpack. So, the best way to tackle this problem is to use linear-gradient to set the background to 50% green and 50% black initially in CSS. Then, use javascript to change the percentage number when the slider's value changes.
About the arrow, you can use this tool: https://react-svgr.com/playground/ to transform the svg image of the arrow to React element then change its "fill" property to green.
Marked as helpful - @waustin45@ledminh
Making the checkboxes green is simple. I used the pseudo-class
::before
, set the position toabsolute
with left and top equal 0, height and width equal 100%, then set itsbackground-color
to green. To make the check-symbol image displayed when checked, I used the pseudo-class::after
in the similar way but set itsbackground
to be the check-symbol image when checked.Making the slider half-green-half-black is more difficult. After spending a day doing research on Stack Overflow, I figured the easiest solution is to use linear-gradient on background to make it 50% green and 50% black initially, then using javascript to change the percentage value when the input's value changes.
Marked as helpful