So you know, I'm building an app called Pressing which is a Word + Press Clone. (In case if you didn't really get that, it's a Word and a WordPress clone.)

So let's begin!

Currently, it's just some document app with iframing, and such. Let's break down how it got made.

1. The front end is made, with a <h1> element as the title and a single <p> element. That means linking to sites and using scripts, well, shouldn't work.

2. Create the topbar HTML which has <button> elements, and any button would add that nice style to it. Then, there is an onclick event which fires a function to add an element.

3. Add the actual functions. For the add function, we need to create an element, append it to whatever, and add a style. Of course, I added display:inline so it wouldn't break the line. I also made a wrap function based by a Stack Overflow answer which would finish, let's say a pack of the quotation marks. "" would finish from just one " and move the caret back. Usually you would have to hack around this with JavaScript.

4. Do some node.js magic with FileSystem, body-parser, dotenv, express, and such to make it WordPress like. Let's dig into the code from the front end. By the way, the hosting is from Glitch.com.

The editor code:

<div id="editor" style="width:95%;background:#e9edf0;border-radius:10px;padding:15px;text-align:left !important;">
        <h1
          contenteditable
          style="outline:none;text-align:center;"
        >
          A new Pressing Document
        </h1>
        <p contenteditable style="outline:none;" id="context">
          Type Here...
        </p>
      </div>

So you see here, when we enable stuff like Dark Mode it will change those value to what we want. The title gets more attention at first, so it's bigger so I put a contenteditable <h1> element to use. In fact, if you threw this in a website you'd have a Pressing doc ready to go. (hint hint, use some CSS to add your own custom font.) The front end uses absolutely no external scripts, and gets only 100s in web.dev!

Let's look at that Stack Overflow based bit of code (gotta get your app done somehow)

document.getElementById("context").onkeydown = function(evt) {
        if (evt.key === '"') {
          Wrap(evt.key);
        } else if (evt.key === "*") {
          Wrap(evt.key);
        } else if (evt.key === "(") {
          Wrap(")");
        } else if (evt.key === "`") {
          Wrap(evt.key);
        }
};

Quite simple. All it does is just wraps a certain key they press. Now let's look at my now formatted functions for this to work.

var x = 0;
function ToggleDarkMode() {
if (x==0) {
document.body.style.color="white";
document.body.style.background="black";document.getElementById("styuse").innerText="#topbar button {color:white}";
document.getElementById('editor').style.background="black";x++;}else{document.body.style.color="black";
document.body.style.background="white";
document.getElementById("styuse").innerText="#topbar button {color:black}";
document.getElementById('editor').style.background="#e9edf0";
x=0;
}
}

function Wrap(_txt){
let sel=window.getSelection();
let offset=sel.focusOffset;
let focus=sel.focusNode;focus.textContent+=_txt;
let range=document.createRange();
range.selectNode(focus);
range.setStart(focus,offset);
range.collapse(!0);
sel.removeAllRanges();
sel.addRange(range)
}

function Add(_elem, _text, _style) {
var e=document.createElement(_elem);
e.innerText=_text;
e.style=_style;
document.getElementById("context").appendChild(e);
return e;
}

function Add2(_elem, _text, _style, _toelem) {
var e=document.createElement(_elem);
e.innerText=_text;e.style=_style;
_toelem.appendChild(e);
return e;
}

So we have Pressing, from these things. Do check it out, do check out Glitch.com, and see ya soon.

*Thanks to web.dev for the nice score.

Web.dev is where you can measure a site using Light House, and get tips for improving. Find it in DevTools or use the site at web.dev/measure.

*And thanks Glitch.com for their awesome hosting.

Glitch.com is a platform for programming awesome web apps which get hosted instantly on their IDE, if you didn't know. It's great for small and big coders.