headwinds · February 25, 2020 14:16
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
 </head>

 <body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
 		
    // I guess the number 1 would never work?!
    const keypad = {
      2: ["A","B","C"],
      3: ["D","E","F"],
      4: ["G","H","I"],
      5: ["J","K","L"],
      6: ["M","N","O"],
      7: ["P","Q","R", "S"],
      8: ["T","U","V"],
      9: ["W","X","Y","Z"],
      
    }
    // sample input 23 needs to return all possible combinations
    // ["AD","AE","AF","BD","BE","BF","CD","CE","CF"]
    
    const testInput = 93;
    
    const getCombinations = (input) => {
      
      const combinations = [];
      const numbers = String(input).split("");
      
      let count = 0;
      const totalNumbers = numbers.length;
      
      for (let i =0; i < totalNumbers - 1; i++){
        
        const firstNumber = numbers[i];
        const secondNumber = numbers[i+1];
        const firstLetters = keypad[firstNumber];
        const secondLetters = keypad[secondNumber];
         
        const jmax = keypad[firstNumber].length;
   
        for (let j =0; j < jmax; j++){
          const parentLetter = firstLetters[j];

          const kmax = keypad[secondNumber].length;

          for (let k =0; k < kmax; k++){
            
            const childLetter = secondLetters[k];
            const combination = parentLetter + childLetter;
 
            combinations.push(combination);
          }       
        }
      }
         
      return combinations;
    }
    
    const svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 1000)
    
    svg.append("text")
      .text("(1) Character Combinations")
    	.attr("id","title")
      .attr("y", 50)
      .attr("x", 20)
      .attr("font-size", 28)
    	.attr("font-weight", 500)
    	.attr("fill", "teal")
      .attr("font-family", "monospace")
    
    svg.append("text")
      .text("")
    	.attr("id","perf")
      .attr("y", 80)
      .attr("x", 20)
      .attr("fill","grey")
      .attr("font-size", 18)
      .attr("font-family", "monospace")
    
    const updateResult = ( id, result) => {
      d3.select(`#${id}`).text(result)
    }
    
    const t0 = performance.now();
    const combinations = getCombinations(testInput);
    const t1 = performance.now();
    
    const perf = `${testInput} took ${(t1 - t0).toFixed(4)} milliseconds.`
    
    updateResult("perf", String(perf));
    
    let startY = 90;
    const delay1Sec = 500;
    combinations.forEach( combination => {
     
      svg.append("text")
      .text(combination)
    	.attr("id","result")
      .attr("y", startY)
      .attr("x", 40)
      .attr("font-size", 20)
      .attr("font-family", "monospace")
      .attr("opacity",0)
      .transition()
      	.attr("opacity",1)
      	.attr("transform",`translate(0, ${30})`)
      	.delay(startY + delay1Sec)

      startY += 20;
      
    })
    
    const testCombinations23 = ["AD","AE","AF","BD","BE","BF","CD","CE","CF"];
    const testCombinations93 = ["WD","WE","WF","XD","XE","XF","YD","YE","YF","ZD","ZE","ZF"];
    
    const test = testInput === 23 ? testCombinations23 : testCombinations93;
    
    // credit stackoverflow 
    // https://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript
    function arraysEqual(a1,a2) {
    	return JSON.stringify(a1)==JSON.stringify(a2);
 		}
    
    const testResult = arraysEqual(combinations, test)
    const testFill = testResult ? "teal" : "darkred";
    const testText = testResult ? "Success 😅" : "Fail 😔";
    
    svg.append("text")
      .text(testText)
    	.attr("fill", testFill)
    	.attr("id","result")
      .attr("y", startY + 20)
      .attr("x", 40)
      .attr("font-size", 28)
      .attr("font-family", "monospace")
      .attr("opacity",0)
      .transition()
      	.attr("opacity",1)
      	.attr("transform",`translate(0, ${30})`)
      	.delay(startY + delay1Sec)
    
    
  </script>
 </body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>
	// Feel free to change or delete any of the code you see in this editor!

	// I guess the number 1 would never work?!
	const keypad = {
	2: ["A","B","C"],
	3: ["D","E","F"],
	4: ["G","H","I"],
	5: ["J","K","L"],
	6: ["M","N","O"],
	7: ["P","Q","R", "S"],
	8: ["T","U","V"],
	9: ["W","X","Y","Z"],

	}
	// sample input 23 needs to return all possible combinations
	// ["AD","AE","AF","BD","BE","BF","CD","CE","CF"]

	const testInput = 93;

	const getCombinations = (input) => {

	const combinations = [];
	const numbers = String(input).split("");

	let count = 0;
	const totalNumbers = numbers.length;

	for (let i =0; i < totalNumbers - 1; i++){

	const firstNumber = numbers[i];
	const secondNumber = numbers[i+1];
	const firstLetters = keypad[firstNumber];
	const secondLetters = keypad[secondNumber];

	const jmax = keypad[firstNumber].length;

	for (let j =0; j < jmax; j++){
	const parentLetter = firstLetters[j];

	const kmax = keypad[secondNumber].length;

	for (let k =0; k < kmax; k++){

	const childLetter = secondLetters[k];
	const combination = parentLetter + childLetter;

	combinations.push(combination);
	}
	}
	}

	return combinations;
	}

	const svg = d3.select("body").append("svg")
	.attr("width", 960)
	.attr("height", 1000)

	svg.append("text")
	.text("(1) Character Combinations")
	.attr("id","title")
	.attr("y", 50)
	.attr("x", 20)
	.attr("font-size", 28)
	.attr("font-weight", 500)
	.attr("fill", "teal")
	.attr("font-family", "monospace")

	svg.append("text")
	.text("")
	.attr("id","perf")
	.attr("y", 80)
	.attr("x", 20)
	.attr("fill","grey")
	.attr("font-size", 18)
	.attr("font-family", "monospace")

	const updateResult = ( id, result) => {
	d3.select(`#${id}`).text(result)
	}

	const t0 = performance.now();
	const combinations = getCombinations(testInput);
	const t1 = performance.now();

	const perf = `${testInput} took ${(t1 - t0).toFixed(4)} milliseconds.`

	updateResult("perf", String(perf));

	let startY = 90;
	const delay1Sec = 500;
	combinations.forEach( combination => {

	svg.append("text")
	.text(combination)
	.attr("id","result")
	.attr("y", startY)
	.attr("x", 40)
	.attr("font-size", 20)
	.attr("font-family", "monospace")
	.attr("opacity",0)
	.transition()
	.attr("opacity",1)
	.attr("transform",`translate(0, ${30})`)
	.delay(startY + delay1Sec)

	startY += 20;

	})

	const testCombinations23 = ["AD","AE","AF","BD","BE","BF","CD","CE","CF"];
	const testCombinations93 = ["WD","WE","WF","XD","XE","XF","YD","YE","YF","ZD","ZE","ZF"];

	const test = testInput === 23 ? testCombinations23 : testCombinations93;

	// credit stackoverflow
	// https://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript
	function arraysEqual(a1,a2) {
	return JSON.stringify(a1)==JSON.stringify(a2);
	}

	const testResult = arraysEqual(combinations, test)
	const testFill = testResult ? "teal" : "darkred";
	const testText = testResult ? "Success 😅" : "Fail 😔";

	svg.append("text")
	.text(testText)
	.attr("fill", testFill)
	.attr("id","result")
	.attr("y", startY + 20)
	.attr("x", 40)
	.attr("font-size", 28)
	.attr("font-family", "monospace")
	.attr("opacity",0)
	.transition()
	.attr("opacity",1)
	.attr("transform",`translate(0, ${30})`)
	.delay(startY + delay1Sec)


	</script>
	</body>