intern2grow · billalben · Jun 3, 2024
diff --git a/favicon.svg b/favicon.svg
diff --git a/index.html b/index.html
@@ -1,31 +1,50 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Excel Sheet Generator</title>
-    <link rel="stylesheet" href="./style.css">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Bitter:wght@500&display=swap" rel="stylesheet">
-</head>
-<body>
+    <!-- Favicon -->
+    <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
+    <!-- Google Fonts -->
+    <link rel="stylesheet" href="./style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Bitter:wght@500&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
     <div class="form">
-        <h1>Excel Sheet Generator</h1>
-        <input type="number" class="rows" placeholder="Enter number of rows">
-        <input type="number" class="columns" placeholder="Enter number of columns">
-        <div class="btns">
-            <button onclick="generateTable()">Generate</button>
-            <button onclick="ExportToExcel('xlsx')">Export</button>
-        </div>
+      <h1>Excel Sheet Generator</h1>
+      <input type="number" class="rows" placeholder="Enter number of rows" />
+      <input
+        type="number"
+        class="columns"
+        placeholder="Enter number of columns"
+      />
+      <div class="btns">
+        <button id="generateButton">Generate</button>
+        <button id="exportButton">Export</button>
+      </div>
     </div>
+
     <div class="table">
-        <table cellspacing="6px">
-            <tbody class="sheet-body"></tbody>
-        </table>
+      <table cellspacing="6px">
+        <tbody class="sheet-body"></tbody>
+      </table>
     </div>
-</body>
-<script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>
-<script src="./script.js"></script>
-</html>
+
+    <!-- Javascript -->
+    <script
+      type="text/javascript"
+      src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"
+    ></script>
+    <!-- Sweet Alert 2 library -->
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <!-- Custom js -->
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git 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<rowsNumber; i++){
-        var tableRow = ""
-        for(let j=0; j<columnsNumber; j++){
-            tableRow += `<td contenteditable></td>`
-        }
-        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 = "<tr>";
+    for (let j = 0; j < columnsNumber; j++) {
+      tableRow += `<td contenteditable></td>`;
     }
-    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')))
-}
+    tableRow += "</tr>";
+    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
@@ -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;
-}
+* {
+  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;
+}