Breadcrumbs

[mikethedj4]

Weave: http://kodeweave.sourceforge.net/editor ... 39a7c6eee3

Alright today I'm going to show you how to make a easy and simple text editor. (no customizable options for typography included)

First off I will be using the Poly UI Kit to design the UI.
To save the text as a text file I could use Vanilla JS (aka Pure JS), but for cross browser compatibility and to keep our code DRY I will be using FileSaver.js.

So here's what we're going to make.


As you can see all we need are two buttons and a textarea.

Code: Select all

<div class="grid">
  <div class="grid__col--12">
    <a class="btn--default block pointer" data-action="new">New</a>

    <textarea class="form__input vertical" data-action="val" placeholder="List here..."></textarea>

    <a class="btn--success block pointer" data-action="save">Save</a>
  </div>
</div>

Notice how my HTML is structured.
I use what I call variable styles here. (Where the class block is display: block;)
I also have a custom HTML5 data attribute.
I do this to keep my code semantic (def: relating to meaning in language or logic.)
This way you can clearly see the classes are used strictly for styling and the data attributes are for scripting.

This is good practice to do for all your projects for various reasons. (readability and collaboration)

So now lets style our HTML with some CSS. (NOTE: the hex equivalent for the background color is #d5dcf2)

Code: Select all

body {
  padding: 1em 0;
  background: rgb(213, 220, 242);
}

/* Variable Classes */
.block {
  display: block;
}
.pointer {
  cursor: pointer;
}
.vertical {
  resize: vertical;
}

So far pretty easy right?

Now my weave uses JQuery, but here we will do the same thing in Pure JS.
So lets add the JavaScript.

First we will begin by calling our selectors in a variable

Code: Select all

var newDoc  = document.querySelector('[data-action=new]')
var saveDoc = document.querySelector('[data-action=save]')
var mainVal = document.querySelector('[data-action=val]')

Now when we click on the new button we want to clear the textbox

Code: Select all

// New Document
newDoc.onclick = function() {
  mainVal.value = ""
}

Next to save our code as a file we will use

Code: Select all

var blob = new Blob([ mainVal.value ])
saveAs(blob, "name.txt")

Instead of giving the user a default file name I will use AlertifyJS so the user can choose their own file name.
Say our textbox is empty. We can use an if else statement to alert the user they don't have a value

We can do it like this...

Code: Select all

if (mainVal.value == "") {
  alertify.error("Error: Textbox can not be empty")
}

or like this...

Code: Select all

if (!mainVal.value) {
  alertify.error("Error: Textbox can not be empty")
}

Both are perfectly fine!

So here is how we will save our list (code in the textbox) as a file.

Code: Select all

// Save Document
saveDoc.onclick = function() {
  if (!mainVal.value) {
    alertify.error("Error: Textbox can not be empty")
  } else {
    var blob = new Blob([ mainVal.value ])
    alertify.prompt("Name your file! (excluding file type)", "",
      function(evt, value) {
        if (!value) {
          alertify.error("Error: Your name can not be empty")
        } else {
          saveAs(blob, value + ".txt")
        }
      }).set('basic', true)
  }
}

and there you go it's that easy.

You can view this weave (in pure js) or this weave (in JQuery) to see the same code, but using the Jade, Stylus and CoffeeScript preprocessors.