Classes and modals added!

Author: codinger-cutie

index.html

@@ -16,7 +16,7 @@
     <input type="color" id="color-pick"value="#262626">
     </div>
     <button>set font</button>
-    <button>Remove all</button>
+    <button id="remove-elements">Remove all</button>
     <div class="add-box">
       <label for="add-element-select">Add: </label>
       <select name="element-add" id="add-element-select">
@@ -61,6 +61,51 @@
     a
     a
   </div>
+  <div style="position: fixed; top: 0; left: 0; bottom: 0; height: 4000px; width: 100vw; background-color: rgba(255, 0, 0, 1); opacity: 0.5; display: none;" id="alert">
+    <div id="btn-box">
+      <p style="font-size: 24px; margin-bottom: 10px;">Confirm Action</p>
+      <p>Are you sure you want to delete all elements?</p>
+      <p style="font-weight: bold;">This cannot be undone!</p>
+      <div style="flex-direction: row; margin-top: 10px;" id="btn-row">
+      <button id="del-ele">Yes</button>
+      <button id="popup-no">No</button>
+      </div>
+        <button style="position: absolute; left: 265px; top: 5px; bottom: 0px; right: 0px; width: 30px; height: 30px; display: flex; justify-content: space-around; align-items: center; user-select: none;" id="popup-close">X</button>
+    </div>
+    
+  </div>
+
+  <div style="position: fixed; top: 0; left: 0; bottom: 0; height: 4000px; right: 0; width: 100vw; background-color: rgba(255, 0, 0, 1); opacity: 0.5; display: none; width: 100%;"id="link-alert">
+    <div id="btn-box1">
+      <p style="font-size: 24px; margin-bottom: 10px;">Link Opening</p>
+      <p>Do you want to open this link in new tab or replace the current one?</p>
+      <div style="flex-direction: row; margin-top: 10px;" id="btn-row">
+      <button id="new-tab">Open in New Tab</button>
+      <button id="same-tab">Replace Current</button>
+      </div>
+    </div>
+    
+  </div>
+
+  <div style="position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; width: 100vw; background-color: rgba(255, 0, 0, 0.5); opacity: 1; display: none; display: block; overflow: auto;"id="class-popup">
+    <div id="class-box">
+      <p style="font-size: 24px; margin-bottom: 10px; margin-left: 10px;">Add Classes to current Element</p>
+      <p>Classes are used for defining a group of elements</p>
+      <div id="c-wrapper">
+        <input type="text" placeholder="Enter class name (class name cannot have spaces)" class="c-name" style="padding: 6px 12px;">
+      </div>
+      <div style="flex-direction: row; margin-top: 10px;" id="btn-row-c">
+      <button id="add-c">Add Another Class</button>
+      <button id="done">Done</button>
+      </div>
+      <button style="position: absolute; left: 265px; top: 5px; bottom: 0px; right: 0px; width: 30px; height: 30px; display: flex; justify-content: space-around; align-items: center; user-select: none;" id="c-close">
+        <div>X</div>
+      </button>
+    </div>
+    
+  </div>
+
+
   <script src="script.js"></script>
 
   <!--