Skip to content
OverviewSolutions
14
Comments
2
P
Filip Stojkov
@thentrsfs

All comments

  • Darkstar•1,100
    @DarkstarXDDSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    Built with. 🔨

    • HTML & CSS.
    • JavaScript.
    • Vite.

    Features. ✨

    • Display a custom error message if a rating is not selected when submitting.

    New Things Learned. 🎓

    • Custom styling radio buttons.
    • attr() CSS function - Used to retrieve the value of an attribute of the selected element and use it in the stylesheet. - MDN
    • Next-sibling combinator (+) - Matches the second element only if it immediately follows the first element. - MDN
    What challenges did you encounter, and how did you overcome them?

    • The main problem was how to make the radio buttons look like the design. After searching and playing around for sometime I had two methods.

      • Method 1: Visually-hide the radio button and style the label to look like the radio button. Based on the radio button's focused or checked state, the label can be styled.

        .radio-button:focus-visible + .radio-label {
  outline: 0.125rem dotted var(--clr-primary-400);
  outline-offset: 0.125rem;
}

.radio-button:checked + .radio-label {
  color: var(--clr-primary-600);
  background-color: var(--clr-primary-400);
}

      • Method 2: Visually-hide the label and style the radio button to get the desired look. With this approach I had to use an absolutely positioned pseudo element to display the number in the middle of each radio button.

        .radio-button::after {
  content: attr(value);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

    • I ended up using the first method.

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

    Any sort of feedback is appreciated.

    Interactive Rating Component

    1
    Filip Stojkov•350
    @thentrsfsPosted about 2 months ago

    It is very precise, i like it, good job keep it up!

    1
  • Daniel king•240
    @thedanielkingSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I implemented the javascript logic by myself. I would call the class differently and the regular expression test I used.

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

    I didn't know how to link it to the success message at first go. So I watched a youtube content on it, then I went to change it to the way i wanted it to be. Thereby learning more in the process. The video didnt cover the error message aspect but just on how to link to the success message.

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

    I would love to know if there better ways I can implement my Javascript into my code.

    Newsletter-sign-up-success-message

    1
    Filip Stojkov•350
    @thentrsfsPosted 2 months ago

    First of all when u try to type email in input field you just continue to type in what it should be placeholder but you set it to value, you should replace value="[email protected]" in input with placeholder="[email protected]" and you should set value for input in index.js to be variable that will update on submit button, try to figure this out. Good luck !

    0