-{"version":"1.1.43","settings":{"theme":false,"fontSize":"16","autoupdate":true,"console":true,"scratchpad":""},"pages":[{"name":"index","title":"An attractive title","description":"The most attractive description ever!","libraries":["https://cdnjs.cloudflare.com/ajax/libs/picocss/1.5.7/pico.classless.min.css","https://michaelsboost.com/TailwindCSSMod/tailwind-mod.min.css","https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"],"html":"<main class=\"py-0 absolute inset-0 grid place-items-center\">\n <article class=\"my-0\">\n <textarea id=\"input\" placeholder=\"Paste here\" onfocus=\"this.select(true)\" class=\"h-40 resize-none\"></textarea>\n\n <nav class=\"gap-2\">\n <input id=\"look\" type=\"text\" placeholder=\"String to search for..\" onfocus=\"this.select(true)\">\n <input id=\"replace\" type=\"text\" placeholder=\"String to replace with..\" onfocus=\"this.select(true)\">\n </nav>\n\n <label for=\"switch\" class=\"mb-4\">\n <input type=\"checkbox\" id=\"switch\" name=\"switch\" role=\"switch\">\n Remove all lines containing string\n </label>\n\n <button id=\"convert\">\n Convert\n </button>\n\n <div class=\"text-center\">\n Made with ❤️ and ☕️ by <a href=\"http://michaelsboost.github.io/\" target=\"_blank\"><u>Michael Schwartz</u></a>\n </div>\n </article>\n</main>\n\n<button id=\"icon\" class=\"fixed bottom-0 right-0 m-4 inline-block w-auto cursor-pointer bg-transparent border-none text-3xl\">🌙</button>\n\n<article id=\"notification\" class=\"fixed bottom-0 right-6 inline-block w-auto hidden\">copied to clipboard</article>","css":"","javascript":"// project json\nlet appJSON = {\n theme: true\n};\n\n// check if user can copy images in js\nif (!window.navigator || !window.navigator.clipboard) {\n assets.innerHTML = 'Clipboard API not supported!';\n}\n\n// toggle switch\ndocument.getElementById('switch').onchange = () => {\n // if switch is checked\n if (document.getElementById('switch').checked) {\n document.querySelector('nav span').style.display = 'none';\n replace.style.display = 'none';\n return false;\n }\n\n // if switch is not checked\n document.querySelector('nav span').style.display = 'block';\n replace.style.display = 'block';\n};\n\n// convert button click\nconvert.onclick = () => {\n // remove lines that contain string if switch is checked\n if (document.getElementById('switch').checked) {\n let str = input.value;\n let lines = str.split('\\n');\n let result = '';\n for (let i in lines) {\n let line = lines[i];\n if (line.indexOf(look.value) > -1) {\n // ignore lines containing the string you're looking for\n } else {\n result += line + \"\\n\";\n }\n }\n input.value = result.trim();\n\n return false;\n }\n\n // remove only words containing the string with whatever word user chooses\n input.value = input.value.toString().split(look.value).join(replace.value);\n\n // copy convertion to clipboard\n navigator.clipboard.writeText(input.value);\n\n // notify user change is copied to clipboard\n notification.style.display = 'block';\n setTimeout(() => {\n notification.style.display = 'none';\n }, 1000);\n};\n\n// toggle theme\npickTheme = val => {\n val = val.toString().toLowerCase();\n const elm = document.querySelector('[data-theme]');\n\n if (val === 'light') {\n elm.setAttribute('data-theme', val);\n icon.textContent = '🌙';\n appJSON.theme = true;\n }\n if (val === 'dark') {\n elm.setAttribute('data-theme', val);\n icon.textContent = '🌞';\n appJSON.theme = false;\n }\n\n // remember theme in localStorage\n localStorage.setItem('JSStringReplacer', JSON.stringify(appJSON));\n};\n\nicon.onclick = () => { (appJSON.theme) ? pickTheme('dark') : pickTheme('light'); };\n\n// check localStorage\nif (localStorage.getItem('JSStringReplacer')) {\n appJSON = JSON.parse(localStorage.getItem('JSStringReplacer'));\n (appJSON.theme) ? pickTheme('light') : pickTheme('dark');\n}"},{"name":"hello","title":"An attractive title","description":"The most attractive description ever!","libraries":["https://cdnjs.cloudflare.com/ajax/libs/picocss/1.5.7/pico.classless.min.css","https://michaelsboost.com/TailwindCSSMod/tailwind-mod.min.css","https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"],"html":"<main>\n <article>\n <hgroup>\n <h1>my awesome title</h1>\n <h2>my awesome sub title</h2>\n </hgroup>\n \n <p>\n Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde qui voluptas fugit assumenda exercitationem rerum excepturi earum facere dignissimos praesentium ullam quidem ipsam dolores, eveniet alias minus? Laboriosam, amet enim?\n </p>\n </article>\n</main>","css":"","javascript":""},{"name":"notepad","title":"An attractive title","description":"The most attractive description ever!","libraries":["https://cdnjs.cloudflare.com/ajax/libs/picocss/1.5.7/pico.classless.min.css","https://michaelsboost.com/TailwindCSSMod/tailwind-mod.min.css","https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"],"html":"<button class=\"absolute bottom-0 right-0 z-10 m-4 inline-block w-auto border-0 rounded-full\" onclick=\"addtodo()\">\n <i class=\"fa fa-plus\"></i>\n</button>\n\n<div id=\"output\" class=\"absolute inset-0 overflow-auto p-10\"></div> ","css":"","javascript":"document.querySelector('html').setAttribute('data-theme', 'light')\n\n// variables\nconst code = `<article class=\"max-w-4xl mx-auto mb-8 relative pt-4 pb-4\">\n <button class=\"absolute top-0 right-0 -m-4 inline-block w-auto bg-red-500 border-0 rounded-full\" onclick=\"this.closest('article').remove();\">\n <i class=\"fa fa-times\"></i>\n </button>\n \n <h2 class=\"mb-0\">\n <span contenteditable>An Attractive Title</span>\n <hr>\n </h2>\n\n <p class=\"m-0\" contenteditable>\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut et fugit odio vitae quisquam accusamus, dolor ipsa voluptatem perspiciatis! Dicta possimus culpa tempora repellendus accusamus, doloribus corporis harum accusantium. \n </p>\n</article>`\n\naddtodo = () => {\n output.insertAdjacentHTML(\"afterbegin\", code)\n}"}]}
0 commit comments