itsbrex/index.html

## index.html
<html>

<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-black p-10">
  <section id="interactiveInterface" class="grid grid-cols-5 grid-rows-5 gap-4 rounded-t-xl overflow-hidden p-10">
  </section>
  <div id="keyContainer"></div>
  <div id="bpmSlider"></div>
  <div id="playContainer"></div>
  <div id="downloadContainer"></div>
  <script src="https://unpkg.com/tone"></script>
  <script src="https://unpkg.com/midi-writer-js@latest"></script>
  <script>
    class ChordInterface {
      constructor() {
        this.loop = new Tone.Loop(this.callback.bind(this), "4m").start(0);
        this.polySynth = new Tone.PolySynth().toDestination();
        this.key = "C";
        this.keys = ["C", "G", "D", "A", "E", "B", "F#", "C#", "G#", "D#", "A#", "F"];
        this.loopLength = "4m";
        this.loopLengths = ["1m", "2m", "4m", "8m", "16m"];
        this.circleOfFifths = ["C", "G", "D", "A", "E", "B", "F#", "C#", "G#", "D#", "A#", "F"];
        Tone.Transport.start();
        this.createAllKeyButtons();
        this.createLoopLengthDropdown();
        this.createDownloadButton();
        this.createPlayButton();
      }
      createAllKeyButtons() {
        const keyContainer = document.querySelector('#keyContainer');
        keyContainer.innerHTML = '';
        this.keys.forEach(key => {
          keyContainer.innerHTML += `
              <button value="${key}" class="flex py-3 px-6 rounded-md bg-gray-200 dark:bg-gray-800 text-center font-bold text-lg text-gray-700 dark:text-white justify-center items-center">
                  ${key}
              </button>
          `;
        });
        keyContainer.querySelectorAll('button').forEach(btn => {
          btn.addEventListener('click', (e) => this.handleKeyChange(e));
        });
      }
      createLoopLengthDropdown() {
        const bpmSlider = document.querySelector('#bpmSlider');
        bpmSlider.innerHTML = '';
        const select = document.createElement('select');
        select.className = 'flex py-3 px-6 rounded-md bg-gray-200 dark:bg-gray-800 text-center font-bold text-lg text-gray-700 dark:text-white justify-center items-center';
        this.loopLengths.forEach(loop => {
          select.innerHTML += `<option value=${loop}>${loop}</option>`;
        })
        select.addEventListener('change', (e) => this.handleLoopLengthChange(e));
        bpmSlider.appendChild(select);
      }
      createPlayButton() {
        const playContainer = document.querySelector('#playContainer');
        playContainer.innerHTML = '';
        const button = document.createElement('button');
        button.className = 'flex py-3 px-6 rounded-md bg-gray-200 dark:bg-gray-800 text-center font-bold text-lg text-gray-700 dark:text-white justify-center items-center';
        button.textContent = 'Play/Pause';
        button.addEventListener("click", () => {
          this.handlePlayButtonClick();
        });
        playContainer.appendChild(button);
      }
      createDownloadButton() {
        const downloadContainer = document.querySelector('#downloadContainer');
        downloadContainer.innerHTML = '';
        const button = document.createElement('button');
        button.className = 'flex py-3 px-6 rounded-md bg-gray-200 dark:bg-gray-800 text-center font-bold text-lg text-gray-700 dark:text-white justify-center items-center';
        button.textContent = 'Download MIDI';
        button.addEventListener("click", () => {
          this.handleDownloadButtonClick();
        });
        downloadContainer.appendChild(button);
      }
    }
    window.onload = function() {
      new ChordInterface();
    };
  </script>
</body>

</html>

## script.js
function generateGrid(length, width) {
  const container = document.getElementById("grid-container");
  let gridHTML = `<div class="grid grid-cols-${width} grid-rows-${length} gap-4 overflow-hidden rounded-t-xl p-10">`;

  for (let i = 1; i <= length * width; i++) {
    gridHTML += `
      <div class="flex items-center justify-center rounded-md bg-gray-200 px-6 py-3 text-center text-5xl font-semibold text-gray-700 dark:bg-gray-200 dark:text-gray-200">
        ${i}
      </div>`;
  }

  gridHTML += "</div>";
  container.innerHTML = gridHTML;
}

document.addEventListener("DOMContentLoaded", () => {
  generateGrid(5, 5); // Adjust these values to create grids with different dimensions
});

## style.css
@tailwind base;
@tailwind components;
@tailwind utilities;

## tone-js-chord-generator.markdown

      
    Raw
  

              tone-js-chord-generator.markdown
            
          
    Tone.js Chord Generator

