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