Notepad Online Website

Chào mọi người, bài viết này mình sẽ hướng dẫn mọi người làm một trang Notepad Online đơn giản từ HTML,CSS và Javascript cho những anh chị em nào muốn làm bài hướng dẫn hay chia sẽ mà không muốn sữ dụng Notepad từ máy tính.

Ưu điểm.

Trang Notepad Online này có thể sữ dụng mọi thiết bị, chỉ cần máy bạn đang sữ dụng có kết nối internet và hỗ trợ trình duyệt mong muốn, như Chrome,CocCoc,Opera...v.v.

Nhược điểm.

Ở trang Notepad Online không hỗ trợ người dùng lưu dữ liệu để chia sẽ đến người dùng, mà nó thực hiển lưu dữ liệu trên máy tính của các bạn chứ không thể mang đi chia sẽ đến người khác những gì mà bạn đang làm.

Chung ta bắt đầu nhé.

Bước 1. Mọi người thêm đoạn code CSS sau vào nơi bạn muốn.

<style>html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: arial, verdana, sans-serif;
}

textarea {
  width: 100%;
  height: 100%;
  font-size: 1em;
  padding: 1em;
  border: 0;
  box-sizing: border-box;
}</style>

Bước 2. Mọi người thêm đoạn code Javascript này vào trên thẻ </body>.

<script>var d = document;

// not using this at the moment but might do later for graceful degradation...
function supports_html5_storage() {
  try {
    return 'localStorage' in window && window['localStorage'] !== null;
  } catch (e) {
    return false;
  }
}

d.addEventListener('DOMContentLoaded', function(){

  var savedContent = localStorage.getItem("notepadcontent");
  if(savedContent != null){
    d.getElementById("notepad").value = savedContent;
  }
 
 
 d.getElementById("notepad").onkeyup = function(){
  var data = d.getElementById("notepad").value;  localStorage.setItem("notepadcontent", data);
  }
});</script>

Bước 3. Mọi người đế đoạn code sau vào nơi bạn muốn hiển thị.

<textarea id="notepad" placeholder="Start typing ..."></textarea>

Như vậy đã hoàn thành, nếu thiếu sót gì mọi người có thể để lại bình luận để mình hoàn thiện nhé.

DEMO NOTEPAD ONLINE

Chúc mọi người thành công với tiện ích trên.