day 8 completed

4 years ago · 9952d8f694
parent e8c2396fb5
commit 9952d8f694
3 changed files with 130 additions and 0 deletions
--- a/code/08-form-wave/index.html
+++ b/code/08-form-wave/index.html
@ -0,0 +1,33 @@
+<!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>08 form wave</title>
+
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+    <div class="container">
+        <h1>Please Login</h1>
+        <form action="">
+            <div class="form-input">
+                <label for="email">Email</label><input type="email" name="email" id="email">
+            </div>
+            <div class="form-input">
+                <label for="password">Password</label><input type="password" name="password" id="password" required>
+            </div>
+
+            <input type="submit" value="Login">
+        </form>
+        <span>Don't have an account? <a href='#'>Register here</a></span>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
--- a/code/08-form-wave/script.js
+++ b/code/08-form-wave/script.js
@ -0,0 +1,26 @@
+const labels = document.querySelectorAll("label");
+const email = document.getElementById("email");
+const password = document.getElementById("password");
+
+labels.forEach((label) => {
+  label.innerHTML = label.innerText
+    .split("")
+    .map(
+      (letter, idx) =>
+        `<span style="transition-delay:${idx * 50}ms">${letter}</span>`
+    )
+    .join("");
+});
+
+window.addEventListener("click", () => {
+  if (email == document.activeElement) {
+    labels[0].classList.add("active");
+    labels[1].classList.remove("active");
+  } else if (password == document.activeElement) {
+    labels[1].classList.add("active");
+    labels[0].classList.remove("active");
+  } else {
+    labels[0].classList.remove("active");
+    labels[1].classList.remove("active");
+  }
+});
--- a/code/08-form-wave/style.css
+++ b/code/08-form-wave/style.css
@ -0,0 +1,71 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: steelblue;
+}
+
+.container {
+  padding: 50px;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-self: center;
+  align-items: center;
+}
+
+.container,
+label,
+input {
+  font-family: sans-serif;
+  color: #ffffff;
+  font-size: 20px;
+}
+
+form {
+  width: 100%;
+}
+
+.form-input {
+  position: relative;
+  margin-top: 20px;
+  margin-bottom: 40px;
+}
+
+label {
+  position: absolute;
+  bottom: 20px;
+  transition: all 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+label.active {
+  transform: translateY(-40px);
+}
+
+input {
+  background-color: unset;
+  border: unset;
+  outline: none;
+  border-bottom: 2px solid #ffffff;
+  width: 100%;
+  padding: 20px 0;
+  display: block;
+}
+
+input[type="submit"] {
+  background-color: rgba(255, 255, 255, 0.8);
+  color: steelblue;
+  border-radius: 10px;
+  padding: 15px;
+  border-bottom: unset;
+  margin-bottom: 20px;
+  cursor: pointer;
+}