creating the dropdown animation that each css attribute will have whe…

…n clicked on
Rllopez0410 · Jan 30, 2024 · 525688c · 525688c
1 parent 6f9a30e
commit 525688c
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 10 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -40,14 +40,23 @@ <h2>StyleForge</h2>
                 </button>
             </div>
             <nav class="side-nav" id="side-nav">
-                <div class="header-close">
-                    <div class="side-header">
-                        <h5>CSS Attributes</h5>
-                    </div>
+                <div class="side-header">
+                    <h5>CSS Attributes</h5>
+                </div>
+                <div id="display-attribute" class="css-attributes">display
+                    <ul id="display-values" class="attribute-list">
+                        <li class="display-value">flex</li>
+                        <li class="display-value">grid</li>
+                        <li class="display-value">inline</li>
+                        <li class="display-value">block</li>
+                    </ul>
+                </div>
+                <div class="css-attributes">justify-content
+                    <ul class="attribute-list"></ul>
+                </div>
+                <div class="css-attributes">align-items
+                    <ul class="attribute-list"></ul>
                 </div>
-                <ul class="css-attributes">display</ul>
-                <ul class="css-attributes">justify-content</ul>
-                <ul class="css-attributes">align-items</ul>
             </nav>
             <div class="display">
                 <div class="browser-window">

diff --git a/dist/main.js b/dist/main.js
diff --git a/src/index.js b/src/index.js
@@ -3,15 +3,17 @@ import  "./index.scss";
 const forgeBtn = document.getElementById("open-nav");
 const sideNav = document.getElementById("side-nav");
 const toolbox = document.getElementById("toolbox");
+const displayAttr = document.getElementById("display-attribute");
+const displayVal = document.getElementById("display-values");
 
 let click = false;
 
 forgeBtn.addEventListener("click", attributeList);
+displayAttr.addEventListener("click", cssDisplay);
 
 function attributeList() {
     if (!click) {
         sideNav.style.width = "240px";
-        sideNav.style.paddingLeft = "10px";
         toolbox.style.left = "250px";
         console.log("click");
         click = true;
@@ -22,4 +24,10 @@ function attributeList() {
         click = false;
     }
 
+}
+
+function cssDisplay() {
+    displayVal.style.display = "block";
+    displayAttr.style.padding = "5px 0 0px 0px";
+    displayVal.style.maxHeight = "200px";
 }