added delete btn

Katarni · Aug 3, 2024 · 43c06ef · 43c06ef
1 parent 929c0fe
commit 43c06ef
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -64,17 +64,26 @@ <h2 class="char-name">Name</h2>
             </div>
         </div> -->
 
-        <!-- <div class="char-addinfo-container" id="char-0-info">
+        <div class="char-addinfo-container" id="char-0-info">
             <div id="char-addinfo">
                 <button id="health-btn" class="add-info-btn">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
                         <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15"/>
                     </svg>
 
                     <p>Health</p>
                 </button>
+
+                <button id="delete-btn" class="add-info-btn">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
+                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
+                        <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>
+                    </svg>
+
+                    <p>Delete</p>
+                </button>
             </div>
-        </div> -->
+        </div>
 
         <div id="remove-all-box">
             <button class="remove-btn">

diff --git a/js/battle.js b/js/battle.js
@@ -167,6 +167,21 @@ function openCharInfo(id) {
 
     box.appendChild(health_btn);
 
+    const delete_btn = document.createElement('button');
+    delete_btn.id = "delete-btn";
+    delete_btn.classList.add("add-info-btn");
+    delete_btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" ' +
+                                    ' class="bi bi-trash" viewBox="0 0 16 16">' +
+                                '<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 ' +
+                                    ' 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>' +
+                                    '<path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 ' +
+                                    ' 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 ' +
+                                    ' 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>' +
+                            '</svg>' +
+                            '<p>Delete</p>'
+
+    box.appendChild(delete_btn);
+
     info.appendChild(box);
 
     document.querySelector("#" + id).children[1].children[1].classList.add("info-btn-opened");

diff --git a/styles/char-styles.css b/styles/char-styles.css
@@ -96,6 +96,12 @@
     color: #56949f;
 }
 
+#delete-btn {
+    border: 2px solid #b4637a;
+
+    color: #b4637a;
+}
+
 .add-info-btn {
     background: transparent;
     border-radius: 10px;
@@ -118,7 +124,7 @@
     margin: 0;
 }
 
-#health-btn > .bi-heart {
+.add-info-btn > .bi {
     width: 20px;
     height: 20px;
     margin-top: 3px;