prgrms-web-devcourse · Kimbangg · Sep 13, 2021 · Sep 22, 2021 · Sep 22, 2021 · Sep 22, 2021
diff --git a/4-The Message/index.html b/4-The Message/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="content-script-type" content="text/javascript">
+  <title>The message</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="https://kit.fontawesome.com/02c497bbbe.js" crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="/src/css/style.css">
+</head>
+
+<body>
+  <main class="app"></main>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>
+
+<!-- EOF -->
diff --git a/4-The Message/src/css/reset.css b/4-The Message/src/css/reset.css
@@ -0,0 +1,129 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+input:focus {
+  outline: none;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
diff --git a/4-The Message/src/css/style.css b/4-The Message/src/css/style.css
@@ -0,0 +1,65 @@
+@import 'reset.css';
+
+html,
+body {
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.msg_page {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background : linear-gradient(to bottom, #C0DEFC, #FCFEFF);
+}
+
+.msg_form {
+  width: 500px;
+  height: 250px;
+  border-radius: 10px;
+  background-color: #F5F5F5;
+  box-shadow: 0px 0px 4px 4px #E2E2E2;
+}
+
+.msg_form h2 {
+  font-size: 20px;
+  font-weight: bold;
+  padding: 30px 0px 15px calc(34%);
+}
+
+.msg_form p {
+  width: 90%;
+  margin-left: 25px;
+  border-bottom: 2px solid rgba(211, 211, 211, 0.5);
+}
+
+.msg_form h3 {
+  font-size: 15px;
+  padding: 20px 0px 15px calc(5%);
+}
+
+.msg_form_btn { 
+  margin-left: 20px;
+  border: 2px gray;
+}
+
+.msg_form_input{
+  border: 2px gray;
+  width: 420px;
+  height: 30px;
+}
+
+.msg_form_submit {
+  margin-top: 30px;
+  margin-left: 10px;
+  width: 60px;
+  height: 30px;
+}
+
+.msg_view {
+  margin-top: 15px;
+  text-align: center;
+}
diff --git a/4-The Message/src/js/App.js b/4-The Message/src/js/App.js
@@ -0,0 +1,49 @@
+import { TEXTS } from '../../utils/Constant.js'
+import MessageForm from './MessageForm.js'
+import MessageView from './MessageView.js'
+
+export default function App({ $target }) {
+  // 페이지는 전체 배경을 의미.
+  const $page = document.createElement('div')
+  $page.className = "msg_page"
+  $target.appendChild($page)
+
+  this.state = {
+    message : ''
+  }
+
+  this.setState = (nextState) => {
+    this.state = nextState
+    messageView.setState(this.state.message)
+  }
+
+  const $container = document.createElement('div')
+  $container.className = 'msg_form'
+  $container.innerHTML = `
+    <h2>${TEXTS.TITLE_TEXT}</h2>
+    <p></p>
+    <h3>${TEXTS.INFO_TEXT}</h3>
+  `
+
+  new MessageForm({
+    $target:$container,
+    onSubmit : (message) => {
+      this.setState({
+        ...this.state,
+        message
+      })
+    }
+  })
+
+  const messageView = new MessageView({
+    $target: $container,
+    initialState: this.state.message
+  })
+
+
+  $page.appendChild($container)
+
+}
+
+// 전체 UI를 담당해주는 메세지 쪽?
+// 그리고 엔터를 받는 쪽을 해줘야하는건기?
diff --git a/4-The Message/src/js/MessageForm.js b/4-The Message/src/js/MessageForm.js
@@ -0,0 +1,38 @@
+export default function MessageForm({$target, onSubmit}) {
+   const $form = document.createElement('form')
+   $target.appendChild($form)
+
+   this.render = () => {
+     $form.innerHTML = `
+       <div>
+         <button class="msg_form_btn"type="button">
+          <i class="far fa-envelope"></i>
+         </button><input class="msg_form_input" type="text">
+       </div>
+       <button class="msg_form_submit">Submit</button>
+     `
+   }
+
+   this.render()
+
+   $form.addEventListener('submit', (e) => {
+     e.preventDefault()
+
+     const input = $form.querySelector('.msg_form_input')
+     onSubmit(input.value)
+
+     input.value = ''
+   })
+
+
+   window.addEventListener('Enter', (e) => {
+     e.preventDefault()
+
+     const input = $form.querySelector('.msg_form_input')
+     onSubmit(input.value)
+
+     input.value = ''
+   })
+
+
+}
diff --git a/4-The Message/src/js/MessageView.js b/4-The Message/src/js/MessageView.js
@@ -0,0 +1,20 @@
+export default function MessageView({$target, initialState}) {
+  const $msgView = document.createElement('div')
+  $msgView.className = 'msg_view'
+  $target.appendChild($msgView)
+
+  this.state = initialState
+
+  this.setState = (nextState) => {
+    this.state = nextState
+    this.render()
+  }
+
+  this.render = () => {
+    $msgView.style.display = this.state ? 'block' : 'none'
+    $msgView.textContent = this.state
+  }
+
+  this.render()
+
+}
diff --git a/4-The Message/src/main.js b/4-The Message/src/main.js
@@ -0,0 +1,7 @@
+import App from './js/App.js'
+
+const $app = document.querySelector('.app')
+
+new App({
+  $target: $app,
+})
diff --git a/4-The Message/utils/Constant.js b/4-The Message/utils/Constant.js
@@ -0,0 +1,4 @@
+export const TEXTS = {
+  TITLE_TEXT : 'Pass the Message',
+  INFO_TEXT : 'Enter the Message'
+}
diff --git a/5-Counter/index.html b/5-Counter/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="content-script-type" content="text/javascript">
+  <title>Counter</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="https://kit.fontawesome.com/02c497bbbe.js" crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="/src/css/style.css">
+</head>
+
+<body>
+  <main class="app"></main>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>
+
+<!-- EOF -->