Project Features: This project is a simple and dynamic text editor that allows users to type and customize their text using various tools. It is implemented using HTML, CSS, and JavaScript and includes the following features:
White Background and Centered Text:
The page starts with a white background.
In the center of the page, a default text titled "type a status" is displayed.
The user can click on this text and edit it.
Control Buttons at the Top of the Page:
At the top of the page, on the right side, there are three buttons, each controlling a specific feature.
Background Color Change:
The first button, labeled "Background Color", changes the background color of the page.
With each click, the background color changes to one of 50 predefined colors. These colors include attractive and diverse options that enhance the user experience.
Font Change:
The second button, labeled "Font", changes the font of the centered text.
With each click, the font changes to one of 5 predefined fonts. These fonts include popular and readable options such as Arial, Verdana, Times New Roman, and more.
Adding Emojis:
The third button, labeled "Emoji", opens an emoji selection panel.
The user can select an emoji from the available options and add it to the centered text.
This feature allows users to express their emotions through text.
Text Color Change:
Another button, labeled "Text Color", changes the color of the centered text.
With each click, the text color changes to one of 50 predefined colors. These colors include a wide range of attractive options.
Text Editing:
The user can click on the centered text and edit it.
If the user deletes all the text, the default text "type a status" is displayed again.
Project Goal: The goal of this project is to create a simple and interactive environment for users to easily edit their text and customize it using various tools. This project can serve as a practical exercise for learning HTML, CSS, and JavaScript, and it can also function as an entertaining tool for users.
Technical Details: HTML:
The main structure of the page includes a div for the centered text and three buttons to control the features.
The centered text is editable using the contenteditable="true" attribute.
CSS:
Necessary styles for the buttons, centered text, and emoji panel are defined.
Flexbox is used for element layout.
JavaScript:
The logic for changing the background color, font, adding emojis, and changing text color is implemented.
Arrays are used to store colors and fonts.
Click and change events are used to control the various features.
Applications of the Project: Learning Programming: This project can be used as a practical exercise for learning HTML, CSS, and JavaScript.
Entertainment Tool: Users can use this project to create personalized and fun text.
Prototyping: This project can serve as a prototype for developing more advanced text editing tools.
Challenges of the Project: State Management: It must be ensured that with each click, the different states (background color, font, text color) change correctly.
User Experience: The user interface must be simple and intuitive so that users can easily use the tools.
Emoji Support: It must be ensured that emojis are displayed correctly and added to the text.
Conclusion: This project is a simple and dynamic text editor that allows users to edit their text and customize it using various tools. It can serve as a learning tool for web programming and as an entertaining tool for users. With this project, users can enjoy a delightful and interactive experience.