diff --git a/favicon.svg b/favicon.svg new file mode 100644 index 0000000..7c9e79d --- /dev/null +++ b/favicon.svg @@ -0,0 +1,2 @@ + +file_type_excel \ No newline at end of file diff --git a/index.html b/index.html index 7445a44..00c161b 100644 --- a/index.html +++ b/index.html @@ -1,31 +1,50 @@ - - - - + + + + Excel Sheet Generator - - - - - - + + + + + + + + +
-

Excel Sheet Generator

- - -
- - -
+

Excel Sheet Generator

+ + +
+ + +
+
- - -
+ + +
- - - - \ No newline at end of file + + + + + + + + + diff --git a/script.js b/script.js index bb93c4d..9667bce 100644 --- a/script.js +++ b/script.js @@ -1,29 +1,65 @@ -let table = document.getElementsByClassName("sheet-body")[0], -rows = document.getElementsByClassName("rows")[0], -columns = document.getElementsByClassName("columns")[0] -tableExists = false +// Cached DOM elements +const table = document.querySelector(".sheet-body"); +const rowsInput = document.querySelector(".rows"); +const columnsInput = document.querySelector(".columns"); +let tableExists = false; +// Utility function to show alerts +const showAlert = (title, text, icon) => { + Swal.fire({ title, text, icon }); +}; + +// Function to generate the table const generateTable = () => { - let rowsNumber = parseInt(rows.value), columnsNumber = parseInt(columns.value) - table.innerHTML = "" - for(let i=0; i` - } - table.innerHTML += tableRow - } - if(rowsNumber>0 && columnsNumber>0){ - tableExists = true - } -} + const rowsNumber = parseInt(rowsInput.value); + const columnsNumber = parseInt(columnsInput.value); -const ExportToExcel = (type, fn, dl) => { - if(!tableExists){ - return + if (isNaN(rowsNumber) || isNaN(columnsNumber)) { + showAlert("Error!", "Please enter valid numbers!", "error"); + return; + } + + if (rowsNumber < 1 || columnsNumber < 1) { + showAlert("Error!", "Please enter positive numbers!", "error"); + return; + } + + table.innerHTML = ""; + for (let i = 0; i < rowsNumber; i++) { + let tableRow = ""; + for (let j = 0; j < columnsNumber; j++) { + tableRow += ``; } - var elt = table - var wb = XLSX.utils.table_to_book(elt, { sheet: "sheet1" }) - return dl ? XLSX.write(wb, { bookType: type, bookSST: true, type: 'base64' }) - : XLSX.writeFile(wb, fn || ('MyNewSheet.' + (type || 'xlsx'))) -} \ No newline at end of file + tableRow += ""; + table.innerHTML += tableRow; + } + + tableExists = true; + showAlert("Good job!", "Table generated successfully!", "success"); +}; + +// Function to export the table to Excel +const exportToExcel = (type, filename, download) => { + if (!tableExists) { + showAlert("Error!", "Please generate a table first!", "error"); + return; + } + + const workbook = XLSX.utils.table_to_book(table, { sheet: "Sheet1" }); + if (download) { + XLSX.write(workbook, { bookType: type, bookSST: true, type: "base64" }); + } else { + XLSX.writeFile(workbook, filename || `MyNewSheet.${type || "xlsx"}`); + } + + showAlert("Success!", "Table exported successfully.", "success"); + tableExists = false; +}; + +// Event listeners for buttons +const generateButton = document.getElementById("generateButton"); +const exportButton = document.getElementById("exportButton"); + +generateButton.addEventListener("click", generateTable); +exportButton.addEventListener("click", () => exportToExcel("xlsx")); + diff --git a/style.css b/style.css index afe7446..703beb0 100644 --- a/style.css +++ b/style.css @@ -1,63 +1,65 @@ /* https://coolors.co/db2b39-29335c-f3a712-5aff15-aaffe5 */ -*{ - padding: 0; - margin: 0; - box-sizing: border-box; - position: relative; - outline: none; - font-family: 'Bitter', serif; -} -body{ - padding: 10px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - background-color: #f7f7f7; -} -.form{ - display: flex; - flex-direction: column; - align-items: flex-start; - width: 100%; - max-width: 500px; -} -.form > *{ - margin: 6px 0; -} -.form input{ - width: 100%; - padding: 8px 4px; - font-size: 16px; - border: 2px solid #21212142; - background-color: #f7f7f7; -} -.form .btns{ - display: flex; - flex-direction: row; - gap: 10px; -} -.form button{ - padding: 8px 24px; - font-size: 16px; - background-color: #F3A712; - border: 2px solid #21212142; - cursor: pointer; -} -.form button:nth-of-type(1){ - background-color: #5AFF15; -} -.form button:hover{ - opacity: 0.7; -} -.table{ - max-width: 100%; - overflow-x: auto; -} -td{ - border: 2px solid #21212142; - min-width: 100px; - max-width: 100px; - padding: 8px 4px; - font-size: 18px; -} \ No newline at end of file +* { + padding: 0; + margin: 0; + box-sizing: border-box; + position: relative; + outline: none; + font-family: "Bitter", serif; +} +body { + padding: 10px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #f7f7f7; +} +.form { + display: flex; + flex-direction: column; + align-items: flex-start; + width: 100%; + max-width: 500px; +} +.form > * { + margin: 6px 0; +} +.form input { + width: 100%; + padding: 8px 4px; + font-size: 16px; + border: 2px solid #21212142; + background-color: #f7f7f7; +} +.form .btns { + display: flex; + flex-direction: row; + gap: 10px; +} +.form button { + padding: 8px 24px; + font-size: 16px; + background-color: #f3a712; + border: 2px solid #21212142; + cursor: pointer; +} +.form button:nth-of-type(1) { + background-color: #5aff15; +} +.form button:is(:hover, :focus-visible) { + opacity: 0.7; +} +.table { + max-width: 100%; + overflow-x: auto; +} +td { + border: 2px solid #21212142; + min-width: 100px; + max-width: fit-content; + white-space: wrap; + padding: 8px 4px; + font-size: 18px; + height: 42px; +}