Interactive Rating Card Component Using Angular and SCSS

Community feedback

• 

  P

  Christopher Adolphe•600

  @christopher-adolphePosted over 2 years ago

  Hi @athirasarman,

  You did a nice job in completing this challenge with Angular. Below are a few things I have noticed and you might want to check in order to improve your solution.

  • When I look at the design of the rating component, I see a form with radio buttons for the different rating values and a submit button. However, the markup of your HowDidWeDoComponent component is using <div> elements etc. While this is actually working, I would strongly recommend you to build your components with elements that are meant for the purpose. Something like this:

  <form class="form">
    <div class="form__group">
      <label class="form__label for="rating-1">
        <input id="rating-1" type="radio" class="form__input" value="1" name="rating" />
      </label>
  
      <label class="form__label for="rating-2">
        <input id="rating-2" type="radio" class="form__input" value="2" name="rating" />
      </label>
    </div>
    <button type="submit" class="form__btn">Submit</button>
  </form>
  

  This would be much better in terms of semantics and would be a good opportunity for you to try either a template-driven or reactive form approach with Angular.

  • At the moment if a user enters a route that doesn't exist, he gets a blank page. It is a good practice to set up a route to handle such situation. You could do so by setting up wildcard route like this:

  app-routing.module.ts (excerpt):

  const routes: Routes = [
    {
      path: '',
      component: HowDidWeDoComponent
    },
    {
      path: 'thankyou',
      component: ThankYouComponent
    },
    {
      path: '**',
      component: HowDidWeDoComponent
    }
  ];
  

  I hope this helps.

  Keep it up.

  Marked as helpful

  1

  ---

  

  Athira•130

  @athirasarmanPosted over 2 years ago

  @christopher-adolphe Sure. Thanks!

  0

  

  P

  Christopher Adolphe•600

  @christopher-adolphePosted over 2 years ago

  Hi @athirasarman,

  I'm happy to help.

  Best regards.

  0