Spaces:

anuragshas
/

invoice-generator

Running

App Files Files Community

anuragshas commited on Jun 30

Commit

dd7420a

1 Parent(s): 9807072

add: tailwindcss

Browse files

Files changed (6) hide show

.postcssrc +5 -0
eslint.config.mjs +44 -0
index.html +66 -47
package-lock.json +0 -0
package.json +15 -14
style.css +1 -78

.postcssrc ADDED Viewed

	@@ -0,0 +1,5 @@

+{
+    "plugins": {
+        "@tailwindcss/postcss": {}
+    }
+}

eslint.config.mjs ADDED Viewed

	@@ -0,0 +1,44 @@

+import { defineConfig } from "eslint/config";
+import globals from "globals";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+export default defineConfig([{
+    extends: compat.extends("eslint:recommended"),
+    languageOptions: {
+        globals: {
+            ...globals.browser,
+            ...globals.node,
+        },
+        ecmaVersion: 12,
+        sourceType: "module",
+    },
+    rules: {
+        indent: ["error", 2],
+        quotes: ["error", "single"],
+        semi: ["error", "always"],
+        "no-unused-vars": ["error", {
+            args: "all",
+            argsIgnorePattern: "^_",
+            caughtErrors: "all",
+            caughtErrorsIgnorePattern: "^_",
+            destructuredArrayIgnorePattern: "^_",
+            varsIgnorePattern: "^_",
+            ignoreRestSiblings: true,
+        }],
+    },
+}]);

index.html CHANGED Viewed

@@ -8,65 +8,84 @@
   <link rel="stylesheet" href="style.css">
 </head>
-<body>
-  <h1>Quotation Generator</h1>
-  <div id="form-container">
-    <form id="quotation-form">
-      <fieldset>
-        <legend>Your Company Details</legend>
-        <input type="text" id="company-name" name="company-name" placeholder="Company Name" required>
-        <textarea id="company-address" name="company-address" placeholder="Address" required></textarea>
-        <input type="text" id="company-phone" name="company-phone" placeholder="Phone">
-        <input type="email" id="company-email" name="company-email" placeholder="Email">
-        <input type="text" id="company-gstin" name="company-gstin" placeholder="GSTIN">
       </fieldset>
-      <fieldset>
-        <legend>Customer Company Details</legend>
-        <input type="text" id="customer-name" name="customer-name" placeholder="Customer Name" required>
-        <textarea id="customer-address" name="customer-address" placeholder="Address" required></textarea>
-        <input type="text" id="customer-phone" name="customer-phone" placeholder="Phone">
-        <input type="email" id="customer-email" name="customer-email" placeholder="Email">
-        <input type="text" id="customer-gstin" name="customer-gstin" placeholder="GSTIN">
       </fieldset>
-      <fieldset>
-        <legend>Quotation Details</legend>
-        <input type="text" id="quotation-number" name="quotation-number" placeholder="Quotation Number" required>
-        <input type="date" id="quotation-date" name="quotation-date" required>
       </fieldset>
-      <fieldset>
-        <legend>Items</legend>
-        <table id="items-table">
           <thead>
-            <tr>
-              <th>S.No</th>
-              <th>Description</th>
-              <th>HSN Code</th>
-              <th>Qty</th>
-              <th>Unit Price</th>
-              <th>Discount (%)</th>
-              <th>Amount</th>
-              <th></th>
             </tr>
           </thead>
           <tbody>
           </tbody>
         </table>
-        <button type="button" id="add-item">Add Item</button>
       </fieldset>
-      <fieldset>
-        <legend>Additional Charges</legend>
-        <label>IGST (%)<input type="number" id="igst-rate" name="igst-rate" value="0" min="0"></label>
-        <label>Freight Charges<input type="number" id="freight-charges" name="freight-charges" value="0"
-            min="0"></label>
       </fieldset>
-      <fieldset>
-        <legend>Bank Details</legend>
-        <input type="text" id="bank-name" name="bank-name" placeholder="Bank Name" required>
-        <input type="text" id="bank-account" name="bank-account" placeholder="Account Number" required>
-        <input type="text" id="bank-ifsc" name="bank-ifsc" placeholder="IFSC Code" required>
-        <input type="text" id="bank-branch" name="bank-branch" placeholder="Branch" required>
       </fieldset>
