[38JS] #13 나만의 Lorem ipsum 만들기

 

38가지 자바스크립트&리액트 튜토리얼

★최종 결과물

 

0. 작업 개요

몇가지 문장들을 넣어두고, 입력된 값에 따라 랜덤으로 문장들을 붙여서 더미 텍스트를 만들어내야함.

1. 입력받은 만큼 배열에서 원소를 랜덤으로 추출
2. 추출된 원소들의 문자열을 이어붙인 뒤 dom에 그려주기.

---

 

1. HTML

<form>
    <input type="number" id="amount"/>
    <button type="submit" class="create_btn">Create</button>
<form>
<p class="result_text"></p>

 

2. CSS

css는 따로 안할 생각.

-

 

3. JS

우선 그냥 애국가 1절을 더미텍스트로 부분부분 짤라서 넣은 뒤 작업해주었다.

그 뒤, amount 인자를 받는(input에 입력된) createRandomText 함수를 만들어 준 뒤,

빈 문자열 result를 변수로 선언해두고, amount만큼 반복문을 시행해서,

Math.random 매서드를 이용해 dummyP 의 갯수내의 랜덤 idx를 추출해서,

result에 추가해주었다. 이후 반복문이 종료되면 result를 리턴해준다.

 

그 아래부분은 그냥 DOM의 버튼과 인풋등을 선택 및 이벤트 리스너를 받는 부분.

    const dummyP = [
        "동해물과 백두산이",
        "마르고 닳도록",
        "하느님이 보우하사",
        "우리나라 만세",
        "무궁화 삼천리",
        "화려강산",
        "대한사람",
        "대한으로 길이 보전하세"
    ];
    
const createRandomText = (amount) => {
    let result = "";
    for(let i = 0; i < amount; i++) {
        const randomIndex = Math.floor(Math.random() * dummyP.length);
        result += dummyP[randomIndex];
    }
    return result;
}

const createBtn = document.querySelector('.create_btn');
const resultText = document.querySelector('.result_text');
const amountInput = document.querySelector('#amount');

createBtn.addEventListener('click', (e) => {
    e.preventDefault();
    const amount = amountInput.value;
    const result = createRandomText(amount);
    resultText.innerText = result;
});