Latest solutions
- Submitted 17 days ago
Dymanically updating password generator w/ JavaScript
- HTML
- CSS
- JS
Going forward, I would like to make even cleaner JS logic. Also, as the codebases grow, practicing annotating with comments to clarify for others becomes increasingly important.
Latest comments
- P@Dzik0Submitted 5 months agoP@jonatan-samuelssonPosted 1 day ago
Looks really good, nice job!
I'd like to hear your thoughts on hard coding the rating system using JS rather than using custom styled radiobuttons, what made you go for that approach?
0 - P@taceseptSubmitted 14 days agoP@jonatan-samuelssonPosted 4 days ago
Well done, good-looking solution, well-structured code.
Your content is rendered quite high up on the page, is that a conscius choice? Asking since it departs from the design.
Also, no matter what quiz topic I choose, I get the HTML quiz. I didn't have to review your code enough to pinpoint the error, but you should look over your jason-fetching and data managment functions.
Marked as helpful0 - @Bytehax21Submitted 17 days agoWhat are you most proud of, and what would you do differently next time?
Making projects using Figma is way easier and faster than eyeballing the design stuff. I think i made it pretty close to original so no doubts on my work as of now.
What challenges did you encounter, and how did you overcome them?I faced issues with applying CSS on Child elements like p tags as assigning ID to them and then writing CSS didn't work on them so, I did a workaround by assigning the child a class and then using css and the padding was different than mentioned in Figma design file
What specific areas of your project would you like help with?Is my CSS good enough or how can i improve it like in applying padding margins and where to assign class or ID etc.
P@jonatan-samuelssonPosted 17 days agoHey.
Looks good, well done. One thing I noticed is you're using
padding-top
to position the card. Another way to do it where it gets centered on the page no matter what is to give your main something like:display: flex; justify-content: center; align-items: center; min-height: 100svh;
For your issue with child p-elements, there are multiple solutions. First of all, i'd say that the first paragraph semantically should be a heading (say h2, h3 or such).
If you still wanna keep it as paragraphs, you can either do the id thing like so:
.text #para-1 { ... } .text #para-2 { ... }
...or, you could go for child selectors:
.text > p:first-child {...} .text > p:nth-child(2) {...} ... .text > p:last-child {...}
Finally, all of this can be nested to make the css more structured:
.text { (some styles for text perhaps) p:nth-child(x) { (some style) } p:nth-child(x) { (some other style) } }
Marked as helpful0 - P@HelewudSubmitted 26 days agoP@jonatan-samuelssonPosted 17 days ago
I really like your solution, code is super clean and easy to read.
Especially the JS is nicely commented and compartmentalized. I like the idea of using a class like you did, as it makes for better portability and reusability. My solution had a completely different approach, so it's nice to see all the various way to achieve the same functionality.
Marked as helpful0 - P@loki-pepeSubmitted 20 days agoP@jonatan-samuelssonPosted 18 days ago
Really nice job!
Your JS is fantastic, super clean and DRY. I really learned from this for future projects, and realized how I should have done this project if I did it again.
For mine, I had trouble getting the inputs responsive in size and ended up hacking it via contenteditable divs. I don't know what you did differently, but you made it work.
One small thing I noticed is that the totals do not reset when the reset button is clicked.
Marked as helpful0 - @Donald-cmd-opsSubmitted 19 days agoWhat are you most proud of, and what would you do differently next time?
looks pretty close to the image
What challenges did you encounter, and how did you overcome them?some minor difference between image and my developed html so spacing button size differences
What specific areas of your project would you like help with?how to improve code to improve closeness to screenshot
P@jonatan-samuelssonPosted 19 days agoLooks good!
I see your problem with the likeness, and I think the easiest solution would be to get rid of the
width: 40%
on the card. Either set it to some fixed width or usemin()
to restrict its growth.Also, the way you center the
.centered
class is a bit overly complicated. A better way to do it is to have a full-viewport container (could just be the main) withdisplay: grid
andplace-items: center
. That way, the parent element controls the position of the card, which improves reusability.Happy coding!
Marked as helpful0