Fadilano• 70
@Fadilano
Submitted
please give me suggestion for better solution and what should i learn next?
Ignacio Spreafico
@nachospreafico
All comments
- Ignacio Spreafico• 590
@nachospreafico
Posted
Hello Fadilano!
The design looks great. I just want to comment on the functionality: you are not handling the case of submitting without choosing any score.
If I submit with no score selected, where I should read "You selected X out of 5" it just says "none".
I didn't have a chance to go through your code, but from the UX part of it, that's what I saw.
Happy coding!
Marked as helpful
0 - Nikhil Tanwar• 260
@NikNT
Submitted
Hi everyone!
This was an exciting project. Although it was simple but there were some elements that made me think. I believe I have made the solution close to the specified design.
Please let me know what you think about me and most importantly, if there are any improvements or suggestions - please do provide them. I'll be happy to learn about my mistakes and identify the scope for improvement.
Thanks!
Ignacio Spreafico• 590@nachospreafico
Posted
Hello Nikhil, hope you are doing great!
I just wanted to give you my feedback for what I've seen:
- In your css, you are using media queries to set styles for mobiles up to 375px which is of course great, but when resizing my window the styles apply up to 374px included and not on 375px.
- I also noticed that you left a console.log to log the width of the viewport when the width changes.
- To continue with my first point, after 375px and up to around 850px, the layout gets all clogged up. I think you might need to apply styles for devices larger than mobiles but smaller than desktop.
- I also noticed that you left a console.log to log the width of the viewport when typing in the input.
- I would also add an error handling in the input for then the user tries to submit multiple blank spaces or just an empty input.
This is what I've seen at very quick glance. Hope you find it useful.
Happy coding!
Marked as helpful
1 - Caramello• 180
@BuzzFizzer
Submitted
console.log("Hello Programmers"),This is my first project ever using TypeScript and Vue.js, and I hope I did a decent job.
Technologies Used:
Naming Convention:
- BEM (Block Element Modifier)
Difficulties Encountered:
- Media queries: I always find working with media queries to be a pain, especially with Vue components that are reliant on one another. Any suggestions on how to better tackle this are greatly appreciated.
- Linear-gradient: linear-gradient does not play nice with the transition property, if you have any work around please leave me a comment.
Questions:
- Does Vue.js scoped styles make the BEM naming convention redundant ?
If you have any suggestions on how I can improve my code, I would greatly appreciate it if you could leave a comment. Thank you in advance. (✿◠‿◠)
Ignacio Spreafico• 590@nachospreafico
Posted
Hey Caramello! Really loving your feed. Although I don't use TS or Vue, I find your work nicely organized and the designs really on point.
Keep it up, you are really on to something! Happy coding.
1 - Mohammad Mahedee Hasan• 210
@mahedee007
Submitted
Ignacio Spreafico• 590@nachospreafico
Posted
Hello, Maheedee!
Nice job with this challenge. I just want to give my feedback:
- It seems you only did the challenge for desktop view, as when I try to resize the window the layout breaks.
- upon submitting an invalid email, the error message disrupts the layout of your form. Also, the input doesn't show the error.
- After submitting a valid email, the success message appears but in the message, the string "${user.email}" appears instead of the actual user's email.
- Finally, after clicking the "dismiss message" button, instead of reloading the page, it removes the success message and shows the submission form with the layout broken.
Other than that, it looks good. I haven't had the time to go through your code, but from the UX side, that's what I can see.
Cheers, and happy coding!
Marked as helpful
0 - Moritz Rose• 90
@moritzrose
Submitted
I definitely put in "required" for my email input, it worked yesterday...it doesn't work today...I didn't change a thing :D any help?
Ignacio Spreafico• 590@nachospreafico
Posted
Hello!
I noticed 2 things in your code:
- you used the required property twice in your input tag, might be causing the problem.
- your label’s for attribute is not matching your input’s id.
On a side note, using HTML’s required attribute is super useful of course but you should try to add your own validations with JavaScript.
Hope this comment is helpful. Happy coding!
0 - Arun• 60
@arunc93
Submitted
Ignacio Spreafico• 590@nachospreafico
Posted
Hello! I really liked your project. I noticed you used querySelector instead of getElementById or class; that is my approach too!
This is my feedback:
- I’d suggest you add a margin: 0 to the body of your document so there are no white bars on the sides, unless of course this is your preferred style.
- I noticed that in your repo you have 2 identical styles.css (1 and 2), but only number 2 is linked to the document. If I am missing something, please let me know.
I hope this comment is of help to you. Happy coding!
0 - mcodes97• 40
@mcodes97
Submitted
I would like help making it responsive for mobile
Ignacio Spreafico• 590@nachospreafico
Posted
Hey, loved the desktop version. For making it responsive for mobile, I suggest you take a look at media queries. In short, they allow you to create styles depending on the screen's size.
Good luck and happy coding!
1
