Skip to content

tutorial.md

Latest commit

 

History

History
165 lines (111 loc) · 4.07 KB

tutorial.md

File metadata and controls

165 lines (111 loc) · 4.07 KB

Table of Contents

ProductRating

The Rating component consists of 5 stars. Each star is represented by a div element.

  • This documentation is generated by running the following command: documentation build StarRating.js -f md -o readme.md

  • When an div.star is clicked, the selected class should be added to that element and all divs before it. Also, the selected class should be removed from all div elements after it, if there are any. When a div element is clicked, the selected class should be added to that div element and to all div elements before it. Also, the selected class should be removed from all div elements after it, if there are any.

  • Read more about this component check out moonhighway and learn how to create a class-based star component over at scotch.

  • The component should render to this HTML code:

Examples

<div class="star-rating">
<div class="star selected"></div>
<div class="star selected"></div>
<div class="star selected"></div>
<div class="star"></div>
<div class="star"></div>
<p>3 of 5 stars</p>
</div>

Components

RenderedComponent

  • This component will map over the Star Component and increment the key value.

Examples

<StarRating totalStars={5} />
<StarRating>
<Star key=1 className="star selected">
<Star key=2 className="star selected">
<Star key=3 className="star selected">
<Star key=4 className="star">
<Star key=5 className="star">
<StarRating/>

StarComponent

This function exists to be iter

Parameters

  • selected boolean default value is false. - changes the className property from .star to .star.selected
  • onClick function The callback that handles the click event.

Examples

<Star
key={currentStar}                           // #2
selected={currentStar < starsSelected}      // #3
onClick={() => selectStar(currentStar + 1)} // #4
/>

StarRating

StarRating

  • This component will map over the Star Component and increment the key value.
  • #1 we set the initial state to 0 and it will increment up to the value of totalStars.
  • #2
  • #3 n=currentValue, currentStar=index
  • #4 key is incremented by the value of the index variable, currentStar
  • #5 selected is determined to be true or false if the currentStar is greater than starsSelected
  • #6

Parameters

  • $0 Object
    • $0.totalStars
  • starsSelected Number The current state.
  • selectStar Function A setter function to set the state.
  • totalStars Number This number is our "iterator".

Examples

<StarRating totalStars={5} />

useState

: This component is used as a simple demonstration of a youTube subscribe button with useState and SVG.

btnActiveStyle

JSS - JavaScript CSS

subscribedIcon