aftab-pathan / aftab-texteditor-master Goto Github PK

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Text Editor

• Download dependencies by running npm install
• Start up the app using npm start

The app must have the following functionalities

• Initially, #f1f5f9 color is applied to all the three bold icon, italic icon, underline icon buttons

• When the bold icon button is clicked,

  • It will change to an active state by applying the #faff00 color
  • The bold font-weight is applied to the text in the HTML textarea element
  • If the bold icon button is already in the active state,
    • The respective button should be inactive by applying #f1f5f9 color
    • The normal font-weight is applied to the text in the HTML textarea element

• When the italic icon button is clicked,

  • It will change to an active state by applying the #faff00 color
  • The italic font-style is applied to the text in the HTML textarea element
  • If the italic icon button is already in the active state,
    • The respective button should be inactive by applying #f1f5f9 color
    • The normal font-style is applied to the text in the HTML textarea element

• When the underline icon button is clicked,

  • It will change to an active state by applying the #faff00 color
  • The underline text-decoration is applied to the text in the HTML textarea element
  • If the underline icon button is already in the active state,
    • The respective button should be inactive by applying #f1f5f9 color
    • The normal text-decoration is applied to the text in the HTML textarea element

• More than one button can be active at a time and more than one style can be applied to the text in the HTML textarea element

The following instructions are required for the tests to pass

• VscBold, GoItalic and AiOutlineUnderline icons from react-icons should be used for bold, italic and underline buttons respectively
• Wrap the VscBold component with an HTML button element and add the data-testid attribute value as bold
• Wrap the GoItalic component with an HTML button element and add the data-testid attribute value as italic
• Wrap the AiOutlineUnderline component with an HTML button element and add the data-testid attribute value as underline

Example:

<Button data-testid="bold">
  <VscBold size={25} />
</Button>

• Use styled-components for styling elements

• https://assets.ccbp.in/frontend/react-js/text-editor-img.png alt should be text editor

• Roboto