JSFiddle - React, Tailwind, and code Playground

by tymek04

HTML

<!DOCTYPE HTML>
<html>
<body>
  <button id = "add_row">
    Dodaj wiersz
  </button>
  <button id = "remove_row">
    Usuń wiersz
  </button>
  <br></br>
  <div id = "main">
    <div class = "row">
      <div id = "dropbox1" class = "drop"></div>
      <div id = "dropbox2" class = "drop"></div>
      <div id = "dropbox3" class = "drop"></div>
    </div>
    <div class = "row">
      <div id = "dropbox4" class = "drop"></div>
      <div id = "dropbox5" class = "drop"></div>
      <div id = "dropbox6" class = "drop"></div>
    </div>
    <div class = "row">
      <div id = "dropbox7" class = "drop"></div>
      <div id = "dropbox8" class = "drop"></div>
      <div id = "dropbox9" class = "drop"></div>
    </div>
  </div>
  
  <button id = "film">Wstaw filmik</button>
  <div id = "i_frames"></div>
  <input type="file" id="input">
  <div id = "photos"></div>
  <button id = "add_text">Dodaj tekst</button>
  <div id = "texts"></div>
  <button id = "edit">EDYTUJ / PUŚĆ FILM</button>
  <button id = "move">PRZESUŃ</button>
  
  <!-- Przyciski do tekstu-->
  
  <div id= "buts">
    <div id="buts-1" contenteditable="false">
			<button id="ctrlX" data-click="X">
				Ctrl+X<br /><span class="title">wytnij</span>
			</button>
			<button id="ctrlC" data-click="C">
				Ctrl+C<br /><span class="title">kopiuj</span>
			</button>
			<button id="ctrlV" data-click="V">
				Ctrl+V<br /><span class="title">nie działa</span>
			</button>
		</div>
		<div id="buts-2" contenteditable="false">
			<button id="ctrlB" data-click="B">
				Ctrl+B<br /><span class="title">pogubienie</span>
			</button>
			<button id="ctrlI" data-click="I">
				Ctrl+I<br /><span class="title">kursywa</span>
			</button>
			<button id="ctrlU" data-click="U">
				Ctrl+U<br /><span class="title">podkreślenie</span>
			</button>
		</div>
		<div id="buts-3" contenteditable="false">
			<button id="ctrlL" data-click="L">
				Ctrl+L<br /><span class="title">wyrównaj do lewej</span>
			</button>
			<button id="ctrlE"...

CSS

#main {
  height: 600px;
  width: 600px;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.drop {
  border: 1px solid black;
  overflow: hidden;
}

/* Przyciski edycji */

#buts {
	width: 100%;
	height: 150px;
	display: grid;
	grid-template-columns: auto auto auto auto auto auto auto auto;
	grid-template-rows: auto auto;
	border: 2px solid black;
}

#buts > div {
	display: grid;
	grid-gap: 10px;
	border: 2px solid black;
	padding: 3px;
}

#buts-1 {
	grid-area: 1 / 1 / 2 / 4;
	grid-template-columns: auto auto auto;
}

#buts-2 {
	grid-area: 2 / 1 / 3 / 4;
	grid-template-columns: auto auto auto;
}

#buts-3 {
	grid-area: 1 / 4 / 3 / 6;
	grid-template: auto auto / auto auto;
}

#buts-4 {
	grid-area: 1 / 6 / 3 / 7;
	grid-template-rows: auto auto;
}

#buts-5 {
	grid-area: 1 / 7 / 3 / 9;
	grid-template: auto auto / auto auto;
}

JavaScript

let num_of_rows = 3;
let num_of_cols = 3;
document.getElementById("main").style.height = "600px";
document.getElementById("main").style.width = "600px";
for(let k = 0; k < document.getElementsByClassName("row").length; k++){
 	document.getElementsByClassName("row")[k].style.height = "200px";
}

function get_grid(){
	result = "";
  for(let k = 0; k < document.getElementsByClassName("row").length; k++){
  	result += document.getElementsByClassName("row")[k].style.height+" ";
  }
  return result;
}

document.getElementById("add_row").addEventListener("click", function(){
	var n_row = document.createElement("div");
  var n_1 = document.createElement("div");
  var n_2 = document.createElement("div");
  var n_3 = document.createElement("div");
  n_row.classList.add("row");
  n_row.style.height = "200px";
  n_1.classList.add("drop");
  n_2.classList.add("drop");
  n_3.classList.add("drop");
  n_1.id = "dropbox"+(num_of_rows*num_of_cols+1);
  n_2.id = "dropbox"+(num_of_rows*num_of_cols+2);
  n_3.id = "dropbox"+(num_of_rows*num_of_cols+3);
  num_of_rows++;
  n_row.appendChild(n_1);
  n_row.appendChild(n_2);
  n_row.appendChild(n_3);
  document.getElementById("main").appendChild(n_row);
  document.getElementById("main").style.height = "calc("+document.getElementById("main").style.height+" + 200px)";
  document.getElementById("main").style.gridTemplateRows = get_grid();
  n_1.addEventListener('dragover', function(event){
		allowDrop(event);
	});
	n_1.addEventListener('drop', function(event){
		drop(event);
	});
  n_2.addEventListener('dragover', function(event){
		allowDrop(event);
	});
	n_2.addEventListener('drop', function(event){
		drop(event);
	});
  n_3.addEventListener('dragover', function(event){
		allowDrop(event);
	});
	n_3.addEventListener('drop', function(event){
		drop(event);
	});
});

document.getElementById("remove_row").addEventListener("click", function(){
	let inp = prompt("Podaj numer wiersza który chcesz usunąć");
  let number = Number(inp);
  if(number...