QuickPad - Text Editor Bookmarklet

README.md

QuickPad

Quickpad is a quick, easy to use notepad that you can activate just by clicking a bookmark in your browser. Nothing much, really; just something I made because I wanted.

Quickpad.js is the main, unbookmarkified code; for bookmark purposes, triple-click quickpad.bkmk.txt and drag it to your bookmarks bar.

quickpad.bkmk.txt

javascript:(async()=>{const e=document.createElement("div");Object.assign(e.style,{position:"fixed",bottom:"10px",right:"10px","z-index":99999,background:"#222",padding:"10px",display:"flex","flex-direction":"column","border-radius":"10px","box-shadow":"#ffffff55 0 0 5px"});const t=document.createElement("div");Object.assign(t.style,{display:"flex",width:"100%","justify-content":"space-between"});const n=document.createElement("button");n.innerText="💾",Object.assign(n.style,{appearance:"none",border:"1px solid #0059cc",display:"block",color:"white",background:"#008cff","border-radius":"10px",width:"20px",height:"20px",cursor:"pointer",padding:"0px","font-family":"sans-serif","font-size":"10px"}),t.append(n);const a=document.createElement("input");Object.assign(a.style,{appearance:"none",background:"inherit",border:"none",padding:"none","font-family":"sans-serif",color:"#ddd","max-width":"70%","text-align":"center"}),a.value="untitled.txt",a.addEventListener("change",(()=>{if(""==a.value.trim())return a.value="untitled.txt";a.value=a.value.trim()})),t.append(a);const i=document.createElement("button");i.innerText="🞬",Object.assign(i.style,{appearance:"none",border:"1px solid #d00",display:"block",color:"white",background:"#f00","border-radius":"10px",width:"20px",height:"20px",cursor:"pointer",padding:"0px","font-family":"sans-serif","font-size":"13px"}),t.append(i),e.append(t);const d=document.createElement("textarea");Object.assign(d.style,{resize:"none",border:"#555 solid 1px",background:"#333",color:"white",height:"10em",width:"20em",margin:"0px","margin-top":"5px","border-radius":"5px","font-family":"sans-serif"}),i.addEventListener("click",(()=>e.remove())),n.addEventListener("click",(()=>{const e=document.createElement("a");e.setAttribute("href",`data:text/plain,${d.value}`),e.setAttribute("download",a.value),e.click()})),e.append(d),document.body.append(e)})();

quickpad.js

(async () => {
  const element = document.createElement("div");
  const elementStyle = {
    position: "fixed",
    bottom: "10px",
    right: "10px",
    "z-index": 99999,
    background: "#222",
    padding: "10px",
    display: "flex",
    "flex-direction": "column",
    "border-radius": "10px",
    "box-shadow": "#ffffff55 0 0 5px"
  };
  Object.assign(element.style, elementStyle);
  
  const buttonDiv = document.createElement("div");
  const divStyle = {
    display: "flex",
    width: "100%",
    "justify-content": "space-between"
  };
  Object.assign(buttonDiv.style, divStyle);
  
  const save = document.createElement("button");
  const saveStyle = {
    appearance: "none",
    border: "1px solid #0059cc",
    display: "block",
    color: "white",
    background: "#008cff",
    "border-radius": "10px",
    width: "20px",
    height: "20px",
    cursor: "pointer",
    padding: "0px",
    "font-family": "sans-serif",
    "font-size": "10px"
  }
  save.innerText = "💾";
  Object.assign(save.style, saveStyle);
  buttonDiv.append(save);
  
  const title = document.createElement("input");
  const titleStyle = {
    appearance: "none",
    "background": "inherit",
    border: "none",
    padding: "none",
    "font-family": "sans-serif",
    color: "#ddd",
    "max-width": "70%",
    "text-align": "center"
  }
  Object.assign(title.style, titleStyle);
  title.value = "untitled.txt";
  title.addEventListener("change", () => {
    if(title.value.trim() == "") return title.value = "untitled.txt";
    title.value = title.value.trim();
  });
  
  buttonDiv.append(title);
  
  const close = document.createElement("button");
  const closeStyle = {
    appearance: "none",
    border: "1px solid #d00",
    display: "block",
    color: "white",
    background: "#f00",
    "border-radius": "10px",
    width: "20px",
    height: "20px",
    cursor: "pointer",
    padding: "0px",
    "font-family": "sans-serif",
    "font-size": "13px"
  }
  close.innerText = "🞬";
  Object.assign(close.style, closeStyle);
  buttonDiv.append(close);
  
  element.append(buttonDiv);
  
  const textarea = document.createElement("textarea");
  const textareaStyle = {
    resize: "none",
    border: "#555 solid 1px",
    background: "#333",
    color: "white",
    height: "10em",
    width: "20em",
    margin: "0px",
    "margin-top": "5px",
    "border-radius": "5px",
    "font-family": "sans-serif"
  };
  Object.assign(textarea.style, textareaStyle);
  
  close.addEventListener("click", () => element.remove());
  save.addEventListener("click", () => {
    const saveLink = document.createElement("a");
    saveLink.setAttribute("href", `data:text/plain,${textarea.value}`);
    saveLink.setAttribute("download", title.value);
    saveLink.click();
  });
  
  element.append(textarea);
  
  document.body.append(element);
})();