From 1fd9a2c8135522b1ac5432ed4889469428a43799 Mon Sep 17 00:00:00 2001
From: Chad Kreiger <ckreiger1@gmail.com>
Date: Fri, 31 May 2024 19:23:51 -0700
Subject: [PATCH 01/23] CanvasID API usage - sample formatting

---
 docs/index.md | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/docs/index.md b/docs/index.md
index 7d3c92c..1b238b6 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -30,8 +30,29 @@ Lorem ipsum...
 
 ### guitar-diagrams-config.js
 
-#### guitar-diagrams-config.js Members
+### guitar-diagrams-config.js Members
 
+#### canvasID
+
+Gets and sets the ID attribute of the canvas HTML tag.
+
+- **Parameters**: {string} paramCanvasID
+- **Return Value**: #canvasID
+
+*Example:*
+
+```
+get canvasID() {
+        return this.#canvasID;
+    } // end get canvasID property
+    /**
+     * Sets the ID attribute of the canvas HTML tag.
+     * @param {string} paramCanvasID - The ID attribute of the canvas HTML tag.
+     */
+    set canvasID(paramCanvasID) {
+        this.#canvasID = paramCanvasID;
+    } // end get canvasID property'
+```
 #### guitar-diagrams-config.js Methods
 
 Lorem ipsum...

From 97a5743a1e979222039bfe94b75dae88f80c3093 Mon Sep 17 00:00:00 2001
From: Chad Kreiger <ckreiger1@gmail.com>
Date: Fri, 31 May 2024 19:31:14 -0700
Subject: [PATCH 02/23] Update to the index file sample

---
 docs/index.md | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/docs/index.md b/docs/index.md
index 1b238b6..c0ab92f 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -42,16 +42,7 @@ Gets and sets the ID attribute of the canvas HTML tag.
 *Example:*
 
 ```
-get canvasID() {
-        return this.#canvasID;
-    } // end get canvasID property
-    /**
-     * Sets the ID attribute of the canvas HTML tag.
-     * @param {string} paramCanvasID - The ID attribute of the canvas HTML tag.
-     */
-    set canvasID(paramCanvasID) {
-        this.#canvasID = paramCanvasID;
-    } // end get canvasID property'
+gdj1.config.canvasID = 'diagram-1-canvas'; // specify the canvas element's an ID
 ```
 #### guitar-diagrams-config.js Methods
 

From b135ad6e6fb37db1b99e020787a8ff69be46f252 Mon Sep 17 00:00:00 2001
From: Kenny Carlile <kennycarlile@gmail.com>
Date: Sat, 1 Jun 2024 20:07:08 -0700
Subject: [PATCH 03/23] Updating docs formatting

---
 .../guitar-diagrams-config.mjs                |  8 +-
 docs/index.md                                 | 80 ++++++++++++++-----
 2 files changed, 62 insertions(+), 26 deletions(-)

