diff --git a/index.html b/index.html index 5f29e10..a8739e6 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,12 @@
+ +
+ + + +
diff --git a/script.js b/script.js index 58a0930..589658b 100644 --- a/script.js +++ b/script.js @@ -2,6 +2,10 @@ const container = document.getElementById("container"); const editor = document.getElementById("editor"); +const input = document.getElementById("input"); +const insert = document.getElementById("insert"); +const cancel = document.getElementById("cancel"); + // List of labels let labels = []; let closing = false; @@ -90,16 +94,24 @@ function drawLabel() { let height = maxY - minY; if (width > minimumSizeX && height > minimumSizeY) { - // Create a label and push it into the array of labels - // The index is +1 because it is - let label = createLabel(minX, minY, width, height, labels.length); - labels.push(label); - container.appendChild(label); + new Promise(function (resolve, reject) { + insert.addEventListener("click", (e) => { + if (input.value) { + resolve(input.value); + } else reject("no input"); + e.preventDefault(); + }); + }).then((textInput) => { + // Create a label and push it into the array of labels + let label = createLabel(minX, minY, width, height, labels.length, textInput); + labels.push(label); + container.appendChild(label); + }); } } // Create the label element -function createLabel(x, y, width, height, index) { +function createLabel(x, y, width, height, index, input) { let label = document.createElement("div"); label.classList.add("label"); label.style.left = `${x}px`; @@ -125,8 +137,13 @@ function createLabel(x, y, width, height, index) { close.addEventListener("click", (e) => { label.remove(); }); - label.appendChild(close); + // Add the text + let text = document.createElement("p"); + text.classList.add("label--text"); + text.innerHTML = input; + label.appendChild(text); + return label; } diff --git a/style.css b/style.css index 8122fe8..05d4692 100644 --- a/style.css +++ b/style.css @@ -32,6 +32,8 @@ body { position: absolute; background-color: tomato; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2); + + overflow: hidden; } .label--number { @@ -59,3 +61,26 @@ body { cursor: pointer; } +.label--text { + margin: 1ch 0; + padding: 0 1ch; + + overflow: hidden; + width: 100%; + height: 100%; + text-overflow: ellipsis; +} + +.text-input { + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.text-input button { + background: none; + border: none; + cursor: pointer; +}