診断したい名前を入れて下さい
+ + + + + + + From b8b062719aa77148484c9baa8666c4f755852fa5 Mon Sep 17 00:00:00 2001 From: hiroakiiiii <79961745+hiroakiiiii@users.noreply.github.com> Date: Wed, 3 Mar 2021 15:17:42 +0900 Subject: [PATCH 2/7] Create assessment.css --- assessment.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 assessment.css diff --git a/assessment.css b/assessment.css new file mode 100644 index 000000000..8f69c3df0 --- /dev/null +++ b/assessment.css @@ -0,0 +1,16 @@ +body { + background-color: #04a6eb; + color: #fdffff; + width: 500px; + margin-right: auto; + margin-left: auto; +} +button { + padding: 5px 20px; + background-color: #337ab7; + color: #fdffff; + border-style: none; +} +input { + height: 20px; +} From 118c87348de5c71fe67a0e4f90f3074cdad70138 Mon Sep 17 00:00:00 2001 From: hiroakiiiii <79961745+hiroakiiiii@users.noreply.github.com> Date: Wed, 3 Mar 2021 15:18:35 +0900 Subject: [PATCH 3/7] Create assessment.js --- assessment.js | 115 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 115 insertions(+) create mode 100644 assessment.js diff --git a/assessment.js b/assessment.js new file mode 100644 index 000000000..e4f868eba --- /dev/null +++ b/assessment.js @@ -0,0 +1,115 @@ +'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); + } +} + userNameInput.onkeydown = event => { + if (event.key === 'Enter'){ + assessmentButton.onclick(); + } + }; +assessmentButton.onclick = () => { + const userName = userNameInput.value; + if (userName.length === 0 ) { + //名前が空白の時は処理を終了する + return; + } + + //診断エリアの作成 + while (resultDivided.firstChild){ + //子供の要素がある限り削除 + resultDivided.removeChild(resultDivided.firstChild); + } + 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ツイートエリアの作成 + removeAllChildren(tweetDivided) + const anchor = document.createElement('a'); + const hrefValue = + 'https://twitter.com/intent/tweet?button_hashtag=' + + encodeURIComponent('あなたのいいところ') + + '&ref_src=twsrc%5Etfw'; + + anchor.setAttribute('href',hrefValue); + anchor.className = 'twitter-hashtag-button'; + anchor.setAttribute('data-text',result); + anchor.innerText = 'Tweet #あなたのいいところ'; + tweetDivided.appendChild(anchor); + + // widgrt.js の設定 + 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}が皆から評価されています。' +]; +/** + * 名前の文字列を渡すと診断結果を返す関数 + * @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('太郎'), + '入力が同じ名前なら同じ診断結果を出力する処理が正しくありません' +); From a8ba6adff008fb98b5798906e8e013bb30cb1ec3 Mon Sep 17 00:00:00 2001 From: hiroakiiiii <79961745+hiroakiiiii@users.noreply.github.com> Date: Wed, 3 Mar 2021 15:25:37 +0900 Subject: [PATCH 4/7] =?UTF-8?q?0GP=20=E3=82=92=E8=A8=AD=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assessment.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/assessment.html b/assessment.html index e42b8ef18..b9782d6c0 100644 --- a/assessment.html +++ b/assessment.html @@ -2,6 +2,11 @@ + + + +診断したい名前を入れて下さい