Frontend Mentor | Jason Merrell's profile

All comments

@MileenkaSubmitted over 1 year ago

Hello everyone,

I invite you to look at my solution to this challenge. All constructive criticism is welcome :) Thanks to that I can learn from my mistakes :)

Have a nice day :)

Interactive rating component

Jason Merrell•30

@jason-merrellPosted over 1 year ago

You might consider setting up the rating component with an actual form element. This is a little bit more of a pain to set up on the front end, but offers much more upside in the flexibility of how you deal with the inputs -- both in CSS and JS.

<form id="ratingForm" method="post">
    <div class="circle-wrapper">
        <img src="images/star.svg" class="star-icon" alt="star icon" />
    </div>
    <h1>How did we do?</h1>
    <p class="rating-p">Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering!</p>
    <div class="d-flex justify-space-between radio-inputs" role="radiogroup">
        <label class="rating-label">
            <input type="radio" name="rating" class="rating-radio" value="1"/>
            <div class="circle-wrapper">
                <p>1</p>
            </div>
        </label>
        <label class="rating-label">
            <input type="radio" name="rating" class="rating-radio" value="2"/>
            <div class="circle-wrapper">
                <p>2</p>
            </div>
        </label>
        <label class="rating-label">
            <input type="radio" name="rating" class="rating-radio" value="3"/>
            <div class="circle-wrapper">
                <p>3</p>
            </div>
        </label>
        <label class="rating-label">
            <input type="radio" name="rating" class="rating-radio" value="4"/>
            <div class="circle-wrapper">
                <p>4</p>
            </div>
        </label>
        <label class="rating-label">
            <input type="radio" name="rating" class="rating-radio" value="5"/>
            <div class="circle-wrapper">
                <p>5</p>
            </div>
        </label>
    </div>
    <button type="submit" class="button" id="submitBtn">Submit</button>
</form>

The native radio input elements can't be customized to the degree the design calls for, but with a little trickery, we can add custom design elements with a hidden radio input as a sibling. We typically do the same thing with other custom designed input elements that have stubborn native limitations, like a checkbox or file upload input.

It might seem trivial with a form that only has one input value, but it wouldn't be a stretch for the customer to come back and add onto it -- like with a text area input. It also makes the JavaScript easier, letting you take advantage of some native classes that are meant to make form handling more streamlined, like the FormData class.

You can see more about this implementation with my submission here

oo2smh•100

@oo2smhSubmitted over 1 year ago

Difficulty I had a hard time with Javascript this challenge. I didn't know how to hook it to HTML, what the best practices are for hooking it and more. I feel like my JS code can be cleaner. I need to get more comfortable wit Javascript

Interactive Component [Tailwind, CSS, JS]

Jason Merrell•30

@jason-merrellPosted over 1 year ago

Whenever you want to grab input from a user, you want to make sure to use the form element. I know it seems like more complexity in the HTML you have to build, but you get upside in JavaScript when it comes to getting those values when they go to submit -- particularly with the native FormData() class. It's designed to easily grab all of the input values on the form and you can use the .entries() method to generate an object with key/value pairs.

Here's the event listener I have on my submit button:

const handleFormSubmit = async (e) => {
    e.preventDefault();
    const form = e.target.closest('form');
    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());
    console.log(data);
    // const response = await fetch('/api/submit', {
    //     method: 'POST',
    //     headers: {
    //         'Content-Type': 'application/json'
    //     },
    //     body: JSON.stringify(data),
    // });
    // const result = await response.json();
    // console.log(result);
    // if (result.success) {
    //     alert('Thank you for your submission!');
    //     form.reset();
    // } else {
    //     alert('Something went wrong, please try again later.');
    // }
    handleFormResults(data);
    handleFormAnimation(form, document.querySelector('.rating-complete'));
}

When I ran console.log(data), the result is {rating: VALUE}, where VALUE would be whatever radio option was selected in the form.

The challenge didn't call for us to actually do anything with the data, but I commented out an example of what it could look like.

Here's my solution for reference

Marked as helpful