Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • @mukisapaulk

    Submitted

    What are you most proud of, and what would you do differently next time?

    the grid system, the first time it failed but on the second try i figured it out. and i really enjoyed this challenge though things didn't come out the way i wanted but it was really a nice experience

    What challenges did you encounter, and how did you overcome them?

    i got a challenge working out the responsiveness on medium screens i think i failed on that but i will improve that in the near future and also the centering of the grid i don't know why margin: 0 auto; refused to its magic the way i wanted it to appear

    What specific areas of your project would you like help with?

    putting my grid in the middle of the page. if any one can look at my code and tell me why it is not put in the middle the way i want.

    MaelkMarkβ€’ 150

    @MaelkMark

    Posted

    Nice solution!

    The grid itself is centered horizontally, it just has an extra unnecessary empty column. Modify the grid-template-columns to repeat 1fr 4 times instead of 5: grid-template-columns: repeat(4, 1fr)

    (Please upvote if this helps)

    0
  • P
    Arcloanβ€’ 280

    @Arcloan

    Submitted

    What are you most proud of, and what would you do differently next time?

    I managed to complete the task.

    What challenges did you encounter, and how did you overcome them?

    The buttons to select the tip required a little more of thought to fully function within the tip calculator.

    What specific areas of your project would you like help with?

    I dont't know how well I managed the buttons for selecting the tip and the total working of the tip calculator. Any suggestions are really appreacited :) Thank you

    MaelkMarkβ€’ 150

    @MaelkMark

    Posted

    Nice solution, good job!

    For the tip amount buttons you can use input type radios instead of checkboxes, because then you don't have to uncheck them manually from js. Just replace checkboxes with <input type="radio" name="tip" value="5">. You must give them an identical name for the automatic unchecking to work. You can also give them a value (eg. the amount) and then you can get the tip amount with this line of code in js: document.querySelector(".button > input[type='radio']:checked").value. This line will return the given value of the checked radio button.

    Hope this helps (and please upvote)

    Marked as helpful

    1
  • MaelkMarkβ€’ 150

    @MaelkMark

    Posted

    The radio buttons don't get skipped, you just can't see the outline because you've set their outline to transparent. If you remove that declaration, the styling won't change and you'll see the outline on focus. Or if you want the whole label to have a focus, keep the outline style for the input and declare a new rule: label:has(input[type="radio"]):focus and put the focus styling there.

    (Also, you can toggle between the two radio buttons by pressing the up/down arrow keys)

    Anyway, nice solution :)

    Marked as helpful

    1
  • Adarshβ€’ 1,640

    @adram3l3ch

    Submitted

    Hi all, This is my solution to the multi step form challenge, I made the solution more as a reusable multi step form template which can handle as many steps and validation not just the steps in the challenge. Any feedback will be appreciated :)

    MaelkMarkβ€’ 150

    @MaelkMark

    Posted

    Cool!

    I've solved this challange too (thanks for the like) and I wanted the sidebar to be interactive (just like yours) so the user can jump between steps. But then I realized that then the user can skip some steps (like addons) and if this was a real subscription form, we wouldn't want that because we want the user to pay more. I think you should correct the form so that the user can jump only if he/she has completed the previous steps (clicked next).

    And just one more tip for future projects maybe, if you want to create a sidebar like this, the easiest way is to add input type radios with the same name inside all .step containers with a unique value (<input type="radio" name="step" value="1">), and style like

    .step > input[type="radio"] {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      appearance: none;
    }
    

    Appearance none will hide the radio button, so nothing will change apparently but if you click on one step, the radio buttons will be checked secretly and the others will be unchecked automatically (because of the identical name). Also you have to give .step a position: relative for the positioning to work properly.

    Then you can get which step is active from js with document.querySelector(.step > input[type="radio"]:checked).value, and it'll return the checked radio button's value.

    Or you can display steps from only css by adding all the step forms inside .step__component and display only that what is active with this rule:

    body:has(.step > input[type="radio"][value="1"]:checked) .step__component form:not(:nth-child(1)),
    body:has(.step > input[type="radio"][value="2"]:checked) .step__component form:not(:nth-child(2)),
    body:has(.step > input[type="radio"][value="3"]:checked) .step__component form:not(:nth-child(3)),
    body:has(.step > input[type="radio"][value="4"]:checked) .step__component form:not(:nth-child(4)) {
      display: none;
    }
    

    This will work like this: 'If the radio button in .step with the value of 1 is checked then hide all forms inside .step__component which is not the first inside .step__component'.

    1
  • P
    Neilβ€’ 10

    @Neil10241126

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am proud of modularizing the design guideline using CSS variables, making it easy to reference and modify. Next time, I would try using Sass to structure the code, which would make the CSS more concise.

    What challenges did you encounter, and how did you overcome them?

    Initially, I encountered issues with shadow effects. I tried using box-shadow to create the effect, but it didn't feel quite right. Later, I used ::before and ::after elements to handle the shadow effects.

    What specific areas of your project would you like help with?

    In constructing the CSS, I developed with a desktop-first approach and added @media queries whenever mobile-specific properties were needed. I'm not sure if this development process is a good idea, or if integrating all mobile CSS into @media would be easier to understand.

    MaelkMarkβ€’ 150

    @MaelkMark

    Posted

    Looks cool, great job! But you should't use multiple media queries for the same breakpoint. Declare only one and then put all the needed styling inside it. It's important because if you want to change the style of the card later and need a different breakpoint, you'll have to change it everywhere in the code! And using only 1 media query for 1 breakpoint is also much cleaner, easier to maintain and understand for other people and for you too.

    0
  • Rahul Kumarβ€’ 570

    @rahulkumar215

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am glad I got this project done the way I wanted to, as well as to be able to add one feature from myself other than mentioned in the challenge. I was ready to give this project more than A week but I am glad I got it done in less than that.

    I think I need to improve my folder structure and the way that I write styles. I used SCSS in this project but I was mostly writing normal CSS in an SCSS file, so I will work on that.

    What challenges did you encounter, and how did you overcome them?

    Well the biggest challenge for me and for all of us who are gonna take and have taken this challenge is getting that flip animation going. I spent so much time and energy just watching YouTube tutorials and making that flip animation work, however It was worth it in the end.

    What specific areas of your project would you like help with?

    I am really struggling with responsive design with CSS GRID, I would appreciate feedback on that.

    MaelkMarkβ€’ 150

    @MaelkMark

    Posted

    This is cool, you did a great job! But I think you should restrict the hover styling for the buttons to only apply if they're not disabled. Because it's a bit strange and confusing that the cursor is pointer and the buttons get bigger when they're disabled and don't do anything.

    Marked as helpful

    1
  • Derpβ€’ 170

    @DDeerrpp

    Submitted

    What are you most proud of, and what would you do differently next time?

    Finished a project!

    Some things were kind of confusing but understood how custom radio and checkbox inputs work. I would need to plan out more on making these as ordering the boxes around got a little confusing for me, so I could organize better next time.

    Please let me know any feedback you have!πŸ˜—

    MaelkMarkβ€’ 150

    @MaelkMark

    Posted

    You did a great job, I like the custom radio buttons and checkboxes.

    But actually you've forgotten the email validation. You can submit the form even if the email address is invalid.

    You can check the validity from js with inputElement.checkValidity(), returns true / false (this works because the input type is set to email).

    Also, if you want to create real-time feedback to the user, you can use the :valid and :invalid pseudo classes. If interested, you can watch this video by Kevin Powell on youtube.

    0