Initializing...
Liveweave
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
outbox_alt
Generative AI
arrow_outward
build
Tools
expand_more
restart_alt
Load base template
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<div class="container clearfix"></div> <div class="ui"> <a id="collapse" href="javascript:void" onclick="collapseUI()">[-]</a> <div id="rest"> <div id="color"></div> <div> Crossword generator <pre> Basic: <span style="background:lightblue">COLS</span>x<span style="background:lightblue">ROWS</span> Modifiers: <span style="background:lightblue">COLS</span>x<span style="background:lightblue">ROWS</span>(<span style="background:lightgreen">values</span>)<span style="background:lightpink">;</span> <span style="background:lightgreen">values</span> used for making headers; values, separated by space, go from the last cell to the first (0x0), <span style="background:darkslategrey;color:white">_N</span> will skip N cells. e.g, if (1 2 3 4), last cell would contain 1 <span style="background:lightpink">;</span> start this table on a new line </pre> <textarea cols=45 rows=6>10x2(0 4 4 2 2 9 9 0 _4 2 2) 2x11(0 _ 2 _ 2 _ 2 _ 4 _ 6 _ 2 2 2 2 6 _ 4 _ 0); 8x11 </textarea><br> <a id="genbtn" href="javascript:void" onclick="parseCode(event)">[Generate]</a><br> </div> </div> </div> <div class="characnt"> <img class="chara" src="" alt="" onclick="setChara()"> </div> <footer> Baka-crossword v9999 </footer>
body{ font-family:monospace; color:darkslategray } .container { padding:1em; vertical-align:bottom; user-select: none; } table {border-style:solid; border-width:1px; border-collapse:collapse; empty-cells:show; text-align:center;border-color:black; margin-bottom:0; float:left; } .breaker{ clear:both; width: 0; height: 0; padding: 0; margin: 0; } .clearfix:after { content: ''; display: block; clear: both; } .th { background:#EFEFEF } td { border:1px solid grey; font-size:15px; width: 1.3em; height: 1.5em; } tr{ border:1px; height: 1.3em; } .ui{ position:fixed; top:2em; right:2em; background:#EFEFEF; padding:1em; z-index: 1; } #collapse{float:right;padding:0;margin:-0.5em;text-decoration:none} .hidden{display:none;} footer { position:fixed; right:2em; top:2px; color:green; } .marked{background-color:black} .out{text-decoration:red line-through} .chara { position: fixed; object-fit:cover; transform: scaleX(-1); display:inline-block; max-width:40%; max-height:40%; bottom: 0; right:-3em; overflow:hidden; cursor:pointer; } .characnt{ display:block; }
// Write JavaScript here function generateTable(options){ ({cols, rows} = options); br = options.break; var ct = document.querySelector('.container'); var src = ''; src += '<table onclick="setMark(event)" rowspan="2" colspan="2" '; if(br) src += 'class="breaker"'; src += '>'; while(0 < rows) { var icols = cols; src += '<tr>'; while(0 < icols) { src += '<td></td>'; icols--; } src += '</tr>'; rows--; } src += '</table>'; ct.insertAdjacentHTML('beforeend', src); } function populateFromBottom(tableId, reverseContent){ var tabs = document.querySelectorAll('table'); if(tableId>0) tab = tabs[tableId - 1]; if(tableId===0) tab = tabs[tabs.length -1]; var cells = Array.from(tab.querySelectorAll('td')).reverse(); content = reverseContent.split(' '); for(var i = 0, skip = 0; i < content.length; i++ ) { var value = content[i]; if(value.startsWith('_')){ var toskip = ~~value.slice(1); if(toskip <= 1) toskip = 0; skip += toskip; continue; } if(cells[i + skip]) cells[i + skip].innerText = value; } tab.classList.add('th'); } function parseCode(e){ var re = /(\d+)x(\d+)(\(.*?\))?(\;)?/gm; var el = document.querySelector('textarea'); document.querySelector('.container').innerHTML = ''; if(e.type && e.type == 'hashchange' && getHash()) el.value = getHash(); el.value.replace(re, function(substr, col, row, text, br){ var tab = {cols: ~~col, rows: ~~row}; if(br) tab.break = true; generateTable(tab); if(text) populateFromBottom(0, text.replace(/\(|\)/g,'')); }); setHash(el.value); } function collapseUI(){ document.querySelector('#rest').classList.toggle('hidden'); } function setMark(e){ var table = e.target; while(table.parentElement.tagName !== 'DIV') { table = table.parentElement; } if(table.classList.contains('th')) { if(e.target.tagName == 'TD') e.target.classList.toggle('out'); return; }; if(e.target.tagName == 'TD') e.target.classList.toggle('marked'); } window.charaList = ['http://reho.st/http://safebooru.org/thumbnails/1112/thumbnail_ab9fc483c98e31567d3c18435fdd8982c2187ba2.png']; function tryUpdateCharaList() { var ajax = new XMLHttpRequest(); ajax.addEventListener('load', (re) => { window.charaList = Array.prototype.map.call( re.target.responseXML.firstChild.children, v => '//reho.st/http:' + v.getAttribute('preview_url') ) }); ajax.open('GET', 'https://cors-anywhere.herokuapp.com/http://safebooru.org/index.php?page=dapi&s=post&tags=nagineko&q=index'); ajax.send(); } function setChara() { document.querySelector('.chara').src = charaList[Math.floor(Math.random() * charaList.length)]; } function getHash(){ if(location.hash && location.hash.length > 1) return decodeURIComponent(location.hash.slice(1)); } function setHash(arg){ location.hash = '#' + encodeURIComponent(arg); } tryUpdateCharaList(); setTimeout(setChara,3000); addEventListener('hashchange', parseCode); parseCode({type:'hashchange'})