P
@felix-stuffSubmitted 2 months ago
P
Mina Makhlouf
@MinamakhloufAll comments
- @codercreativeSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I'm happy with how user-friendly and visually appealing the app turned out. One thing I noticed is that the Figma design did not include a reset button, which is a feature I could consider adding later to enhance usability.
What challenges did you encounter, and how did you overcome them?Coding the password strength level in JavaScript was a bit of a challenge and so was styling the checkboxes in CSS.
What specific areas of your project would you like help with?I’m open to any helpful feedback, particularly in areas like improving my JavaScript logic or optimizing the code for better performance.
P@MinamakhloufPosted 24 days agoThis project was very well done. I liked how the output changes on each change of the slider and checkboxes as well as how it shows error messages right when they happen on the output field.
I found styling the slider especially difficult but how I dealt with this was making a custom slider that was designed with just <div> elements and I put it on top of the original slider <input> component and using JavaScript to move them at the same time.
Marked as helpful0 - @Tasin269Submitted 3 months agoP@MinamakhloufPosted 3 months ago
In terms of functionality this does exactly what it needs to do. The only improvement you could make is to adjust the size to be more congruent with the design.
0 - P@gianmromeroSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
Stopped being redudant in CSS. I will improve my knowledge in BEM methodology.
What challenges did you encounter, and how did you overcome them?I figured out my redudant code. I readed the documentation of BEM and implemented better.
What specific areas of your project would you like help with?Responsiveness and Vanilla JS because I think I don't understand them too well.
- @ansarstellarSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
I am finally starting to understand DOM manipulation.
What challenges did you encounter, and how did you overcome them?I am still using chatgpt to explain some things. The real challange for me is when I work on responsiveness, and change the layout of the containers, everything starts to crash.
What specific areas of your project would you like help with?Responsiveness.
P@MinamakhloufPosted 3 months agoThis looks awesome and performs exactly as it should
However, to make it look exactly like the design you have to turn off browser validation so that you can validate the message through JavaScript and put the error message and the error class on the input if it fails to meet your specifications (e.g. contains an "@" sign)
To do that, you have to set noValidate on the <form> element and give it an onSubmit event. Afterwards, you have to prevent the default and use if checks to see the user made a mistake or not.
0 - @sebamarquesSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I liked the part of javascript, its ugly but it works and iḿ going to get better at it,naming the classes was a headache also, next time im also going to work on that, i tried to use BEM but at some point i got bored trying to name more classes, if you have a tip with that i would gladly read it
What challenges did you encounter, and how did you overcome them?the most hard part of this excercise was doing the "floating" part when you press the share button, in the future i will change how it looks but for today i just want to upload this excercise and get some feedback from my partners
P@MinamakhloufPosted 3 months agoI tried to view your code but the page gave me a 404 error. Did you remove the repository?
0 - P@MartynaGitSubmitted 3 months agoWhat specific areas of your project would you like help with?
a lot of problems with the desktop, I didn't know whether I should arrange the footer in a grid or flexbox. I need to work on cleaner code
P@MinamakhloufPosted 3 months agoThis site looks awesome, the only things I would change are the following
- The margin at the top of the desktop version
- The background colors don't match
- The circle with the 01 isn't aligned in the same place as the design.
Aside from these very minor things it looks awesome. Great job.
Marked as helpful0 - @DaniCoppermindSubmitted 4 months agoP@MinamakhloufPosted 3 months ago
This looks awesome but just a few tweaks you can make to this
- The grid container's max width is 1110px and it sits in the middle of the screen so give the grid container a max-width of 1110px and give it a margin of 0 auto
- The testimonial with the purple background has a background image with quotations inside of it. You can set this by giving that testimonial a position of relative and the image a property of absolute and adjust its z-index accordingly so it sits behind the text wall.
Aside from that, it looks fantastic.
1 - @kiishi-codeSubmitted 3 months agoP@MinamakhloufPosted 3 months ago
I think that might have uploaded the wrong file to this challenge. Your page is about a secondary school whereas the challenge was to build a 4 card feature section.
0 - P@MateoyySubmitted 3 months agoWhat challenges did you encounter, and how did you overcome them?
Nie do końca wiedziałem jak zrobić border-radius aby działa na całą kartę. Overflow: hidden nie diałało na Hero-img przez co rogi były ostre.
Więc postanowiłem wykorzystać border-radius tylko na górne wierzchołki hero-img
P@MinamakhloufPosted 3 months agoThis looks amazingly close to the design. The only flaws that I can see is that the line height applied to the headings does not match that of the design. If you adjust your headings it will be perfect.
1 - @mozammilkarimSubmitted about 2 years agoP@MinamakhloufPosted about 2 years ago
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 -
- @catherineisonlineSubmitted about 2 years agoP@MinamakhloufPosted about 2 years ago
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 - @FernandoGmz2001Submitted about 2 years agoP@MinamakhloufPosted about 2 years ago
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 - @NitinChaudhary007Submitted over 2 years agoP@MinamakhloufPosted over 2 years ago
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 - P@miguelzagaSubmitted over 2 years agoP@MinamakhloufPosted over 2 years ago
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 helpful1 - @mateusbelicioSubmitted over 2 years agoP@MinamakhloufPosted over 2 years ago
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 - @AttramsSubmitted over 2 years agoP@MinamakhloufPosted over 2 years ago
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 - @AdrianoEscaraboteSubmitted over 2 years agoP@MinamakhloufPosted over 2 years ago
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 helpful1
