Sergio 16ths

adrianastan · Dec 29, 2023 · bf9480b · bf9480b
1 parent bf323c7
commit bf9480b
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 18 deletions.
diff --git a/sergio/app.js b/sergio/app.js
@@ -5,6 +5,14 @@ var counter = document.getElementById('counter');
 document.addEventListener('keyup', event => {
   if (event.code === 'Space') {
     metronome.startStop(counter);
+
+    if (metronome.isRunning) {
+        playPauseIcon.className = 'pause';
+    }
+    else {
+        playPauseIcon.className = 'play';
+
+    }
   }
 })
 

diff --git a/sergio/index.html b/sergio/index.html
@@ -3,18 +3,19 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>16ths grid</title>
+
     <link rel="stylesheet" href="style.css">
 </head>
 
 
 <body>
-    <div class="row" >
-    	<div class="title">16ths Grid</div>
+    <div class="row" style="margin-top:10px; margin-bottom:10px; text-align:center">
+    	<h2>16ths grid</h2>
+    	<h4>Sergio Ponti</h4>
     </div>
     <div class="row" id="bar-counter">
     	<div class="column">
-    	     <h2 style="margin-top:10px">Bar counter: </h2>
+    	     <h4 style="margin-top:10px">Bar counter: </h4>
     	</div>
     	<div class="column2" >
     		<div id="counter">0</div>
@@ -30,7 +31,7 @@ <h2 style="margin-top:10px">Bar counter: </h2>
 
     <div class="row" id="bar-changer">
     	<div class="column">
-    	     <h2 style="margin-top:10px">Change: </h2>
+    	     <h4 style="margin-top:10px">Change: </h4>
     	</div>
     	<form name="changerForm">
     	<div class="column2" >

diff --git a/sergio/style.css b/sergio/style.css
@@ -6,17 +6,26 @@ html {
     height: 100%;
 }
 
+
+h2{
+   font-size:12pt;
+   }
+
 body {
     background-color: #fff;
     display: flex;
     align-items: center;
-    justify-content: center;
     flex-flow: column;
-
+    justify-content: center;
     height: 100%;
-
     font-family: Arial, sans-serif;
     color: #000;
+
+}
+
+.row{
+	width: 95%;
+
 }
 
 
@@ -46,7 +55,8 @@ body {
    background: #ADD8E6;
  }
 
-
+
+
 /* Clear floats after the columns */
 .row:after {
   content: "";
@@ -96,7 +106,6 @@ body {
 
 
 .input {
-
   background: none;
   border: none;
   outline: none;
@@ -106,40 +115,40 @@ body {
   border-radius: 9999px;
   box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
   color: #fff;
-  font-size:20pt;
+  font-size:16pt;
   font-weight: bold;
 }
 
 
 #bar-changer{
-   width:40%; 
+   width:90%; 
    background:DodgerBlue; 
    text-align:center; 
-   margin-bottom:50px; 
-   padding:20px; 
+   margin-bottom:10px; 
+   padding:5px; 
    color:white;
 }
 
 #bar-changer label{	
-   font-size:14pt;
+   font-size:12pt;
 }
 
 #bar-changer .column2{
    padding-top:10px;
    }
 
 #bar-counter{
-   width:40%; 
+   width:90%; 
    background:DodgerBlue; 
    text-align:center; 
    margin-bottom:10px; 
-   padding:20px; 
+   padding:5px; 
    color:white;
 }
 
 #bar-counter #counter{
 	margin-top:10px;
-	font-size:20pt;
+	font-size:16pt;
 }
 
 button {