diff --git a/index.html b/index.html
index c6f5f16..576b93d 100644
--- a/index.html
+++ b/index.html
@@ -1,68 +1,80 @@
-
-
-
-
-
-
-
-
- Inventory
-
-
-
-
+
+
+
+
+
+
+
+
+ Inventory
+
+
+
+
diff --git a/script.js b/script.js
index f86aa0e..7b0532d 100644
--- a/script.js
+++ b/script.js
@@ -8,187 +8,155 @@ const removeAll = document.querySelector("#remove-all");
let itemsArr = [];
class ListItem {
- constructor(itemNumber, count, itemName) {
- this.itemNumber = itemNumber;
- this.count = count;
- this.itemName = itemName;
- this.addItem();
- }
+ constructor(itemNumber, count, itemName) {
+ this.itemNumber = itemNumber;
+ this.count = count;
+ this.itemName = itemName;
+ this.addItem();
+ }
- createBarcode() {
- const { itemNumber } = this;
- const barcode = document.createElement("img");
- JsBarcode(barcode, itemNumber, {
- text: itemNumber,
- width: 1,
- // height: 100,
- });
- barcode.classList.add(
- "barcode"
- // "p-0",
- // "col-auto",
- // "col-xl-auto",
- // "col-xxl-auto",
- // "col-lg-auto",
- // "col-md-auto",
- // "col-sm-auto",
- // "col-auto",
- // "mw-75"
- );
- this.barcode = barcode;
- }
+ createBarcode() {
+ const { itemNumber } = this;
+ const barcode = document.createElement("img");
+ JsBarcode(barcode, itemNumber, {
+ text: itemNumber,
+ width: 1,
+ });
+ barcode.classList.add("barcode");
+ this.barcode = barcode;
+ }
- createCountField() {
- const countField = document.createElement("input");
- countField.setAttribute("id", "count-container");
- countField.setAttribute("type", "number");
- countField.setAttribute("min", "0");
- countField.setAttribute("max", "9999");
- countField.setAttribute("maxlength", "4");
- countField.setAttribute("size", "4");
- // countField.classList.add("col-1", "col-sm-1", "col-md-1", "col-lg-1", "col-xl-1", "col-xxl-1", "p-0");
- countField.classList.add("form-control", "count-container");
- countField.value = this.count || 0;
- countField.onclick = () => countField.select();
- countField.addEventListener("keydown", () => {
- if (event.which === 13) {
- this.count = countField.value;
- countField.blur();
- }
- });
- this.countField = countField;
- }
+ createCountField() {
+ const countField = document.createElement("input");
+ countField.setAttribute("id", "count-container");
+ countField.setAttribute("type", "number");
+ countField.setAttribute("min", "0");
+ countField.setAttribute("max", "9999");
+ countField.setAttribute("maxlength", "4");
+ countField.setAttribute("size", "4");
+ countField.classList.add("form-control", "count-container");
+ countField.value = this.count || 0;
+ countField.onclick = () => countField.select();
+ countField.addEventListener("keydown", () => {
+ if (event.which === 13) {
+ this.count = countField.value;
+ countField.blur();
+ }
+ });
+ this.countField = countField;
+ }
- createDeleteButton() {
- const deleteButton = document.createElement("button");
- // deleteButton.textContent = "X";
- deleteButton.classList.add("delete-button", "btn", "btn-close", "btn-close-white", "btn-sm");
- deleteButton.setAttribute("aria-label", "Close");
- deleteButton.setAttribute("type", "button");
- deleteButton.addEventListener("click", () => {
- this.li.remove();
- itemsArr = itemsArr.filter(e => e !== this);
- // console.log(itemsArr);
- });
- this.deleteButton = deleteButton;
- }
+ createDeleteButton() {
+ const deleteButton = document.createElement("button");
+ deleteButton.classList.add(
+ "delete-button",
+ "btn",
+ "btn-close",
+ "btn-close-white",
+ "btn-sm"
+ );
+ deleteButton.setAttribute("aria-label", "Close");
+ deleteButton.setAttribute("type", "button");
+ deleteButton.addEventListener("click", () => {
+ this.li.remove();
+ itemsArr = itemsArr.filter(e => e !== this);
+ });
+ this.deleteButton = deleteButton;
+ }
- createEditItemNameField() {
- const editItemName = document.createElement("input");
- // const editItemName = document.createElement("textarea");
- editItemName.setAttribute("type", "text");
- // editItemName.setAttribute("size", "15");
- editItemName.setAttribute("id", "edit-name");
- // editItemName.setAttribute("id", "edit-name");
- editItemName.classList.add("form-control", "edit-name");
- // editItemName.setAttribute("style", "height:" + editItemName.scrollHeight + "px;overflow-y:hidden;");
- // editItemName.addEventListener("input", OnInput, false);
- editItemName.value = this.itemName;
- editItemName.addEventListener("click", () => editItemName.select());
- editItemName.addEventListener("keydown", () => {
- if (event.which === 13) {
- this.itemName = editItemName.value;
- editItemName.blur();
- }
- });
- this.editItemName = editItemName;
- }
+ createEditItemNameField() {
+ const editItemName = document.createElement("input");
+ editItemName.setAttribute("type", "text");
+ editItemName.setAttribute("id", "edit-name");
+ editItemName.classList.add("form-control", "edit-name");
+ editItemName.value = this.itemName;
+ editItemName.addEventListener("click", () => editItemName.select());
+ editItemName.addEventListener("keydown", () => {
+ if (event.which === 13) {
+ this.itemName = editItemName.value;
+ editItemName.blur();
+ }
+ });
+ this.editItemName = editItemName;
+ }
- resetInputValues() {
- inputText.value = "";
- countInput.value = "";
- itemNameInput.value = "";
- }
+ resetInputValues() {
+ inputText.value = "";
+ countInput.value = "";
+ itemNameInput.value = "";
+ }
- addItem() {
- this.createBarcode();
- this.createCountField();
- this.createDeleteButton();
- this.createEditItemNameField();
- // const bigContainer = document.createElement("div");
- // bigContainer.classList.add("big-container", "form-group", "col-6");
- // bigContainer.append(this.deleteButton, this.countField);
- const li = document.createElement("li");
- // const firstRow = document.createElement("div");
- // const secondRow = document.createElement("div");
- // firstRow.classList.add("row", "col-12");
- // secondRow.classList.add("row", "col-12", "second-row");
- // firstRow.append(this.editItemName, this.deleteButton);
- // secondRow.append(this.barcode, this.countField);
- // li.append(firstRow, secondRow);
- // const liContainer = document.createElement("span");
- // liContainer.classList.add("li-container")
- // liContainer.append(this.barcode, this.editItemName, this.deleteButton, this.countField);
- // li.appendChild(liContainer);
- const inputContainerCol = document.createElement("div");
- inputContainerCol.classList.add("input-container-column");
- const editItemNameDiv = document.createElement("div");
- editItemNameDiv.classList.add("input-group", "input-group-lg", "input-container-name");
- const editItemNameSpan = document.createElement("span");
- editItemNameSpan.classList.add("input-group-text");
- editItemNameSpan.textContent = "Item Name: ";
- const countFieldSpan = document.createElement("span");
- countFieldSpan.classList.add("input-group-text");
- countFieldSpan.textContent = "Item Count: ";
- editItemNameDiv.append(editItemNameSpan, this.editItemName);
- const countFieldDiv = document.createElement("div");
- countFieldDiv.classList.add("input-group", "input-group-lg", "input-container-count");
- countFieldDiv.append(countFieldSpan, this.countField);
- inputContainerCol.append(this.deleteButton, editItemNameDiv, countFieldDiv);
- li.append(this.barcode, inputContainerCol);
- // li.append(this.barcode, this.editItemName, this.deleteButton, this.countField);
- // li.classList.add("row", "row-cols-auto", "col-8");
- // li.classList.add("col-12");
- this.li = li;
- li.listItem = this;
- // li.append(this.editItemName, this.barcode);
- // li.appendChild(bigContainer);
- list.appendChild(li);
- this.resetInputValues();
- inputText.focus();
- // this.editItemName.style.width = window.getComputedStyle(this.barcode).width;
- // this.editItemName.style.width = this.barcode.offsetWidth
- // this.editItemName.style.width = this.editItemName.value.length;
- // console.log(window.getComputedStyle(this.barcode).width);
- // window.addEventListener(
- // "resize",
- // () => (this.editItemName.style.width = window.getComputedStyle(this.barcode).width)
- // );
- // setTimeout(() => {
- // this.editItemName.style.width = window.getComputedStyle(this.barcode).width;
- // }, 0.1);
- }
+ addItem() {
+ this.createBarcode();
+ this.createCountField();
+ this.createDeleteButton();
+ this.createEditItemNameField();
+ const li = document.createElement("li");
+ const inputContainerCol = document.createElement("div");
+ console.log(
+ "🚀 ~ file: script.js ~ line 124 ~ ListItem ~ addItem ~ inputContainerCol",
+ inputContainerCol
+ );
+ inputContainerCol.classList.add("input-container-column");
+ const editItemNameDiv = document.createElement("div");
+ editItemNameDiv.classList.add(
+ "input-group",
+ "input-group-lg",
+ "input-container-name"
+ );
+ const editItemNameSpan = document.createElement("span");
+ editItemNameSpan.classList.add("input-group-text");
+ editItemNameSpan.textContent = "Item Name: ";
+ const countFieldSpan = document.createElement("span");
+ countFieldSpan.classList.add("input-group-text");
+ countFieldSpan.textContent = "Item Count: ";
+ editItemNameDiv.append(editItemNameSpan, this.editItemName);
+ const countFieldDiv = document.createElement("div");
+ countFieldDiv.classList.add(
+ "input-group",
+ "input-group-lg",
+ "input-container-count"
+ );
+ countFieldDiv.append(countFieldSpan, this.countField);
+ inputContainerCol.append(this.deleteButton, editItemNameDiv, countFieldDiv);
+ li.append(this.barcode, inputContainerCol);
+ this.li = li;
+ li.listItem = this;
+ list.appendChild(li);
+ this.resetInputValues();
+ inputText.focus();
+ }
}
generateButton.addEventListener("click", clickHandler);
inputText.addEventListener("keydown", () => {
- event.which === 13 && clickHandler();
+ event.which === 13 && clickHandler();
});
countInput.addEventListener("keydown", () => {
- event.which === 13 && clickHandler();
+ event.which === 13 && clickHandler();
});
itemNameInput.addEventListener("keydown", () => {
- event.which === 13 && clickHandler();
+ event.which === 13 && clickHandler();
});
removeAll.addEventListener("click", () => {
- while (list.firstChild) {
- list.removeChild(list.firstChild);
- }
+ while (list.firstChild) {
+ list.removeChild(list.firstChild);
+ }
});
function clickHandler() {
- const { value } = inputText;
- const itemNumbersArr = itemsArr.map(({ itemNumber }) => itemNumber);
- if (!value || itemNumbersArr.includes(value)) return;
- const item = new ListItem(value, countInput.value, itemNameInput.value);
- itemsArr.push(item);
+ const { value } = inputText;
+ const itemNumbersArr = itemsArr.map(({ itemNumber }) => itemNumber);
+ if (!value || itemNumbersArr.includes(value)) return;
+ const item = new ListItem(value, countInput.value, itemNameInput.value);
+ itemsArr.push(item);
}
function OnInput() {
- this.style.height = "auto";
- this.style.height = this.scrollHeight + "px";
+ this.style.height = "auto";
+ this.style.height = this.scrollHeight + "px";
}
diff --git a/style.css b/style.css
index 15f593b..0f00d6d 100644
--- a/style.css
+++ b/style.css
@@ -1,205 +1,110 @@
-/* html {
- width: 100%;
- height: 100%;
-}
-body {
- width: 100%;
- height: 100%;
- background: #2c3e50;
- background: -webkit-linear-gradient(to left, #3498db, #2c3e50);
- background: linear-gradient(to left, #3498db, #2c3e50);
-}
-
-@media only screen and (min-width: 1000px) { */
* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
}
+
html {
- width: 100%;
- height: 100%;
- /* font-size: 1vw; */
+ width: 100%;
+ height: 100%;
}
+
body {
- width: 100%;
- height: 100%;
- background: #2c3e50;
- background: -webkit-linear-gradient(to left, #3498db, #2c3e50);
- background: linear-gradient(to left, #3498db, #2c3e50);
- overflow-y: scroll;
+ width: 100%;
+ height: 100%;
+ background: #2c3e50;
+ background: -webkit-linear-gradient(to left, #3498db, #2c3e50);
+ background: linear-gradient(to left, #3498db, #2c3e50);
+ overflow-y: scroll;
}
+
.row {
- margin-top: 1rem;
-}
-.container {
- /* display: -ms-grid;
- display: grid;
- -ms-grid-columns: 400px auto;
- grid-template-columns: 700px auto; */
- /* align-items: flex-start; */
- /* padding: 30px; */
- /* width: 90%; */
-}
-/* #generate {
- cursor: pointer;
- width: auto;
- } */
+ margin-top: 1rem;
+}
+
ul.list {
- /* grid-column: 1; */
- list-style: none;
- /* align-self: flex-start;
- justify-self: start;
- width: 100%; */
+ list-style: none;
}
+
ul.list > li {
- /* width: 100%;
- margin-top: 20px;
- display: -ms-grid;
- display: grid;
- align-items: flex-start;
- justify-content: start; */
- /* width: 60%; */
- /* display: flex;
- flex-direction: column; */
- /* display: grid;
- grid-template-columns: 1fr 1fr; */
- /* grid-template-areas: 'myArea'; */
- /* display: inline-grid; */
- /* grid-template-columns: auto; */
- /* justify-content: start; */
- /* display: flex;
- flex-wrap: wrap; */
- /* flex-direction: column; */
- /* flex: 1 3 0; */
- /* align-items: flex-start; */
- /* justify-content: start; */
- /* width: 50%; */
- /* display: inline-block; */
- display: grid;
- grid-template-columns: repeat(2, auto);
- justify-content: start;
- column-gap: 3%;
- margin-top: 4%;
+ display: grid;
+ grid-template-columns: repeat(2, auto);
+ justify-content: start;
+ column-gap: 3%;
+ margin-top: 4%;
}
+
ul.list > li > img {
- box-shadow: 5px 5px 10px -1px black;
- /* display: block; */
+ box-shadow: 5px 5px 10px -1px black;
}
+
button.delete-button {
- grid-column: 1;
- box-shadow: 2px 2px 10px -1px black;
- /* width: 3%; */
- grid-row: 1;
- justify-self: end;
- /* width: 2rem; */
-}
-/* input.count {
- max-width: 100px;
- } */
-button#remove-all {
- /* width: 200px; */
- /* justify-self: start; */
- /* margin-left: 30px; */
- /* grid-column: 1; */
-}
-/* div.count {
- grid-column: 1;
- grid-row: 2;
- } */
+ grid-column: 1;
+ box-shadow: 2px 2px 10px -1px black;
+ grid-row: 1;
+ justify-self: end;
+}
+
input#count-container {
- /* font-size: 15px;
- box-shadow: 2px 2px 14px -2px black;
- min-width: 60px;
- width: 30px;
- max-width: 100px; */
- /* height: 20%; */
- /* align-self: center; */
- cursor: default;
- width: auto;
- /* align-self: stretch; */
- /* grid-column: 1; */
- /* grid-row: 4; */
- /* width: 50%; */
- /* width: 2.75rem; */
- /* padding: 0; */
+ cursor: default;
+ width: auto;
}
+
.barcode {
- /* grid-column: 1; */
- border-top-style: none;
- /* flex-grow: 0; */
- /* align-self: flex-start; */
- /* grid-area: myArea; */
- /* grid-row: 3; */
- /* grid-column: 1; */
- /* width: 10%; */
- /* width: auto; */
- /* width: 10rem; */
- /* height: 10rem; */
-}
-div.big-container {
- /* grid-column: 2; */
- /* margin-left: 20px;
- display: flex;
- flex-direction: column;
- gap: 20px;
- align-items: center;
- justify-content: center; */
+ border-top-style: none;
}
+
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
- -webkit-appearance: none;
- margin: 0;
+ -webkit-appearance: none;
+ margin: 0;
}
+
input.edit-name#edit-name {
- /* grid-column: 1; */
- /* display: ; */
- border-bottom: none;
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- z-index: 1;
- cursor: default;
- text-align: left;
- width: min(66px, 100%);
- margin-right: 0;
- /* box-sizing: content-box; */
- /* width: auto; */
- /* height: fit-content; */
- /* word-wrap: break-word; */
- /* grid-row: 2; */
- /* width: 50%; */
+ border-bottom: none;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ z-index: 1;
+ cursor: default;
+ text-align: left;
+ width: min(66px, 100%);
+ margin-right: 0;
}
+
.li-container {
- /* width: 100%; */
- display: flex;
- flex-direction: column;
- overflow: hidden;
- background-color: red;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ background-color: red;
}
+
.second-row {
- margin-top: 0;
+ margin-top: 0;
}
+
.input-container-name {
- grid-column: 1;
+ grid-column: 1;
}
+
.input-container-count {
- grid-column: 1;
+ grid-column: 1;
}
+
.input-container-column {
- grid-column: 2;
- grid-row: 1;
- display: grid;
- grid-template-rows: auto;
- align-items: flex-start;
+ grid-column: 2;
+ grid-row: 1;
+ display: grid;
+ grid-template-rows: auto;
+ align-items: flex-start;
}
+
@media only screen and (max-width: 768px) {
- .input-container-column {
- grid-column: 1;
- grid-row: 2;
- display: grid;
- grid-template-rows: auto;
- align-items: flex-start;
- row-gap: 5%;
- }
-}
-/* } */
+ .input-container-column {
+ grid-column: 1;
+ grid-row: 2;
+ display: grid;
+ grid-template-rows: auto;
+ align-items: flex-start;
+ row-gap: 5%;
+ }
+}