cowboyjs.com

<div class="shuffle">
	<textarea class="letters" style="height: 200px;"></textarea>
	<br>
	<input type="button" value="섞기">
	
	<div class="shuffleResponseArea">
		<textarea style="height: 200px;"></textarea>
		<div></div>
	</div>
</div>
<script>
	function arrayShuffle(array) {
	  array.sort(() => Math.random() - 0.5);
	}

	const shuffle = document.querySelector('.shuffle');
	const letters = shuffle.querySelector('.letters');
	const button = shuffle.querySelector('input[type="button"]');
	const shuffleResponseArea = shuffle.querySelector('.shuffleResponseArea');
	const shuffleResponseAreaTextarea = shuffleResponseArea.querySelector('textarea');
	const shuffleResponseAreaDiv = shuffleResponseArea.querySelector('div');

	button.onclick = () => {
		const letterArr = letters.value.replace("\t", '').split("\n");
		const temp = {};
		let result = '';
		let duplicate = '';
		
		shuffleResponseAreaDiv.innerHTML = '작업 중...';

		arrayShuffle(letterArr)

		letterArr.forEach(item => {
			if (!item) return false;

			temp[item] = (temp[item] || 0) + 1;
		});

		Object.keys(temp).forEach(letter => {
			if (result) result += "\n";
			result += letter;
			if (temp[letter] >= 2) duplicate += (duplicate ? ', ' : '' ) + letter;
		});

		shuffleResponseAreaTextarea.value = result;
		shuffleResponseAreaDiv.innerHTML = '중복 삭제 : ' + duplicate;
	}
</script>

<br><br>


<div id="randomImage">
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

	<form class="getImageForm" method="get">
		<h3>랜덤이미지</h3>
		크기 <input type="text" name="scale" class="scale" value="1300x300"><br>
		키워드 <input type="text" name="keyword" class="keyword" value="people,fashion"><br>
		<input type="submit" value="확인"><br>
		<br>
		키워드 목록
		<div>
			food-drink (음식 음료)<br>
			wallpapers (배경화면)<br>
			nature (자연)<br>
			experimental (실험적인)<br>
			people (사람)<br>
			architecture (건축학)<br>
			current-events (이벤트)<br>
			business-work (사업)<br>
			fashion (패션)<br>
			film (아날로그 필름)<br>
			health (건강)<br>
			interiors (인테리어)<br>
			street-photography (거리 사진)<br>
			technology (기술)<br>
			textures-patterns (텍스처 패턴)<br>
			travel (여행)<br>
			animals (동물들)<br>
			athletics (육상 경기)<br>
			spirituality (정신성)<br>
			arts-culture (예술 문화)<br>
			history (역사)<br>
		</div>
	</form>

	<div class="randomImageResponseArea"></div>

	<script>
		const randomImage = document.querySelector('#randomImage');
		const getImageForm = randomImage.querySelector('.getImageForm');
		const randomImageResponseArea = randomImage.querySelector('.randomImageResponseArea');
		let randomImageLoading = false;

		getImageForm.onsubmit = function (){
			let scale = getImageForm.querySelector('.scale').value;
			let keyword = getImageForm.querySelector('.keyword').value;
			
			if (randomImageLoading) {
				return false;
			}

			randomImageResponseArea.innerHTML = '불러오는 중...';
			randomImageLoading = true;

			axios.get('https://source.unsplash.com/' + scale + '/?' + keyword)
			.then(function (response) {
				// 성공 핸들링
				let img = document.createElement('img');
				img.setAttribute('src', response.request.responseURL);

				randomImageResponseArea.innerHTML = '';
				randomImageResponseArea.append(img);
			})
			.catch(function (error) {
				// 에러 핸들링
				console.log(error);
				randomImageResponseArea.innerHTML = '에러 발생';
			})
			.finally(function () {
				// 항상 실행되는 영역
				randomImageLoading = false
			});

			return false;
		}
	</script>
</div>