Jan29 - Add Alphabet

Tia Hwang·2020년 1월 30일

daily JS

목록 보기

4/5

1. 무엇을 만들었는가?

입력한 영단어의 앞글자를 단어 앞뒤에 추가하기

2. HTML

  <body>
    <h1>Add Alphabet</h1>
    <label for="word">Type your word :</label>
    <input type="text" id="word" class="js--word" />
    <br />
    <input type="button" value="submit your word" class="js--btn" />
    <p class="js--result"></p>
    <script src="index.js"></script>
  </body>

3. Javascript

const input = document.querySelector(".js--word");
const button = document.querySelector(".js--btn");
const result = document.querySelector(".js--result");

function handleSubmit() {
  const wordTyped = input.value;
  const firstLetter = wordTyped.charAt(0);
  const resultText = `${firstLetter}${wordTyped}${firstLetter}`;
  result.innerText = `Funny result is ➡️️➡️️ ${resultText} `;
}

button.addEventListener("click", handleSubmit);