Syed mozammil karim• 160
@mozammilkarim
Submitted
I found this to be extremely helpful for strengthening my position concepts. Now I feel that I have taken a nice challenge. It took me a while to complete this project.
P
Mina Makhlouf
@Minamakhlouf
All comments
- PMina Makhlouf• 770
@Minamakhlouf
Posted
Hi Syed,
Congratulations on the project.
I just have 2 pieces of advice that worked really well for me and I hope you find them useful as well.
-
You can better match the design by putting a <br> after the word "solution". Then give solution its own span element, give that span a display of inline-block. Then put the curved line image inside the span element. Then give the span element a relative position and give the curved image an absolute position above the word "solution" and a width of 100% so that it is always as big as the word it is above. That way, no matter how large or small the screen gets. The curved image will always be with the word solution in the header.
-
With display grid you can position elements so that they overlap and use z-index on them. It was very useful for me when I was positioning the hero image overlapping the header and it can help when you overlap the footer over the testimonials section.
Hope this feedback was helpful.
Congratulations on the project.
0 -
- 👾 Ekaterine Mitagvaria 👾• 7,640
@catherineisonline
Submitted
Hello, Frontend Mentor community! This is my solution to the Intro section with dropdown navigation.
I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.
You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.
Thank you
PMina Makhlouf• 770@Minamakhlouf
Posted
Hi Ekaterine,
Great project, I just have 2 minor stylistic comments that I think would be helpful.
- When the menu is dropped down, it hugs the navigation menu too tightly. I would advise that you create some small space between the navigation and the menu that is dropped down. You can either do it by increasing the value that it is offsetted from the top or just use transform: translateY() and give it a larger value.
- There also seems to be a scrolling issue. When I view this on Google Chrome, the bottom portion of the website is cut off and there doesn't seem to be a scrolling option to see them. So I can't see the padding at the bottom or the icons. To fix that you might have to look at how you set the overflow property.
Hope you found this feedback helpful.
Aside from that, very well done.
0 - Fernando• 80
@FernandoGmz2001
Submitted
How can I write a cleaner code? Do I use the optimal way?
PMina Makhlouf• 770@Minamakhlouf
Posted
Hi Fernando,
Great job on the design but the point of the project is to change the notification counter based on how many of the posts are unread.
The user should be able to click on a post and change its state from read to unread or from unread to read. There should be a counter that displays how many posts in the comments section are on unread.
To do that, do a forEach() on all of the posts, give them all event listeners and when they are clicked, change their class to read or unread. If a post went from read to unread, add one to the counter. If a post went from unread to read, subtract one from the counter.
Hope this helps.
0 - Nitin Chaudhary• 90
@NitinChaudhary007
Submitted
PMina Makhlouf• 770@Minamakhlouf
Posted
Hey Nitin,
This is a fantastic project and your form validation is excellent but there is a problem that happens when the user presses non-letter buttons in the name input field.
For example, if I click on Shift-M to capitalize the letter M, it will write "ShiftM" on the card itself. You might want to limit the acceptable values to the letters A-Z and also accept spaces.
To do this, I suggest you learn about regular expressions so you can limit what is acceptable. If you just use the keydown Event Listener, it will just accept whatever value the user types on the input field and that can cause problems.
I suggest these resources:
- https://regexr.com/
- https://www.youtube.com/watch?v=rhzKDrUiJVk&t=561s
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
If you're not interested in regular expressions, I at least suggest putting some limitations on the acceptable keydown values
Hope this helps.
0 - Miguel• 570
@miguelzaga
Submitted
What do you think of the email validation?
PMina Makhlouf• 770@Minamakhlouf
Posted
Hi Miguel,
Amazing job on the project
The only flaw in your form validation is that no error message appears if you leave the message section blank.
Hope this helps, but otherwise fantastic job.
Marked as helpful
1 - PMateus Belício• 710
@mateusbelicio
Submitted
👋🏻 Hello everyone. This is my solution for the Intro component with sign-up form challenge.
In this project, I tried to follow the advices given by Vanza (@vanzasetia) in the last challenge I did, in order to make the form more accessible.
Also, I added:
- a loading animation when submitting the form, which is displayed only for a short time before checking if the form is valid to be submitted;
- if the form is filled out correctly, another animation is displayed showing a check on the button;
- at the end of the complete submission, the form fields are automatically cleared.
Feel free to leave your feedback on my solution.
Thanks! 😁
PMina Makhlouf• 770@Minamakhlouf
Posted
Hi Mateus,
Great project, I especially liked the animations that came with the form submission.
The only input I would suggest would be to reposition the exclamation mark error icon on the right hand side so that it doesn't overlap with the writing of the input.
Aside from that, great project, it's one of the best that I've seen.
1 - Attrams• 130
@Attrams
Submitted
Hello everyone, this is my solution to this challenge. Thank You.
PMina Makhlouf• 770@Minamakhlouf
Posted
Hi Attrams,
Great job on the design
The only feedback I would give is that the error messaging that should come with form validation doesn't work as well as it should.
For example, if I click the submit button without typing anything into any of the inputs fields, it won't give me an error message.
What I would recommend is learning about the "submit" event and put that on the form element itself.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event
In addition to that, you should also learn about the regular expressions that go along with the validating something a valid email
https://www.w3resource.com/javascript/form/email-validation.php
Hope this helps.
Aside from that, fantastic job.
0 - Adriano• 33,950
@AdrianoEscarabote
Submitted
👨💻 Hello everyone. This is my solution for the Notifications page.
This was a great project to practice organizing my code using
ES Modules. I was also able to train how to get data from theJSONfile dynamically, that is, if the file is changed and updated with some other notification when the page refreshes we will have another notification!, I still don't know how to make a backend application to send data forJSON, but it would be cool to see it working!I added:
- 👨💻 I used a file to store all the notifications information and according to the file data and the notification type, I made each one inherit a class for each type, for example, the notification that has a message goes receives its own class and the notification that it has a picture next to it, it will receive its own class customized for its type!
Feel free to leave comments on how I can improve my code.
Thanks! 😊
PMina Makhlouf• 770@Minamakhlouf
Posted
Hi Adriano,
Great project, it looks almost exactly like the design and I liked how you used fetch() to get the data, I'd like to get more practice on that myself.
Your "mark all as read" button works fantastic but I can't mark individual posts as read or unread. This is something that would make the project more realistic.
The way I did it was I gave each card an event listener that would give add or a remove a read or unread class. Then it would check how many elements had that class and change the notifications counter accordingly.
Hope this helps.
Aside from that, fantastic project, keep up the good work.
Marked as helpful
1 - Artemii Tatarevich• 140
@morzirolko
Submitted
PMina Makhlouf• 770@Minamakhlouf
Posted
Hi Artemii,
Congratulations on the project.
For form validation, it would be best to wrap the input and the button in a <form> element give the form an event listener that would run your function on a "submit" event. Aside from that, your JavaScript and regular expressions are solid.
Nice project.
Marked as helpful
0 - Kevin• 20
@qwesitanjiro
Submitted
What are your opinions on it?
PMina Makhlouf• 770@Minamakhlouf
Posted
Hi Kevin,
Great design, it is almost perfect.
The only feedback I would group all the text in a singular container that is separate from the image (for easier styling). Then I would increase the padding on the sides and top a little bit. I would also put more margin on the text to separate from each other a little bit. Lastly, I would make the button 100% of the width of the text area.
Aside from that, great work.
0 - Maryam Ali• 220
@Maryamhussein
Submitted
PMina Makhlouf• 770@Minamakhlouf
Posted
Hi Maryam,
I really like your design. The only problem in the desktop view is size, the lack of a background and that it isn't centered.
What I like to do is give the <main> element a min-height of 100vh and also give it a display of flex. That way I can center the section in the middle to look like the example.
Aside from that, if you incorporate the background, I think it'll look a lot better.
Congratulations on the project.
Marked as helpful
0 - Milan• 260
@milanjelic92
Submitted
I have a little problem with overlay but i succeded as i put it in a empty div but i think it can be done in a different way. Feel free to check out my solution and give me some tips...
PMina Makhlouf• 770@Minamakhlouf
Posted
Hi Milan,
Your design is very good but there are a few things you can do to make it better.
-
The card is too small for a Desktop. Something that you can do is increase the padding and the size of the text to make it bigger.
-
The card isn't centered on the page like it is in the example. What you can do is make the <main> element a height of 100vh, give it a display of flex, and then justify-content and align-items center to make the card centered on the page.
Aside from these 2 minor changes, congratulations on the project.
Marked as helpful
0 -
- Adriano• 33,950
@AdrianoEscarabote
Submitted
👨💻 Hello everyone.
This was an excellent challenge to train and improve my knowledge with js! I tried to make my code as clean and readable as possible! If there's anything I can improve on this, I'd love to know!
I added:
- 👨💻 messages if fields are not filled in correctly!
- 🎨 Added a loading animation while the page doesn't load!
Feel free to leave comments on how I can improve my code.
Thanks! 😊
PMina Makhlouf• 770@Minamakhlouf
Posted
Hi Adriano,
Very well designed project
The only feedback I would give is to use a function like .toFixed() which would fix the output to 2 decimal spaces, like how a real bill would look.
Example:
let numberBeforeRounding = 3.141413213123123122132;
let numberAfterRounding = numberBeforeRounding.toFixed(2);
numberAfterRounding;
Output: "3.14"
The only problem with this method is that it gives you the value as a string so you'll have to convert that to number data type with Number();
Hope this helps.
Marked as helpful
3
