강희주 / Music_Recommendation_Website

Go to a project
Toggle navigation Toggle navigation pinning
강희주
199c115e 1 parent faaac87d

Update Readme

Inline Side-by-side
Showing 8 changed files with 8 additions and 167 deletions
......@@ -27,6 +27,13 @@
## Usage
<img src="./Readme/usage.png?raw=true" width = "500"/>
웹사이트에 접속하게 되면 자동으로 현재 위치가 불러와진다.(추후 버튼 누르면 위치 불러와지도록 수정 예정)
이후 음악 추천 받기 버튼을 누르면 추천 음악을 불러올 수 있다.
<br/><br/>
<p align="right">(<a href="#top">back to top</a>)</p>
......
......@@ -61,7 +61,7 @@
</head>
<body>
<div id="container">
<h1>'프로그램명'을 방문해주셔서 감사합니다.</h1>
<h1>날씨 좋은 날, 뭐 들을래?</h1>
<fieldset>
<legend>현재 시각 정보</legend>
......
//받은 날씨 데이터를 바탕으로 음악 리스트를 추천해주는 알고리즘.
//input 값 = 날씨 데이터 ex) Thunderstorm
//output 값 = 리스트 형태의 제목-가수 정보 5쌍 ex) {(여자)아이들-tomboy, 혁오-tomboy, Dua Lipa-don't start now, 폴킴-너를 만나, Bruno Mars-Just the way you are}
//사용 언어 = javascript
//코드 전체적인 개요
// if(음악 추천하기 버튼 누름){
// if(날씨 데이터가 일반적){날씨에 맞는 장르 추천, 추천한 장르 보고 맞는 노래 추천, 장르가 2개 이상이어서 노래가 5개를 넘을때는 random_5_Select 함수 사용}
// if(날씨 데이터가 특수함(Snow)){직접 노래 추천}
// 추천받은 노래 5개의 제목과 가수 정보 데이터를 document.write함.
// }
function random_5_Select(array){ //사용시 array1 = random_5_Select(array1); 이렇게 해주면 됨
array.sort(() => Math.random() - 0.5);
array.splice(5);
return array;
}
var rec_Genre = {};
var rec_Song = {};
if(구현: 음악 추천하기 버튼 누름){
if(WeatherCondition===Thunderstorm){
rec_Song.concat(parsing(url_ballad), parsing(url_RNB_kr, parsing(url_RNB_us)));
rec_song = random_5_Select(rec_song);
}
if(WeatherCondition===Drizzle){
rec_Song.concat(parsing(url_ballad), parsing(url_RNB_kr, parsing(url_RNB_us)));
rec_song = random_5_Select(rec_song);
}
if(WeatherCondition===Rain){
rec_Song.concat(parsing(url_ballad), parsing(url_RNB_kr, parsing(url_RNB_us)));
rec_song = random_5_Select(rec_song);
}
if(WeatherCondition===Clear){
rec_Song.concat(parsing(url_hiphop_kr), parsing(url_hiphop_us), parsing(url_dance), parsing(url_rock_kr), parsing(url_rock_us));
rec_song = random_5_Select(rec_song);
}
if(WeatherCondition===Clouds){
rec_Song.concat(parsing(url_pop), parsing(url_RNB_kr), parsing(url_RNB_us), parsing(url_indie));
rec_song = random_5_Select(rec_song);
}
if(WeatherCondition===Snow){rec_Song.concat(parsing_exception('snow'));}
if(WeatherCondition===Mist){rec_Song.concat(parsing(url_newage));}
if(WeatherCondition===Fog){rec_Song.concat(parsing(url_newage));}
//밑 4개 종류의 날씨는 거의 나올 확률이 없으므로 그냥 별 의미는 없이 newage장르로 매치함.
if(WeatherCondition===Smoke){rec_Song.concat(parsing(url_newage));}
if(WeatherCondition===Haze){rec_Song.concat(parsing(url_newage));}
if(WeatherCondition===Dust){rec_Song.concat(parsing(url_newage));}
if(WeatherCondition===Sand){rec_Song.concat(parsing(url_newage));}
document.write(rec_song)
}
#container {
width:600px;
margin:10px auto;
}
fieldset {
margin-bottom: 20px;
}
ul {
list-style: none;
padding-left: 0;
}
ul li {
margin:10px;
}
/* label 텍스트 스타일 */
li label {
width:120px;
line-height: 36px;
float:left;
font-weight:bold;
}
/* 텍스트 필드 스타일 */
input[type="text"], input[type="password"], input[type="email"] {
width:300px;
height:30px;
}
/* 버튼 스타일 */
#buttons {
width:400px;
margin:20px auto;
text-align: center;
}
#buttons input {
width:150px;
height:50px;
font-size:20px;
}
#buttons input:hover {
background-color:rgb(27, 134, 221);
color:#fff;
border-color:#fff;
}
/* 드롭다운 메뉴 스타일 */
select {
width:100px;
height:30px;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="ko">
<head>
<script src="main.js"> </script>
<meta charset="UTF-8">
<title>회원 가입</title>
<style>
#container {
width:600px;
margin:10px auto;
}
</style>
<link rel="stylesheet" href="register2.css">
</head>
<body>
<div id="container">
<h1>'프로그램명'을 방문해주셔서 감사합니다.</h1>
<form>
<fieldset>
<legend>사용자 정보</legend>
<ul>
<li>
<label for="umail">아이디(이메일)</label>
<input type="email" id="umail" required>
</li>
<li>
<label for="pwd1">비밀번호</label>
<input type="password" id="pwd1" placeholder="문자와 숫자, 특수 기호 포함" required>
</li>
<li>
<label for="pw2">비밀번호 확인</label>
<input type="password" id="pwd2" required>
</li>
</ul>
</fieldset>
<div id="buttons">
<input type="submit" value="가입하기">
<input type="reset" value="취소">
</div>
</form>
<br>
<br>
<br>
<!-- 공간확보 -->
<footer>
<div>
<p><b>developed by 강희주, 진재영, 김재욱</b></p>
<address>Contact for more information. 010-2400-6771</address>
<img style="width: 30%; height: 30%; float: right;" src="https://blog.kakaocdn.net/dn/bjsDsi/btqxXJM3JKe/WAK7xHbOm7kxyVqRIvoOaK/img.jpg" alt="경희대 마크">
</div>
</footer>
</div>
</body>
</html>
\ No newline at end of file