JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv='X-UA-Compatible' content='IE=edge' />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style/grid.css">
    <title>Hello world</title>
  </head>
  <!DOCTYPE html>
  <html>
  <head>
    <meta http-equiv='X-UA-Compatible' content='IE=edge' />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style/grid.css">
    <title>Hello world</title>
  </head>
  <body>
    <div class="container">
      <div class="header" id="header">
        topPanel - content topPanel - content topPanel - content topPanel - content
      </div>
      <div class="menu" id="menu">
        <p>
          <input type="button" id="deleteDiniedObjects" value="deleteDiniedObjects " />
          <p>
            <input type="button" id="button2" value="Кнопка 2" />
            <p>
              <input type="button" id="button3" value="Кнопка 3" />
              <p>
                <input type="button" id="button4" value="Кнопка 4" />
                <p>
      </div>
      <div class="rightMenu" id="rightMenu">
        <p>
          <input type="button" id="button5" value="Кнопка 5" />
          <p>
            <input type="button" id="button6" value="Кнопка 6" />
            <p>
              <input type="button" id="button7" value="Кнопка 7" />
              <p>
                <input type="button" id="button8" value="Кнопка 8" />
                <p>
      </div>
      <div class="map" id="map">
        <pre>
            MAP MAP MAP
            MAP MAP MAP
            MAP MAP MAP
            </pre>
      </div>
      <div class="footer" id="footer">
        bottomPanel - content bottomPanel - content bottomPanel - content bottomPanel - content
      </div>
    </div>
    <script src="scripts/main.js" type="text/javascript" charset="utf-8"></script>
 ...

CSS

.container {
  background: #ccc;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  /*grid-template-rows: 40px 100px 40px;*/
}

.header {
  background: rgba(255, 0, 0, 0.5);
  grid-column: span 16;
}

.menu {
  background: rgba(0, 255, 0, 0.5);
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

.map {
  background: rgba(0, 0, 255, 0.5);
  grid-column-start: 3;
  grid-column-end: 15;
  grid-row-start: 2;
  grid-row-end: 3;
}

.rightMenu {
  background: rgba(255, 255, 0, 0.5);
  grid-column-start: 15;
  grid-column-end: 17;
  grid-row-start: 2;
  grid-row-end: 3;
}

.footer {
  background: rgba(255, 0, 255, 0.5);
  grid-column: span 16;
}

@media screen and (max-width: 600px) {
  .header {
    background: red;
    grid-column: span 16;
  }
  .menu {
    background: green;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .rightMenu {
    background: yellow;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
  }
  .map {
    background: blue;
    grid-column-start: 4;
    grid-column-end: 17;
    grid-row-start: 2;
    grid-row-end: 4;
  }
  .footer {
    background: rgba(255, 0, 255, 0.5);
    grid-column: span 16;
  }
}

JavaScript

function buttonClick1() {
  map = document.getElementById('map');
  map.innerHTML = " <pre> БАБАХ  1</pre>	";
}

function buttonClick2() {
  map = document.getElementById('map');
  map.innerHTML = " <pre> БАБАХ  2</pre>	";
}

function buttonClick3() {
  map = document.getElementById('map');
  map.innerHTML = " <pre> БАБАХ  3</pre>	";
}

function buttonClick4() {
  map = document.getElementById('map');
  map.innerHTML = " <pre> БАБАХ  4</pre>	";
}

function buttonClick5() {
  map = document.getElementById('map');
  map.innerHTML = " <pre> БАБАХ  5</pre>	";
}

function buttonClick6() {
  map = document.getElementById('map');
  map.innerHTML = " <pre> БАБАХ  6</pre>	";
}

function buttonClick7() {
  map = document.getElementById('map');
  map.innerHTML = " <pre> БАБАХ  7</pre>	";
}

function buttonClick8() {
  map = document.getElementById('map');
  map.innerHTML = " <pre> БАБАХ  8</pre>	";
}

function LoadMap() {
  map = document.getElementById('map');
  map.innerHTML = " <pre> ЗАГРУЗКА КАРТЫ  </pre>	";
}

document.getElementById('deleteDiniedObjects').onclick = deleteDiniedObjects;
document.getElementById('button2').onclick = buttonClick2;
document.getElementById('button3').onclick = buttonClick3;
document.getElementById('button4').onclick = buttonClick4;
document.getElementById('button5').onclick = buttonClick5;
document.getElementById('button6').onclick = buttonClick6;
document.getElementById('button7').onclick = buttonClick7;
document.getElementById('button8').onclick = buttonClick8;


function deleteDiniedObjects() {
  var allow = 'map'
  var dinied = ['map', 'rightMenu']
  var all = document.getElementsByTagName('*')
  for (var i = 0; i < all.length; i++) {
    // alert(all[i].id); 
    for (j in dinied) {
      if (all[i].id === dinied[j]) {
        //alert (all[i].id)

        all[i].remove();
        i = -1;
      }

    }
  }

}