diff --git a/docs/examples/js/guitar-diagrams-js/guitar-diagrams-config.mjs b/docs/examples/js/guitar-diagrams-js/guitar-diagrams-config.mjs
index 73a46ca..f04f4e8 100644
--- a/docs/examples/js/guitar-diagrams-js/guitar-diagrams-config.mjs
+++ b/docs/examples/js/guitar-diagrams-js/guitar-diagrams-config.mjs
@@ -63,16 +63,16 @@ export class GuitarDiagramsJSConfig {
     // ========== BEGIN properties
     // ----- References
     /**
-     * Gets the ID attribute of the canvas HTML tag.
-     * @return {string} The ID attribute of the canvas HTML tag.
+     * Gets the ID attribute of the canvas HTML element.
+     * @return {string} The ID attribute of the canvas HTML element.
      */
     get canvasID() {
         return this.#canvasID;
     } // end get canvasID property
 
     /**
-     * Sets the ID attribute of the canvas HTML tag.
-     * @param {string} paramCanvasID - The ID attribute of the canvas HTML tag.
+     * Sets the ID attribute of the canvas HTML element.
+     * @param {string} paramCanvasID - The ID attribute of the canvas HTML element.
      */
     set canvasID(paramCanvasID) {
         this.#canvasID = paramCanvasID;
diff --git a/docs/index.md b/docs/index.md
index c0ab92f..120f18b 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -20,42 +20,78 @@ Lorem ipsum...
 
 ## API Usage
 
-Lorem ipsum...
+Lorem ipsum...some description, if necessary, for the API usage section.
+
+### `guitar-diagrams.js` Class
+
+#### `guitar-diagrams.js` Constructors
+
+Constructor(s) in `guitar-diagrams.js` go here...
+
+#### `guitar-diagrams.js` Static Public Members
+
+Static members in `guitar-diagrams.js` go here... (We might need to talk about how to handled these.)
 
-### guitar-diagrams.js
+#### `guitar-diagrams.js` Public Properties
 
-#### guitar-diagrams.js Members
+Properties in `guitar-diagrams.js` go here...
 
-#### guitar-diagrams.js Methods
+#### `guitar-diagrams.js` Public Methods
 
-### guitar-diagrams-config.js
+Methods in `guitar-diagrams.js` go here...
 
-### guitar-diagrams-config.js Members
+### `guitar-diagrams-config.js` Class
 
-#### canvasID
+#### `guitar-diagrams-config.js` Constructors
 
-Gets and sets the ID attribute of the canvas HTML tag.
+Constructor(s) in `guitar-diagrams-config.js` go here...
 
-- **Parameters**: {string} paramCanvasID
-- **Return Value**: #canvasID
+#### `guitar-diagrams-config.js` Public Properties
 
-*Example:*
+Properties in `guitar-diagrams-config.js` go here...
 
+##### canvasID (get)
+
+Exists as a property of the config property on the GuitarDiagrams object. Gets the ID attribute of the canvas HTML element.
+
+- **Parameters**: {string} The ID attribute of the canvas HTML element.
+- **Return Value**: _None_
+- **Default Value**: {string} 'gdjCanvas'
+
+_Example:_
+
+```javascript
+gdj1.config.canvasID = 'diagram-1-canvas';
 ```
-gdj1.config.canvasID = 'diagram-1-canvas'; // specify the canvas element's an ID
+
+##### canvasID (set)
+
+Exists as a property of the config property on the GuitarDiagrams object. Sets the ID attribute of the canvas HTML element.
+
+- **Parameters**: _None_
+- **Return Value**: {string} The ID attribute of the canvas HTML element.
+- **Default Value**: {string} 'gdjCanvas'
+
+_Example:_
+
+```javascript
+console.log('Canvas ID: ' + gdj1.config.canvasID);
 ```
-#### guitar-diagrams-config.js Methods
 
-Lorem ipsum...
+#### `guitar-diagrams-config.js` Public Methods
 
-| Name | Description | Parameters | Return Value | Example | Notes |
-| ---- | ----------- | ---------- | ------------ | ------- | ----- |
-| z | y | x | w | v | u |
+_None._
 
-### Configuration Values
+### `guitar-diagrams-marker.js` Class
 
-Lorem ipsum...
+#### `guitar-diagrams-marker.js` Constructors
+
+Constructor(s) in `guitar-diagram-marker.js` go here... (There's only a default constructor as of now.)
+
+#### `guitar-diagrams-marker.js` Public Properties
+
+Properties in `guitar-diagrams-marker.js` go here...
+
+#### `guitar-diagrams-marker.js` Public Methods
 
-| Name | Description | Required | Values | Default | Example | Notes |
-| ---- | ----------- | -------- | ------ | ------- | ------- | ----- |
-| z | y | x | w | v | u | t |
+Methods in `guitar-diagrams-marker.js` go here...

From 9ff300f22f65182cce0ed87438d17ef213240592 Mon Sep 17 00:00:00 2001
From: Chad Kreiger <ckreiger1@gmail.com>
Date: Sun, 2 Jun 2024 12:11:06 -0700
Subject: [PATCH 04/23] colorFretboard example attempted

---
 docs/index.md | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/docs/index.md b/docs/index.md
index 120f18b..fb6f165 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -77,6 +77,33 @@ _Example:_
 ```javascript
 console.log('Canvas ID: ' + gdj1.config.canvasID);
 ```
+##### colorFretboard (get)
+
+Exists as a property of the config property on the GuitarDiagrams object. Gets the HTML color code of the fretboard.
+
+- **Parameters**: {string} The HTML color code of the fretboard.
+- **Return Value**: _None_
+- **Default Value**: {string} '#795548'
+
+_Example:_
+
+```javascript
+gdj5.config.colorFretboard = '#FFE0B2';
+```
+
+##### colorFretboard (set)
+
+Exists as a property of the config property on the GuitarDiagrams object. Sets the HTML color code of the fretboard.
+
+- **Parameters**: _None_
+- **Return Value**: {string} The HTML color code of the fretboard.
+- **Default Value**: {string} '#795548'
+
+_Example:_
+
+```javascript
+PENDING
+```
 
 #### `guitar-diagrams-config.js` Public Methods
 

From ca0c7013bb3d8ee88c73fadd5c9b1acab1dc607c Mon Sep 17 00:00:00 2001
From: Kenny Carlile <kennycarlile@gmail.com>
Date: Sun, 2 Jun 2024 22:41:09 -0700
Subject: [PATCH 05/23] Fixing missing line in MD

---
 docs/index.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/index.md b/docs/index.md
index fb6f165..9289773 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -77,6 +77,7 @@ _Example:_
 ```javascript
 console.log('Canvas ID: ' + gdj1.config.canvasID);
 ```
+
 ##### colorFretboard (get)
 
 Exists as a property of the config property on the GuitarDiagrams object. Gets the HTML color code of the fretboard.

From 987385b48f995de9569fd85778b9af574bde0fd7 Mon Sep 17 00:00:00 2001
From: Kenny Carlile <kennycarlile@gmail.com>
Date: Mon, 3 Jun 2024 14:27:06 -0700
Subject: [PATCH 06/23] Tweaking formatting, adding TOC

---
 docs/index.md | 90 +++++++++++++++++++++++++++++++++------------------
 1 file changed, 59 insertions(+), 31 deletions(-)

diff --git a/docs/index.md b/docs/index.md
index 9289773..74e57c9 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -22,104 +22,132 @@ Lorem ipsum...
 
 Lorem ipsum...some description, if necessary, for the API usage section.
 
-### `guitar-diagrams.js` Class
-
-#### `guitar-diagrams.js` Constructors
-
-Constructor(s) in `guitar-diagrams.js` go here...
-
-#### `guitar-diagrams.js` Static Public Members
+### Table of Contents
+
+- [Guitar Diagrams JS Documentation](#guitar-diagrams-js-documentation)
+  - [Overview](#overview)
+  - [Getting started](#getting-started)
+    - [Importing the library into your project](#importing-the-library-into-your-project)
+    - [Initializing a diagram](#initializing-a-diagram)
+    - [Creating a diagram with markers](#creating-a-diagram-with-markers)
+  - [API Usage](#api-usage)
+    - [Table of Contents](#table-of-contents)
+    - [`guitar-diagrams.js` Class](#guitar-diagramsjs-class)
+      - [`guitar-diagrams.js` Constructors (non-default)](#guitar-diagramsjs-constructors-non-default)
+      - [`guitar-diagrams.js` Static Public Members](#guitar-diagramsjs-static-public-members)
+      - [`guitar-diagrams.js` Public Properties](#guitar-diagramsjs-public-properties)
+      - [`guitar-diagrams.js` Public Methods](#guitar-diagramsjs-public-methods)
+    - [`guitar-diagrams-config.js` Class](#guitar-diagrams-configjs-class)
+      - [`guitar-diagrams-config.js` Constructors (non-default)](#guitar-diagrams-configjs-constructors-non-default)
+      - [`guitar-diagrams-config.js` Public Properties](#guitar-diagrams-configjs-public-properties)
+        - [canvasID (get)](#canvasid-get)
+        - [canvasID (set)](#canvasid-set)
+        - [colorFretboard (get)](#colorfretboard-get)
+        - [colorFretboard (set)](#colorfretboard-set)
+      - [`guitar-diagrams-config.js` Public Methods](#guitar-diagrams-configjs-public-methods)
+    - [`guitar-diagrams-marker.js` Class](#guitar-diagrams-markerjs-class)
+      - [`guitar-diagrams-marker.js` Constructors (non-default)](#guitar-diagrams-markerjs-constructors-non-default)
+      - [`guitar-diagrams-marker.js` Public Properties](#guitar-diagrams-markerjs-public-properties)
+      - [`guitar-diagrams-marker.js` Public Methods](#guitar-diagrams-markerjs-public-methods)
+
+### <a name="guitar-diagrams.js"></a>`guitar-diagrams.js` Class
+
+#### <a name="guitar-diagrams.js-constructor"></a>`guitar-diagrams.js` Constructors (non-default)
+
+Constructor(s) in `guitar-diagrams.js` go here... or _None._
+
+#### <a name="guitar-diagrams.js-static-public-members"></a>`guitar-diagrams.js` Static Public Members
 
 Static members in `guitar-diagrams.js` go here... (We might need to talk about how to handled these.)
 
-#### `guitar-diagrams.js` Public Properties
+#### <a name="guitar-diagrams.js-public-properties"></a>`guitar-diagrams.js` Public Properties
 
 Properties in `guitar-diagrams.js` go here...
 
-#### `guitar-diagrams.js` Public Methods
+#### <a name="guitar-diagrams.js-public-methods"></a>`guitar-diagrams.js` Public Methods
 
 Methods in `guitar-diagrams.js` go here...
 
-### `guitar-diagrams-config.js` Class
+### <a name="guitar-diagrams-config.js"></a>`guitar-diagrams-config.js` Class
 
-#### `guitar-diagrams-config.js` Constructors
+#### <a name="guitar-diagrams.js-constructors"></a>`guitar-diagrams-config.js` Constructors (non-default)
 
 Constructor(s) in `guitar-diagrams-config.js` go here...
 
-#### `guitar-diagrams-config.js` Public Properties
+#### <a name="guitar-diagrams.js-public-properties"></a>`guitar-diagrams-config.js` Public Properties
 
 Properties in `guitar-diagrams-config.js` go here...
 
 ##### canvasID (get)
 
-Exists as a property of the config property on the GuitarDiagrams object. Gets the ID attribute of the canvas HTML element.
+Exists as a property of the config property on the GuitarDiagrams object. Sets the ID attribute of the canvas HTML element.
 
-- **Parameters**: {string} The ID attribute of the canvas HTML element.
-- **Return Value**: _None_
+- **Parameters**: _None_
+- **Return Value**: {string} The ID attribute of the canvas HTML element.
 - **Default Value**: {string} 'gdjCanvas'
 
 _Example:_
 
 ```javascript
-gdj1.config.canvasID = 'diagram-1-canvas';
+console.log('Canvas ID: ' + gdj1.config.canvasID);
 ```
 
 ##### canvasID (set)
 
-Exists as a property of the config property on the GuitarDiagrams object. Sets the ID attribute of the canvas HTML element.
+Exists as a property of the config property on the GuitarDiagrams object. Gets the ID attribute of the canvas HTML element.
 
-- **Parameters**: _None_
-- **Return Value**: {string} The ID attribute of the canvas HTML element.
+- **Parameters**: {string} The ID attribute of the canvas HTML element.
+- **Return Value**: _None_
 - **Default Value**: {string} 'gdjCanvas'
 
 _Example:_
 
 ```javascript
-console.log('Canvas ID: ' + gdj1.config.canvasID);
+gdj1.config.canvasID = 'diagram-1-canvas';
 ```
 
 ##### colorFretboard (get)
 
 Exists as a property of the config property on the GuitarDiagrams object. Gets the HTML color code of the fretboard.
 
-- **Parameters**: {string} The HTML color code of the fretboard.
-- **Return Value**: _None_
+- **Parameters**: _None_
+- **Return Value**: {string} The HTML color code of the fretboard.
 - **Default Value**: {string} '#795548'
 
 _Example:_
 
 ```javascript
-gdj5.config.colorFretboard = '#FFE0B2';
+console.log('Fretboard color: ' + gdj5.config.colorFretboard);
 ```
 
 ##### colorFretboard (set)
 
 Exists as a property of the config property on the GuitarDiagrams object. Sets the HTML color code of the fretboard.
 
-- **Parameters**: _None_
-- **Return Value**: {string} The HTML color code of the fretboard.
+- **Parameters**: {string} The HTML color code of the fretboard.
+- **Return Value**: _None_
 - **Default Value**: {string} '#795548'
 
 _Example:_
 
 ```javascript
-PENDING
+gdj5.config.colorFretboard = '#FFE0B2';
 ```
 
-#### `guitar-diagrams-config.js` Public Methods
+#### <a name="guitar-diagrams.js-public-methods"></a>`guitar-diagrams-config.js` Public Methods
 
 _None._
 
-### `guitar-diagrams-marker.js` Class
+### <a name="guitar-diagrams-marker.js"></a>`guitar-diagrams-marker.js` Class
 
-#### `guitar-diagrams-marker.js` Constructors
+#### <a name="guitar-diagrams-marker.js-contstructors"></a>`guitar-diagrams-marker.js` Constructors (non-default)
 
 Constructor(s) in `guitar-diagram-marker.js` go here... (There's only a default constructor as of now.)
 
-#### `guitar-diagrams-marker.js` Public Properties
+#### <a name="guitar-diagrams-marker.js-public-properties">`guitar-diagrams-marker.js` Public Properties
 
 Properties in `guitar-diagrams-marker.js` go here...
 
-#### `guitar-diagrams-marker.js` Public Methods
+#### <a name="guitar-diagrams-marker.js-public-methods">`guitar-diagrams-marker.js` Public Methods
 
 Methods in `guitar-diagrams-marker.js` go here...

From cedfa63fbe24e907c2fb88a69b22f0e84c453766 Mon Sep 17 00:00:00 2001
From: Kenny Carlile <kennycarlile@gmail.com>
Date: Mon, 3 Jun 2024 15:54:54 -0700
Subject: [PATCH 07/23] Moving API Docs to api-docs.md

---
 README.md        |   2 +-
 docs/api-docs.md | 129 +++++++++++++++++++++++++++++++++++++++++++++
 docs/index.md    | 132 +----------------------------------------------
 3 files changed, 131 insertions(+), 132 deletions(-)
 create mode 100644 docs/api-docs.md

diff --git a/README.md b/README.md
index f6e059d..6e362c7 100644
--- a/README.md
+++ b/README.md
@@ -151,7 +151,7 @@ See [`docs/code-owners.md`](docs/code-owners.md) for documentation related to de
 
 There are no specific requirements<sup>[1](#footnotes)</sup> for dependencies to use Guitar Diagrams JS other than the standard browser compatibility considerations with CSS, JavaScript, and HTML 5's `<canvas>` tag. Browser compatibility for the `<canvas>` tag can be found on [the MDN `<canvas>` page](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#browser_compatibility).
 
-----
+---
 
 ## References
 
diff --git a/docs/api-docs.md b/docs/api-docs.md
new file mode 100644
index 0000000..e8ed8f1
--- /dev/null
+++ b/docs/api-docs.md
@@ -0,0 +1,129 @@
+# API Documentation
+
+Lorem ipsum...some description, if necessary, for the API usage section.
+
+## Table of Contents
+
+- [API Documentation](#api-documentation)
+  - [Table of Contents](#table-of-contents)
+  - [`guitar-diagrams.js` Class](#guitar-diagramsjs-class)
+    - [`guitar-diagrams.js` Constructors (non-default)](#guitar-diagramsjs-constructors-non-default)
+    - [`guitar-diagrams.js` Static Public Members](#guitar-diagramsjs-static-public-members)
+    - [`guitar-diagrams.js` Public Properties](#guitar-diagramsjs-public-properties)
+    - [`guitar-diagrams.js` Public Methods](#guitar-diagramsjs-public-methods)
+  - [`guitar-diagrams-config.js` Class](#guitar-diagrams-configjs-class)
+    - [`guitar-diagrams-config.js` Constructors (non-default)](#guitar-diagrams-configjs-constructors-non-default)
+    - [`guitar-diagrams-config.js` Public Properties](#guitar-diagrams-configjs-public-properties)
+      - [canvasID (get)](#canvasid-get)
+      - [canvasID (set)](#canvasid-set)
+      - [colorFretboard (get)](#colorfretboard-get)
+      - [colorFretboard (set)](#colorfretboard-set)
+    - [`guitar-diagrams-config.js` Public Methods](#guitar-diagrams-configjs-public-methods)
+  - [`guitar-diagrams-marker.js` Class](#guitar-diagrams-markerjs-class)
+    - [`guitar-diagrams-marker.js` Constructors (non-default)](#guitar-diagrams-markerjs-constructors-non-default)
+    - [`guitar-diagrams-marker.js` Public Properties](#guitar-diagrams-markerjs-public-properties)
+    - [`guitar-diagrams-marker.js` Public Methods](#guitar-diagrams-markerjs-public-methods)
+
+---
+
+## <a name="guitar-diagrams.js"></a>`guitar-diagrams.js` Class
+
+### <a name="guitar-diagrams.js-constructor"></a>`guitar-diagrams.js` Constructors (non-default)
+
+Constructor(s) in `guitar-diagrams.js` go here... or _None._
+
+### <a name="guitar-diagrams.js-static-public-members"></a>`guitar-diagrams.js` Static Public Members
+
+Static members in `guitar-diagrams.js` go here... (We might need to talk about how to handled these.)
+
+### <a name="guitar-diagrams.js-public-properties"></a>`guitar-diagrams.js` Public Properties
+
+Properties in `guitar-diagrams.js` go here...
+
+### <a name="guitar-diagrams.js-public-methods"></a>`guitar-diagrams.js` Public Methods
+
+Methods in `guitar-diagrams.js` go here...
+
+## <a name="guitar-diagrams-config.js"></a>`guitar-diagrams-config.js` Class
+
+### <a name="guitar-diagrams.js-constructors"></a>`guitar-diagrams-config.js` Constructors (non-default)
+
+Constructor(s) in `guitar-diagrams-config.js` go here...
+
+### <a name="guitar-diagrams.js-public-properties"></a>`guitar-diagrams-config.js` Public Properties
+
+Properties in `guitar-diagrams-config.js` go here...
+
+#### canvasID (get)
+
+Exists as a property of the config property on the GuitarDiagrams object. Sets the ID attribute of the canvas HTML element.
+
+- **Parameters**: _None_
+- **Return Value**: {string} The ID attribute of the canvas HTML element.
+- **Default Value**: {string} 'gdjCanvas'
+
+_Example:_
+
+```javascript
+console.log('Canvas ID: ' + gdj1.config.canvasID);
+```
+
+#### canvasID (set)
+
+Exists as a property of the config property on the GuitarDiagrams object. Gets the ID attribute of the canvas HTML element.
+
+- **Parameters**: {string} The ID attribute of the canvas HTML element.
+- **Return Value**: _None_
+- **Default Value**: {string} 'gdjCanvas'
+
+_Example:_
+
+```javascript
+gdj1.config.canvasID = 'diagram-1-canvas';
+```
+
+#### colorFretboard (get)
+
+Exists as a property of the config property on the GuitarDiagrams object. Gets the HTML color code of the fretboard.
+
+- **Parameters**: _None_
+- **Return Value**: {string} The HTML color code of the fretboard.
+- **Default Value**: {string} '#795548'
+
+_Example:_
+
+```javascript
+console.log('Fretboard color: ' + gdj5.config.colorFretboard);
+```
+
+#### colorFretboard (set)
+
+Exists as a property of the config property on the GuitarDiagrams object. Sets the HTML color code of the fretboard.
+
+- **Parameters**: {string} The HTML color code of the fretboard.
+- **Return Value**: _None_
+- **Default Value**: {string} '#795548'
+
+_Example:_
+
+```javascript
+gdj5.config.colorFretboard = '#FFE0B2';
+```
+
+### <a name="guitar-diagrams.js-public-methods"></a>`guitar-diagrams-config.js` Public Methods
+
+_None._
+
+## <a name="guitar-diagrams-marker.js"></a>`guitar-diagrams-marker.js` Class
+
+### <a name="guitar-diagrams-marker.js-contstructors"></a>`guitar-diagrams-marker.js` Constructors (non-default)
+
+Constructor(s) in `guitar-diagram-marker.js` go here... (There's only a default constructor as of now.)
+
+### <a name="guitar-diagrams-marker.js-public-properties">`guitar-diagrams-marker.js` Public Properties
+
+Properties in `guitar-diagrams-marker.js` go here...
+
+### <a name="guitar-diagrams-marker.js-public-methods">`guitar-diagrams-marker.js` Public Methods
+
+Methods in `guitar-diagrams-marker.js` go here...
diff --git a/docs/index.md b/docs/index.md
index 74e57c9..5ad2b5b 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -20,134 +20,4 @@ Lorem ipsum...
 
 ## API Usage
 
-Lorem ipsum...some description, if necessary, for the API usage section.
-
-### Table of Contents
-
-- [Guitar Diagrams JS Documentation](#guitar-diagrams-js-documentation)
-  - [Overview](#overview)
-  - [Getting started](#getting-started)
-    - [Importing the library into your project](#importing-the-library-into-your-project)
-    - [Initializing a diagram](#initializing-a-diagram)
-    - [Creating a diagram with markers](#creating-a-diagram-with-markers)
-  - [API Usage](#api-usage)
-    - [Table of Contents](#table-of-contents)
-    - [`guitar-diagrams.js` Class](#guitar-diagramsjs-class)
-      - [`guitar-diagrams.js` Constructors (non-default)](#guitar-diagramsjs-constructors-non-default)
-      - [`guitar-diagrams.js` Static Public Members](#guitar-diagramsjs-static-public-members)
-      - [`guitar-diagrams.js` Public Properties](#guitar-diagramsjs-public-properties)
-      - [`guitar-diagrams.js` Public Methods](#guitar-diagramsjs-public-methods)
-    - [`guitar-diagrams-config.js` Class](#guitar-diagrams-configjs-class)
-      - [`guitar-diagrams-config.js` Constructors (non-default)](#guitar-diagrams-configjs-constructors-non-default)
-      - [`guitar-diagrams-config.js` Public Properties](#guitar-diagrams-configjs-public-properties)
-        - [canvasID (get)](#canvasid-get)
-        - [canvasID (set)](#canvasid-set)
-        - [colorFretboard (get)](#colorfretboard-get)
-        - [colorFretboard (set)](#colorfretboard-set)
-      - [`guitar-diagrams-config.js` Public Methods](#guitar-diagrams-configjs-public-methods)
-    - [`guitar-diagrams-marker.js` Class](#guitar-diagrams-markerjs-class)
-      - [`guitar-diagrams-marker.js` Constructors (non-default)](#guitar-diagrams-markerjs-constructors-non-default)
-      - [`guitar-diagrams-marker.js` Public Properties](#guitar-diagrams-markerjs-public-properties)
-      - [`guitar-diagrams-marker.js` Public Methods](#guitar-diagrams-markerjs-public-methods)
-
-### <a name="guitar-diagrams.js"></a>`guitar-diagrams.js` Class
-
-#### <a name="guitar-diagrams.js-constructor"></a>`guitar-diagrams.js` Constructors (non-default)
-
-Constructor(s) in `guitar-diagrams.js` go here... or _None._
-
-#### <a name="guitar-diagrams.js-static-public-members"></a>`guitar-diagrams.js` Static Public Members
-
-Static members in `guitar-diagrams.js` go here... (We might need to talk about how to handled these.)
-
-#### <a name="guitar-diagrams.js-public-properties"></a>`guitar-diagrams.js` Public Properties
-
-Properties in `guitar-diagrams.js` go here...
-
-#### <a name="guitar-diagrams.js-public-methods"></a>`guitar-diagrams.js` Public Methods
-
-Methods in `guitar-diagrams.js` go here...
-
-### <a name="guitar-diagrams-config.js"></a>`guitar-diagrams-config.js` Class
-
-#### <a name="guitar-diagrams.js-constructors"></a>`guitar-diagrams-config.js` Constructors (non-default)
-
-Constructor(s) in `guitar-diagrams-config.js` go here...
-
-#### <a name="guitar-diagrams.js-public-properties"></a>`guitar-diagrams-config.js` Public Properties
-
-Properties in `guitar-diagrams-config.js` go here...
-
-##### canvasID (get)
-
-Exists as a property of the config property on the GuitarDiagrams object. Sets the ID attribute of the canvas HTML element.
-
-- **Parameters**: _None_
-- **Return Value**: {string} The ID attribute of the canvas HTML element.
-- **Default Value**: {string} 'gdjCanvas'
-
-_Example:_
-
-```javascript
-console.log('Canvas ID: ' + gdj1.config.canvasID);
-```
-
-##### canvasID (set)
-
-Exists as a property of the config property on the GuitarDiagrams object. Gets the ID attribute of the canvas HTML element.
-
-- **Parameters**: {string} The ID attribute of the canvas HTML element.
-- **Return Value**: _None_
-- **Default Value**: {string} 'gdjCanvas'
-
-_Example:_
-
-```javascript
-gdj1.config.canvasID = 'diagram-1-canvas';
-```
-
-##### colorFretboard (get)
-
-Exists as a property of the config property on the GuitarDiagrams object. Gets the HTML color code of the fretboard.
-
-- **Parameters**: _None_
-- **Return Value**: {string} The HTML color code of the fretboard.
-- **Default Value**: {string} '#795548'
-
-_Example:_
-
-```javascript
-console.log('Fretboard color: ' + gdj5.config.colorFretboard);
-```
-
-##### colorFretboard (set)
-
-Exists as a property of the config property on the GuitarDiagrams object. Sets the HTML color code of the fretboard.
-
-- **Parameters**: {string} The HTML color code of the fretboard.
-- **Return Value**: _None_
-- **Default Value**: {string} '#795548'
-
-_Example:_
-
-```javascript
-gdj5.config.colorFretboard = '#FFE0B2';
-```
-
-#### <a name="guitar-diagrams.js-public-methods"></a>`guitar-diagrams-config.js` Public Methods
-
-_None._
-
-### <a name="guitar-diagrams-marker.js"></a>`guitar-diagrams-marker.js` Class
-
-#### <a name="guitar-diagrams-marker.js-contstructors"></a>`guitar-diagrams-marker.js` Constructors (non-default)
-
-Constructor(s) in `guitar-diagram-marker.js` go here... (There's only a default constructor as of now.)
-
-#### <a name="guitar-diagrams-marker.js-public-properties">`guitar-diagrams-marker.js` Public Properties
-
-Properties in `guitar-diagrams-marker.js` go here...
-
-#### <a name="guitar-diagrams-marker.js-public-methods">`guitar-diagrams-marker.js` Public Methods
-
-Methods in `guitar-diagrams-marker.js` go here...
+See the [API Documentation page](api-docs.md) for more information about how to use the API, including constructors (non-default), properties, public methods, and more.

From dd66d5809879fbc1fe8224a57440b7f3830410d9 Mon Sep 17 00:00:00 2001
From: Kenny Carlile <kennycarlile@gmail.com>
Date: Mon, 3 Jun 2024 15:58:52 -0700
Subject: [PATCH 08/23] Updating README.md for split docs

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 6e362c7..f84600c 100644
--- a/README.md
+++ b/README.md
@@ -141,7 +141,7 @@ You can also install this package manually by downloading it, placing the files
 
 ### More Information
 
-For more information, please see the [`docs/index.md`](docs/index.md) and ['docs/examples/index.html`](docs/examples/index.html) pages for API documentation and examples.
+For more information, please see the [`docs/index.md`](docs/index.md) and [`docs/api-docs.md`](docs/api-docs.md) pages for general usage help and API documentation. See also the [`docs/examples/index.html`](docs/examples/index.html) page for usage examples.
 
 ## Technical Information for Code Owners
 

From 5157f92be608eefc9822cccacdb86c84f1e19d81 Mon Sep 17 00:00:00 2001
From: Kenny Carlile <kennycarlile@gmail.com>
Date: Mon, 3 Jun 2024 16:10:39 -0700
Subject: [PATCH 09/23] Updating README.md

---
 README.md | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index f84600c..be1697b 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,5 @@
 # Guitar Diagrams JS
 
-[![GitHub Release](https://img.shields.io/github/v/release/KCarlile/guitar-diagrams-js?include_prereleases&logo=github&label=Latest%20version)](https://github.com/KCarlile/guitar-diagrams-js/releases)
 [![GitHub Actions Workflow Status](https://github.com/KCarlile/guitar-diagrams-js/actions/workflows/release-package.yml/badge.svg)](https://github.com/KCarlile/guitar-diagrams-js/actions/workflows/release-package.yml)
 [![Super-Linter](https://github.com/KCarlile/guitar-diagrams-js/actions/workflows/linting.yml/badge.svg)](https://github.com/marketplace/actions/super-linter)
 
@@ -17,7 +16,7 @@
 _Guitar Diagrams JS_ is an open source JavaScript library for drawing guitar chords and scales on an HTML5 canvas.
 
 Project: <https://github.com/KCarlile/guitar-diagrams-js>\
-Version: 0.9.2
+Version: [![GitHub Release](https://img.shields.io/github/v/release/KCarlile/guitar-diagrams-js?include_prereleases&logo=github&label=Latest%20version)](https://github.com/KCarlile/guitar-diagrams-js/releases)
 
 ### Why should you use Guitar Diagrams JS?
 
@@ -27,12 +26,15 @@ The benefit of Guitar Diagrams JS is that it provides a visual representation of
 
 Here are some other comparisons to Guitar Diagrams JS:
 
-| Name | Description | Visual | Graphical | Instrument Representation | No Sheet Music | Cost |
-| ---- | ----------- | ------ | --------- | ------------------------- | -------------- | ---- |
-| Guitar Diagrams JS | Create diagrams with minimal code and no graphics | ✅ | ✅ | ✅ | ✅ | $0 |
-| Tablature (tabs) | Create diagrams manually with text | ✅ | ✅ | ⚠️ | ✅ | $0 |
-| Graphic Design Software | Create diagrams manually with a graphic design program | ✅ | ✅ | ⚠️ | ✅ | [\$22.99/month](https://www.adobe.com/products/photoshop/plans.html) |
-| Sheet Music | Create sheet music | ✅ | ❌ | ❌ | ❌ | [\$99](https://www.finalemusic.com/products/finale/special-pricing/) or [\$27.99/month](https://www.avid.com/sibelius/sibelius-ultimate-subscriptions?usertype=individual) |
+| Name | Description | Visual | Graphical | Instrument Representation | No Sheet Music Reading | Works with Musical Passages | Cost |
+| ---- | ----------- | ------ | --------- | ------------------------- | -------------- | ---------------- | ---- |
+| Guitar Diagrams JS | Create diagrams with minimal code and no graphics | ✅ | ✅ | ✅ | ✅ | ❌ | $0 |
+| Tablature (tabs) | Create diagrams manually with text | ✅ | ✅ | ⚠️ | ✅ | ✅ | $0, but time consuming and error prone |
+| Graphic Design Software | Create diagrams manually with a graphic design program | ✅ | ✅ | ⚠️ | ✅ | ❌ | [\$22.99/month](https://www.adobe.com/products/photoshop/plans.html), and very time consuming |
+| Sheet Music | Create sheet music | ✅ | ❌ | ❌ | ❌ | ✅ | [\$99](https://www.finalemusic.com/products/finale/special-pricing/) or [\$27.99/month](https://www.avid.com/sibelius/sibelius-ultimate-subscriptions?usertype=individual), and requires music notation proficiency |
+
+Key: ✅Yes. ⚠️Maybe, sorta, kinda, optional. ❌ No.
+
 
 ## Project Lead/Owner and Contributors
 
@@ -74,16 +76,16 @@ See the repository's [Releases page](https://github.com/KCarlile/guitar-diagrams
 
 For full details, see the Node JS packages released by this project here: <https://github.com/KCarlile/guitar-diagrams-js/pkgs/npm/guitar-diagrams-js>
 
-You can install Guitar Diagrams JS in your project as a Node JS dependency via NPM. Run the following command from your project's directory:
+You can install Guitar Diagrams JS in your project as a Node JS dependency via NPM. Run the following command from your project's directory where `x.y.z` (e.g., `1.0.2`) is the version (or branch name, such as `main`) of the library you want to use:
 
 ```bash
-npm install @kcarlile/guitar-diagrams-js@0.9.2
+npm install @kcarlile/guitar-diagrams-js@x.y.z
 ```
 
 Or, alternately, you can manually edit your `package.json` file and add the following entry:
 
 ```json
-"@kcarlile/guitar-diagrams-js": "0.9.2",
+"@kcarlile/guitar-diagrams-js": "x.y.z",
 ```
 
 #### Option 2: Manual Installation via CDN

From c3a6fa8f4d2ab04355d33c871ec09ee4380c799d Mon Sep 17 00:00:00 2001
From: Kenny Carlile <kennycarlile@gmail.com>
Date: Mon, 3 Jun 2024 17:29:12 -0700
Subject: [PATCH 10/23] Updating usage documentation

---
 README.md     |  74 ++-----------------------
 docs/index.md | 147 ++++++++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 140 insertions(+), 81 deletions(-)

diff --git a/README.md b/README.md
index be1697b..019a1cc 100644
--- a/README.md
+++ b/README.md
@@ -35,7 +35,6 @@ Here are some other comparisons to Guitar Diagrams JS:
 
 Key: ✅Yes. ⚠️Maybe, sorta, kinda, optional. ❌ No.
 
-
 ## Project Lead/Owner and Contributors
 
 ### Project Lead/Owner
@@ -56,6 +55,8 @@ GitHub profile: [@KCarlile](https://github.com/KCarlile)
 Please see the following pages for more information:
 
 - [`README.md`](README.md): this page
+- [`docs/index.md`](docs/index.md): general usage documentation
+- [`docs/api-docs.md`](docs/api-docs.md): API usage documentation
 - [`docs/index.md`](docs/index.md): main landing page for project documentation
 - [`docs/api-docs.md`](docs/api-docs.md): API usage documentation
 - [`docs/code-owner-docs.md`](docs/code-owner-docs.md): technical documentation for code owners
@@ -70,76 +71,7 @@ See the repository's [Releases page](https://github.com/KCarlile/guitar-diagrams
 
 ## Technical Information for Site Builders
 
-### Usage in Your Project
-
-#### Option 1: Installation as a Node Dependency
-
-For full details, see the Node JS packages released by this project here: <https://github.com/KCarlile/guitar-diagrams-js/pkgs/npm/guitar-diagrams-js>
-
-You can install Guitar Diagrams JS in your project as a Node JS dependency via NPM. Run the following command from your project's directory where `x.y.z` (e.g., `1.0.2`) is the version (or branch name, such as `main`) of the library you want to use:
-
-```bash
-npm install @kcarlile/guitar-diagrams-js@x.y.z
-```
-
-Or, alternately, you can manually edit your `package.json` file and add the following entry:
-
-```json
-"@kcarlile/guitar-diagrams-js": "x.y.z",
-```
-
-#### Option 2: Manual Installation via CDN
-
-If you want to use a CDN-hosted package (e.g., Guitar Diagrams JS on JSDelivr at `https://cdn.jsdelivr.net/gh/KCarlile/guitar-diagrams-js@main/guitar-diagrams.js`), you can reference it in your code like this:
-
-```html
-<div id="diagram-1"></div>
-<script type="module">
-   import { GuitarDiagramsJS } from 'https://cdn.jsdelivr.net/gh/KCarlile/guitar-diagrams-js@main/guitar-diagrams.js';
-
-   let gdj1 = new GuitarDiagramsJS();
-   gdj1.config.canvasID = 'diagram-1-canvas'; // specify the canvas element's an ID
-   gdj1.addCanvas('diagram-1'); // add the canvas to the specified element ID on the page
-   gdj1.drawNeck(); // draw the fretboard
-</script>
-```
-
-Be sure to add some target HTML element to your page with a matching ID (`gdj1.addCanvas('diagram-1');` where `diagram-1` is the ID) in your JS code so Guitar Diagrams JS knows where to add your drawing:
-
-```html
-<div id="diagram-1"></div>
-```
-
-#### Option 3: Manual Installation via Local Copies
-
-You can also install this package manually by downloading it, placing the files in the correct location, and modifying your site's code to reference the library. The following steps outline this process:
-
-1. Download the repository files from the [GitHub repository for Guitar Diagrams JS](https://github.com/KCarlile/guitar-diagrams-js).
-1. The only files about which you should be concerned are the following:
-   - `guitar-diagrams.js`: main functionality
-   - `guitar-diagrams-config.js`: config object
-   - `guitar-diagrams-marker.js`: marker object
-1. Place those files in your application at `wherever/you/put/your/js/files/guitar-diagram-js/`.
-1. In the JS file with your primary entrypoint, add an import statement:
-
-   ```javascript
-   import { GuitarDiagramsJS } from 'wherever/you/put/your/js/files/guitar-diagrams-js/guitar-diagrams.js';
-   ```
-
-1. Following that import statement, begin to reference the library:
-
-   ```javascript
-   let gdj1 = new GuitarDiagramsJS();
-   gdj1.config.canvasID = 'diagram-1-canvas'; // specify the canvas element's an ID
-   gdj1.addCanvas('diagram-1'); // add the canvas to the specified element ID on the page
-   gdj1.drawNeck(); // draw the fretboard
-   ```
-
-1. Be sure to add some target HTML element to your page with a matching ID (`gdj1.addCanvas('diagram-1');` where `diagram-1` is the ID) in your JS code so Guitar Diagrams JS knows where to add your drawing:
-
-   ```html
-   <div id="diagram-1"></div>
-   ```
+You can find the full usage documentation at [`docs/index.md`](docs/index.md) and the API documentation at [`docs/api-docs.md`](docs/api-docs.md). The following information is just a high-level overview of how to use Guitar Diagrams JS.
 
 ### More Information
 
diff --git a/docs/index.md b/docs/index.md
index 5ad2b5b..0f552b6 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,23 +1,150 @@
 # Guitar Diagrams JS Documentation
 
-## Overview
+## Getting Started with Guitar Diagrams JS
 
-Lorem ipsum...
+### Importing the Library into Your Project
 
-## Getting started
+There are three primary ways to include the Guitar Diagrams JS library into your project:
 
-### Importing the library into your project
+1. Install the Guitar Diagrams JS library as a Node JS dependency
+1. Reference the Guitar Diagrams JS library from a hosted CDN provider
+1. Reference the Guitar Diagrams JS library from a local copy of the JavaScript (JS) files
 
-Lorem ipsum...
+#### Option 1: Installation as a Node JS Dependency
 
-### Initializing a diagram
+For full details, see the Node JS packages released by this project here: <https://github.com/KCarlile/guitar-diagrams-js/pkgs/npm/guitar-diagrams-js>
 
-Lorem ipsum...
+You can install Guitar Diagrams JS in your project as a Node JS dependency via NPM. Run the following command from your project's directory where `x.y.z` (e.g., `1.0.2`) is the version (or branch name, such as `main`) of the library you want to use:
 
-### Creating a diagram with markers
+```bash
+npm install @kcarlile/guitar-diagrams-js@x.y.z
+```
 
-Lorem ipsum...
+Or, alternately, you can manually edit your `package.json` file and add the following entry:
 
-## API Usage
+```json
+"@kcarlile/guitar-diagrams-js": "x.y.z",
+```
+
+#### Option 2: Manual Reference via CDN-Hosted Files
+
+If you want to use a CDN-hosted package (e.g., Guitar Diagrams JS on JSDelivr at `https://cdn.jsdelivr.net/gh/KCarlile/guitar-diagrams-js@main/guitar-diagrams.js`), you can reference it in your code like this:
+
+```html
+<script type="module">
+   import { GuitarDiagramsJS } from 'https://cdn.jsdelivr.net/gh/KCarlile/guitar-diagrams-js@main/guitar-diagrams.js';
+   // code to configure and use Guitar Diagrams JS goes here
+</script>
+```
+
+Be sure to add some target HTML element to your page with a matching ID (`gdj1.addCanvas('diagram-1');` where `diagram-1` is the ID) in your JS code so Guitar Diagrams JS knows where to add your drawing:
+
+   ```html
+   <div id="diagram-1"></div>
+   ```
+
+#### Option 3: Manual Reference via Local Copies of Files
+
+You can also install this package manually by downloading it, placing the files in the correct location, and modifying your site's code to reference the library. The following steps outline this process:
+
+1. Download the repository files from the [GitHub repository for Guitar Diagrams JS](https://github.com/KCarlile/guitar-diagrams-js).
+1. The only files about which you should be concerned are the following:
+   - `guitar-diagrams.js`: main functionality
+   - `guitar-diagrams-config.js`: config object
+   - `guitar-diagrams-marker.js`: marker object
+1. Place those files in your application at `wherever/you/put/your/js/files/guitar-diagram-js/`.
+1. In the JS file with your primary entrypoint, add an import statement:
+
+   ```javascript
+   <script type="module">
+      import { GuitarDiagramsJS } from 'wherever/you/put/your/js/files/guitar-diagrams-js/guitar-diagrams.js';
+      // code to configure and use Guitar Diagrams JS goes here
+   </script>
+   ```
+
+1. Be sure to add some target HTML element to your page with a matching ID (`gdj1.addCanvas('diagram-1');` where `diagram-1` is the ID) in your JS code so Guitar Diagrams JS knows where to add your drawing:
+
+   ```html
+   <div id="diagram-1"></div>
+   ```
+
+### Leveraging the Guitar Diagrams JS Library in Your Project
+
+Once you've successfully referenced the library using one of the methods outlined above, you'll need to prepare your HTML and JavaScript to leverage the library.
+
+#### Specifying the Location of the Diagram
+
+In your HTML markup, ensure that you have some block-level element (`<p>`, `<div>`, etc.) with a unique ID that you can reference from JavaScript, such as:
+
+```html
+<div id="diagram-1"></div>
+```
+
+Remember the unique ID of this block-level element as you'll be using it in the next section.
+
+### Initializing a Diagram
+
+After your import statement, add the JavaScript to associate your block-level element's unique ID with an instance of a Guitar Diagrams JS object, like this:
+
+```javascript
+let gdj1 = new GuitarDiagramsJS();
+gdj1.config.canvasID = 'diagram-1-canvas'; // specify the canvas element's unique ID
+gdj1.addCanvas('diagram-1'); // add the canvas to the specified element ID on the page
+gdj1.drawNeck(); // draw the fretboard
+```
+
+This will result in the most basic guitar diagram of a blank fretboard. The following explains what each line does:
+
+| Line | Code | Description | Notes |
+| ---- | ---- | ----------- | ----- |
+| 1 | `let gdj1 = new GuitarDiagramsJS();`| Instantiate a new `GuitarDiagramsJS` object and assign it to the `gdj1` variable|  |
+| 2 | `gdj1.config.canvasID = 'diagram-1-canvas';` | Set the canvasID value of the gdj1's config object to `'diagram-1-canvas'` | `'diagram-1-canvas'` is a unique ID for the `<canvas>` HTML element that will be added to your HTML within the block-level element. This ID is important so you can reference it later if you want to style the canvas itself. |
+| 3 | `gdj1.addCanvas('diagram-1');` | Add the Guitar Diagrams JS HTML `<canvas>` element to the parent block-level HTML element as specified by the element's unique ID | The ID string being passed here is the one specified in your HTML, like the example above: ```<div id="diagram-1"></div>``` |
+| 4 | `gdj1.drawNeck();` | Draw the neck of the diagram with the previously specified parameters |  |
+
+See _Example 1_ on the [Examples page](examples/index.html).
+
+### Creating a Diagram with Markers
+
+To add markers to a diagram, after calling `gdj1.drawNeck();`, you'll need to specify those markers and then draw them, like this:
+
+```javascript
+let gdj2 = new GuitarDiagramsJS();
+gdj2.config.canvasID = 'diagram-2-canvas';
+gdj2.config.stringNamesEnabled = true;
+gdj2.addCanvas('diagram-2');
+gdj2.drawNeck();
+gdj2.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square); // add a square marker on string 1, fret 1, text '1'
+gdj2.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle); // add a triangle marker on string 2, fret 2, text '2'
+gdj2.addMarker(3, 3, '3', GuitarDiagramsJS.Shape.Diamond); // add a diamond marker on string 3, fret 3, text '3'
+gdj2.addMarker(4, 4, '4'); // add a default (circle) marker on string 4, fret 4, text '4'
+gdj2.addMarker(5, 0, '0'); // add a default (circle) marker on string 5, fret 0, text '0'
+gdj2.addMarker(6, 0, 'X'); // add a default (circle) marker on string 6, fret 0, text 'X'
+gdj2.addMarker(3, 1); // add a default (circle) marker on string 3, fret 1, text empty
+gdj2.drawAllMarkers(); // draw the markers
+```
+
+This will result in a basic guitar fretboard diagram with 7 different markers added. The following explains what each line does:
+
+| Line | Code | Description | Notes |
+| ---- | ---- | ----------- | ----- |
+| 1 | `let gdj2 = new GuitarDiagramsJS();`| Instantiate a new `GuitarDiagramsJS` object and assign it to the `gdj1` variable|  |
+| 2 | `gdj2.config.canvasID = 'diagram-2-canvas';` | Set the canvasID value of the gdj1's config object to `'diagram-2-canvas'` | `'diagram-2-canvas'` is a unique ID for the `<canvas>` HTML element that will be added to your HTML within the block-level element. This ID is important so you can reference it later if you want to style the canvas itself. |
+| 3 | `gdj1.addCanvas('diagram-2');` | Add the Guitar Diagrams JS HTML `<canvas>` element to the parent block-level HTML element as specified by the element's unique ID | The ID string being passed here is the one specified in your HTML, like the example above, but with a different ID for diagram 2: ```<div id="diagram-2"></div>``` |
+| 4 | `gdj1.drawNeck();` | Draw the neck of the diagram with the previously specified parameters |  |
+| 5 | `gdj2.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);` | Adds a marker on the string 1, fret 1, with text "1", and square shape |  |
+| 6 | `gdj2.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);` | Adds a marker on the string 2, fret 2, with text "2", and triangle shape |  |
+| 7 | `gdj2.addMarker(3, 3, '3', GuitarDiagramsJS.Shape.Diamond);` | Adds a marker on the string 3, fret 3, with text "3", and diamond shape |  |
+| 8 | `gdj2.addMarker(4, 4, '4');` | Adds a marker on the string 4, fret 4, with text "4" | If a shape is not specified, circle is the default shape. |
+| 9 | `gdj2.addMarker(5, 0, '0');` | Adds a marker on the string 5, fret 0, with text "0" | If a shape is not specified, circle is the default shape. "0" for fret marker indicates an open string. |
+| 10 | `gdj2.addMarker(6, 0, 'X');` | Adds a marker on the string 6, fret 0, with text "X" | If a shape is not specified, circle is the default shape. "X" for fret marker indicates a muted string. |
+| 11 | `gdj2.addMarker(3, 1);` | Adds a marker on the string 3, fret 1 | If text is not specified, the marker will be blank. If a shape is not specified, circle is the default shape. |
+| 12 | `gdj2.drawAllMarkers();` | Draws all of the specified markers on the fretboard | If a specified marker would be rendered beyond the visible fretboard, it will not be rendered and an error will be logged to the console. |
+
+See _Example 2_ on the [Examples page](examples/index.html).
+
+See the full [API documentation](api-docs.md) for all of the options for markers.
+
+## API Usage Details
 
 See the [API Documentation page](api-docs.md) for more information about how to use the API, including constructors (non-default), properties, public methods, and more.

From d73d8a3895ad6681e381273ff4c772cd24d086ae Mon Sep 17 00:00:00 2001
From: Kenny Carlile <kennycarlile@gmail.com>
Date: Mon, 3 Jun 2024 17:30:31 -0700
Subject: [PATCH 11/23] Updating usage documentation

---
 docs/index.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/index.md b/docs/index.md
index 0f552b6..19eb8a4 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -37,11 +37,11 @@ If you want to use a CDN-hosted package (e.g., Guitar Diagrams JS on JSDelivr at
 </script>
 ```
 
-Be sure to add some target HTML element to your page with a matching ID (`gdj1.addCanvas('diagram-1');` where `diagram-1` is the ID) in your JS code so Guitar Diagrams JS knows where to add your drawing:
+Be sure to add some target HTML element to your page with a matching ID (`gdj1.addCanvas('diagram-1');` where `'diagram-1'` is the ID) in your JS code so Guitar Diagrams JS knows where to add your drawing:
 
-   ```html
-   <div id="diagram-1"></div>
-   ```
+```html
+<div id="diagram-1"></div>
+```
 
 #### Option 3: Manual Reference via Local Copies of Files
 
@@ -62,7 +62,7 @@ You can also install this package manually by downloading it, placing the files
    </script>
    ```
 
-1. Be sure to add some target HTML element to your page with a matching ID (`gdj1.addCanvas('diagram-1');` where `diagram-1` is the ID) in your JS code so Guitar Diagrams JS knows where to add your drawing:
+1. Be sure to add some target HTML element to your page with a matching ID (`gdj1.addCanvas('diagram-1');` where `'diagram-1'` is the ID) in your JS code so Guitar Diagrams JS knows where to add your drawing:
 
    ```html
    <div id="diagram-1"></div>

From 2d1074e59c1c6d4c3ccc4678753bec91d5f86a9c Mon Sep 17 00:00:00 2001
From: Kenny Carlile <kennycarlile@gmail.com>
Date: Mon, 3 Jun 2024 19:21:55 -0700
Subject: [PATCH 12/23] Removing code comments from docs

---
 docs/index.md | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/docs/index.md b/docs/index.md
index 19eb8a4..51abbd7 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -88,9 +88,9 @@ After your import statement, add the JavaScript to associate your block-level el
 
 ```javascript
 let gdj1 = new GuitarDiagramsJS();
-gdj1.config.canvasID = 'diagram-1-canvas'; // specify the canvas element's unique ID
-gdj1.addCanvas('diagram-1'); // add the canvas to the specified element ID on the page
-gdj1.drawNeck(); // draw the fretboard
+gdj1.config.canvasID = 'diagram-1-canvas';
+gdj1.addCanvas('diagram-1');
+gdj1.drawNeck();
 ```
 
 This will result in the most basic guitar diagram of a blank fretboard. The following explains what each line does:
@@ -114,14 +114,14 @@ gdj2.config.canvasID = 'diagram-2-canvas';
 gdj2.config.stringNamesEnabled = true;
 gdj2.addCanvas('diagram-2');
 gdj2.drawNeck();
-gdj2.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square); // add a square marker on string 1, fret 1, text '1'
-gdj2.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle); // add a triangle marker on string 2, fret 2, text '2'
-gdj2.addMarker(3, 3, '3', GuitarDiagramsJS.Shape.Diamond); // add a diamond marker on string 3, fret 3, text '3'
-gdj2.addMarker(4, 4, '4'); // add a default (circle) marker on string 4, fret 4, text '4'
-gdj2.addMarker(5, 0, '0'); // add a default (circle) marker on string 5, fret 0, text '0'
-gdj2.addMarker(6, 0, 'X'); // add a default (circle) marker on string 6, fret 0, text 'X'
-gdj2.addMarker(3, 1); // add a default (circle) marker on string 3, fret 1, text empty
-gdj2.drawAllMarkers(); // draw the markers
+gdj2.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
+gdj2.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
+gdj2.addMarker(3, 3, '3', GuitarDiagramsJS.Shape.Diamond);
+gdj2.addMarker(4, 4, '4');
+gdj2.addMarker(5, 0, '0');
+gdj2.addMarker(6, 0, 'X');
+gdj2.addMarker(3, 1);
+gdj2.drawAllMarkers();
 ```
 
 This will result in a basic guitar fretboard diagram with 7 different markers added. The following explains what each line does:

From 00c9ff3e72ba97427e58f6d4d7f048b0e2083362 Mon Sep 17 00:00:00 2001
From: Kenny Carlile <kennycarlile@gmail.com>
Date: Tue, 4 Jun 2024 19:13:10 -0700
Subject: [PATCH 13/23] Adding temporary Windows symlink for Chad

---
 .scripts/chad-win-fix.bat | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 .scripts/chad-win-fix.bat

diff --git a/.scripts/chad-win-fix.bat b/.scripts/chad-win-fix.bat
new file mode 100644
index 0000000..b3b138c
--- /dev/null
+++ b/.scripts/chad-win-fix.bat
@@ -0,0 +1,3 @@
+mklink ..\docs\js\guitar-diagrams-js\guitar-diagrams.js ..\guitar-diagrams.js
+mklink ..\docs\js\guitar-diagrams-js\guitar-diagrams-config.js ..\guitar-diagrams-config.js
+mklink ..\docs\js\guitar-diagrams-js\guitar-diagrams-marker.js ..\guitar-diagrams-marker.js

From 3adfa3d065b8f20f2653a4451c650335f968d4fb Mon Sep 17 00:00:00 2001
From: Kenny Carlile <kennycarlile@gmail.com>
Date: Tue, 4 Jun 2024 19:16:16 -0700
Subject: [PATCH 14/23] Modifying bat file for Windows fix

---
 .scripts/chad-win-fix.bat | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.scripts/chad-win-fix.bat b/.scripts/chad-win-fix.bat
index b3b138c..a7dfeb1 100644
--- a/.scripts/chad-win-fix.bat
+++ b/.scripts/chad-win-fix.bat
@@ -1,3 +1,5 @@
+echo "Trying to fix Windows symlink issues..."
 mklink ..\docs\js\guitar-diagrams-js\guitar-diagrams.js ..\guitar-diagrams.js
 mklink ..\docs\js\guitar-diagrams-js\guitar-diagrams-config.js ..\guitar-diagrams-config.js
 mklink ..\docs\js\guitar-diagrams-js\guitar-diagrams-marker.js ..\guitar-diagrams-marker.js
+pause
\ No newline at end of file

From 9a787bc431c05cec44ccb0bf736983738143a29c Mon Sep 17 00:00:00 2001
From: Kenny Carlile <kennycarlile@gmail.com>
Date: Tue, 4 Jun 2024 19:18:44 -0700
Subject: [PATCH 15/23] Fixing paths in bat file

---
 .scripts/chad-win-fix.bat | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.scripts/chad-win-fix.bat b/.scripts/chad-win-fix.bat
index a7dfeb1..efaf010 100644
--- a/.scripts/chad-win-fix.bat
+++ b/.scripts/chad-win-fix.bat
@@ -1,5 +1,5 @@
 echo "Trying to fix Windows symlink issues..."
-mklink ..\docs\js\guitar-diagrams-js\guitar-diagrams.js ..\guitar-diagrams.js
-mklink ..\docs\js\guitar-diagrams-js\guitar-diagrams-config.js ..\guitar-diagrams-config.js
-mklink ..\docs\js\guitar-diagrams-js\guitar-diagrams-marker.js ..\guitar-diagrams-marker.js
+mklink ..\docs\examples\js\guitar-diagrams-js\guitar-diagrams.js ..\guitar-diagrams.js
+mklink ..\docs\examples\js\guitar-diagrams-js\guitar-diagrams-config.js ..\guitar-diagrams-config.js
+mklink ..\docs\examples\js\guitar-diagrams-js\guitar-diagrams-marker.js ..\guitar-diagrams-marker.js
 pause
\ No newline at end of file

From 396fcae43ef014a9d5f6abd814a24dac9aa89b36 Mon Sep 17 00:00:00 2001
From: Kenny Carlile <kennycarlile@gmail.com>
Date: Tue, 4 Jun 2024 19:20:21 -0700
Subject: [PATCH 16/23] Removing files before running win symlink fix

---
 .scripts/chad-win-fix.bat | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/.scripts/chad-win-fix.bat b/.scripts/chad-win-fix.bat
index efaf010..7a29c43 100644
--- a/.scripts/chad-win-fix.bat
+++ b/.scripts/chad-win-fix.bat
@@ -1,4 +1,9 @@
 echo "Trying to fix Windows symlink issues..."
+
+del ..\docs\examples\js\guitar-diagrams-js\guitar-diagrams.js
+del ..\docs\examples\js\guitar-diagrams-js\guitar-diagrams-config.js
+del ..\docs\examples\js\guitar-diagrams-js\guitar-diagrams-marker.js
+
 mklink ..\docs\examples\js\guitar-diagrams-js\guitar-diagrams.js ..\guitar-diagrams.js
 mklink ..\docs\examples\js\guitar-diagrams-js\guitar-diagrams-config.js ..\guitar-diagrams-config.js
 mklink ..\docs\examples\js\guitar-diagrams-js\guitar-diagrams-marker.js ..\guitar-diagrams-marker.js

From aaa8d6fb72a6b469c3197db2df744235ab155023 Mon Sep 17 00:00:00 2001
From: Chad Kreiger <ckreiger1@gmail.com>
Date: Tue, 4 Jun 2024 20:44:39 -0700
Subject: [PATCH 17/23] Updated ColorNut and ColorNutOutline

---
 docs/api-docs.md | 58 +++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 57 insertions(+), 1 deletion(-)

diff --git a/docs/api-docs.md b/docs/api-docs.md
index e8ed8f1..09c13c4 100644
--- a/docs/api-docs.md
+++ b/docs/api-docs.md
@@ -18,6 +18,10 @@ Lorem ipsum...some description, if necessary, for the API usage section.
       - [canvasID (set)](#canvasid-set)
       - [colorFretboard (get)](#colorfretboard-get)
       - [colorFretboard (set)](#colorfretboard-set)
+      - [colorNut (get)](#colornut-get)
+      - [colorNut (set)](#colornut-set)
+      - [colorNutOutline (get)](#colornutoutline-get)
+      - [colorNutOutline (set)](#colornutoutline-set)
     - [`guitar-diagrams-config.js` Public Methods](#guitar-diagrams-configjs-public-methods)
   - [`guitar-diagrams-marker.js` Class](#guitar-diagrams-markerjs-class)
     - [`guitar-diagrams-marker.js` Constructors (non-default)](#guitar-diagrams-markerjs-constructors-non-default)
@@ -70,7 +74,7 @@ console.log('Canvas ID: ' + gdj1.config.canvasID);
 
 #### canvasID (set)
 
-Exists as a property of the config property on the GuitarDiagrams object. Gets the ID attribute of the canvas HTML element.
+Exists as a property of the config property on the GuitarDiagrams object. Sets the ID attribute of the canvas HTML element.
 
 - **Parameters**: {string} The ID attribute of the canvas HTML element.
 - **Return Value**: _None_
@@ -110,6 +114,58 @@ _Example:_
 gdj5.config.colorFretboard = '#FFE0B2';
 ```
 
+#### colorNut (get)
+
+Exists as a property of the config property on the GuitarDiagrams object. Gets the HTML color code of the nut.
+
+- **Parameters**: _None_
+- **Return Value**: {string} The HTML color code of the nut.
+- **Default Value**: {string} '#F2F3F4'
+
+_Example:_
+
+NEED EXAMPLE HERE CRK
+
+#### colorNut (set)
+
+Exists as a property of the config property on the GuitarDiagrams object. Sets the HTML color code of the nut.
+
+- **Parameters**: {string} The HTML color code of the nut.
+- **Return Value**: _None_
+- **Default Value**: {string} '#F2F3F4'
+
+_Example:_
+
+```javascript
+gdj5.config.colorNut = '#FFFFFF';
+```
+
+#### colorNutOutline (get)
+
+Exists as a property of the config property on the GuitarDiagrams object. Gets the HTML color code of the nut outline.
+
+- **Parameters**: {string} The HTML color code of the nut outline.
+- **Return Value**: _None_
+- **Default Value**: {string} '#000000'
+
+_Example:_
+
+NEED EXAMPLE HERE CRK
+
+#### colorNutOutline (set)
+
+Exists as a property of the config property on the GuitarDiagrams object. Sets the HTML color code of the nut outline.
+
+- **Parameters**: {string} The HTML color code of the nut outline.
+- **Return Value**: _None_
+- **Default Value**: {string} '#000000'
+
+_Example:_
+
+```javascript
+gdj5.config.colorNutOutline = '#7E5109';
+```
+
 ### <a name="guitar-diagrams.js-public-methods"></a>`guitar-diagrams-config.js` Public Methods
 
 _None._

From a663477ab16532f6abb86026213f4b2bdf95c667 Mon Sep 17 00:00:00 2001
From: Chad Kreiger <ckreiger1@gmail.com>
Date: Tue, 4 Jun 2024 20:47:04 -0700
Subject: [PATCH 18/23] Small edits chaging Gets to Sets

---
 .../examples/js/guitar-diagrams-js/guitar-diagrams-config.mjs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/examples/js/guitar-diagrams-js/guitar-diagrams-config.mjs b/docs/examples/js/guitar-diagrams-js/guitar-diagrams-config.mjs
index f04f4e8..3b04fd0 100644
--- a/docs/examples/js/guitar-diagrams-js/guitar-diagrams-config.mjs
+++ b/docs/examples/js/guitar-diagrams-js/guitar-diagrams-config.mjs
@@ -104,7 +104,7 @@ export class GuitarDiagramsJSConfig {
     } // end get colorNut property
 
     /**
-     * Gets the HTML color code of the nut.
+     * Sets the HTML color code of the nut.
      * @param {string} paramColorNut - The HTML color code of the nut.
      */
     set colorNut(paramColorNut) {
@@ -120,7 +120,7 @@ export class GuitarDiagramsJSConfig {
     } // end get colorNutOutline property
 
     /**
-     * Gets the HTML color code of the nut outline.
+     * Sets the HTML color code of the nut outline.
      * @param {string} paramColorNutOutline - The HTML color code of the nut outline.
      */
     set colorNutOutline(paramColorNutOutline) {

From dc12a499daf4ca1b6961abff68811e66b1659b2a Mon Sep 17 00:00:00 2001
From: Kenny Carlile <kennycarlile@gmail.com>
Date: Tue, 4 Jun 2024 21:03:49 -0700
Subject: [PATCH 19/23] Removing chad-win-fix.bat script, abandoning this
 attempt

---
 .scripts/chad-win-fix.bat | 10 ----------
 1 file changed, 10 deletions(-)
 delete mode 100644 .scripts/chad-win-fix.bat

diff --git a/.scripts/chad-win-fix.bat b/.scripts/chad-win-fix.bat
deleted file mode 100644
index 7a29c43..0000000
--- a/.scripts/chad-win-fix.bat
+++ /dev/null
@@ -1,10 +0,0 @@
-echo "Trying to fix Windows symlink issues..."
-
-del ..\docs\examples\js\guitar-diagrams-js\guitar-diagrams.js
-del ..\docs\examples\js\guitar-diagrams-js\guitar-diagrams-config.js
-del ..\docs\examples\js\guitar-diagrams-js\guitar-diagrams-marker.js
-
-mklink ..\docs\examples\js\guitar-diagrams-js\guitar-diagrams.js ..\guitar-diagrams.js
-mklink ..\docs\examples\js\guitar-diagrams-js\guitar-diagrams-config.js ..\guitar-diagrams-config.js
-mklink ..\docs\examples\js\guitar-diagrams-js\guitar-diagrams-marker.js ..\guitar-diagrams-marker.js
-pause
\ No newline at end of file

From f74e9e0afff8c16e60b278ca1afa4d6a75709c8b Mon Sep 17 00:00:00 2001
From: Kenny Carlile <kennycarlile@gmail.com>
Date: Tue, 4 Jun 2024 21:07:29 -0700
Subject: [PATCH 20/23] Adding JS examples

---
 docs/api-docs.md | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/docs/api-docs.md b/docs/api-docs.md
index 09c13c4..94a30ba 100644
--- a/docs/api-docs.md
+++ b/docs/api-docs.md
@@ -111,7 +111,7 @@ Exists as a property of the config property on the GuitarDiagrams object. Sets t
 _Example:_
 
 ```javascript
-gdj5.config.colorFretboard = '#FFE0B2';
+gdj1.config.colorFretboard = '#FFE0B2';
 ```
 
 #### colorNut (get)
@@ -124,7 +124,9 @@ Exists as a property of the config property on the GuitarDiagrams object. Gets t
 
 _Example:_
 
-NEED EXAMPLE HERE CRK
+```javascript
+console.log(gdj1.config.colorNut);
+```
 
 #### colorNut (set)
 
@@ -137,7 +139,7 @@ Exists as a property of the config property on the GuitarDiagrams object. Sets t
 _Example:_
 
 ```javascript
-gdj5.config.colorNut = '#FFFFFF';
+gdj1.config.colorNut = '#FFFFFF';
 ```
 
 #### colorNutOutline (get)
@@ -150,7 +152,9 @@ Exists as a property of the config property on the GuitarDiagrams object. Gets t
 
 _Example:_
 
-NEED EXAMPLE HERE CRK
+```javascript
+console.log(gdj1.config.colorNutOutline);
+```
 
 #### colorNutOutline (set)
 
@@ -163,7 +167,7 @@ Exists as a property of the config property on the GuitarDiagrams object. Sets t
 _Example:_
 
 ```javascript
-gdj5.config.colorNutOutline = '#7E5109';
+gdj1.config.colorNutOutline = '#7E5109';
 ```
 
 ### <a name="guitar-diagrams.js-public-methods"></a>`guitar-diagrams-config.js` Public Methods

From 83b2a2e788b91940b692d8a331b9645fff77e5ed Mon Sep 17 00:00:00 2001
From: Chad Kreiger <ckreiger1@gmail.com>
Date: Wed, 5 Jun 2024 22:18:37 -0700
Subject: [PATCH 21/23] More get and set properties added to api-docs.md

---
 docs/api-docs.md | 154 ++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 152 insertions(+), 2 deletions(-)

diff --git a/docs/api-docs.md b/docs/api-docs.md
index 94a30ba..7f57ecf 100644
--- a/docs/api-docs.md
+++ b/docs/api-docs.md
@@ -22,6 +22,16 @@ Lorem ipsum...some description, if necessary, for the API usage section.
       - [colorNut (set)](#colornut-set)
       - [colorNutOutline (get)](#colornutoutline-get)
       - [colorNutOutline (set)](#colornutoutline-set)
+      - [colorFrets (get)](#colorfrets-get)
+      - [colorFrets (set)](#colorfrets-set)
+      - [colorStrings (get)](#colorstrings-get)
+      - [colorStrings (set)](#colorstrings-set)
+      - [colorFretMarker (get)](#colorfretmarker-get)
+      - [colorFretMarker (set)](#colorfretmarker-set)
+      - [colorDiagramBackground (get)](#colordiagrambackground-get)
+      - [colorDiagramBackground (set)](#colordiagrambackground-set)
+      - [colorLabel (get)](#colorlabel-get)
+      - [colorLabel (set)](#colorlabel-set)
     - [`guitar-diagrams-config.js` Public Methods](#guitar-diagrams-configjs-public-methods)
   - [`guitar-diagrams-marker.js` Class](#guitar-diagrams-markerjs-class)
     - [`guitar-diagrams-marker.js` Constructors (non-default)](#guitar-diagrams-markerjs-constructors-non-default)
@@ -146,8 +156,8 @@ gdj1.config.colorNut = '#FFFFFF';
 
 Exists as a property of the config property on the GuitarDiagrams object. Gets the HTML color code of the nut outline.
 
-- **Parameters**: {string} The HTML color code of the nut outline.
-- **Return Value**: _None_
+- **Parameters**: _None_ 
+- **Return Value**: {string} The HTML color code of the nut outline.
 - **Default Value**: {string} '#000000'
 
 _Example:_
@@ -170,6 +180,146 @@ _Example:_
 gdj1.config.colorNutOutline = '#7E5109';
 ```
 
+#### colorFrets (get)
+
+Exists as a property of the config property on the GuitarDiagrams object. Gets the HTML color code of the frets.
+
+- **Parameters**: _None_
+- **Return Value**: {string} The HTML color code of the frets.
+- **Default Value**: {string} '#808B96'
+
+_Example:_
+
+```javascript
+console.log(gdj1.config.colorFrets);
+```
+
+#### colorFrets (set)
+
+Exists as a property of the config property on the GuitarDiagrams object. Sets the HTML color code of the frets.
+
+- **Parameters**: {string} The HTML color code of the nut outline.
+- **Return Value**: _None_
+- **Default Value**: {string} '#808B96'
+
+_Example:_
+
+```javascript
+gdj1.config.colorFrets = '#AEB6BF';
+```
+
+#### colorStrings (get)
+
+Exists as a property of the config property on the GuitarDiagrams object. Gets the HTML color code of the strings.
+
+- **Parameters**: _None_
+- **Return Value**: {string} The HTML color code of the strings.
+- **Default Value**: {string} '#CFD8DC'
+
+_Example:_
+
+```javascript
+console.log(gdj1.config.colorStrings);
+```
+
+#### colorStrings (set)
+
+Exists as a property of the config property on the GuitarDiagrams object. Sets the HTML color code of the strings.
+
+- **Parameters**: {string} The HTML color code of the strings.
+- **Return Value**: _None_
+- **Default Value**: {string} '#CFD8DC'
+
+_Example:_
+
+```javascript
+gdj1.config.colorStrings = '#566573';
+```
+
+#### colorFretMarker (get)
+
+Exists as a property of the config property on the GuitarDiagrams object. Gets the HTML color code of the fret markers.
+
+- **Parameters**: _None_
+- **Return Value**: {string} The HTML color code of the fret markers.
+- **Default Value**: {string} '#FFFFFF'
+
+_Example:_
+
+```javascript
+console.log(gdj1.config.colorFretMarker);
+```
+
+#### colorFretMarker (set)
+
+Exists as a property of the config property on the GuitarDiagrams object. Sets the HTML color code of the fret markers.
+
+- **Parameters**: {string} The HTML color code of the fret markers.
+- **Return Value**: _None_
+- **Default Value**: {string} '#FFFFFF'
+
+_Example:_
+
+```javascript
+gdj1.config.colorFretMarker = '#424949';
+```
+
+#### colorDiagramBackground (get)
+
+Exists as a property of the config property on the GuitarDiagrams object. Gets the HTML color code of the diagram background. 
+
+- **Parameters**: _None_
+- **Return Value**: {string} The HTML color code of the diagram background.
+- **Default Value**: {string} null
+
+_Example:_
+
+```javascript
+console.log(gdj1.config.colorDiagramBackground);
+```
+
+#### colorDiagramBackground (set)
+
+Exists as a property of the config property on the GuitarDiagrams object. Sets the HTML color code of the diagram background. 
+
+- **Parameters**: {string} The HTML color code of the diagram background.
+- **Return Value**: _None_
+- **Default Value**: {string} null
+
+_Example:_
+
+```javascript
+gdj1.config.colorDiagramBackground = '#000000';
+```
+
+#### colorLabel (get)
+
+Exists as a property of the config property on the GuitarDiagrams object. Gets HTML color code of the label text for string names and fret number.
+
+- **Parameters**: _None_
+- **Return Value**: {string} The HTML color code of the label text for string names and fret number.
+- **Default Value**: {string} '#000000'
+
+_Example:_
+
+```javascript
+console.log(gdj1.config.colorLabel);
+```
+
+#### colorLabel (set)
+
+Exists as a property of the config property on the GuitarDiagrams object. Sets HTML color code of the label text for string names and fret number.
+
+- **Parameters**: {string} The HTML color code of the label text for string names and fret number.
+- **Return Value**: _None_
+- **Default Value**: {string} '#FFFFFF'
+
+_Example:_
+
+```javascript
+gdj1.config.colorDiagramBackground = '#000000';
+```
+
 ### <a name="guitar-diagrams.js-public-methods"></a>`guitar-diagrams-config.js` Public Methods
 
 _None._

From eb6423c32c99a15d55c86572de55873a99fa5d69 Mon Sep 17 00:00:00 2001
From: Chad Kreiger <ckreiger1@gmail.com>
Date: Fri, 7 Jun 2024 20:10:30 -0700
Subject: [PATCH 22/23] Finished adding the property entries for the config.js
 file

---
 docs/api-docs.md | 301 ++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 299 insertions(+), 2 deletions(-)

diff --git a/docs/api-docs.md b/docs/api-docs.md
index 7f57ecf..5d01d28 100644
--- a/docs/api-docs.md
+++ b/docs/api-docs.md
@@ -32,6 +32,26 @@ Lorem ipsum...some description, if necessary, for the API usage section.
       - [colorDiagramBackground (set)](#colordiagrambackground-set)
       - [colorLabel (get)](#colorlabel-get)
       - [colorLabel (set)](#colorlabel-set)
+      - [markerStrokeWidth (get)](#markerstrokewidth-get)
+      - [markerStrokeWidth (set)](#markerstrokewidth-set)
+      - [markerFontSize (get)](#markerfontsize-get)
+      - [markerFontSize (set)](#markerfontsize-set)
+      - [fretCount (get)](#fretcount-get)
+      - [fretCount (set)](#fretcount-set)
+      - [scaleFactor (get)](#scalefactor-get)
+      - [scaleFactor (set)](#scalefactor-set)
+      - [orientHorizontally (get)](#orienthorizontally-get)
+      - [orientHorizontally (set)](#orienthorizontally-set)
+      - [fretMarkerEnabled (get)](#fretmarkerenabled-get)
+      - [fretMarkerEnabled (set)](#fretmarkerenabled-set)
+      - [fretStartingNumber (get)](#fretstartingnumber-get)
+      - [fretStartingNumber (set)](#fretstartingnumber-set)
+      - [stringNamesEnabled (get)](#stringnamesenabled-get)
+      - [stringNamesEnabled (set)](#stringnamesenabled-set)
+      - [stringNames (get)](#stringnames-get)
+      - [stringNames (set)](#stringnames-set)
+      - [downloadImageEnabled (get)](#downloadimageenabled-get)
+      - [downloadImageEnabled (set)](#downloadimageenabled-set)
     - [`guitar-diagrams-config.js` Public Methods](#guitar-diagrams-configjs-public-methods)
   - [`guitar-diagrams-marker.js` Class](#guitar-diagrams-markerjs-class)
     - [`guitar-diagrams-marker.js` Constructors (non-default)](#guitar-diagrams-markerjs-constructors-non-default)
@@ -312,14 +332,291 @@ Exists as a property of the config property on the GuitarDiagrams object. Sets H
 
 - **Parameters**: {string} The HTML color code of the label text for string names and fret number.
 - **Return Value**: _None_
-- **Default Value**: {string} '#FFFFFF'
+- **Default Value**: {string} '#000000'
 
 _Example:_
 
 ```javascript
-gdj1.config.colorDiagramBackground = '#000000';
+gdj1.config.colorLabel = '#000000';
+```
+
+#### markerStrokeWidth (get)
+
+Exists as a property of the config property on the GuitarDiagrams object. Gets the marker's stroke width.
+
+- **Parameters**: _None_
+- **Return Value**: {number} The marker's stroke width.
+- **Default Value**: {number} 2
+
+_Example:_
+
+```javascript
+console.log(gdj1.markerStrokeWidth);
+```
+
+#### markerStrokeWidth (set)
+
+Exists as a property of the config property on the GuitarDiagrams object. Sets the marker's stroke width.
+
+- **Parameters**: {number} The marker's stroke width.
+- **Return Value**: _None_
+- **Default Value**: {number} 2
+
+_Example:_
+
+```javascript
+gdj1.config.markerStrokeWidth = 1;
+```
+#### markerFontSize (get)
+
+Exists as a property of the config property on the GuitarDiagrams object. Gets the marker's font size.
+
+- **Parameters**: _None_
+- **Return Value**: {number} The marker's font size.
+- **Default Value**: {number} 16
+
+_Example:_
+
+```javascript
+console.log(gdj1.config.markerFontSize);
+```
+
+#### markerFontSize (set)
+
+Exists as a property of the config property on the GuitarDiagrams object. Sets the marker's font size.
+
+- **Parameters**: {number} The marker's font size.
+- **Return Value**: _None_
+- **Default Value**: {number} 16
+
+_Example:_
+
+```javascript
+gdj1.config.markerFontSize = 10;
+```
+#### fretCount (get)
+
+Exists as a property of the config property on the GuitarDiagrams object. Gets the number of frets on the diagram.
+
+- **Parameters**: _None_
+- **Return Value**: {number} The number of frets on the diagram.
+- **Default Value**: {number} 5
+
+_Example:_
+
+```javascript
+console.log(gdj1.config.fretCount);
+```
+
+#### fretCount (set)
+
+Exists as a property of the config property on the GuitarDiagrams object. Sets the number of frets on the diagram.
+
+- **Parameters**: {number} The number of frets on the diagram.
+- **Return Value**: _None_
+- **Default Value**: {number} 5
+
+_Example:_
+
+```javascript
+gdj1.config.fretCount = 3;
+```
+
+#### scaleFactor (get)
+
+Exists as a property of the config property on the GuitarDiagrams object. Gets the scale factor of the diagram.
+
+- **Parameters**: _None_
+- **Return Value**: {number} The scale factor of the diagram.
+- **Default Value**: {number} 1
+
+_Example:_
+
+```javascript
+console.log(gdj1.config.scaleFactor);
+```
+
+#### scaleFactor (set)
+
+Exists as a property of the config property on the GuitarDiagrams object. Sets the scale factor of the diagram.
+
+- **Parameters**: {number} The scale factor of the diagram.
+- **Return Value**: _None_
+- **Default Value**: {number} 1
+
+_Example:_
+
+```javascript
+gdj1.config.scaleFactor = .6;
+```
+
+#### orientHorizontally (get)
+
+Exists as a property of the config property on the GuitarDiagrams object. Gets the horizontal status of the diagram.
+
+- **Parameters**: _None_
+- **Return Value**: {boolean} The horizontal status of diagram.
+- **Default Value**: {boolean} false;
+
+_Example:_
+
+```javascript
+console.log(gdj1.config.orientHorizontally);
+```
+
+#### orientHorizontally (set)
+
+Exists as a property of the config property on the GuitarDiagrams object. Sets the horizontal status of the diagram.
+
+- **Parameters**: {boolean} The horizontal status of diagram.
+- **Return Value**: _None_
+- **Default Value**: {boolean} false;
+
+_Example:_
+
+```javascript
+gdj1.config.orientHorizontally = true;
+```
+
+#### fretMarkerEnabled (get)
+
+Exists as a property of the config property on the GuitarDiagrams object. Gets the enabled status of fret markers.
+
+- **Parameters**: _None_
+- **Return Value**: {boolean} The enabled status of fret markers.
+- **Default Value**: {boolean} true;
+
+_Example:_
+
+```javascript
+console.log(gdj1.config.fretMarkerEnabled);
+```
+
+#### fretMarkerEnabled (set)
+
+Exists as a property of the config property on the GuitarDiagrams object. Sets the enabled status of fret markers.
+
+- **Parameters**: {boolean} The enabled status of fret markers.
+- **Return Value**: _None_
+- **Default Value**: {boolean} true;
+
+_Example:_
+
+```javascript
+gdj1.config.fretMarkerEnabled = true;
+```
+
+#### fretStartingNumber (get)
+
+Exists as a property of the config property on the GuitarDiagrams object. Gets the starting fret number.
+
+- **Parameters**: _None_
+- **Return Value**: {number} The starting fret number.
+- **Default Value**: {number} 0;
+
+_Example:_
+
+```javascript
+console.log(gdj1.config.fretStartingNumber);
+```
+
+#### fretStartingNumber (set)
+
+Exists as a property of the config property on the GuitarDiagrams object. Sets the starting fret number.
+
+- **Parameters**: {number} The starting fret number.
+- **Return Value**: _None_
+- **Default Value**: {number} 0;
+
+_Example:_
+
+```javascript
+gdj1.config.fretStartingNumber = 3;
+```
+
+#### stringNamesEnabled (get)
+
+Exists as a property of the config property on the GuitarDiagrams object.  Gets the enabled status of string names.
+
+- **Parameters**: _None_
+- **Return Value**: {boolean} The enabled status of string names.
+- **Default Value**: {boolean} false;
+
+_Example:_
+
+```javascript
+console.log(gdj1.config.stringNamesEnabled);
+```
+
+#### stringNamesEnabled (set)
+
+Exists as a property of the config property on the GuitarDiagrams object. Sets the enabled status of string names.
+
+- **Parameters**: {boolean} The enabled status of string names.
+- **Return Value**: _None_
+- **Default Value**: {boolean} false;
+
+_Example:_
+
+```javascript
+gdj1.config.stringNamesEnabled = true;
 ```
 
+#### stringNames (get)
+
+Exists as a property of the config property on the GuitarDiagrams object. Gets the array of string names.
+
+- **Parameters**: _None_
+- **Return Value**: {array} The array of string names.
+- **Default Value**: {array} ['E','A','D','G','B','e'];
+
+_Example:_
+
+```javascript
+console.log(gdj1.config.stringNames);
+```
+
+#### stringNames (set)
+
+Exists as a property of the config property on the GuitarDiagrams object. Sets the array of string names.
+
+- **Parameters**: {array} The array of string names.
+- **Return Value**: _None_
+- **Default Value**: {array} ['E','A','D','G','B','e'];
+
+_Example:_
+
+```javascript
+gdj1.config.stringNames = ['D','A','D','G'];
+```
+
+#### downloadImageEnabled (get)
+
+Exists as a property of the config property on the GuitarDiagrams object. Gets the enabled status of the download image button.
+
+- **Parameters**: _None_
+- **Return Value**: {boolean} The enabled status of the download image button.
+- **Default Value**: {boolean} false;
+
+_Example:_
+
+```javascript
+console.log(gdj1.config.downloadImageEnabled);
+```
+
+#### downloadImageEnabled (set)
+
+Exists as a property of the config property on the GuitarDiagrams object. Sets the enabled status of the download image button.
+
+- **Parameters**: {boolean} The enabled status of the download image button.
+- **Return Value**: _None_
+- **Default Value**: {boolean} false;
+
+_Example:_
+
+```javascript
+gdj1.config.downloadImageEnabled = true;
+```
 ### <a name="guitar-diagrams.js-public-methods"></a>`guitar-diagrams-config.js` Public Methods
 
 _None._

From 457926fa46b25e755e08a076ddba6f73c8ba0ff5 Mon Sep 17 00:00:00 2001
From: Kenny Carlile <kennycarlile@gmail.com>
Date: Tue, 11 Jun 2024 12:05:37 -0700
Subject: [PATCH 23/23] Fixing markdown syntax issues

---
 docs/api-docs.md | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/docs/api-docs.md b/docs/api-docs.md
index 5d01d28..b99c021 100644
--- a/docs/api-docs.md
+++ b/docs/api-docs.md
@@ -176,7 +176,7 @@ gdj1.config.colorNut = '#FFFFFF';
 
 Exists as a property of the config property on the GuitarDiagrams object. Gets the HTML color code of the nut outline.
 
-- **Parameters**: _None_ 
+- **Parameters**: _None_
 - **Return Value**: {string} The HTML color code of the nut outline.
 - **Default Value**: {string} '#000000'
 
@@ -286,7 +286,7 @@ gdj1.config.colorFretMarker = '#424949';
 
 #### colorDiagramBackground (get)
 
-Exists as a property of the config property on the GuitarDiagrams object. Gets the HTML color code of the diagram background. 
+Exists as a property of the config property on the GuitarDiagrams object. Gets the HTML color code of the diagram background.
 
 - **Parameters**: _None_
 - **Return Value**: {string} The HTML color code of the diagram background.
@@ -300,7 +300,7 @@ console.log(gdj1.config.colorDiagramBackground);
 
 #### colorDiagramBackground (set)
 
-Exists as a property of the config property on the GuitarDiagrams object. Sets the HTML color code of the diagram background. 
+Exists as a property of the config property on the GuitarDiagrams object. Sets the HTML color code of the diagram background.
 
 - **Parameters**: {string} The HTML color code of the diagram background.
 - **Return Value**: _None_
@@ -367,6 +367,7 @@ _Example:_
 ```javascript
 gdj1.config.markerStrokeWidth = 1;
 ```
+
 #### markerFontSize (get)
 
 Exists as a property of the config property on the GuitarDiagrams object. Gets the marker's font size.
@@ -394,6 +395,7 @@ _Example:_
 ```javascript
 gdj1.config.markerFontSize = 10;
 ```
+
 #### fretCount (get)
 
 Exists as a property of the config property on the GuitarDiagrams object. Gets the number of frets on the diagram.
@@ -617,6 +619,7 @@ _Example:_
 ```javascript
 gdj1.config.downloadImageEnabled = true;
 ```
+
 ### <a name="guitar-diagrams.js-public-methods"></a>`guitar-diagrams-config.js` Public Methods
 
 _None._