개인공부

[기본기 다지기] '글자수 세기' 만들기_HTML,CSS,JS_수정완료!

chsua 2023. 1. 17. 21:24

이전에 HTML 지식이 부족해서 '글자수 세기' 프로그램을 미완했다.

 

이전 코드도 작동이 되기는 하는데,

한 줄로 입력이 되고 줄 바꿈이 인식되지 않았다.

 

HTML element를 찾아보고 정리한 후 수정을 했다.

문제가 되었던 부분은 'input'이었는데,

여러줄을 입력할 수 있는 'textarea'로 수정하니 작동이 잘 되었다.

 

그리고 이전에는 줄바꿈이 되지 않아서 몰랐던 문제인데

JS에서 띄어쓰기를 포함하여 숫자를 세는 경우 '\n'도 인식이 되어서

잘못된 결과가 출력되었다.

해서, 이 부분도 수정했다. 

 

 

최종 코드는 다음과 같다.

 

1. 출력화면

 

2. HTML

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css-test.css"/>
    <meta name="viewport" content="width=device-width">
    <title>Cool box</title>
  </head>

  <body>
    
    <h1>글자수 세기 프로그램</h1>

    <p>하단에 글을 입력해주세요.</p>

    <div class="userInput">
    
    	<!-- 수정한 부분 -->
        <textarea required id="inputText" class="inputText"></textarea>
        
        
        <br>
        <div class="button">
            <button type="submit" class="submit_notSpacing">띄어쓰기 없이 처리</button>
            <button type="submit" class="submit_spacing">띄어쓰기 포함하여 처리</button>
        </div>
    </div>

    <div class="resultParas">
      <p class="showResult"></p>
    </div>

    <script src="index.js"></script>
    </body>
</html>

 

3. CSS

html {
  font-family: sans-serif;
}

body {
  padding: 5%;
  width: 50%;
  max-width: 800px;
  min-width: 500px;
  margin: 10px auto;
}

label {
  font-size: smaller;
  color: rgb(71, 71, 71)
}

.inputText {
  width: 100%;
  min-height: 300px;
  max-height: 1000px;
  overflow: auto;
}


button {
  border-radius: 1px;
  background-color: bisque;
  width: 150px;
  height: 50px;
}



.button {
  margin: 3%;
  display:  flex;
  justify-content: space-around;
}

 

4. JS

const submit_notSpacing = document.querySelector(".submit_notSpacing");
const submit_spacing = document.querySelector(".submit_spacing");
const showResult = document.querySelector(".showResult");

function count(spacing) {
    const inputText = document.querySelector(".inputText");
    let userText = inputText.value;
    let result = 0;

    if (!spacing) {
        const val = userText.split("");
        val.forEach(ele => {
            if (ele !== "\n" && ele !== " ") result++
        });
        showResult.textContent = `띄어쓰기 미포함: ${result}자`;
        return;
    }

    const val = userText.split("");
    
    // 수정한 부분
    val.forEach(ele => {
        if (ele !== "\n") result++
    });
    
    
    showResult.textContent = `띄어쓰기 포함: ${result}자`;
    return;
}

submit_notSpacing.onclick = () => {  //띄어쓰기 없는 처리
    count(false);
}
submit_spacing.onclick = () => {
    count(true);
}