diff --git a/img/Music.png b/img/Music.png new file mode 100644 index 0000000..99e6767 Binary files /dev/null and b/img/Music.png differ diff --git a/img/favicon.ico b/img/favicon.ico new file mode 100644 index 0000000..f8aceb4 Binary files /dev/null and b/img/favicon.ico differ diff --git a/index.ejs b/index.ejs new file mode 100644 index 0000000..3415aea --- /dev/null +++ b/index.ejs @@ -0,0 +1,187 @@ + + + + + + + + Music Maker Project + + + + + + + + +
+ + + +
+ +
+ +
+

Beat Machine

+
+
+
+

Kick

+ + +
+
+

1

+

&

+

2

+

&

+

3

+

&

+

4

+

&

+ +
+
+
+
+

Snare

+ + +
+
+

1

+

&

+

2

+

&

+

3

+

&

+

4

+

&

+
+
+
+
+

Hi Hat

+ + +
+
+

1

+

&

+

2

+

&

+

3

+

&

+

4

+

&

+ +
+
+
+
+

Electronic

+ + +
+
+

1

+

&

+

2

+

&

+

3

+

&

+

4

+

&

+ +
+
+
+ +

Tempo: 120

+
+ +
+ + + + +
+ + +
+
+

Jam Time

+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/public/script.js b/public/script.js index 0467f25..add594b 100644 --- a/public/script.js +++ b/public/script.js @@ -233,7 +233,8 @@ const keyMap = [...keys].reduce((map, key) => { // We are creating key/id values for each of the notes/pitches. ex.{C : key[0]} let recordingStartTime -let songNotes +let songNotes = currentSong && currentSong.notes + keys.forEach(key => { key.addEventListener('click', () => playNote(key)); @@ -290,6 +291,8 @@ beatMachine.addEventListener('click', () => { const recordButton = document.querySelector('.rec-btn'); const replayButton = document.querySelector('.repeat-btn'); const saveButton = document.querySelector('.save-btn'); +const viewButton = document.querySelector('.view-btn'); + recordButton.addEventListener('click', toggleRecording) saveButton.addEventListener('click', saveSong) @@ -339,6 +342,10 @@ function recordNote(note) { function saveSong() { axios.post('/songs', {songNotes: songNotes}).then(res => { + viewButton.classList.remove('hidden'); + viewButton.href = `/songs/${res.data._id}` console.log(res.data) }) -} \ No newline at end of file +} + +console.log(currentSong) diff --git a/public/styles.css b/public/styles.css index c9ed1c8..dfc2ccc 100644 --- a/public/styles.css +++ b/public/styles.css @@ -135,6 +135,15 @@ i, svg { transform: translateY(750px); } +.view-btn { + opacity: 0.7; + background-color:rgb(136, 207, 148); + position: absolute; + left: 30px; + transform: translateY(400px); + z-index: 3; +} + .rec-btn:hover { background-color: rgba(138, 10, 31); color: #fff; @@ -145,6 +154,12 @@ i, svg { color: #fff; transition: ease-in-out .1s; } +.view-btn:hover { + background-color: rgb(27, 126, 36); + color: #fff; + transition: ease-in-out .1s; +} + .repeat-btn:hover { background-color: rgb(3, 142, 177); color: #fff; diff --git a/views/index.ejs b/views/index.ejs index a0c96ca..ad24ed5 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -5,22 +5,46 @@ + + + Music Maker Project + + + + + Music Maker Project +
+ + <% if (locals.song) == null { %> + + <% } else { %> + + <% } %> + + + + + + +
@@ -145,6 +169,7 @@

Jam Time

+