JSFiddle - React, Tailwind, and code Playground

by tymek04

HTML

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="znaki_specjalne.css">
    </head>
    <body style = "background-color: grey">
        <button onclick = "dod_sym()">
            Dodaj symbol
        </button>
        <div id = "wybór_planszy">
            <button id = "close" onclick = "zamknij()">X</button>
            <ul>
                <li id = "LatExtA">Latin Extended-A</li>
                <li id = "LatExtB">Latin Extended-B</li>
                <li id = "LatExtAdd">Latin Extended Additional</li>
                <li id = "IPAExt">IPA Extensions</li>
                <li id = "SpaModLet">Spacing Modifier Letters</li>
            </ul>
        </div>
         <div contentEditable="true" id = "textEditor" style = "background-color: white; width: 600px; height: 800px; margin-top: 50; padding: 30px; position: fixed">
         </div>
    </body>
</html>

CSS

#wybór_planszy {
    display: none;
    position: absolute;
    z-index: 10;
    background-color: white;
    border: solid black 1px;
    padding: 10px;
}

#close {
    background-color: red;
    color: white;
    position: absolute;
    right: 0;
    top: 0;
}

JavaScript

function dod_sym(){
document.getElementById("wybór_planszy").style.display = "block";
}

function zamknij(){
 document.getElementById("wybór_planszy").style.display = "none";
}

 document.getElementById("LatExtA").addEventListener("click", generuj_symbole("0100","017F"));

 /*
 function generuj_symbole(let a, let b){
}*/