A Pen by itsbrex on CodePen.
License.
	<html>

	<head>
	<script src="https://cdn.tailwindcss.com"></script>
	</head>

	<body class="bg-black p-10">
	<section id="interactiveInterface" class="grid grid-cols-5 grid-rows-5 gap-4 rounded-t-xl overflow-hidden p-10">
	</section>
	<div id="keyContainer"></div>
	<div id="bpmSlider"></div>
	<div id="playContainer"></div>
	<div id="downloadContainer"></div>
	<script src="https://unpkg.com/tone"></script>
	<script src="https://unpkg.com/midi-writer-js@latest"></script>
	<script>
	class ChordInterface {
	constructor() {
	this.loop = new Tone.Loop(this.callback.bind(this), "4m").start(0);
	this.polySynth = new Tone.PolySynth().toDestination();
	this.key = "C";
	this.keys = ["C", "G", "D", "A", "E", "B", "F#", "C#", "G#", "D#", "A#", "F"];
	this.loopLength = "4m";
	this.loopLengths = ["1m", "2m", "4m", "8m", "16m"];
	this.circleOfFifths = ["C", "G", "D", "A", "E", "B", "F#", "C#", "G#", "D#", "A#", "F"];
	Tone.Transport.start();
	this.createAllKeyButtons();
	this.createLoopLengthDropdown();
	this.createDownloadButton();
	this.createPlayButton();
	}
	createAllKeyButtons() {
	const keyContainer = document.querySelector('#keyContainer');
	keyContainer.innerHTML = '';
	this.keys.forEach(key => {
	keyContainer.innerHTML += `
	<button value="${key}" class="flex py-3 px-6 rounded-md bg-gray-200 dark:bg-gray-800 text-center font-bold text-lg text-gray-700 dark:text-white justify-center items-center">
	${key}
	</button>
	`;
	});
	keyContainer.querySelectorAll('button').forEach(btn => {
	btn.addEventListener('click', (e) => this.handleKeyChange(e));
	});
	}
	createLoopLengthDropdown() {
	const bpmSlider = document.querySelector('#bpmSlider');
	bpmSlider.innerHTML = '';
	const select = document.createElement('select');
	select.className = 'flex py-3 px-6 rounded-md bg-gray-200 dark:bg-gray-800 text-center font-bold text-lg text-gray-700 dark:text-white justify-center items-center';
	this.loopLengths.forEach(loop => {
	select.innerHTML += `<option value=${loop}>${loop}</option>`;
	})
	select.addEventListener('change', (e) => this.handleLoopLengthChange(e));
	bpmSlider.appendChild(select);
	}
	createPlayButton() {
	const playContainer = document.querySelector('#playContainer');
	playContainer.innerHTML = '';
	const button = document.createElement('button');
	button.className = 'flex py-3 px-6 rounded-md bg-gray-200 dark:bg-gray-800 text-center font-bold text-lg text-gray-700 dark:text-white justify-center items-center';
	button.textContent = 'Play/Pause';
	button.addEventListener("click", () => {
	this.handlePlayButtonClick();
	});
	playContainer.appendChild(button);
	}
	createDownloadButton() {
	const downloadContainer = document.querySelector('#downloadContainer');
	downloadContainer.innerHTML = '';
	const button = document.createElement('button');
	button.className = 'flex py-3 px-6 rounded-md bg-gray-200 dark:bg-gray-800 text-center font-bold text-lg text-gray-700 dark:text-white justify-center items-center';
	button.textContent = 'Download MIDI';
	button.addEventListener("click", () => {
	this.handleDownloadButtonClick();
	});
	downloadContainer.appendChild(button);
	}
	}
	window.onload = function() {
	new ChordInterface();
	};
	</script>
	</body>

	</html>
	function generateGrid(length, width) {
	const container = document.getElementById("grid-container");
	let gridHTML = `<div class="grid grid-cols-${width} grid-rows-${length} gap-4 overflow-hidden rounded-t-xl p-10">`;

	for (let i = 1; i <= length * width; i++) {
	gridHTML += `
	<div class="flex items-center justify-center rounded-md bg-gray-200 px-6 py-3 text-center text-5xl font-semibold text-gray-700 dark:bg-gray-200 dark:text-gray-200">
	${i}
	</div>`;
	}

	gridHTML += "</div>";
	container.innerHTML = gridHTML;
	}

	document.addEventListener("DOMContentLoaded", () => {
	generateGrid(5, 5); // Adjust these values to create grids with different dimensions
	});