by Sai gowtham

How to use Notepad in Browser with 1 line of Code

How to use Notepad in Browser with 1 line of Code

In this tutorial, we are going to learn about creating and using the browser as a notepad.

Creating the NotePad

  1. Open a new tab in your browser.
  2. Enter the below code and hit enter.
data:text/html,<body contenteditable>

This code will create a body element with its content is editable.

Now we can write our notes inside this tab.

creating-notepad

Adding Colors to our Notepad

Let’s add the colors to our notepad by using inline-css.

Now Open a new tab and enter the below code.

data:text/html,<body contenteditable style="background:black;color:gold;font-size:20px;">

This code will add a background color black, color: gold and font-size: 20px to body element.

adding to colors notepad

Adding a title to our Notepad

data:text/html,<title>Browser Notepad</title>
<body contenteditable style="background:black;color:gold;font-size:20px;">

adding title

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
26,545 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
221,520 students enrolled
44 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
114,575 students enrolled
21 hours of video content
View Course