diff --git a/solutions/dom_manipulation/2/2.css b/solutions/dom_manipulation/2/2.css new file mode 100644 index 0000000..06e7ba2 --- /dev/null +++ b/solutions/dom_manipulation/2/2.css @@ -0,0 +1,57 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +body{ + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} +.container{ + width: 250px; + height: auto; + text-align: center; + position: relative; +} +.container button { + width: 7rem; + height: 3rem; + background: transparent; + border: 2px solid #000; + border-radius: 30px; + font-size: 1rem; + cursor: pointer; +} +.container .items-container{ + position: absolute; + top: 3rem; + left: 50%; + transform: translateX(-50%); + width: 205px; + height: auto; + display: none; +} +.container #items{ + display: flex; + flex-direction: column; + text-align: start; + padding: 10px; + background-color: #fff; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); + border-radius: 10px; +} +.container #items .item{ + padding: 5px 10px; + border-radius: 5px; + cursor: pointer; + transition: .3s; +} + +.container #items .item:hover{ + font-weight: bold; + background-color: rgb(187, 187, 187); +} \ No newline at end of file diff --git a/solutions/dom_manipulation/2/2.html b/solutions/dom_manipulation/2/2.html new file mode 100644 index 0000000..5595eef --- /dev/null +++ b/solutions/dom_manipulation/2/2.html @@ -0,0 +1,23 @@ + + + + + + Dom Manipulation 2nd challenge Menu toggle + + + +
+ +
+
+ Download image + Hide pin + Report Pin + Get Pin embed code +
+
+
+ + + \ No newline at end of file diff --git a/solutions/dom_manipulation/2/2.js b/solutions/dom_manipulation/2/2.js new file mode 100644 index 0000000..d9414f9 --- /dev/null +++ b/solutions/dom_manipulation/2/2.js @@ -0,0 +1,14 @@ +const items_container = document.querySelector(".items-container"); +const button = document.querySelector("button"); + +button.addEventListener("click", () => { + if(items_container.style.display === "none"){ + items_container.style.display = "block" + button.style.backgroundColor = "#000" + button.style.color = "#fff" + }else{ + items_container.style.display = "none" + button.style.backgroundColor = "transparent" + button.style.color = "#000" + } +}) \ No newline at end of file