narasimhacherry / text-editor

In this project i have created a txt editor were we can write our notes and make them to the styles like Bold, Italic and underline the text present in it

Title

Text-Editor

Objective

The goal of this coding exam is to quickly get you off the ground with Dynamic Styling Using Styled Components.

Tech Stack

Frontend Framework: ReactJS.
State Managemet: Local State.
Routing: React Router.
Styling: CSS.
Backend: Node.

Completion Instructions

● 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

Guidelines to develop a project

● Install Node.js
● Install Git --> to deploy project into Github
● npm install --> to install node modules
● npm start --> to view the result

Submission Instructions

Must Have

List the Instructions to follow while submitting the project mentioned in the Assignment, if any

Nice to Have

List the suggested instructions to follow while submitting the project mentioned in the Assignment, if any

Design files

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

Resources

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

● Colors :

Hex: #25262c
Hex: #1b1c22
Hex: #f8fafc
Hex: #334155
Hex: #f1f5f9
Hex: #faff00
Hex: #cbd5e1

● Font-family :

Roboto

● Demo : https://narasimhatxed.ccbp.tech/