📍1. 계획 및 구상
음악 추천 페이지로 이동하면 DB에 저장해 둔 링크들을 보여주고, 누가 추천했는지도 보여준다.
이때, 사용자가 유튜브 링크를 등록하면, DB에 추가되고, 페이지가 새로고침되어 사용자가 추천한 노래가 등록된 모습을 확인할 수 있게 한다.
📍2. 구현
📖form
[song.html 中]
<div class="recomend">
<h1>크리스마스에 듣기 좋은 노래가 있나요?</h1>
<form class="form">
<input type=text id=music_link placeholder="유튜브 링크를 붙여 넣어 주세요 ♡">
<button onclick="insertData()">추천</button>
</form>
</div>form 클래스로 노래 링크를 입력받고, 추천 버튼을 누르면 페이지가 새로고침된다.
📖iframe
[song.html 中]
<body>
<div class="recomend">
<h1>크리스마스에 듣기 좋은 노래가 있나요?</h1>
<form class="form">
<input type=text id=music_link placeholder="유튜브 링크를 붙여 넣어 주세요 ♡">
<button onclick="insertData()">추천</button>
</form>
</div>
<!-- 동적으로 음악이 추가됨 -->
<div id="musicContainer"></div>
</body>동적으로 음악을 추가해야 하므로 추가될 장소인 musicContainer를 html에서 정의해 둔다.
[song.javascript 中 loadPage(link,name)]
const regex = /\/([^\/?]+)(?:\?|$)/;
const match = music_link.match(regex);
if (match && match[1]) {
music_link = match[1];
}유튜브 퍼오기 링크는 [https://www.youtube.com/embed/고유링크] 이고,
영상 링크는 [https://youtu.be/고유링크?si=어쩌고] 이다.
따라서 사용자로부터 입력받은 링크 중 '고유링크'만 가져와서 퍼오기링크로 만들면 된다.
[song.javascript 中 loadPage(link,name)]
// musicContainer 객체를 가져오고, 여기에 music을 동적으로 추가한다.
const musicContainer = document.getElementById('musicContainer');
// musicBox: iFrame+writer
const musicBox = document.createElement('div');
const music = document.createElement('div');
music.className = 'video';
music.innerHTML = `<iframe src="https://www.youtube.com/embed/${music_link}"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>`;
const name = document.createElement('div');
name.className = 'writer';
name.innerHTML = `<h1>${writer} 님이 추천하는 노래</h1>`;
musicBox.appendChild(music);
musicBox.appendChild(name);
musicContainer.appendChild(musicBox);musicContainer 객체를 가져와서 여기에 iframe과 h1으로 영상과 추천한 사람을 넣는다.
이때, iframe의 링크는 위 정규식으로 만들고, 추천인은 페이지를 넘겨올때 index 값을 넣어준다.
📍3. 결과
'메리크리' 카테고리의 다른 글
| [메리크리] 편지쓰기 UI (0) | 2023.12.19 |
|---|---|
| [메리크리] 스케줄링 UI/DB (1) | 2023.12.19 |
| [메리크리] 서버 연결 및 데이터베이스 구축 (1) | 2023.12.08 |
| [메리크리] 로그인 화면/메인화면 UI 개발 (audio, display, setInterval, location.href) (0) | 2023.12.07 |
| [메리크리] 계획 및 레이아웃 구성 (0) | 2023.12.07 |
