4-The Message

prgrms-web-devcourse · Sep 10, 2021 · 972cb46 · 972cb46
1 parent 3f3d590
commit 972cb46
Show file tree

Hide file tree

Showing 5 changed files with 268 additions and 0 deletions.
diff --git a/4-The_Message/index.html b/4-The_Message/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>The message</title>
+    <link href="./style.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="App"></div>
+    <script src="./src/main.js" type="module"></script>
+  </body>
+</html>
diff --git a/4-The_Message/src/App.js b/4-The_Message/src/App.js
@@ -0,0 +1,19 @@
+import Message from "./Message.js";
+
+export default function App({ $target }) {
+  this.state = null;
+
+  this.setState = (nextState) => {
+    if (this.state !== nextState) {
+      this.state = nextState;
+      message.setState(this.state);
+    }
+  };
+
+  const message = new Message({
+    $target,
+    onInput: (text) => {
+      this.setState(text);
+    },
+  });
+}
diff --git a/4-The_Message/src/Message.js b/4-The_Message/src/Message.js
@@ -0,0 +1,78 @@
+export default function Message({ $target, onInput }) {
+  // Local Variables
+  let isInit = true;
+  let isStart = false;
+  const $container = document.createElement("div");
+  $container.className = "messageContainer";
+  $target.appendChild($container);
+
+  // State : text(String)
+  this.state = null;
+
+  this.setState = (nextState) => {
+    let isRender = this.state === nextState ? false : true;
+    this.state = typeof nextState === "string" ? nextState : "";
+    if (isRender) {
+      this.render();
+    }
+  };
+
+  this.render = () => {
+    if (isInit) {
+      $container.innerHTML = `
+          <h1 class="message__header">Alang Message📫</h1>
+          <label class="message__label" for="message-input">메시지를 입력하세요</label>
+          <form>
+            <div class="wrapper">
+              <button class="message__button">✉</button>
+              <input type="text" id="message-input" class="message__input" />
+            </div>
+            <button class="message__submit">Send</button>
+          </form>
+          <p class="message__result transform">
+          </p>
+          `;
+      isInit = false;
+    }
+    const $result = $container.querySelector("p");
+    $result.innerText = this.state || "";
+  };
+
+  this.render();
+
+  $container.addEventListener("input", (e) => {
+    const $input = $container.querySelector("input");
+    onInput($input.value);
+    if (!isStart) {
+      const $result = $container.querySelector("p");
+      $result.classList.add("show");
+      isStart = true;
+    }
+    if ($input.value.length === 0) {
+      isStart = false;
+    }
+  });
+
+  $container.addEventListener("submit", (e) => {
+    e.preventDefault();
+    const $input = $container.querySelector("input");
+    const $result = $container.querySelector("p");
+    $input.value = "";
+    $input.focus();
+    isStart = false;
+    $result.classList.add("send");
+  });
+
+  $container.addEventListener("animationend", (e) => {
+    const { animationName } = e;
+    switch (animationName) {
+      case "show":
+        e.target.classList.remove("show");
+        break;
+      case "send":
+        e.target.classList.remove("send");
+        e.target.innerText = "";
+        break;
+    }
+  });
+}
diff --git a/4-The_Message/src/main.js b/4-The_Message/src/main.js
@@ -0,0 +1,5 @@
+import App from "./App.js";
+
+const $target = document.querySelector(".App");
+
+new App({ $target });
diff --git a/4-The_Message/style.css b/4-The_Message/style.css
@@ -0,0 +1,153 @@
+body{
+    margin:0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+* {
+    box-sizing: border-box;
+}
+.App{
+    height: 100vh;
+    width: 100vw;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    background: radial-gradient(#ecf0f1,#7fc1ee);
+}
+
+.messageContainer {
+    display:flex;
+    flex-direction: column;
+    justify-content:center;
+    align-items: flex-start;
+    border-radius: 10px;
+    padding : 20px;
+    padding-bottom: 50px;
+    width: 40%;
+    min-height: 300px;
+    row-gap: 10px;
+    background-color: #deeff3;
+    -webkit-box-shadow: 0px 0px 7px 0px #BCBCBC; 
+    box-shadow: 0px 0px 7px 0px #BCBCBC;
+    transition: opacity 1s ease-in;
+}
+
+.message__header{
+    margin: 0;
+    margin-bottom: 10px;
+    padding: 0;
+    display: flex;
+    width: 80%;
+    align-self: center;
+    text-align: center;
+    flex-direction: column;
+    font-size: 25px;
+
+}
+.message__header::after{
+    content:"";
+    height: 2px;
+    border-radius: 5px;
+    background-color: black;
+    opacity: 0.3;
+    margin-top: 10px;
+}
+.message__label {
+}
+form{
+    width: 100%;
+    min-height: 100px;
+}
+form .wrapper {
+    display: flex;
+    align-items: center;
+}
+form::after{
+    content:"";
+    display: block;
+    margin-top: 10px;
+    height: 1px;
+    width: 100%;
+    background-color: black;
+    opacity: 0.3;
+}
+.message__button {
+    margin: 0;
+    width: 30px;
+}
+.message__input{
+    margin: 0;
+    display:inline-block;
+    width: 60%;
+    border-radius: 5px;
+    border: none;
+    height: 30px;
+}
+.message__input:focus{
+    outline: rgb(126, 156, 185) 1px solid;
+}
+.message__submit{
+    display: block;
+    margin-top: 10px;
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 16px;
+    font-weight: 600;
+    padding: 5px 10px 5px 10px;  
+    background-color: rgb(170, 210, 236);
+    color: rgb(85, 85, 85);
+}
+.message__result{
+    align-self: center;
+    text-align: center;
+    opacity:1;
+    transition: all 1s ease-in;
+    min-height: 30px;
+}
+.transform {
+    -webkit-transition: all 2s ease;  
+    -moz-transition: all 2s ease;  
+    -o-transition: all 2s ease;  
+    -ms-transition: all 2s ease;  
+    transition: all 2s ease;
+}
+.show{
+    animation:show 0.8s 1 ease-in-out;
+}
+.send{
+    animation:send 0.8s 1 ease-in-out;
+}
+
+@keyframes show {
+    0%{
+        opacity: 0;
+        transform: translateX(500px);
+    }
+    100%{
+        opacity:1;
+    }
+}
+
+@keyframes send {
+    0%{
+        opacity: 1;
+    }
+    100%{
+        opacity: 0;
+        transform: translateY(300px) scale(1.5);
+    }
+}
+button{
+    background-color: rgba(0,0,0,0);
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    -webkit-box-shadow: 0px 0px 1px 1px #e0e0e0;
+    box-shadow: 0px 0px 1px 1px #e0e0e0;
+    transition: background-color 0.1s ease-in-out;
+
+}
+button:hover{
+    background-color: rgba(255,255,255,0.6);
+    color: black;
+
+}