Create code.html

Example for: zserge#12
LukyVj · Oct 15, 2020 · 54356a6 · 54356a6
1 parent 98d66dd
commit 54356a6
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@ Awfice is a collection of tiny office suite apps:
 * this project is only a half-joke, I actually use a few Awfice apps as quick scratchpads.
 * the only way to save your job is to save a HTML or send it to the printer/print to PDF.
 
-## Text editor - 62 bytes!
+## Text editor -  62 bytes!
 
 A simple rich text editor. Type whatever you want, it won't be saved anywhere, but it might be convenient for quick throwaway notes. You should be able to use Ctrl+B and Ctrl+I to mark text selection as bold or italic. Undo/redo should work as well. You can also copy/paste text and images from other sources.
 
@@ -69,8 +69,20 @@ data:text/html,<body><script>d=document;for(i=0;i<50;i++)d.body.innerHTML+='<div
 
 [Try it!](https://htmlpreview.github.io/?https://github.com/zserge/awfice/blob/main/beam.html)
 
+## Code editor - 332 bytes!
+
+A simple code editor. You can type in HTML, CSS & Javascript.
+
+Copy and add to bookmarks or open in the URL bar:
+
+```html
+data:text/html,<body oninput="i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"><style>textarea,iframe{width:100%;height:50%}body{margin:0}textarea{width:33.33%;font-size:18}</style><textarea placeholder=HTML id=h></textarea><textarea placeholder=CSS id=c></textarea><textarea placeholder=JS id=j></textarea><iframe id=i>
+```
+
+[Try it!](https://htmlpreview.github.io/?https://github.com/zserge/awfice/blob/main/code.html)
+
 ## Contributions
 
 The code is distributed under MIT license. PRs are always welcome, especially if they fix something or make the code smaller, or add features that are valuable, but do not require a lot of code.
 
-To modify something - edit HTML files directly. There is README.sh script that re-generates the README and embeds apps code into it.
+To modify something - edit HTML files directly. There is README.sh script that re-generates the README and embeds apps code into it.
diff --git a/README.sh b/README.sh
@@ -71,6 +71,18 @@ data:text/html,$(cat beam.html)
 
 [Try it!](https://htmlpreview.github.io/?https://github.com/zserge/awfice/blob/main/beam.html)
 
+## Code editor - $(wc -c < code.html) bytes!
+
+A simple code editor. You can type in HTML, CSS & Javascript.
+
+Copy and add to bookmarks or open in the URL bar:
+
+\`\`\`html
+data:text/html,$(cat code.html)
+\`\`\`
+
+[Try it!](https://htmlpreview.github.io/?https://github.com/zserge/awfice/blob/main/code.html)
+
 ## Contributions
 
 The code is distributed under MIT license. PRs are always welcome, especially if they fix something or make the code smaller, or add features that are valuable, but do not require a lot of code.

diff --git a/code.html b/code.html
@@ -0,0 +1 @@
+<body oninput="i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"><style>textarea,iframe{width:100%;height:50%}body{margin:0}textarea{width:33.33%;font-size:18}</style><textarea placeholder=HTML id=h></textarea><textarea placeholder=CSS id=c></textarea><textarea placeholder=JS id=j></textarea><iframe id=i>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<body oninput="i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"><style>textarea,iframe{width:100%;height:50%}body{margin:0}textarea{width:33.33%;font-size:18}</style><textarea placeholder=HTML id=h></textarea><textarea placeholder=CSS id=c></textarea><textarea placeholder=JS id=j></textarea><iframe id=i>