diff --git a/app.css b/app.css
new file mode 100644
index 0000000..d5ed6c7
--- /dev/null
+++ b/app.css
@@ -0,0 +1,4 @@
+body {
+ padding: 0 10%;
+ margin:0;
+}
diff --git a/app.js b/app.js
index c8e236b..7e5cfd1 100644
--- a/app.js
+++ b/app.js
@@ -1,11 +1,11 @@
const VF = Vex.Flow;
// Create an SVG renderer and attach it to the DIV element named "boo".
-const div = document.querySelector("body")
-const renderer = new VF.Renderer(div, VF.Renderer.Backends.SVG);
+const musicSection = document.querySelector("#music");
+const renderer = new VF.Renderer(musicSection, VF.Renderer.Backends.SVG);
// Size our SVG:
-renderer.resize(1200, 1200);
+renderer.resize(musicSection.offsetWidth+1, 1200);
// And get a drawing context:
const context = renderer.getContext();
@@ -36,9 +36,8 @@ const returnNewNote = () => {
}
const drawNotes = (measureNum) => {
- const staveWidth = 550;
- // Create a stave at position 10, 40 of width 400 on the canvas.
- const stave = new VF.Stave(10+(measureNum*staveWidth), 40, staveWidth);
+ const staveWidth = musicSection.offsetWidth/3;
+ const stave = new VF.Stave(measureNum*staveWidth, 40, staveWidth);
// Add a clef and time signature.
if(measureNum === 0){
@@ -80,3 +79,4 @@ const drawNotes = (measureNum) => {
drawNotes(0);
drawNotes(1);
+drawNotes(2);
diff --git a/index.html b/index.html
index 37277cd..77059a8 100644
--- a/index.html
+++ b/index.html
@@ -4,8 +4,14 @@
+
+
+
+