./web/nesting/readme.txt
There is a natural correspondence between strings of parentheses and the nesting structures of html pages.
()() is a legal string of parentheses, and corresponds to a layout with two divisions separate from each other.
(()) is another legal arrangement, corresponding to a layout with one division inside of another.
Hn contrast, ())( is not a legal arrangement, and does not correspond to any layout. In general, every opening bracket must be matched by exactly one closing bracket. Every division that is opened must be closed.
With two types of brackets this gets more complex, as ()[] is a legal arrangement, but (][) is not, even though there is a closer for every opener, they also need to be of the same type. ([)] is also illegal since the square bracket opens inside of the round brackets, it must also close within them.
This tool lets you enter strings of brackets, and displays the general page structure that it corresponds to, as well as the properly indented html code which would set up that structure. An "opener bracket" ( or [, corresponds to a division opener <div> and a "closer bracket" ) or ], corresponds to a division closer </div>
Again,
opener: ( or [ = <div>
closer: ) or ] = </div>
() round brackets create column-oriented divisions, and [] square brackets create row-oriented divisions. This is done by the class labels and the corresponding entries in the style sheet. The class names r and c, standing for row and column, are arbitrary, but something like them is needed to link to the stylesheet.
You can use this tool to plan out your page layouts and then copy the html into your own editor to continue the work.
./web/nesting/main.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ѭ</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div class ="outer">
<div id="control">
<input type="text" id="parens"></input>
<div id="button">⊳</div>
<div id="clear">⊗</div>
</div>
<div id="display">
<div id="picture">
Enter a valid string of brackets above.<br/>
For example: [(())()]()<br/>
Then press play or ENTER.<br/>
Round brackets create column divs,<br/>
Square brackets create row divs<br/>
The class definitions assume that you <br/>
have your style defined as on the right.<br/>
</div>
<pre id="html"><body><br/></body></pre>
<pre id="css">
div {
display:flex;
}
div.r {
flex-direction:row;
}
div.c {
flex-direction:column;
}
</pre>
</div>
<script src="script.js"></script>
</div>
</body>
</html>
./web/nesting/style.css
body {
background-color: #123;
display:flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
font: 12px Courier new;
}
div {
justify-content: space-evenly;
}
input {
background-color: #567;
padding: 5px;
margin: 5px;
border-radius: 10px;
font: 18px Courier;
letter-spacing: 1px;
color: coral;
border: none;
flex:1;
}
div.holder {
background-color: #567;
border-color: #678!important;
border-style: solid;
border-top-color: #556;
border-left-color: #456;
border-bottom-color: #789;
border-right-color: #789;
}
div {
display: flex; /* divs need to declare it too */
margin: 10px; /* padding and margin are what */
padding: 10px; /* give empty divs a "size" */
color: #678;
flex-direction: column;
border-style: solid;
border-top-color: #556;
border-left-color: #456;
border-bottom-color: #789;
border-right-color: #789;
border-width: 4px;
/*border:none;*/
color : coral;
}
div.r{
flex-direction: row;
}
div.c{
flex-direction: column;
}
div#picture {
background-color: #123;
padding:0;
border:none;
}
div#button, div#clear{
padding:6px;
margin:6px;
border : outset;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
}
div#button:active, div#clear:active{
border: inset;
}
div#control, div#display{
padding:2px;
margin:2px;
flex-direction: row;
border : #345 solid;
}
div#display {
border-top: none;
}
pre{
border-radius: 10px;
padding: 10px;
margin: 5px;
line-height : 1.5em;
letter-spacing : 2px;
white-space: pre-wrap; /* to wrap text */
word-break: break-all; /* so words don't get broken in wrap */
background-color: #375;
color: yellow;
font: 12px Courier new;
}
pre#css{
background-color: #366;
color: #eee;
}
.outer {
border:none;
padding:0;
}
./web/nesting/script.js
const form = document.querySelector("#parens");
const button = document.querySelector("#button");
const picture = document.querySelector("#picture");
const html_display = document.querySelector("#html");
/*
function get_color(depth){
let red = 150 - 12 * depth
let green = 150 - 15 * depth
let blue = 150 - 18 * depth
return red, green, blue;
}
*/
function submit_parens(){
let writing_content = false;
let string = form.value;
if (test(string) === false) {
reset();;
return;
}
_of = '<div Class="holder">';
_html = '<body><br/>';
let depth = 0;
for (let i = 0; i < string.length; i++){
if (writing_content && '[]()'.includes(string[i])){
writing_content = false;
_html += "<br/>";
}
if (string[i] === '('){
depth += 1;
for (let i = 0; i < depth; i++){
_of += ' ';
_html += ' ';
}
_of += ('<div class="c">' + '\n');
_html += ('<div class="c"><br/>');
} else if (string[i] === ')') {
for (let i = 0; i < depth; i++){
_of += ' ';
_html += ' ';
}
_of += ('</div>\n');
_html += ('</div><br/>');
depth -= 1;
} else if (string[i] === '[') {
depth += 1
for (let i = 0; i < depth; i++){
_of += ' ';
_html += ' ';
}
_of += ('<div class="r">\n');
_html += ('<div class="r"><br/>');
} else if (string[i] === ']') {
for (let i = 0; i < depth; i++){
_of += ' ';
_html += ' ';
}
_of += ('</div>\n');
_html += ('</div><br/>');
depth -= 1;
} else {
if (writing_content){
_html += string[i];
_of += string[i]
} else {
for (let i = 0; i < depth + 1; i++){
_html += ' ';
}
_of += string[i];
_html += (string[i])
writing_content = true;;
}
}
}
_of += '</div>';
_html += '</body>';
picture.innerHTML = _of;
html_display.innerHTML = _html;
}
function reset(){
html_display.innerHTML = '?'
picture.innerHTML = 'invalid';
return false;
}
function test(x){
let s = []; // stack
for (let i = 0; i<x.length; i++){
if (x[i] === '(')
s.push('(');
if (x[i] === ')')
if (s.pop() === '(')
continue;
else
return false;
if (x[i] === '[')
s.push('[');
if (x[i] === ']')
if (s.pop() === '[')
continue;
else
return false;
}
return (s.length === 0);
}
button.onclick = submit_parens;
clear.onclick = () => {
form.value = '';
picture.innerHTML = "Enter a valid string of parenthese above.<br/>For example: (())()<br/>Then press play or ENTER<br/>";
html_display.innerHTML = '';
};
document.onkeypress = (e) => {
if (e.key === "Enter")
submit_parens();
};
//_of += (' '*depth + '<div style="background:rgb{0}">'.format(get_color(depth)) + '\n')
