Add ID function and other QOL changes.

README.md

@@ -204,6 +204,12 @@ There are a few more advanced methods to how the Html class works:
   new Html("span").classOff("my-class");
   // <span></span>
   ```
+- `.id()`  
+   Set the id of an element
+   ```js
+  new Html("div").id("my-id");
+  // <div id="my-id"></div>
+   ```
 - `.on(eventName, eventHandler)`  
    Add an event listener
 
@@ -299,6 +305,22 @@ There are a few more advanced methods to how the Html class works:
   input.getValue(); // 'I typed this text'
   ```
 
+## Building
+
+Clone the repository:
+
+```
+git clone https://github.com/datkat21/html.git
+cd html
+```
+
+Install dependencies and run build script:
+
+```
+npm i
+npm run build # Build script.
+```
+
 ## Repository
 
 You can find the repository [on GitHub.](https://github.com/datkat21/html)

dist/html.d.ts

@@ -35,6 +35,12 @@ export default class Html {
      * @returns The HTML element (as Html)
      */
     queryHtml(selector: string): Html | null;
+    /**
+     * Sets the ID of the element.
+     * @param val The ID to set.
+     * @returns Html
+     */
+    id(val: string): Html;
     /**
      * Toggle on/off a class.
      * @param val The class to toggle.

dist/html.js

@@ -54,6 +54,18 @@ export default class Html {
   queryHtml(selector) {
     return new Html(this.elm.querySelector(selector));
   }
+  /**
+   * Sets the ID of the element.
+   * @param val The ID to set.
+   * @returns Html
+   */
+  id(val) {
+    if (this.elm.id != null) {
+      throw Error("The element already has an ID.");
+    }
+    this.elm.id = val;
+    return this;
+  }
   /**
    * Toggle on/off a class.
    * @param val The class to toggle.

build.js → format.js

@@ -14,4 +14,5 @@ const result = await format(compiledJsContent, {
   filepath: compiledJsPath
 });
 
-fs.writeFileSync(compiledJsPath, result);
+fs.writeFileSync(compiledJsPath, result);
+console.log(`Formatting (and building) complete. Wrote to ${compiledJsPath}`)

package.json

@@ -18,7 +18,7 @@
   "author": "datkat21",
   "license": "ISC",
   "scripts": {
-    "build": "npx tsc && node build.js"
+    "build": "npx tsc && node format.js"
   },
   "repository": {
     "type": "git",

src/html.ts

@@ -54,6 +54,18 @@ export default class Html {
   queryHtml(selector: string): Html | null {
     return new Html(this.elm.querySelector(selector) as HTMLElement);
   }
+  /**
+   * Sets the ID of the element.
+   * @param val The ID to set.
+   * @returns Html
+   */
+  id(val: string): Html {
+    if(this.elm.id != null) {
+      throw Error("The element already has an ID.");
+    }
+    this.elm.id = val;
+    return this;
+  }
   /**
    * Toggle on/off a class.
    * @param val The class to toggle.