Skip to content

Online Text Editor in simple HTML, CSS and Javascript code for a distraction free experience

Notifications You must be signed in to change notification settings

ayushi-jha/Online-Text-Editor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 

Repository files navigation

Online-Text-Editor

This online text editor provides users with a distraction free experience.

Features

  • Full page writing area
  • Easily customizable color themes
  • Dynamic word counter

Full Page Writing Area

The entire page is devoted to the writing space. There is no formatting tool clutter so that writers can focus on jotting down their thoughts without being distracted by fancy formatting tools.

Easily Customizable Color Themes

There is a color theme selector at the bottom. There are two input boxes - first one is for the text color, and second one is for the background color. You can either add HTML color codes (eg. #ffffff), or simply type in simple color names (eg. black). The default is the white theme : white text on black background. If you prefer the dark side, type black on the first input box and white and on the second input box and hit Get New Theme button.

Dynamic Word Counter

The dynamic word counter counts the words typed so far. Writers are encouraged whenever they hit a word limit, such as 5000 words.

Motivation

The online text editor was inspired by the NaNoWriMo Challenge. This editor aims to provide authors with a distraction free online tool to collect their thoughts into small writing prompts. You can also use it for notes, etc.

Code

There is just one file index.html that consists of all javascript (in <script> tags), CSS (in <style> tags) and basic HTML. No framework is used, the code is kept light and simple.

Future Work

  • Adding more tools for editors, such as bold, italics etc. while still being distraction free
  • Option to select from pre-made themes
  • Save features to download the text written as pdf, word, txt etc. formats.
  • A blog post for using this project as a javascript tutorial for beginners.