The-Quill/non_strict_mode.html

## non_strict_mode.html
<!DOCTYPE html>
<html>
    <head>
        <style>
            tbody td:not(.title) {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <br />
        <table id="table">
            <thead>
                <tr>
                </tr>
            </thead>
            <tbody>
            <tbody>
        </table>
        <script>
            var nonStrictMode = {}
            var table = document.getElementById('table');
            var list = ['true', 'false', '1', '0', '-1', '"true"', '"false"', '"1"', '"0"', '"-1"', '""', 'null', 'undefined', 'Infinity', '-Infinity', '[]' , '({})', '[[]]', '[0]', '[1]', 'NaN']
            list.forEach(item => { nonStrictMode[`'${item}'`] = {}});
            list.forEach(item => list.forEach(item2 => { nonStrictMode[`'${item}'`][`'${item2}'`] = eval(`${item} == ${item2}`) }))
            var paddedList = [' '].concat(list);
            paddedList.forEach(item => {
                var data = document.createElement('td');
                data.innerText = item;
                data.style.transform = 'rotate(90deg)'
                table.querySelector('thead tr').appendChild(data);
            })
            list.forEach(item => {
                var row = document.createElement('tr');
                var info = document.createElement('td');
                info.innerText = item;
                info.classList.add('title')
                row.appendChild(info);
                list.forEach(item2 => {
                    var data = document.createElement('td');
                    data.style.backgroundColor = nonStrictMode[`'${item}'`][`'${item2}'`] ? 'green' : 'white'
                    row.appendChild(data);
                })
                table.querySelector('tbody').appendChild(row)
            })
        </script>
    </body>
</html>

## strict_mode.html
<!DOCTYPE html>
<html>
    <head>
        <style>
            tbody td:not(.title) {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <br />
        <table id="table">
            <thead>
                <tr>
                </tr>
            </thead>
            <tbody>
            <tbody>
        </table>
        <script>
            var nonStrictMode = {}
            var table = document.getElementById('table');
            var list = ['true', 'false', '1', '0', '-1', '"true"', '"false"', '"1"', '"0"', '"-1"', '""', 'null', 'undefined', 'Infinity', '-Infinity', '[]' , '({})', '[[]]', '[0]', '[1]', 'NaN']
            list.forEach(item => { nonStrictMode[`'${item}'`] = {}});
            list.forEach(item => list.forEach(item2 => { nonStrictMode[`'${item}'`][`'${item2}'`] = eval(`${item} === ${item2}`) }))
            var paddedList = [' '].concat(list);
            paddedList.forEach(item => {
                var data = document.createElement('td');
                data.innerText = item;
                data.style.transform = 'rotate(90deg)'
                table.querySelector('thead tr').appendChild(data);
            })
            list.forEach(item => {
                var row = document.createElement('tr');
                var info = document.createElement('td');
                info.innerText = item;
                info.classList.add('title')
                row.appendChild(info);
                list.forEach(item2 => {
                    var data = document.createElement('td');
                    data.style.backgroundColor = nonStrictMode[`'${item}'`][`'${item2}'`] ? 'green' : 'white'
                    row.appendChild(data);
                })
                table.querySelector('tbody').appendChild(row)
            })
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	tbody td:not(.title) {
	border: 1px solid black;
	}
	</style>
	</head>
	<body>
	<br />
	<table id="table">
	<thead>
	<tr>
	</tr>
	</thead>
	<tbody>
	<tbody>
	</table>
	<script>
	var nonStrictMode = {}
	var table = document.getElementById('table');
	var list = ['true', 'false', '1', '0', '-1', '"true"', '"false"', '"1"', '"0"', '"-1"', '""', 'null', 'undefined', 'Infinity', '-Infinity', '[]' , '({})', '[[]]', '[0]', '[1]', 'NaN']
	list.forEach(item => { nonStrictMode[`'${item}'`] = {}});
	list.forEach(item => list.forEach(item2 => { nonStrictMode[`'${item}'`][`'${item2}'`] = eval(`${item} == ${item2}`) }))
	var paddedList = [' '].concat(list);
	paddedList.forEach(item => {
	var data = document.createElement('td');
	data.innerText = item;
	data.style.transform = 'rotate(90deg)'
	table.querySelector('thead tr').appendChild(data);
	})
	list.forEach(item => {
	var row = document.createElement('tr');
	var info = document.createElement('td');
	info.innerText = item;
	info.classList.add('title')
	row.appendChild(info);
	list.forEach(item2 => {
	var data = document.createElement('td');
	data.style.backgroundColor = nonStrictMode[`'${item}'`][`'${item2}'`] ? 'green' : 'white'
	row.appendChild(data);
	})
	table.querySelector('tbody').appendChild(row)
	})
	</script>
	</body>
	</html>