Day13. RandomChoicePicker

 

 

 

 

 

HTML

 

 

 

CSS

 

 

 

 

JS

textarea에 입력하고 싶은 내용을 적고 그 내용이 밑에 태그로 들어가서 엔터를 누른 다음 입력한 내용들을 돌아 다니며 지정한 시간 이후에 멈춘다.

 

textarea에 입력 값 받기

입력값 아래 tag에 넣기

입력값 작성 후 enter 누르면 랜덤 피킹 스타트. 

입력값 전체에 higlight를 적용 이동 시 이전에 highlight 해제

지정 시간 이후 멈춤.

 

const tagsEl = document.getElementById('tags');

const textarea = document.getElementById('textarea');

 

tags, textarea 가져오기.

 

 

textarea.focus();

 

when the page loads or when this script runs.

it becomes the active element, ready to receive user input. So, when the page loads or the script executes, the cursor will be placed inside the textarea

커서가 텍스트 공간 안에 자리잡게 해준다.

 

 

 

textarea.addEventListener('keyup', (e) => {

createTags(e.target.value);

if (e.key === 'Enter') {

setTimeout(() => {

e.target.value = '';

}, 10);

randomSelect();

}

});

 

keyup 할 경우 createTags() 함수 실행

그리고 Enter 키를 누를 경우 10밀리세컨 이후로 randomSelect() 함수 실행

 

 

 

function createTags(input) {

const tags = input

.split(',')

.filter((tag) => tag.trim() !== '')

.map((tag) => tag.trim());

tagsEl.innerHTML = ' ';

tags.forEach((tag) => {

const tagEl = document.createElement('span');

tagEl.classList.add('tag');

tagEl.innerText = tag;

tagsEl.appendChild(tagEl);

});

}

 

input value 를 split을 사용해 , comma로 나눠준다.

.filter를 사용해서 공백이 아닐 경우에 

.map을 사용. The map function is used to create a new array where each tag has leading and trailing whitespaces removed using trim()

.trim()을 이용해 앞뒤 공백제거

forEach를 이용해서 ieration 하고 

tag라는 클래스를 add. tagsEl.appendChild(tagEl);: The span element (representing a tag) is appended as a child to the element with the ID 'tags', which is typically a container for displaying the tags.

 

 

function randomSelect() {

const times = 30;

const interval = setInterval(() => {

const randomTag = pickRandomTag();

highlightTag(randomTag);

setTimeout(() => {

unHighlightTag(randomTag);

}, 100);

}, 100);

setTimeout(() => {

clearInterval(interval);

setTimeout(() => {

const randomTag = pickRandomTag();

highlightTag(randomTag);

}, 100);

}, times * 100);

}

 

times = 얼마나 highlight를 tags 에 효과로 줄 것인가!?

 

function pickRandomTag() {

const tags = document.querySelectorAll('.tag');

return tags[Math.floor(Math.random() * tags.length)];

}

 

Math.floor(Math.random()

 

Math.random()

// will return a number between 0 and 1, you can then time it up to get larger numbers.

//When using bigger numbers remember to use Math.floor if you want it to be a integer

Math.floor(Math.random() * 10)

// Will return a integer between 0 and 9

Math.floor(Math.random() * 11)

// Will return a integer between 0 and 10

// You can make functions aswell

function randomNum(min, max) { return Math.floor(Math.random() * (max - min)) + min;

// You can remove the Math.floor if you don't want it to be an integer }

 

랜덤 숫자 뽑기 // 난수 뽑기

Math.floor() 
함수는 소수점 1번째 자리를 버림하여 정수를 리턴하는 함수입니다.

Math.random()
함수는 0~1(1은 미포함) 구간에서 부동소수점의 난수를 생성합니다.

 

 

 

function highlightTag(tag) {

tag.classList.add('highlight');

}

function unHighlightTag(tag) {

tag.classList.remove('highlight');

}

 

highlight를 붙이고 떼고.

 

<span class="tag">Choice 1</span>

<span class="tag highlight">Choice 2</span>

<span class="tag">Choice 3</span>

 

class="tag" to class="Tag highlight"