123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <!--
- This entire file is licensed under:
- ===
- MIT License
- Copyright (c) 2021 Adnan Shameem
- Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
- The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- ===
- -->
- <title>polytable</title>
- <meta name="description" content="polytable" />
- <meta name="keywords" content="computer, language, cheatsheet, code, example, agnostic, guide" />
- <link rel="icon" href="data:;base64,=">
- <style>
- * {
- margin:0;
- padding:0;
- }
- .hidden {
- display: none !important;
- }
- body.has-js .noscript {
- display: none;
- }
- pre {
- /*background: #fcfcfc;*/
- padding: 2px;
- word-wrap: break-word;
- }
- a {
- text-decoration: none;
- }
- .row:not(.firstrow):hover .cell {
- background: #fffdc6;
- }
- .firstrow {
- position: sticky;
- top:0;
- }
- .firstrow .cell {
- padding-top: 10px;
- padding-bottom: 10px;
- }
- .cell {
- display: table-cell;
- padding: 5px 7px;
- background: #fdf5ff;
- border: 1px solid #fff;
- width:220px;
- min-width:220px;
- max-width:220px;
- word-wrap: break-word;
- box-sizing: border-box;
- }
- .cell.columnheader {
- background: #8e0bab;
- color: #efefef;
- }
- .cell.firstcolumn {
- background: #f6eaf9;
- width:100px;
- max-width:100px;
- min-width:100px;
- vertical-align: middle;
- }
- .menu {
- display: none;
- position: absolute;
- width: 150px;
- top:40px;
- left:0;
- padding:5px;
- background: #700d86;
- border: 1px solid #fff;
- }
- .menu .item {
- display: block;
- padding: 7px 15px;
- box-sizing: border-box;
- }
- .menu .item:hover {
- background: #4a1c54;
- }
- .menu .item .checkmark {
- visibility:hidden;
- margin-right:5px;
- }
- .menu .item.checked .checkmark {
- visibility:visible;
- }
- .cell.menu-btn {
- background-color: #700d86;
- color: #efefef;
- cursor: pointer;
- }
- .menu-btn:hover {
- background: #600a73;
- }
- .menu-btn:focus {
- background: #700d86;
- color: #efefef;
- }
- .menu-btn:focus .menu {
- display: unset;
- }
- </style>
- </head>
- <body>
- <div class="table">
- <div class="row firstrow">
- <div tabindex="0" class="cell columnheader firstcolumn menu-btn">
- <span title="Menu to toggle languages">☰ MENU</span>
- <ul class="menu">
- <li class="item checked noscript" title="You are seeing this message because JavaScript is disabled in your browser. Please enable JavaScript to enjoy full feature set."><span class="checkmark">!!</span>JS disabled, some features may not work</li>
- <li class="item checked" data-toggle="js" ><span class="checkmark">✓</span>JavaScript</li>
- <li class="item checked" data-toggle="php"><span class="checkmark">✓</span>PHP</li>
- <li class="item checked" data-toggle="cpp"><span class="checkmark">✓</span>C++</li>
- <li class="item checked" data-toggle="py" ><span class="checkmark">✓</span>Python</li>
- </ul>
- </div>
- <div class="cell columnheader js">
- Javascript
- </div>
- <div class="cell columnheader php">
- PHP
- </div>
- <div class="cell columnheader cpp">
- C++
- </div>
- <div class="cell columnheader py">
- Python
- </div>
- </div>
- <div class="row">
- <div class="cell firstcolumn">
- Print
- </div>
- <div class="cell js"><!-- Javascript -->
- <pre>
- alert('test');
- </pre>
- </div>
- <div class="cell php"><!-- PHP -->
- <pre>
- echo 'test';
- </pre>
- </div>
- <div class="cell cpp"><!-- C++ -->
- <pre>
- #include <iostream>
- int main() {
- std::cout << "test";
- }
- </pre>
- </div>
- <div class="cell py"><!-- Python -->
- <pre>
- print('test')
- </pre>
- </div>
- </div>
- <div class="row">
- <div class="cell firstcolumn">
- Comment
- </div>
- <div class="cell js"><!-- Javascript -->
- <pre>
- // comment
- /* multiline
- test */
- </pre>
- </div>
- <div class="cell php"><!-- PHP -->
- <pre>
- // comment
- /* multiline
- test */
- </pre>
- </div>
- <div class="cell cpp"><!-- C++ -->
- <pre>
- // comment
- /* multiline
- test */
- </pre>
- </div>
- <div class="cell py"><!-- Python -->
- <pre>
- # comment
- """
- multiline
- test
- """
- </pre>
- </div>
- </div>
- <div class="row">
- <div class="cell firstcolumn">
- Variable
- </div>
- <div class="cell js"><!-- Javascript -->
- <pre>
- var a;
- var b = 5;
- var c = 10;
- </pre>
- </div>
- <div class="cell php"><!-- PHP -->
- <pre>
- //
- $b = 5;
- $c = 'test';
- </pre>
- </div>
- <div class="cell cpp"><!-- C++ -->
- <pre>
- int a;
- int b = 5;
- str c = "test";
- </pre>
- </div>
- <div class="cell py"><!-- Python -->
- <pre>
- #
- b = 5
- c = 'test'
- </pre>
- </div>
- </div>
- <div class="row">
- <div class="cell firstcolumn">
- Function
- </div>
- <div class="cell js"><!-- Javascript -->
- <pre>
- function test() { ... }
- function add(a, b) {
- return a + b;
- }
- </pre>
- </div>
- <div class="cell php"><!-- PHP -->
- <pre>
- function test() { ... }
- function add($a, $b) {
- return $a + $b;
- }
- </pre>
- </div>
- <div class="cell cpp"><!-- C++ -->
- <pre>
- void test() { ... }
- int add(int a, int b) {
- return a + b;
- }
- </pre>
- </div>
- <div class="cell py"><!-- Python -->
- <pre>
- def test():
- ...
- def add(x, y):
- return x + y
- </pre>
- </div>
- </div>
- <div class="row">
- <div class="cell firstcolumn">
- If
- </div>
- <div class="cell js"><!-- Javascript -->
- <pre>
- if ( a > b ) {
- ...
- } elseif ( b == c ) {
- ...
- } else {
- ...
- }
- </pre>
- </div>
- <div class="cell php"><!-- PHP -->
- <pre>
- if ( $a > $b ) {
- ...
- } elseif ( b == c ) {
- ...
- } else {
- ...
- }
- </pre>
- </div>
- <div class="cell cpp"><!-- C++ -->
- <pre>
- if ( a > b ) {
- ...
- } elseif ( b == c ) {
- ...
- } else {
- ...
- }
- </pre>
- </div>
- <div class="cell py"><!-- Python -->
- <pre>
- if b > a:
- ...
- elif b == c:
- ...
- else:
- ...
- </pre>
- </div>
- </div>
- </div>
- <script>
- // @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat
- // Get element out of an identifier
- function el(query) {
- return document.querySelector(query);
- }
- // Get all elements out of an identifier
- function ela(query) {
- return document.querySelectorAll(query);
- }
- // Loop through all elements
- function forall(query, callbfunc) {
- var elems = document.querySelectorAll(query);
- for (var i = 0, len = elems.length; i < len; i++) {
- callbfunc(elems[i]);
- }
- }
- // Add onclick event function
- function onclick(query, callbfunc) {
- forall(query, function(el) {
- el.addEventListener('click', function(){
- callbfunc(el);
- });
- });
- }
- // Show or hide
- function toggle(query) {
- forall(query, function(el) {
- if (el.style.display === "none") {
- el.style.display = "block";
- } else {
- el.style.display = "none";
- }
- });
- }
- // Add or remove an HTML class
- function toggleClass(query, class_name) {
- forall(query, function(el) {
- el.classList.toggle(class_name);
- });
- }
- // Some browsers like Badwolf doesn't support <noscript> elements
- // This is a workaround
- el('body').classList.add('has-js');
- onclick('.menu .item', function(el){
- if (el.hasAttribute('data-toggle')) {
- toggleClass('.'+el.getAttribute('data-toggle'), 'hidden');
- el.classList.toggle('checked');
- }
- });
- // @license-end
- </script>
- </body>
- </html>
|