THE-SOPT-WEB · NamJwong · Apr 22, 2022 · Apr 22, 2022 · Apr 22, 2022 · Apr 22, 2022
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
-README.md
+README.md
+
+*/node_modules
diff --git a/who-r-u/assets/김규민.jpeg b/who-r-u/assets/김규민.jpeg
diff --git a/who-r-u/assets/백지연.png b/who-r-u/assets/백지연.png
diff --git a/who-r-u/assets/서혜은.jpg b/who-r-u/assets/서혜은.jpg
diff --git a/who-r-u/assets/전희선.jpeg b/who-r-u/assets/전희선.jpeg
diff --git a/who-r-u/assets/황주희.jpeg b/who-r-u/assets/황주희.jpeg
diff --git a/who-r-u/favicon.ico b/who-r-u/favicon.ico
diff --git a/who-r-u/index.html b/who-r-u/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./style.css" />
+    <title>누구세요?</title>
+  </head>
+  <body>
+    <header>
+      <h1>누구세요?</h1>
+    </header>
+    <main>
+      <section class="scoreBoard">
+        <span class="scoreBoard__score">0</span>
+        <span>점</span>
+      </section>
+      <div class="imageBoard">
+        <img src="" alt="who is this?" />
+      </div>
+      <div class="answer">
+        <header class="answer__title">
+          <h2>이 친구는 누구일까요?</h2>
+        </header>
+        <ul class="answer__list">
+          <li>서혜은</li>
+          <li>황주희</li>
+          <li>김규민</li>
+          <li>백지연</li>
+          <li>전희선</li>
+        </ul>
+      </div>
+      <hr />
+      <div class="buttonList">
+        <button class="buttonList__shuffle">다시하기</button>
+      </div>
+    </main>
+    <div class="modal hide">
+      <div class="modal__content">
+        <p class="modal__body"></p>
+      </div>
+    </div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
diff --git a/who-r-u/main.js b/who-r-u/main.js
@@ -0,0 +1,82 @@
+import pic1 from './assets/김규민.jpeg';
+import pic2 from './assets/전희선.jpeg';
+import pic3 from './assets/서혜은.jpg';
+import pic4 from './assets/황주희.jpeg';
+import pic5 from './assets/백지연.png';
+
+// const $ = (selector) => document.querySelector(selector);
+
+const answerListUl = document.querySelector('.answer__list');
+const imageBoard = document.querySelector('.imageBoard > img');
+const scoreDiv = document.querySelector('.scoreBoard__score');
+const modalDiv = document.querySelector('.modal');
+const modalBodyDiv = modalDiv.querySelector('p');
+const restartButton = document.querySelector('.buttonList__shuffle');
+
+let orderIndex = [0, 1, 2, 3, 4];
+let currentStep = -1;
+
+const quizList = [
+  {
+    src: pic1,
+    answer: '김규민',
+  },
+  {
+    src: pic2,
+    answer: '전희선',
+  },
+  {
+    src: pic3,
+    answer: '서혜은',
+  },
+  {
+    src: pic4,
+    answer: '황주희',
+  },
+  {
+    src: pic5,
+    answer: '백지연',
+  },
+];
+
+const shuffleOrder = () => orderIndex.sort(() => Math.random() - 0.5);
+
+const setNextStep = () => {
+  currentStep++;
+  imageBoard.setAttribute('src', quizList[orderIndex[currentStep]].src);
+};
+
+const startGame = () => {
+  scoreDiv.innerText = 0;
+  answerListUl.addEventListener('click', onClickAnswerList);
+  currentStep = -1;
+  shuffleOrder();
+  setNextStep();
+};
+
+const showModal = (text) => {
+  modalBodyDiv.innerText = text;
+  modalDiv.classList.remove('hide');
+  setTimeout(() => modalDiv.classList.add('hide'), 1500);
+};
+
+const checkAnswer = (name) => {
+  if (name === quizList[orderIndex[currentStep]].answer) {
+    if (currentStep < 4) setNextStep();
+    else {
+      answerListUl.removeEventListener('click', onClickAnswerList);
+      showModal('게임 끝');
+    }
+    scoreDiv.innerText = Number(scoreDiv.innerText) + 1;
+  } else {
+    showModal('틀렸다리');
+  }
+};
+
+const onClickAnswerList = (e) => {
+  if (e.target.classList.contains('answer__list')) return;
+  checkAnswer(e.target.innerText);
+};
+
+restartButton.addEventListener('click', startGame);
+startGame();
diff --git a/who-r-u/package.json b/who-r-u/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "web-quiz",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^2.9.0"
+  }
+}
diff --git a/who-r-u/style.css b/who-r-u/style.css
@@ -0,0 +1,161 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+button {
+  background-color: transparent;
+  border: none;
+  border-radius: 8px;
+  background-color: #bc9bfd;
+  padding: 5px 10px;
+  color: white;
+}
+
+button:hover {
+  cursor: pointer;
+}
+
+hr {
+  width: 100%;
+}
+
+a {
+  text-decoration: none;
+  color: unset;
+}
+
+header {
+  text-align: center;
+  color: white;
+  padding: 5px 10px;
+  margin-bottom: 15px;
+  background-color: #8040ff;
+}
+
+header > h1 {
+  font-size: 24px;
+}
+
+header > h2 {
+  font-size: 18px;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+section.scoreBoard {
+  width: 100%;
+  text-align: center;
+
+  color: white;
+  background-color: #bc9bfd;
+  padding: 10px;
+}
+
+section.scoreBoard.scored {
+  animation: score 0.5s ease-in-out infinite;
+  color: rgb(255, 0, 0);
+}
+
+div.imageBoard {
+  padding: 15px;
+  height: 350px;
+  display: flex;
+  align-items: center;
+}
+
+div.imageBoard > img {
+  width: 100%;
+  max-height: 100%;
+  border-radius: 18px;
+  border: 1px solid #8040ff;
+}
+
+.modal.hide {
+  display: none;
+}
+
+.modal {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal__content {
+  width: fit-content;
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  background-color: white;
+  border-radius: 18px;
+  padding: 15px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.answer > header {
+  border-radius: 18px;
+}
+
+.answer__list {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 5px;
+}
+
+.answer__list > li {
+  width: fit-content;
+  padding: 10px;
+
+  border-radius: 34px;
+
+  font-size: 14px;
+  color: white;
+
+  background-color: #f88dd8;
+
+  list-style: none;
+}
+
+.buttonList {
+  position: relative;
+  width: 100%;
+  display: flex;
+  padding: 5px 10px;
+}
+
+.buttonList > button {
+  margin: 0 auto;
+  width: 50%;
+  font-size: 16px;
+}
+
+@keyframes score {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.25);
+  }
+
+  100% {
+    transform: scale(1.5);
+  }
+}