diff --git a/solutions/dom_manipulation/3/3.css b/solutions/dom_manipulation/3/3.css
new file mode 100644
index 0000000..9972648
--- /dev/null
+++ b/solutions/dom_manipulation/3/3.css
@@ -0,0 +1,68 @@
+*{
+ 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{
+ display: flex;
+ width: 500px;
+ height: 30px;
+ background-color: red;
+ border-radius: 10px;
+ /* overflow: hidden; */
+ background-color: #f6f8fa;
+}
+.container input {
+ width: 90%;
+ border: none;
+ outline: none;
+ padding: 0 10px;
+ border: 2px solid rgb(206, 206, 206);
+ border-right: none;
+ border-radius: 10px 0 0 10px;
+ background-color: transparent;
+}
+.container .icon{
+ width: 10%;
+ border-radius: 0 10px 10px 0;
+ border: 2px solid rgb(206, 206, 206);
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+}
+
+.container .icon span{
+ position: absolute;
+ left: 50%;
+ top: -200%;
+ transform: translateX(-50%);
+ background-color: #303030;
+ color: #fff;
+ white-space: nowrap;
+ padding: 10px 15px;
+ border-radius: 10px;
+ display: none;
+ transition: all 0.3s;
+}
+.container .icon i{
+ transition: .3s;
+}
+.container .icon span::before{
+ content: "";
+ position: absolute;
+ left: 50%;
+ top: 100%;
+ transform: translateX(-50%);
+ border: 10px solid;
+ border-color: #303030 #0000 #0000 #0000;
+}
\ No newline at end of file
diff --git a/solutions/dom_manipulation/3/3.html b/solutions/dom_manipulation/3/3.html
new file mode 100644
index 0000000..2eec1f8
--- /dev/null
+++ b/solutions/dom_manipulation/3/3.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+ Dom Manipulation 3rd challenge
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/solutions/dom_manipulation/3/3.js b/solutions/dom_manipulation/3/3.js
new file mode 100644
index 0000000..f531d31
--- /dev/null
+++ b/solutions/dom_manipulation/3/3.js
@@ -0,0 +1,27 @@
+const text = document.querySelector("input");
+const tooltip = document.querySelector("span");
+const iconDiv = document.querySelector(".icon");
+const copy = document.querySelector("#btn");
+
+copy.addEventListener("click", () => {
+ text.select();
+
+ navigator.clipboard.writeText(text.value);
+ copy.classList.remove("fa-regular");
+ copy.classList.remove("fa-copy");
+ copy.classList.add("fa-solid");
+ copy.classList.add("fa-check");
+ tooltip.style.display = "block";
+ iconDiv.style.borderColor = "green";
+ copy.style.color = "green";
+
+ setTimeout(() => {
+ copy.classList.remove("fa-solid");
+ copy.classList.remove("fa-check");
+ copy.classList.add("fa-regular");
+ copy.classList.add("fa-copy");
+ tooltip.style.display = "none";
+ copy.style.color = "#000";
+ iconDiv.style.borderColor = "rgb(206, 206, 206)";
+ }, 3000);
+});