Skip to content
OverviewSolutions
6
Comments
14
Nawfel Sekrafi
@nawfelsekrafi

All comments

  • Aneta•180
    @anetaanetteSubmitted over 2 years ago

    Heyyy It's been a long time. This is my first project here with JavaScript that I actually completed! Please let me know if there is anything to improve. Thanks in advance! A.

    Pricing Component

    1
    Nawfel Sekrafi•255
    @nawfelsekrafiPosted over 2 years ago

    Congrats @anetaanette 🎉 for completing the challenge 🥇😊..

    Overall almost every thing looks perfect.. colors, fonts, positioning, font-sizes etc..

    • I would just suggest to more focus on responsiveness.. (I think you know that, you can use browser dev tools to test) ..
    • For accessibility issues you could track them, fix them and learn from them .. and btw I's not a problem to make this kind of issues, even me every day I lean some new ones 😅.. Happy coding 🥰
    Marked as helpful
    0
  • Nawfel Sekrafi•255
    @nawfelsekrafiPosted over 2 years ago

    Great @siafromspace 😊🎉..

    Responsiveness is solid, the flow is smooth.. in addition to small details like delete items color change on hover ♥ etc.. just one small note.. you can set overflow-x: hidden on big screens to avoid some unwanted horizontal scrolling. That's all . btw your solution is visually more beautiful that the design , at least in my opinion..😅 Happy coding and looking forward for you new creations 😉

    Marked as helpful
    1
  • imhalid•140
    @imhalidSubmitted over 2 years ago

    It didn't bother me to design, I had a little difficulty working with inputs.

    Unfortunately, I couldn't write the calculation function, I would be very happy if someone could help.

    And I would be very happy if you advise in general.

    Responsive tip calculator

    1
    Nawfel Sekrafi•255
    @nawfelsekrafiPosted over 2 years ago

    Congrats 🎉⭐ In terms of UI You did a great job @imhalid.. Also you have successfully implemented the 0 use case prevent feature, I also noticed that you used Vercel to deploy your app.. never mind about the mathematical function .. it's not a big deal. I hope you the best and continues success . here is my repo .. you can take a look on the formula so you can perfect your task.. 😊 https://github.com/nawfelsekrafi/Tip-calculator-app

    1
  • Nawfel Sekrafi•255
    @nawfelsekrafiPosted over 2 years ago

    Great ! keep it up 🔥, this one of the hard projects so congrats.. just you can improve you solution a little bit:

    • I think you missed the background color for the counter it will be nice if you add it ..
    • the cart needs to have a box shadow or something like that..
    • In your Github repo, I think it's nice to edit the Readme file so it gives a quick idea about the project.
    • the 50% have border radius 👌.

    Good luck & Happy coding😊

    0
  • Nawfel Sekrafi•255
    @nawfelsekrafiPosted almost 3 years ago

    I think this solution looks great, well done! just I wanna mention that you can remove arrows from inputs like this : /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    /* Firefox */ input[type=number] { -moz-appearance: textfield; } That's all from me. Well done again

    Marked as helpful
    0
  • Nawfel Sekrafi•255
    @nawfelsekrafiPosted almost 3 years ago

    Hi @francois-demory , I think this solution (js & hover events and design ❤)looks great, well done!, Only a one small improvement to suggest:

    • try to use a media query in mobile view and change main width to 100vw or 90vw. @media screen and (max-width: 780px){ .main__container { width: 90vw; }

    That's all from me. Well done again

    0
  • Nawfel Sekrafi•255
    @nawfelsekrafiPosted almost 3 years ago

    I think this solution looks great, well done!

    Only a few small improvements to suggest

    • when you want to use empty links try to set the href to # : <a href="#">
    • you can import google font like this : 1st in your css file add : @import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap'); 2nd in your body selector in css file add : font-family: 'Kumbh Sans', sans-serif;
    • try to read more about javaScript DOM selectors & DOM manipulation
    • in your readme try to use the readme template : read about .md syntax : it's similar to html .
    • the js file in your git repository is empty .. maybe you forgot to make a commit .. check that.

    That's all from me. Well done again & good luck

    Marked as helpful
    0
  • Nawfel Sekrafi•255
    @nawfelsekrafiPosted almost 3 years ago

    Hi @Matheus2004a, I hope you are doing well 😊. you work is almost great.. You can fix the the tip button by the following:

    • buttonsPercentTip.forEach(valueTip => { valueTip.addEventListener("click", () => { buttonsPercentTip.forEach(x => x.classList.romove("check-tip");)// add this valueTip.classList.add("check-tip") resultTip = +moneyPerson.value * +valueTip.value / 100 }) })
    • for the formula try more to find out how it works. keep up the great work and good luck.
    0
  • Nawfel Sekrafi•255
    @nawfelsekrafiPosted almost 3 years ago

    Perfect ✨❤ keep up the great work !

    0
  • Nawfel Sekrafi•255
    @nawfelsekrafiPosted almost 3 years ago

    أهلا زينب. أرجو أن تكون في أحسن حال😊 نعم فعلتها !.. التصميم ككل مقبول وبعض الاخطاء الصغيرة لن تفسد أبدا مقدار الجهد المبذول في الواجهة..الا انه لا بأس ببعض التحسينات الصغيرة : -you could use flexbox or float right+display:inline-block or even grid with " can't be zero " title. -tip buttons in focus state, you know that their color should be persist ,so you can achieve that with js in the function of the event listener by adding a new class to the element that contains the correct color and remove it from the other buttons, search by this : element.classList.add/remove. This is a Junior challenge so it's a transformative for you from just html/css to the js world, so no problem to make mistakes just remember that : practice make perfect ❤✨ good luck and best wishes!

    Marked as helpful
    0
  • Nawfel Sekrafi•255
    @nawfelsekrafiPosted almost 3 years ago

    Hi @TheoSt, I hope you are doing well 😊. I liked how you make the architecture of the html + meaningful div names.. and your code is almost perfect! .. I just wanna mention that you can improve it, Like :

    • the tips font need to be fixed 😶, Custom placeholder can be aligned in the center , custom input should have exact size as the other buttons, and reset button should have more margin-top : you can use the developer tools in your favorite browser to fix that. Good luck & keep up the great work 🖐and remember : practice make perfect✔✨
    1
  • Nawfel Sekrafi•255
    @nawfelsekrafiPosted almost 3 years ago

    Hi @joshsutheran , I hope you doing well 😊. Your work is almost perfect, just pay attention to the colors (use strong-cyan && hover effects ) . Js is working fine 👏😁, I'm not an expert so I can't give advices related to js but it looks fine . I hope this was Helpful. Good luck & best wishes.

    0