Color Switch Animated Login Form

Javascript

Color Switch Animated Login Form

HiroDaegu 2022. 10. 7. 00:32

728x90

SMALL

<!DOCTYPE html>
<html lang="ko">
<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>COLOR SWITCH ANIMATED LOGIN</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
</head>
<body>
  <div class="login">
    <h2 id="txt">Login</h2>
    <div class="inputBox">
      <input type="text" placeholder="Username">
    </div>
    <div class="inputBox">
      <input type="password" placeholder="Password">
    </div>
    <div class="inputBox">
      <input type="submit" value="Login" id="btn">
    </div>
    <div class="group">
      <a href="#">Forgot Password</a>
      <a href="#">Sign up</a>
    </div>
  </div>
  <div class="colors">
    <span class="active" style="background-color: #1DD1A1;"></span>
    <span style="background-color: #FF6B6B;" ></span>
    <span style="background-color: #2E86DE;" ></span>
    <span style="background-color: #F368E0;" ></span>
    <span style="background-color: #FF9F43;" ></span>
  </div>
</body>
</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #1DD1A1;
  transition: .5s;
}

.login {
  padding: 50px;
  background-color: #FFF;
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, .1);
}

.login h2 {
  font-weight: 500;
  border-left: 15px solid #1DD1A1;
  line-height: 1em;
  padding-left: 10px;
  transition: .5s;
  color: #333;
}

.login .inputBox input {
  width: 100%;
  padding: 10px 15px;
  outline: none;
  border: 2px solid #555;
  font-size: 1em;
  color: #333;
}

.login .inputBox input#btn {
  border: none;
  background-color: #1DD1A1;
  transition: .5s;
  font-size: 1.1em;
  font-weight: 500;
  cursor: pointer;
}

.login .group {
  display: flex;
  justify-content: space-between;
}

.login .group a {
  color: #333;
  text-decoration: none;
}

.login .group a:nth-child(2) {
  font-weight: 500;
  text-decoration: underline;
}

.colors {
  position: absolute;
  right: 0;
  padding: 10px;
  background-color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.colors span {
  width: 20px;
  height: 20px;
  margin: 10px;
  border-radius: 50%;
  cursor: pointer;
}

.colors span.active {
  border: 2px solid #333;
  scale: 1.5;
  transition: .5s;
}

let btn = document.getElementById("btn");
let txt = document.getElementById("txt");

function changeColor(color) {
  document.body.style.backgroundColor = color;
  btn.style.backgroundColor = color;
  txt.style.borderLeftColor = color;

  document.querySelectorAll("span").forEach(function(item) {
    item.classList.remove("active");
  })
  event.target.classList.add("active");
}

let colorSpan = document.querySelectorAll(".colors span");
colorSpan.forEach(function(item) {
  item.addEventListener("click", function() {
    changeColor(this.style.backgroundColor);
  })
})

728x90

LIST