-      <button type="submit">Generate Quotation</button>
     </form>
   </div>
   <div id="quotation-output" style="display:none;"></div>

   <link rel="stylesheet" href="style.css">
 </head>
+<body class="bg-gray-100">
+  <h1 class="text-3xl font-bold text-center my-8">Quotation Generator</h1>
+  <div id="form-container" class="container mx-auto">
+    <form id="quotation-form" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+      <fieldset class="border border-gray-300 p-4 mb-4">
+        <legend class="text-lg font-semibold mb-2">Your Company Details</legend>
+        <input type="text" id="company-name" name="company-name" placeholder="Company Name" required
+          class="w-full p-2 border border-gray-300 rounded mb-2">
+        <textarea id="company-address" name="company-address" placeholder="Address" required
+          class="w-full p-2 border border-gray-300 rounded mb-2"></textarea>
+        <input type="text" id="company-phone" name="company-phone" placeholder="Phone"
+          class="w-full p-2 border border-gray-300 rounded mb-2">
+        <input type="email" id="company-email" name="company-email" placeholder="Email"
+          class="w-full p-2 border border-gray-300 rounded mb-2">
+        <input type="text" id="company-gstin" name="company-gstin" placeholder="GSTIN"
+          class="w-full p-2 border border-gray-300 rounded">
       </fieldset>
+      <fieldset class="border border-gray-300 p-4 mb-4">
+        <legend class="text-lg font-semibold mb-2">Customer Company Details</legend>
+        <input type="text" id="customer-name" name="customer-name" placeholder="Customer Name" required
+          class="w-full p-2 border border-gray-300 rounded mb-2">
+        <textarea id="customer-address" name="customer-address" placeholder="Address" required
+          class="w-full p-2 border border-gray-300 rounded mb-2"></textarea>
+        <input type="text" id="customer-phone" name="customer-phone" placeholder="Phone"
+          class="w-full p-2 border border-gray-300 rounded mb-2">
+        <input type="email" id="customer-email" name="customer-email" placeholder="Email"
+          class="w-full p-2 border border-gray-300 rounded mb-2">
+        <input type="text" id="customer-gstin" name="customer-gstin" placeholder="GSTIN"
+          class="w-full p-2 border border-gray-300 rounded">
       </fieldset>
+      <fieldset class="border border-gray-300 p-4 mb-4">
+        <legend class="text-lg font-semibold mb-2">Quotation Details</legend>
+        <input type="text" id="quotation-number" name="quotation-number" placeholder="Quotation Number" required
+          class="w-full p-2 border border-gray-300 rounded mb-2">
+        <input type="date" id="quotation-date" name="quotation-date" required
+          class="w-full p-2 border border-gray-300 rounded">
       </fieldset>
+      <fieldset class="border border-gray-300 p-4 mb-4">
+        <legend class="text-lg font-semibold mb-2">Items</legend>
+        <table id="items-table" class="w-full mb-2">
           <thead>
+            <tr class="bg-gray-200">
+              <th class="p-2 border border-gray-300">S.No</th>
+              <th class="p-2 border border-gray-300">Description</th>
+              <th class="p-2 border border-gray-300">HSN Code</th>
+              <th class="p-2 border border-gray-300">Qty</th>
+              <th class="p-2 border border-gray-300">Unit Price</th>
+              <th class="p-2 border border-gray-300">Discount (%)</th>
+              <th class="p-2 border border-gray-300">Amount</th>
+              <th class="p-2 border border-gray-300"></th>
             </tr>
           </thead>
           <tbody>
           </tbody>
         </table>
+        <button type="button" id="add-item"
+          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add Item</button>
       </fieldset>
+      <fieldset class="border border-gray-300 p-4 mb-4">
+        <legend class="text-lg font-semibold mb-2">Additional Charges</legend>
+        <label class="block mb-2">IGST (%)<input type="number" id="igst-rate" name="igst-rate" value="0" min="0"
+            class="w-full p-2 border border-gray-300 rounded"></label>
+        <label class="block">Freight Charges<input type="number" id="freight-charges" name="freight-charges" value="0"
+            min="0" class="w-full p-2 border border-gray-300 rounded"></label>
       </fieldset>
