progedu · ghost · May 8, 2020 · May 8, 2020 · May 8, 2020 · May 8, 2020
diff --git a/assessment.css b/assessment.css
@@ -0,0 +1,15 @@
+body {
+  background-color: #04a6eb;
+  color: #fdffff;
+  width: 500px;
+  margin: 0 auto;
+}
+button {
+  padding: 5px 20px;
+  background-color: #337ab7;
+  color: #fdffff;
+  border-style: none;
+}
+input {
+  height: 20px;
+}
diff --git a/assessment.html b/assessment.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="twitter:card" content="summary" />
+    <meta
+      property="og:url"
+      content="https://hosodatakuya.github.io/assessment/assessment.html"
+    />
+    <meta property="og:title" content="あなたのいいところ診断" />
+    <meta
+      property="og:description"
+      content="N予備校プログラミング入門コースで制作した、「あなたのいいところ診断」サイトです。"
+    />
+    <link rel="stylesheet" href="assessment.css" />
+    <title>あなたのいいところ診断</title>
+  </head>
+  <body>
+    <h1>あなたのいいところは?</h1>
+    <p>診断したい名前を入れて下さい</p>
+    <input type="text" id="user-name" size="40" maxlength="20" />
+    <button id="assessment">診断する</button>
+    <div id="result-area"></div>
+    <div id="tweet-area">
+      <script>
+        !(function (d, s, id) {
+          var js,
+            fjs = d.getElementsByTagName(s)[0],
+            p = /^http:/.test(d.location) ? "http" : "https";
+          if (!d.getElementById(id)) {
+            js = d.createElement(s);
+            js.id = id;
+            js.src = p + "://platform.twitter.com/widgets.js";
+            fjs.parentNode.insertBefore(js, fjs);
+          }
+        })(document, "script", "twitter-wjs");
+      </script>
+    </div>
+    <script src="assessment.js"></script>
+  </body>
+</html>
diff --git a/assessment.js b/assessment.js
@@ -0,0 +1,97 @@
+"use strict";
+const userNameInput = document.getElementById("user-name");
+const assessmentButton = document.getElementById("assessment");
+const resultDivided = document.getElementById("result-area");
+const tweetDivided = document.getElementById("tweet-area");
+
+/**
+ * 指定した要素の子どもを全て削除する
+ * @param {HTMLElement} element HTMLの要素
+ */
+function removeAllChildren(element) {
+  while (element.firstChild) {
+    // 子どもの要素があるかぎり削除
+    element.removeChild(element.firstChild);
+  }
+}
+
+assessmentButton.onclick = () => {
+  const userName = userNameInput.value;
+  if (userName.length === 0) {
+    // 名前が空の時は処理を終了する
+    return;
+  }
+
+  removeAllChildren(resultDivided);
+  const header = document.createElement("h3");
+  header.innerText = "診断結果";
+  resultDivided.appendChild(header);
+
+  const paragraph = document.createElement("p");
+  const result = assessment(userName);
+  paragraph.innerText = result;
+  resultDivided.appendChild(paragraph);
+
+  // TODO 診断結果表示エリアの作成
+  // TODO ツイートエリアの作成
+  removeAllChildren(tweetDivided);
+  const anchor = document.createElement("a");
+  const hrefValue =
+    "https://twitter.com/intent/tweet?button_hashtag=あなたのいいところ&ref_src=twsrc%5Etfw";
+
+  anchor.setAttribute("href", hrefValue);
+  anchor.className = "twitter-hashtag-button";
+  anchor.setAttribute("data-text", "診断結果の文章");
+  anchor.innerText = "Tweet #あなたのいいところ";
+  tweetDivided.appendChild(anchor);
+
+  const script = document.createElement("script");
+  script.setAttribute("src", "https://platform.twitter.com/widgets.js");
+  tweetDivided.appendChild(script);
+};
+
+const answers = [
+  "{userName}のいいところは声です。{userName}の特徴的な声は皆を惹きつけ、心に残ります。",
+  "{userName}のいいところはまなざしです。{userName}に見つめられた人は、気になって仕方がないでしょう。",
+  "{userName}のいいところは情熱です。{userName}の情熱に周りの人は感化されます。",
+  "{userName}のいいところは厳しさです。{userName}の厳しさがものごとをいつも成功に導きます。",
+  "{userName}のいいところは知識です。博識な{userName}を多くの人が頼りにしています。",
+  "{userName}のいいところはユニークさです。{userName}だけのその特徴が皆を楽しくさせます。",
+  "{userName}のいいところは用心深さです。{userName}の洞察に、多くの人が助けられます。",
+  "{userName}のいいところは見た目です。内側から溢れ出る{userName}の良さに皆が気を惹かれます。",
+  "{userName}のいいところは決断力です。{userName}がする決断にいつも助けられる人がいます。",
+  "{userName}のいいところは思いやりです。{userName}に気をかけてもらった多くの人が感謝しています。",
+  "{userName}のいいところは感受性です。{userName}が感じたことに皆が共感し、わかりあうことができます。",
+  "{userName}のいいところは節度です。強引すぎない{userName}の考えに皆が感謝しています。",
+  "{userName}のいいところは好奇心です。新しいことに向かっていく{userName}の心構えが多くの人に魅力的に映ります。",
+  "{userName}のいいところは気配りです。{userName}の配慮が多くの人を救っています。",
+  "{userName}のいいところはその全てです。ありのままの{userName}自身がいいところなのです。",
+  "{userName}のいいところは自制心です。やばいと思ったときにしっかりと衝動を抑えられる{userName}が皆から評価されています。",
+  "{userName}のいいところは優しさです。{userName}の優しい雰囲気や立ち振る舞いに多くの人が癒やされています。",
+];
+// //@param {string} userName
+// //@return {string}
+function assessment(userName) {
+  // 全文字のコード番号を取得してそれを足し合わせる
+  let sumOfCharCode = 0;
+  for (let i = 0; i < userName.length; i++) {
+    sumOfCharCode = sumOfCharCode + userName.charCodeAt(i);
+  }
+
+  // 文字のコード番号の合計を回答の数で割って添字の数値を求める
+  const index = sumOfCharCode % answers.length;
+  let result = answers[index];
+
+  result = result.replace(/\{userName\}/g, userName);
+  return result;
+}
+
+console.assert(
+  assessment("太郎") ===
+    "太郎のいいところは決断力です。太郎がする決断にいつも助けられる人がいます。",
+  "診断結果の文言の特定の部分を名前に置き換える処理が正しくありません。"
+);
+console.assert(
+  assessment("太郎") === assessment("太郎"),
+  "入力が同じ名前なら同じ診断結果を出力する処理が正しくありません。"
+);