P
@NikitaVologdin
What specific areas of your project would you like help with?
Please be my guest if you have any ideas for implementing animation for the appearing and disappearing metric or imperial inputs.
muiruri3000
@muiruri3000All comments
- @muiruri3000
hi great work and good eye for detail. how did you manage to align so perfectly with the design image?
- @Emynex4realWhat are you most proud of, and what would you do differently next time?
I really enjoy working on this project, even though i was super stressed working on it but at the end i was able to produce a good result with very little help.
What specific areas of your project would you like help with?I need help with the preview thumbnails i want to do it in a way that when i move to the next image the focus shift to the next thumbnail
@muiruri3000good job. keep on!
- P@MsadafK@muiruri3000
good job!
- @OMAR-AZ-111@muiruri3000
Great Job Omar, Also do consider:
-
adding a setTimeout() your toaster message such that it dissapears after a set time in seconds.
-
Having the toaster set to {position:absolute; top:50%; left 50%; transform:translate(-50%,-50%); z-index:999 //or whatever value is your highest z-index } so that when it appears it is over the form, and does not push it downwards.
once again, keep up, and great job you have done :D
Marked as helpful -
- @TomSifWhat are you most proud of, and what would you do differently next time?
I like my css for once I find it well organized, and annotated :)
What challenges did you encounter, and how did you overcome them?I struggled at the beginning because I had misunderstood how to activate the answers. I had gone only with clicking on the icon and I realized afterwards that it was the whole question that had to be focussed. I solved this by wrapping the whole question in a button container which is naturally 'focussable'
Still having small javascript syntax problems, I know what I want to do and how to do it, but I admit that sometimes the logic of the language still escapes me, but by doing it, I have the impression that it begins to make sens.
What specific areas of your project would you like help with?All the advice is good to take, I will be curious to see how to make a beautiful accordion transition, very fluid for the deployment of the answer when we click on the question, I adjusted the opacity otherwise the answer appeared on the lower container when launching the animation, but there was perhaps something better than playing on the max-height. Thanks in advance to those who pass by and leave a little comment :)
@muiruri3000Well Done!
- @TomSifWhat are you most proud of, and what would you do differently next time?
I tried as much as possible to make the content accessible, curious to know if there were any omissions or better optimization. The javascript part was much simpler than on the previous project, it's starting to make sens, I even added a little transition animation, it was interesting to understand how to trigger it with a delay.
What challenges did you encounter, and how did you overcome them?I didn't really encounter any particular difficulty on this project, other than trying to understand how to offset my transition animation.
What specific areas of your project would you like help with?As this is a part on accessibility, I hope that I have fulfilled my mission well and I would be curious to have the opinion of a more experienced person to know which part to improve this one. All comments are very welcome and thank you in advance to those who take the time to take a look at my work.
@muiruri3000Well done! How did you manage to almost fit in perfectly the width and the height?
- P@mayor-creatorWhat are you most proud of, and what would you do differently next time?
I'm proud of myself for completing this challenge and learning about Clipboard API.
What challenges did you encounter, and how did you overcome them?The challenge I encounter was customizing the input type range and overcame this problem by researching and learning about input fields.
What specific areas of your project would you like help with?What is the best practice for customizing the meter element.
@muiruri3000Good Work! Keep it Up!
- P@MattPahutaWhat are you most proud of, and what would you do differently next time?
While the logic of a tip calculator app isn't particularly complex, I'm happy with where I ended up with the separation of functions into a series of compact, specialized 'do-one-thing' functions.
What challenges did you encounter, and how did you overcome them?I went through several iterations of the form validation, eventually settling on an object to reference and hold the logic. Reviewing the 'refactoring your code' chapter of the JS fundamentals path was helpful in putting it all together.
What specific areas of your project would you like help with?I'm falling short with some accessibility features with this app and would need to spend a good deal more time on that aspect before feeling it's truly a production-ready site.
I also don't like leaving empty elements (p tags for the error messages in this instance) as part of my markup. A future iteration of the project would be to enhance the code to dynamically create/remove the elements as part of the error messaging rendering functions.
Finally, I spent some time working on a currency auto-formatting function for the bill amount input but it didn't make it into the project just yet. Again, that's a candidate for future enhancements.
@muiruri3000well done!
- @softwaredev-sk@muiruri3000
Well done, keep it! Two things to note.
- on github you can go to settings > pages > host your static site, then use the url to post here so someone can see a live example of your site.
- px are not responsive at different viewports, additionally, a user cannot change font-size using the browser settings. a solution will be to use rem for fonts, and em for padding and margins, you can also use percentages(%). these are much more adaptable to different screen sizes. here's an explanation https://youtu.be/_-aDOAMmDHI Otherwise good work. the replica is awesome!
Marked as helpful - @petemac281What are you most proud of, and what would you do differently next time?
Discovered client-side validation techniques and implemented them without too much trouble. I'm still researching BEM naming so I'd probably change up some naming next time.
What challenges did you encounter, and how did you overcome them?n/a
What specific areas of your project would you like help with?I tried to apply multi-level media queries to gradually change elements of the page but for some reason, whichever one I put second never got picked up. I messed about with it but couldn't work out why.
@muiruri3000##Well Done. Just two small issues I noted.
- It is better to use external CSS.
- on button, add cursor: pointer. Keep Coding, Keep Shining.
- @TomSifWhat are you most proud of, and what would you do differently next time?
I continued to apply the same methodologies as on previous projects, mobile first, use of the BEM method which I think this time the class names are explicit, annotate my code to explain what is happening there and I first finished the mobile tablet and desktop design before adding the small javascript functions.
What challenges did you encounter, and how did you overcome them?In the tablet version the pop-up menu was out of the box so I improvised an intermediate version with a menu to the left of the button and an arrow to the right. The most complicated thing I think was the small details, changing the color of the arrow in the button, I improvised a solution with css filters, but there might have been simpler options.
What specific areas of your project would you like help with?All advice is welcome whether in html, css or javascript, I would be curious to know the opinion of people with more advanced levels than mine on the way I organized my code, there are surely methodologies which I don't know yet, thank you in advance to those who will take the time to read my code, it's really a big help when you're self-taught
@muiruri3000Hi, Good Job, Keep it up. ##CSS Reset. Just a small issue to note it is important to set all paddings and margins zero so that you can be able to have uniform spacing as you set them yourselves. border box also helps so that you do not have to manually subtract the values of borders and paddings. all this is done just by
,::before,::after{ margin:0; padding:0; box-sizing: border-box; }
Marked as helpful - P@EfthymiosK@muiruri3000
Good Work! Keep going! the buttons are supposed to align in a row in tablet mode and in a column in mobile mode
- P@arfath-ali@muiruri3000
Nice work Arfath, Keep Pushing, Keep building, You are winning this!
- @Abas-code@muiruri3000
hi Jimmy, Great work! Keep it up! Do also consider using font size types that are responsive to screen sizes and users can also toggle with font sizes using browser settings. instead of px you can use em or rem and percentages %
otherwise good work.
Marked as helpful - @Ashwini202213What challenges did you encounter, and how did you overcome them?
Today, I initially used the tag for displaying an image but later realized that I needed two different images for desktop and mobile devices. That's when I remembered the tag, and I found this task the perfect use case for it.
What specific areas of your project would you like help with?Frontend development (HTML, CSS, JS, React JS)
@muiruri3000Amazing work. keep it up
- @AldousTheWise@muiruri3000
Excellent work. please also consider using rem or % instead of px as px doesn't scale well to different screen sizes, otherwise good Job, keep on.
from fellow newbie,
- @hominhk3What are you most proud of, and what would you do differently next time?
dsada
What challenges did you encounter, and how did you overcome them?ádqwdqw
What specific areas of your project would you like help with?dsad
@muiruri3000not the link of the same project? try correcting it. from fellow newbie
- @cokecancookWhat are you most proud of, and what would you do differently next time?
Added animation on mobile to simulate the hover style on desktop
What specific areas of your project would you like help with?Code optimization and use of a system
@muiruri3000Well done Coke!
