day 4 completed

4 years ago · 44fbec71ca
parent 1451661b52
commit 44fbec71ca
3 changed files with 82 additions and 0 deletions
--- a/code/04-hidden-search-widget/index.html
+++ b/code/04-hidden-search-widget/index.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>04 hidden search widget</title>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
+        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
+        crossorigin="anonymous" />
+
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+    <div class="container">
+        <input type="text" name="text" id="text" placeholder="Search" />
+        <button onclick="clickHandler()">
+            <i class="fas fa-search"></i>
+        </button>
+
+
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
--- a/code/04-hidden-search-widget/script.js
+++ b/code/04-hidden-search-widget/script.js
@ -0,0 +1,13 @@
+const input = document.getElementById("text");
+let i = 1;
+
+function clickHandler() {
+  if (!(i % 2)) {
+    input.classList.remove("active");
+  } else {
+    input.classList.add("active");
+    input.focus();
+  }
+
+  i++;
+}
--- a/code/04-hidden-search-widget/style.css
+++ b/code/04-hidden-search-widget/style.css
@ -0,0 +1,39 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  background-color: violet;
+}
+
+.container {
+  display: flex;
+  position: relative;
+}
+
+input,
+button {
+  border: unset;
+  height: 50px;
+  font-size: 20px;
+  outline: none;
+}
+
+input {
+  width: 0px;
+  transition: all 0.2s linear 0.1ms;
+}
+
+button {
+  padding: 0 15px;
+}
+
+.active {
+  width: 200px;
+  padding: 0 20px;
+}