Zen Writing Website

Date:

Zen Writing Website

🔗

I cobbled together a website for writing without distractions. I know plenty such sites exist already, but still wanted to do it. The textbox does not accept backspace! No deleting, no editing!

Why?

🔗

One of the reasons why I struggle to finish writing is because I'm constantly editing what I write. I know that editing is detrimental to writing. Get some stuff out there first. Get a block of marble first, and then you can chisel away.

From my site: 

This tiny web thingamajig is clean, no clutter, and lets you type without backspacing. Write first, edit later! Made a typo? That's okay, just keep moving forward. You can always fix it later. Write in a flow. Get the text out of your system and refine it later.

Uses

🔗

Can be used for journaling. I think this is a solid use case. Use it as a means of cathartic venting, void-shouting. Can be used to write without editing. Like I said earlier, irrespective of the kind of writing, content is a prerequisite. You can edit your first paragraph a billion times and get a decent one, but now you're burnt out and there's pages to write.

Features

🔗

A word counter (that is slightly inaccurate but good enough) The ability to save what you've written as a text file Clean, clutter-free. Distraction free writing

Design

🔗

It is a minimal website that uses water.css, an open-source super-simple CSS framework! This makes the site look super clean and professional with zero effort from me.

Code

🔗

It's open source, of course! I should host it somewhere but until then, you can take a look here:

html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css">
<h1> Zen Writing App </h1>
<details>This tiny web thingamajig is clean, no clutter, and lets you type without backspacing. Write first, edit later! Made a typo? That's okay, just keep moving forward. You can always fix it later. Write in a flow. Get the text out of your system and refine it later. <summary>Why?</summary></details>
<textarea id ="zentextarea" onkeydown="return isValidKey(event)" oninput="wordCount()" autofocus> </textarea>

<button type="button" onclick="download()">💾 Save</button>

<label id="wordcount"></label> 

<footer> <p>uses <a href="https://github.com/kognise/water.css">water.css</a>, an open-source super-simple CSS framework! </p>
  <p> Thanks to contributions from Stackoverflow user <a href="https://stackoverflow.com/questions/21479107/saving-html5-textarea-contents-to-file">A-Sharabiani</a>, <a href="https://tutorial.eyehunts.com/js/how-to-disable-backspace-in-textbox-using-javascript-example-code/">Tutorial by EyeHunts</a> 
</footer>
js
function download(){
    var text = document.getElementById("zentextarea").value;
    text = text.replace(/\n/g, "\r\n"); // To retain the Line breaks.
    var blob = new Blob([text], { type: "text/plain"});
    var anchor = document.createElement("a");
    anchor.download = "my-filename.txt";
    anchor.href = window.URL.createObjectURL(blob);
    anchor.target ="_blank";
    anchor.style.display = "none"; // just to be safe!
    document.body.appendChild(anchor);
    anchor.click();
    document.body.removeChild(anchor);
 }

 function isValidKey(e)
    {
      var charCode = e.keyCode || e.which;
      if (charCode == 8){

        console.log(e.code);
        return false;
      }
      return true;
    }

function wordCount() {
 var text = document.getElementById("zentextarea").value;
 var count = 0;
 var split = text.split(' ');
 for (var i = 0; i < split.length; i++) {
  if (split[i] != "") {
   count ++;
  }
 }
 document.getElementById("wordcount").innerHTML = count;
}

UPDATE: It's now on Codeberg!