-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
db05e58
commit 6308bf2
Showing
1,858 changed files
with
168,394 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| #beat-maker | ||
|
|
||
| This project was built during the JavaScript oriented online course, specialized for making beats. | ||
|
|
||
| { dateOfDevelopment: "June 2020"; | ||
| responsive: false; | ||
| specializedTechnology: 'JavaScript'; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body { | ||
| font-family: sans-serif; | ||
| padding: 0 5rem; | ||
| } | ||
|
|
||
| i, | ||
| svg { | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| .kick-pad, | ||
| .snare-pad, | ||
| .hihat-pad { | ||
| width: 5rem; | ||
| height: 5rem; | ||
| margin: 1rem 0.5rem; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .kick-pad { | ||
| background-color: #83a0f7; | ||
| } | ||
|
|
||
| .snare-pad { | ||
| background-color: #fac3fa; | ||
| } | ||
|
|
||
| .hihat-pad { | ||
| background-color: #fcd386; | ||
| } | ||
|
|
||
| .kick-pad.active { | ||
| background-color: royalblue; | ||
| } | ||
|
|
||
| .snare-pad.active { | ||
| background-color: violet; | ||
| } | ||
|
|
||
| .hihat-pad.active { | ||
| background-color: orange; | ||
| } | ||
|
|
||
| .kick-track, | ||
| .snare-track, | ||
| .hihat-track { | ||
| display: flex; | ||
| align-items: center; | ||
| width: 100%; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .kick, | ||
| .snare, | ||
| .hihat { | ||
| display: flex; | ||
| } | ||
|
|
||
| .sequencer { | ||
| display: flex; | ||
| min-height: 100vh; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .controls { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| flex: 1; | ||
| align-items: center; | ||
| margin-right: 2rem; | ||
| } | ||
|
|
||
| .controls button { | ||
| padding: 0.5rem; | ||
| border: none; | ||
| background-color: #777; | ||
| color: white; | ||
| font-size: 1rem; | ||
| cursor: pointer; | ||
| transition: all 0.5s ease; | ||
| } | ||
|
|
||
| .pad { | ||
| transition: all 0.5s ease; | ||
| } | ||
|
|
||
| .play { | ||
| padding: 1rem 2rem; | ||
| font-size: 1rem; | ||
| background-color: #777; | ||
| color: white; | ||
| border: none; | ||
| cursor: pointer; | ||
| margin-top: 3rem; | ||
| } | ||
|
|
||
| select { | ||
| padding: 1rem; | ||
| font-size: 1rem; | ||
| } | ||
|
|
||
| .mute.active { | ||
| background-color: red; | ||
| } | ||
|
|
||
| .tempo { | ||
| margin: 3rem; | ||
| width: 30%; | ||
| } | ||
|
|
||
| .tempo-slider { | ||
| padding: 0.2rem; | ||
| -webkit-appearance: none; | ||
| margin: 1rem 0.5rem; | ||
| width: 100%; | ||
| position: relative; | ||
| background-color: rgb(88, 88, 88); | ||
| cursor: pointer; | ||
| border-radius: 1rem; | ||
| outline: none; | ||
| } | ||
|
|
||
| .tempo p { | ||
| font-size: 1.5rem; | ||
| margin: 2rem; | ||
| text-align: center; | ||
| } | ||
|
|
||
| @keyframes playTrack { | ||
| from { | ||
| transform: scale(1); | ||
| } | ||
| to { | ||
| transform: scale(1.2); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <link rel="stylesheet" href="css/style.css" /> | ||
| <title>BeatMaker</title> | ||
| </head> | ||
| <body> | ||
| <div class="sequencer"> | ||
| <div class="kick-track"> | ||
| <div class="controls"> | ||
| <h1>Kick</h1> | ||
| <button data-track="0" class="mute kick-volume"> | ||
| <i class="fas fa-volume-mute"></i> | ||
| </button> | ||
| <select name="kick-select" id="kick-select"> | ||
| <option value="./sounds/kick-classic.wav">Classic Kick</option> | ||
| <option value="./sounds/kick-808.wav">808 Kick</option> | ||
| <option value="./sounds/kick-heavy.wav">Heavy Kick</option> | ||
| </select> | ||
| </div> | ||
| <div class="kick"> | ||
| <div class="pad kick-pad b0"></div> | ||
| <div class="pad kick-pad b1"></div> | ||
| <div class="pad kick-pad b2"></div> | ||
| <div class="pad kick-pad b3"></div> | ||
| <div class="pad kick-pad b4"></div> | ||
| <div class="pad kick-pad b5"></div> | ||
| <div class="pad kick-pad b6"></div> | ||
| <div class="pad kick-pad b7"></div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="snare-track"> | ||
| <div class="controls"> | ||
| <h1>Snare</h1> | ||
| <button data-track="1" class="mute snare-volume"> | ||
| <i class="fas fa-volume-mute"></i> | ||
| </button> | ||
| <select name="snare-select" id="snare-select"> | ||
| <option value="./sounds/snare-acoustic01.wav">Classic Snare</option> | ||
| <option value="./sounds/snare-808.wav">808 Snare</option> | ||
| <option value="./sounds/snare-vinyl02.wav">Vinyl Snare</option> | ||
| </select> | ||
| </div> | ||
| <div class="snare"> | ||
| <div class="pad snare-pad b0"></div> | ||
| <div class="pad snare-pad b1"></div> | ||
| <div class="pad snare-pad b2"></div> | ||
| <div class="pad snare-pad b3"></div> | ||
| <div class="pad snare-pad b4"></div> | ||
| <div class="pad snare-pad b5"></div> | ||
| <div class="pad snare-pad b6"></div> | ||
| <div class="pad snare-pad b7"></div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="hihat-track"> | ||
| <div class="controls"> | ||
| <h1>Hihat</h1> | ||
| <button data-track="2" class="mute hihat-volume"> | ||
| <i class="fas fa-volume-mute"></i> | ||
| </button> | ||
| <select name="hihat-select" id="hihat-select"> | ||
| <option value="./sounds/hihat-acoustic01.wav">Classic Hihat</option> | ||
| <option value="./sounds/hihat-808.wav">808 Hihat</option> | ||
| </select> | ||
| </div> | ||
| <div class="hihat"> | ||
| <div class="pad hihat-pad b0"></div> | ||
| <div class="pad hihat-pad b1"></div> | ||
| <div class="pad hihat-pad b2"></div> | ||
| <div class="pad hihat-pad b3"></div> | ||
| <div class="pad hihat-pad b4"></div> | ||
| <div class="pad hihat-pad b5"></div> | ||
| <div class="pad hihat-pad b6"></div> | ||
| <div class="pad hihat-pad b7"></div> | ||
| </div> | ||
| </div> | ||
| <button class="play">Play</button> | ||
| <div class="tempo"> | ||
| <input type="range" class="tempo-slider" max="300" min="20" value="150"> | ||
| <p>Tempo: <span class="tempo-nr">150</span></p> | ||
| </div> | ||
| </div> | ||
| <audio src="./sounds/kick-classic.wav" class="kick-sound"></audio> | ||
| <audio src="./sounds/snare-acoustic01.wav" class="snare-sound"></audio> | ||
| <audio src="./sounds/hihat-acoustic01.wav" class="hihat-sound"></audio> | ||
|
|
||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/js/all.min.js"></script> | ||
| <script src="js/app.js"></script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.