Skip to content
OverviewSolutions
3
Comments
15
Mason Boomgaard
@MasonBoom

All comments

  • Mason Boomgaard•180
    @MasonBoomPosted about 2 years ago

    Hi danny!

    for input::focus, you may still have to redefine the border radius like you did for input. Sure it may be repetitive, but that's the only way I know how to prevent square corners

    For the form validation part, all I did was create an if statement that checks if all of the field's requirements are met and throw an alert if not

    Hope this helps!

    0
  • Mason Boomgaard•180
    @MasonBoomPosted about 2 years ago

    Hi Mamadou!

    The only thing I noticed is that the buttons are not perfectly round. To fix this you could define a specific width and height for the buttons (for example width: 50px; height: 50px;) and set border radius to 50%

    Marked as helpful
    0
  • Mason Boomgaard•180
    @MasonBoomPosted about 2 years ago

    Hello,

    This is a very well done project and meets all of the requirements. However, I would recommend changing the font to the one in the template.

    The font in the template is called 'overpass', and is a custom font so it must be installed from google fonts.

    From there, you can use this guide that shows you how to add that font to your project: https://reactgo.com/add-fonts-to-react-app/

    Hope this helps!

    Marked as helpful
    1
  • Mason Boomgaard•180
    @MasonBoomPosted about 2 years ago

    Hello,

    Although this is a very well done project, there is always room for improvement.

    I noticed that the only required fields are the exp.date and the cvc. shouldn't all areas be required?

    Also, I noticed I was able to add letters in the card number, cvc, and exp.date. You can fix this by adding the following code to those input tags in the html file: type="tel" inputmode="numeric" pattern="[0-9]*"

    This next part is optional, but you can also format the credit card number so it automatically adds a space every 4 digits by using this function:

    const cardNumberFormat = (number) => { return number.replace(/(\d{4})/g, '$1 ').trim() }

    Hope this helps!

    0
  • Mason Boomgaard•180
    @MasonBoomPosted about 2 years ago

    Hey, good job on the project but there is just one thing I wanted to point out is that on desktop, the rating component floats pretty close to the top of the screen when it should be in the center. i see that you did margin: auto; in your css but sometimes auto doesn't do the vertical margins correctly. Try something like margin: 30vh auto (vh units are based on screen size)

    Marked as helpful
    1
  • Xiang•210
    @000xzhouSubmitted about 2 years ago

    I clean up the github area a bit. The main branch is just basic html/css/jquery The side branch is adding server stuff (currently unfinish)

    Interactive Card Form

    1
    Mason Boomgaard•180
    @MasonBoomPosted about 2 years ago

    Hi Xiang! I think these challenges are for users on this site to practice their front end skills. doing a backend (like express.js) isn't really necessary for these challenges.

    0
  • Isaac Saettel•100
    @INS140Submitted about 2 years ago

    This is my first challenge that includes JS. I am still rather new to writing JS code, but I do feel like I have a decent solution. If you have any comments on how I could improve my JS code or general advice that would very appreciated!

    Flexbox, W3schools

    2
    Mason Boomgaard•180
    @MasonBoomPosted about 2 years ago

    Hi Issac,

    Your web application looks great and functions perfectly, but I did notice that there was some code that was a bit repetitive. In the future, I would implement the use of a for loop or a forEach function.

    Here is an example of what I did to reset my rating button classes when one of the buttons is clicked:

    const toggleButton = index => { const buttons = document.getElementsByClassName('button'); for (let i = 0; i < buttons.length; i++) { buttons[i].classList.remove('active'); } buttons[index].classList.add('active'); setRating(index + 1); }

    the setRating function there is a function that I used to update my rating, but what this function is doing is finding all of my buttons (1-5) and removing the 'active' class and setting the one I clicked on to active.

    You can also set multiple variables to the same value with one line, so instead of this,

    let rating = 0 let rating1 = false let rating2 = false let rating3 = false let rating4 = false let rating5 = false let ratingSelected = false

    you can do this instead and it does the same thing:

    let rating, rating1 rating2, rating3, rating4, rating5, ratingSelected = false

    I think you'll eventually get better at writing more efficient javascript code with practice, keep up the good work :)

    0
  • FT•120
    @nocturiineSubmitted about 2 years ago

    • Which elements in the component(s) am I off on?

      • Was the width of the form too wide or narrow?
      • Was the background color incorrect?
      • etc...

    • How could I have better organized my "Rating.tsx" component? I bundled a lot of code in there, and it does look a bit cluttered. Any suggestions are welcomed.

    • Anyone working with Astro know how to reset the form on refresh?

      • After submitting the rating, the same rating that I selected stays selected when I refresh the page
      • The form only resets when I exit the site and open it up again
      • I'm not sure if this is just me, or if testers will experience this too.

    • I wasn't able to test this challenge with a screen reader, so it'd be nice if someone with an accessible tool to let me know if this project is accessible-approved

    • Any other feedback I might not have addressed is welcomed!

    Interactive Rating Component Challenge

    1
    Mason Boomgaard•180
    @MasonBoomPosted about 2 years ago

    Hi,

    A lot of the technologies you used are not ones I am familiar with but I did notice that the background color of the whole page renders as white. you can solve this issue by making a css file and adding the following code:

    html { background: #131518; }

    1
  • Simone Roveri•30
    @Roveri91Submitted about 2 years ago

    I founded difficult all the js part; as i don`t have a lot of coding experience i was usure about if was the right way to code.

    Interactive rating component

    1
    Mason Boomgaard•180
    @MasonBoomPosted about 2 years ago

    Hi Simone!

    your project seems to function perfectly as intended. however, I can't actually view your code because the github link you provided is for your product review card component and not for this challenge.

    also, <img> tags should always have an alt attribute in case an image fails to load on a user's browser. The purpose of alt is to describe an image if the user can't see it

    for example, you could do<img src="images/icon-star.svg" alt="small star image">

    I also noticed that the rating buttons on your page were oval shaped instead of round. you can correct this by doing the following styles:

    width: 50px height: 50px border-radius: 50%

    Marked as helpful
    0
  • Mason Boomgaard•180
    @MasonBoomPosted about 2 years ago

    Hi,

    I reviewed your project, and I noticed that when I hit the continue button after filling out the form, I never get the "thank you" confirmation screen that confirms that the form was submitted.

    I tried to review your code to see if I could figure out why, but when I click on the "view code" link, i get a 404 error

    0
  • Mason Boomgaard•180
    @MasonBoomPosted about 2 years ago

    Hello,

    Although this project is very well done, I believe that there is always room for improvement.

    I noticed that I was able to select more than one rating button at a time. A way to solve this issue is to loop through each of the buttons and have all of them change back to their original state before changing the desired button to orange. Here is the function that I used (I used React.js in my project)

    const toggleButton = index => { const buttons = document.getElementsByClassName('button'); for (let i = 0; i < buttons.length; i++) { buttons[i].classList.remove('active'); } buttons[index].classList.add('active'); setRating(index + 1); }

    and then from here you could do something like this:

    rating_number[i].addEventListener("click",(i)=>{ toggleButton(i) })

    0
  • Mason Boomgaard•180
    @MasonBoomPosted about 2 years ago

    Hello,

    I decided to take a look at your project. Although it is very well done, there is a little bit of room for improvement.

    The maximum character limit works, but there is nothing set up for minimum character limits. you could solve this problem by doing something like this: if(name ==="" || cvc.length < 3 || mm.length < 2 || yy.length < 2 || cardNumber < 16 { alert('invalid inputs') } else { // insert handle submit logic here } I also noticed that in the cvc, exp dates and card number inputs, it allows me to type letter characters. this problem can be solved by adding these parameters in your input tags:

    inputmode="numeric" pattern="[0-9]*"

    the mobile responsiveness needs some work too (particularly between widths 700px and 1000px)

    Marked as helpful
    1