+      <fieldset class="border border-gray-300 p-4 mb-4">
+        <legend class="text-lg font-semibold mb-2">Bank Details</legend>
+        <input type="text" id="bank-name" name="bank-name" placeholder="Bank Name" required
+          class="w-full p-2 border border-gray-300 rounded mb-2">
+        <input type="text" id="bank-account" name="bank-account" placeholder="Account Number" required
+          class="w-full p-2 border border-gray-300 rounded mb-2">
+        <input type="text" id="bank-ifsc" name="bank-ifsc" placeholder="IFSC Code" required
+          class="w-full p-2 border border-gray-300 rounded mb-2">
+        <input type="text" id="bank-branch" name="bank-branch" placeholder="Branch" required
+          class="w-full p-2 border border-gray-300 rounded">
       </fieldset>
+      <button type="submit" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Generate
+        Quotation</button>
     </form>
   </div>
   <div id="quotation-output" style="display:none;"></div>

package-lock.json CHANGED Viewed

The diff for this file is too large to render. See raw diff

package.json CHANGED Viewed

@@ -3,21 +3,20 @@
   "version": "1.0.0",
   "description": "Client-side quotation generator with linting setup",
   "scripts": {
-    "prepare": "husky install",
     "lint:js": "eslint script.js tests",
-    "lint:css": "stylelint '**/*.css'",
-    "lint:html": "htmlhint index.html",
-    "lint": "npm-run-all lint:html lint:css lint:js",
     "test": "node tests/test.js"
   },
   "devDependencies": {
-    "eslint": "^8.0.0",
-    "htmlhint": "^0.15.0",
-    "husky": "^8.0.3",
-    "lint-staged": "^13.3.0",
-    "npm-run-all": "^4.1.5",
-    "stylelint": "^15.0.0",
-    "stylelint-config-standard": "^32.0.0"
   },
   "lint-staged": {
     "*.js": [
@@ -25,9 +24,11 @@
     ],
     "*.css": [
       "stylelint --fix"
-    ],
-    "*.html": [
-      "htmlhint"
     ]
   }
 }

   "version": "1.0.0",
   "description": "Client-side quotation generator with linting setup",
   "scripts": {
+    "prepare": "husky",
+    "dev": "parcel index.html",
+    "build": "parcel build index.html",
     "lint:js": "eslint script.js tests",
+    "lint": "npm run lint:js",
     "test": "node tests/test.js"
   },
   "devDependencies": {
+    "eslint": "^9.3.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.1.2",
+    "parcel": "^2.15.4",
+    "stylelint": "^16.21.0",
+    "stylelint-config-standard": "^38.0.0"
   },
   "lint-staged": {
     "*.js": [
     ],
     "*.css": [
       "stylelint --fix"
     ]
+  },
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.1.11",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.11"
   }
 }

style.css CHANGED Viewed

@@ -1,46 +1,4 @@
-body {
-  font-family: Arial, sans-serif;
-  margin: 20px;
-}
-fieldset {
-  margin-bottom: 15px;
-  border: 1px solid #ccc;
-  padding: 10px;
-}
-legend {
-  font-weight: bold;
-}
-input,
-textarea {
-  width: 100%;
-  padding: 5px;
-  margin: 5px 0;
-  box-sizing: border-box;
-}
-#items-table,
-.quotation-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-bottom: 10px;
-}
-#items-table th,
-#items-table td,
-.quotation-table th,
-.quotation-table td {
-  border: 1px solid #ccc;
-  padding: 5px;
-  text-align: left;
-}
-button {
-  padding: 8px 12px;
-  margin: 5px;
-}
 .quotation-print {
   max-width: 800px;
@@ -163,38 +121,3 @@ button {
   margin-top: 20px;
   font-weight: bold;
 }
-@media screen and (width <=768px) {
-  #items-table thead {
-    display: none;
-  }
-  #items-table,
-  #items-table tbody,
-  #items-table tr,
-  #items-table td {
-    display: block;
-    width: 100%;
-  }
-  #items-table tr {
-    margin-bottom: 15px;
-  }
-  #items-table td {
-    text-align: right;
-    padding-left: 50%;
-    position: relative;
-  }
-  #items-table td::before {
-    content: attr(data-label);
-    position: absolute;
-    left: 0;
-    width: 45%;
-    padding-left: 15px;
-    font-weight: bold;
-    text-align: left;
-  }
-}

+@import url("tailwindcss");
 .quotation-print {
   max-width: 800px;
   margin-top: 20px;
   font-weight: bold;
 }