@IryDevSubmitted over 1 year ago
NizarMjr
@NizarMjrAll comments
- @azick99Submitted over 1 year ago
Hi my internet friends!
Finally, I have completed interactive comments page it took a fair time of mine, but I did it. It helped me a lot, to practice and enhance my redux skills and I will recommend for anyone who wants to boost their skills!
Don't hesitate to check out the page and code, if you have feedbacks to improve my code, please let me know.
Thank you for visiting!
- @Jo-cloud85Submitted over 1 year ago
This challenge was completed with:
- dark and light theme toggle
- the ability to switch users that also comes with a tiny bit of animation
- pop-up alerts when users try to send an empty response or vote more than once
- sync data with localStorage for any CRUD operations
Due to this challenge's multiple state management requirements, I used a lot of function declarations, instead of function expressions, which I understand is not ideal. Also, there still might be some bugs lying around. Nevertheless, I had fun drilling my Javascript skills.
@NizarMjrPosted over 1 year agoYou have made a nice work , i like what you have done but there are some updates could make your project more efficient : try to make the alert notification disappear after an interval of time as well as only one notification appear on the top of screen and delete reply does not work
1 - @artimysSubmitted over 1 year ago
I initially wrote this in normal HTML/CSS/JS but decided to switch over to React. I'm still learning it and decided to try out React hook form for this challenge.
I really like how the app came out. Some of the features include:
- move focus to next input when char limit reached
- [update] single digits convert to two digits when leaving input (blur event)
- using setInterval and promises to get the count up effect.
- responsive mobile first design
I welcome any feedback and pointers to good React practices. Major challenge I faced was letting go of the responsibility of updating the DOM and let React handle it.
ie. I'm using
document.getElementByIdto move the focus to the next input when the character limit is reached but doesn't feel very React like. Is there another way?@NizarMjrPosted over 1 year ago@Arturo I like what you have done it's nice work Getting element from DOM with its ID is useful to focus on input however there is useRef hook could make same work ex : const inputRef = useRef(null) <input ref={inputRef} /> function () { //your js logic inputRef.current.focus()}
0 - @tarek-elmasriSubmitted almost 2 years ago
Hello, My name is Tarek. This is my first my challenge with frontend mentor. I appreciate any feedbacks on design and area's for improvement.
@NizarMjrPosted almost 2 years agoHi mate Welcom to the frontend community and Congrats for finishing the project I noticed that the buttons of step 2 are hidden so i can't pass to other steps to finish the procedure. this only happend on mobile device but the other devices are okey
0 - @SouleymaneSy7Submitted almost 2 years ago
I had trouble with the implementation of the prefers-color-scheme. Any feedback are welcome!
@NizarMjrPosted almost 2 years agoCongrats for completing the challenge. I noticed something we consider it as important point in the calculator, what if user starts with negatif numbers, that's what your project need just to make it more improved
Marked as helpful0 - @Ritesh-VirulkarSubmitted about 2 years ago
did'nt do well on this one! Took me long enough :( . I did'nt understood how to place that illustration box above that card so I used positioning idea and when clicking on questions padding is getting added on both sides but I wanted it to go down. Mobile version is working fine.
@NizarMjrPosted about 2 years agoGood job @Ritech If you want to prevent the increase of height just give the card a fixed height and add : box-sizing:border-box;
0 - @giorgianvatraSubmitted about 2 years ago
I a more than opened for feedback.
Thank you :)
@NizarMjrPosted about 2 years agoHi @Vatra , Your Project Could not access to the css file this is the correct link : <link rel="stylesheet" href="style.css"> and this the correct url for the background : background: url("images/image-product-desktop.jpg"); correct them and your project will work correctly Happy Coding
2 - @usmanahmedkhan09Submitted about 2 years ago
kindly please check this design and provide me feedback so I can improve myself more
@NizarMjrPosted about 2 years agoNice work @Usman especially in the design part You just need to focus on the Javascript part to make your project more dynamic and to reach the required target Happy Coding
Marked as helpful0 - @HarmoniaCodesSubmitted about 2 years ago
I'm definitely seeing the importance of referencing figma files for this challenge! Without them, I had to do a lot of guesswork on font sizes and styling.
Questions:
-
I had difficulty using images in React unless they were in the src folder.
-
What are best practices for importing images?
-
What if the image URIs are called through an array/JSON? How can I prevent the URI displaying only as a string?
@NizarMjrPosted about 2 years agoNice work @Nick -You could import image with the keyword import from it's directory for example import IMG1 from './../../images/image1' and you pass {IMG} in src -If you have array of images in json file you could pass through them by map() method
0 -
- @chrisvn188Submitted about 2 years ago
Hi everyone, I'm so happy to share my solution for this challenge.
In this project I used ReactJs for building User Interface , TailwindCss for styling and Google Map Api for displaying Map for each country.
Although using TailwindCss to style is super fast but I find the code hard to read.
I used Google Map Api for the first time to add an additional map for each country. I think I can do some fun stuff with it. ( I deleted this feature due to the fact that it costs a lot of money)
I transform border countries to have more interesting look.
I want to make this project become one of my main portfolio projects. Can you guys suggest any functionalities to this project? I really appreciate that.
If you find any bugs or any suggestions, please let me know. Thank you for your valuable time and happy coding!
@NizarMjrPosted about 2 years agoGood job #Chris I liked what you have done There is necessary thing you need to add to improve more you project : -Acces and get the details of country from the borders with this point you could make your project more wide and more accessible
Good luck and Happy Coding
Marked as helpful1 - @edukakiSubmitted about 2 years ago
I runway a little bit out of the scope but I'm satisfied with the result. Do you have any recommendation?
@NizarMjrPosted about 2 years agoGood initiative #Eduardo , i liked what you have done But i have a recommendation to improve your project that you need a button to return back to your main page after routing
0
