feat: adds ability to pass in starting element

index.html

@@ -30,8 +30,10 @@
     <h1 class="text--center text--white my-3">Dashboard</h1>
     <div class="flex flex--center-content w-100">
       <button type="button"
-              class="button button--lg button--orange text--white mb-3"
-              data-start-handhold>Start Tour</button>
+              id="start-button"
+              class="button button--lg button--orange text--white mb-3">
+        Start Tour
+      </button>
     </div>
     <div class="block-container cards blocks px-2 pb-3">
       <div class="block tablet-up-6 laptop-up-3 desktop-up-2">
@@ -77,7 +79,8 @@ <h2 class="card__title text--light">Your Daily Graph</h2>
         </div>
       </div>
       <div class="block tablet-up-6 laptop-up-4 desktop-up-2">
-        <div class="card rounded-2" data-step="4">
+        <div class="card rounded-2"
+             data-step="4">
           <div class="card__content h-100">
             <div class="card__header mb-0">
               <div class="card__group">

main.js

@@ -1,6 +1,9 @@
 import Handhold from './src/handhold';
 import handholdData from './steps.json';
 
-const handhold = new Handhold();
+const startBtn = document.getElementById('start-button');
+console.log({ startBtn });
+
+const handhold = new Handhold(startBtn);
 handhold.setup(handholdData);
 handhold.init();

src/handhold.mjs

@@ -1,13 +1,13 @@
 import './sass/handhold.scss';
 
 export default class Handhold {
-  constructor() {
+  constructor(startElement) {
     this._active = false;
     this._config;
     this._currentStep = 1;
     this._currentStepElement;
     this._mappedSteps;
-    this._startBtn = document.querySelector('[data-start-handhold]');
+    this._startBtn = startElement || document.querySelector('[data-start-handhold]');
     this._stepElements;
     this._steps;
     this._listeners;