Finishing Front-End Modal for the "Create Deck" feature - Editing 2 files and creating 1 file - "main.ts", "styles.css", "Modals.ts"

src/Modals.ts

@@ -0,0 +1,46 @@
+import {
+    App, ButtonComponent, Modal
+} from "obsidian";
+
+export class CreateDeckModal extends Modal {
+    constructor(app: App) {
+        super(app);
+    }
+
+    onOpen() {
+        const {contentEl} = this;
+        // Adding the title of the modal
+        contentEl.createEl("h1", {
+            text: "Create a new deck",
+            cls: [
+                "ankiIntegrationModal__h1--width",
+                "ankiIntegrationModal__h1--text-align"
+            ]
+        })
+        // Adding the input of the modal
+        const inputEl = contentEl.createEl("input", {
+            type: "text",
+            placeholder: "Enter the name of your new deck.",
+            cls: [
+                "ankiIntegrationModal__input--width"
+            ]
+        })
+        // Adding the submitting button
+        contentEl.createEl("button", {
+            text: "Create deck",
+            attr: {type: "submit"},
+            cls: [
+                "ankiIntegrationModal__button--width",
+                "ankiIntegrationModal__button--margin",
+                "ankiIntegrationModal__button--padding"
+            ]
+        }).addEventListener("click", () => {
+            this.close();
+        })
+    }
+
+    onClose() {
+        const {contentEl} = this;
+        contentEl.empty();
+    }
+}

src/main.ts

@@ -7,7 +7,10 @@ import {
     AnkiIntegrationSettings,
     DEFAULT_SETTINGS,
     AnkiIntegrationSettingTab
-} from "./AnkiIntegrationSettingTab"
+} from "./AnkiIntegrationSettingTab";
+import {
+    CreateDeckModal
+} from "./Modals";
 
 export default class AnkiIntegration extends Plugin {
     settings: AnkiIntegrationSettings;
@@ -16,7 +19,16 @@ export default class AnkiIntegration extends Plugin {
         await this.loadSetting();
 
         // Adding the setting tab the user can use to edit settings.
-        this.addSettingTab(new AnkiIntegrationSettingTab(this.app, this))
+        this.addSettingTab(new AnkiIntegrationSettingTab(this.app, this));
+
+        // Adding a command to open the CreateDeckModal.
+        this.addCommand({
+           id: 'create-a-new-deck',
+           name: 'Create a new deck',
+           callback: () => {
+               new CreateDeckModal(this.app).open();
+           }
+        });
     }
 
     async onunload() {

styles.css

@@ -0,0 +1,23 @@
+.ankiIntegrationModal__h1--margin {
+    margin-top: 0;
+}
+
+.ankiIntegrationModal__h1--text-align {
+    text-align: center;
+}
+
+.ankiIntegrationModal__input--width {
+    width: 100%;
+}
+
+.ankiIntegrationModal__button--width {
+    width: 40%;
+}
+
+.ankiIntegrationModal__button--margin {
+    margin: 16px 30% 0;
+}
+
+.ankiIntegrationModal__button--padding {
+    padding: 4px 0;
+}