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;
 }