UNPKG

ds-algo-study

Version:

Just experimenting with publishing a package

778 lines (670 loc) 30 kB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href='http://fonts.googleapis.com/css?family=Droid+Sans:700' rel='stylesheet'> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link rel="stylesheet" href="./../prism.css"> <script async defer src="./../prism.js"></script> <link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="./prism.css"> <script async defer src="./prism.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> h1 { font-size: 150px; font-weight: 300; } .threed { z-index: 950; font: 60; color: #CCCCCC; text-shadow: 0 1px 0 #999999, 0 2px 0 #888888, 0 3px 0 #777777, 0 4px 0 #666666, 0 5px 0 #555555, 0 6px 0 #444444, 0 7px 0 #333333, 0 8px 7px rgba(0, 0, 0, 0.4), 0 9px 10px rgba(0, 0, 0, 0.2); } .neon { color: #7f0e61; text-shadow: 0 0 5px #2a4145, 0 0 10px #080e10, 0 0 20px #18b7d3, 0 0 30px #193135, 0 0 40px #167e90; } html, body { height: 100%; margin: 0; } #see { width: auto; height: 70%; float: left; position: absolute; background: #4a0336ea; right: 0px; left: 0px; overflow: hidden; } .items { position: absolute; top: 50%; left: 50%; } .item { position: absolute; background: #7b0c6dd0; width: 90%; height: 90%; top: 50%; left: 50%; transform: inherit; opacity: inherit; -webkit-animation: rotation 20s linear 0s infinite, colorswap 5s linear 0s alternate infinite; animation: rotation 20s linear 0s infinite, colorswap 5s linear 0s alternate infinite; } .item.selected { box-shadow: white 0px 0px 20px 0px; } .items>.item { width: 300px; height: 300px; transform: translate(-50%, -50%) rotate(10deg); } @-webkit-keyframes rotation { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes rotation { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @-webkit-keyframes colorswap { from { filter: saturate(0.6) brightness(1.3); } to { filter: saturate(1) brightness(1.1); } } @keyframes colorswap { from { filter: saturate(0.6) brightness(1.3); } to { filter: saturate(1) brightness(1.1); } } h1 { margin: auto; text-align: center; box-shadow: 0 0 5px; } </style> </head> <body> <br> <br> <br> <br> <h1 z-index: 900 align: center class="neon threed">Recursion</h1> <br> <br> <div id="see"> <div class="items"> <div class="item selected"> <div class="item"> <div class="item"> <div class="item"> <div class="item"> <div class="item"> <div class="item"> <div class="item"> <div class="item"> <div class="item"> <div class="item"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <center> <img src="./../AUX_MATERIALS/recursion-flow.PNG" z-index: 950;> </center> <hr> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> //---------------------------------------------------------------------------------------- //! THERE IS A REPL EMBEDED AT THE BOTTOM OF THE PAGE FOR YOU TO RUN YOUR CODE!!!!! /******************* * ONCEAGAIN... * *******************/ //! THERE IS A REPL EMBEDED AT THE BOTTOM OF THE PAGE FOR YOU TO RUN YOUR CODE!!!!! | | | | | | ˅ //---------------------------------------------------------------------------------------- /* jshint esversion: 6 */ // Solve the following prompts using recursion. </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 1. Calculate the factorial of a number. The factorial of a non-negative integer n, // denoted by n!, is the product of all positive integers less than or equal to n. // Example: 5! = 5 x 4 x 3 x 2 x 1 = 120 // factorial(5); // 120 var factorial = function(n) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 2. Compute the sum of an array of integers. // sum([1,2,3,4,5,6]); // 21 var sum = function(array) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 3. Sum all numbers in an array containing nested arrays. // arraySum([1,[2,3],[[4]],5]); // 15 var arraySum = function(array) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 4. Check if a number is even. var isEven = function(n) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 5. Sum all integers below a given integer. // sumBelow(10); // 45 // sumBelow(7); // 21 var sumBelow = function(n) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 6. Get the integers within a range (x, y). // range(2,9); // [3,4,5,6,7,8] var range = function(x, y) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 7. Compute the exponent of a number. // The exponent of a number says how many times the base number is used as a factor. // 8^2 = 8 x 8 = 64. Here, 8 is the base and 2 is the exponent. // exponent(4,3); // 64 // https://www.khanacademy.org/computing/computer-science/algorithms/recursive-algorithms/a/computing-powers-of-a-number var exponent = function(base, exp) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 8. Determine if a number is a power of two. // powerOfTwo(1); // true // powerOfTwo(16); // true // powerOfTwo(10); // false var powerOfTwo = function(n) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 9. Write a function that reverses a string. var reverse = function(string) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 10. Write a function that determines if a string is a palindrome. var palindrome = function(string) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 11. Write a function that returns the remainder of x divided by y without using the // modulo (%) operator. // modulo(5,2) // 1 // modulo(17,5) // 2 // modulo(22,6) // 4 var modulo = function(x, y) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 12. Write a function that multiplies two numbers without using the * operator or // Math methods. var multiply = function(x, y) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 13. Write a function that divides two numbers without using the / operator or // Math methods to arrive at an approximate quotient (ignore decimal endings). var divide = function(x, y) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 14. Find the greatest common divisor (gcd) of two positive numbers. The GCD of two // integers is the greatest integer that divides both x and y with no remainder. // gcd(4,36); // 4 // http://www.cse.wustl.edu/~kjg/cse131/Notes/Recursion/recursion.html // https://www.khanacademy.org/computing/computer-science/cryptography/modarithmetic/a/the-euclidean-algorithm var gcd = function(x, y) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 15. Write a function that compares each character of two strings and returns true if // both are identical. // compareStr('house', 'houses') // false // compareStr('tomato', 'tomato') // true var compareStr = function(str1, str2) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 16. Write a function that accepts a string and creates an array where each letter // occupies an index of the array. var createArray = function(str) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 17. Reverse the order of an array var reverseArr = function(array) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 18. Create a new array with a given value and length. // buildList(0,5) // [0,0,0,0,0] // buildList(7,3) // [7,7,7] var buildList = function(value, length) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 19. Implement FizzBuzz. Given integer n, return an array of the string representations of 1 to n. // For multiples of three, output 'Fizz' instead of the number. // For multiples of five, output 'Buzz' instead of the number. // For numbers which are multiples of both three and five, output "FizzBuzz" instead of the number. // fizzBuzz(5) // ['1','2','Fizz','4','Buzz'] var fizzBuzz = function(n) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 20. Count the occurrence of a value in a list. // countOccurrence([2,7,4,4,1,4], 4) // 3 // countOccurrence([2,'banana',4,4,1,'banana'], 'banana') // 2 var countOccurrence = function(array, value) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 21. Write a recursive version of map. // rMap([1,2,3], timesTwo); // [2,4,6] var rMap = function(array, callback) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 22. Write a function that counts the number of times a key occurs in an object. // var obj = {'e':{'x':'y'},'t':{'r':{'e':'r'},'p':{'y':'r'}},'y':'e'}; // countKeysInObj(obj, 'r') // 1 // countKeysInObj(obj, 'e') // 2 var countKeysInObj = function(obj, key) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 23. Write a function that counts the number of times a value occurs in an object. // var obj = {'e':{'x':'y'},'t':{'r':{'e':'r'},'p':{'y':'r'}},'y':'e'}; // countValuesInObj(obj, 'r') // 2 // countValuesInObj(obj, 'e') // 1 var countValuesInObj = function(obj, value) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 24. Find all keys in an object (and nested objects) by a provided name and rename // them to a provided new name while preserving the value stored at that key. var replaceKeysInObj = function(obj, oldKey, newKey) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 25. Get the first n Fibonacci numbers. In the Fibonacci sequence, each subsequent // number is the sum of the previous two. // Example: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34..... // fibonacci(5); // [0,1,1,2,3,5] // Note: The 0 is not counted. var fibonacci = function(n) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 26. Return the Fibonacci number located at index n of the Fibonacci sequence. // [0,1,1,2,3,5,8,13,21] // nthFibo(5); // 5 // nthFibo(7); // 13 // nthFibo(3); // 2 var nthFibo = function(n) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 27. Given an array of words, return a new array containing each word capitalized. // var words = ['i', 'am', 'learning', 'recursion']; // capitalizedWords(words); // ['I', 'AM', 'LEARNING', 'RECURSION'] var capitalizeWords = function(array) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 28. Given an array of strings, capitalize the first letter of each index. // capitalizeFirst(['car','poop','banana']); // ['Car','Poop','Banana'] var capitalizeFirst = function(array) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 29. Return the sum of all even numbers in an object containing nested objects. // var obj1 = { // a: 2, // b: {b: 2, bb: {b: 3, bb: {b: 2}}}, // c: {c: {c: 2}, cc: 'ball', ccc: 5}, // d: 1, // e: {e: {e: 2}, ee: 'car'} // }; // nestedEvenSum(obj1); // 10 var nestedEvenSum = function(obj) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 30. Flatten an array containing nested arrays. // flatten([1,[2],[3,[[4]]],5]); // [1,2,3,4,5] var flatten = function(array) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 31. Given a string, return an object containing tallies of each letter. // letterTally('potato'); // {p:1, o:2, t:2, a:1} var letterTally = function(str, obj) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 32. Eliminate consecutive duplicates in a list. If the list contains repeated // elements they should be replaced with a single copy of the element. The order of the // elements should not be changed. // compress([1,2,2,3,4,4,5,5,5]) // [1,2,3,4,5] // compress([1,2,2,3,4,4,2,5,5,5,4,4]) // [1,2,3,4,2,5,4] var compress = function(list) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 33. Augment every element in a list with a new value where each element is an array // itself. // augmentElements([[],[3],[7]], 5); // [[5],[3,5],[7,5]] var augmentElements = function(array, aug) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 34. Reduce a series of zeroes to a single 0. // minimizeZeroes([2,0,0,0,1,4]) // [2,0,1,4] // minimizeZeroes([2,0,0,0,1,0,0,4]) // [2,0,1,0,4] var minimizeZeroes = function(array) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 35. Alternate the numbers in an array between positive and negative regardless of // their original sign. The first number in the index always needs to be positive. // alternateSign([2,7,8,3,1,4]) // [2,-7,8,-3,1,-4] // alternateSign([-2,-7,8,3,-1,4]) // [2,-7,8,-3,1,-4] var alternateSign = function(array) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 36. Given a string, return a string with digits converted to their word equivalent. // Assume all numbers are single digits (less than 10). // numToText("I have 5 dogs and 6 ponies"); // "I have five dogs and six ponies" var numToText = function(str) { }; // *** EXTRA CREDIT *** // 37. Return the number of times a tag occurs in the DOM. var tagCount = function(tag, node) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 38. Write a function for binary search. // var array = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]; // binarySearch(array, 5) // 5 // https://www.khanacademy.org/computing/computer-science/algorithms/binary-search/a/binary-search var binarySearch = function(array, target, min, max) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 39. Write a merge sort function. // mergeSort([34,7,23,32,5,62]) // [5,7,23,32,34,62] // https://www.khanacademy.org/computing/computer-science/algorithms/merge-sort/a/divide-and-conquer-algorithms var mergeSort = function(array) { }; </code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="language-javascript data-line line-numbers data-user data-host data-prompt data-output" data-prismjs-copy="Copy !" data-download-link /> <code class="language-javascript"> // 40. Deeply clone objects and arrays. // var obj1 = {a:1,b:{bb:{bbb:2}},c:3}; // var obj2 = clone(obj1); // console.log(obj2); // {a:1,b:{bb:{bbb:2}},c:3} // obj1 === obj2 // false var clone = function(input) { }; </code></pre> <div class="repl"> <hr> <iframe height="400px" width="100%" src="https://repl.it/@bgoonz/RECURSION-PROMPTS?lite=true" scrolling="no" frameBorder="no" allowTransparency="true" allowFullScreen="true" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals" /> <hr> </div> <script async defer> $( document ).ready( function () { $( 'code, pre' ).append( '<span class="command-copy"><i class="fa fa-clipboard" aria-hidden="true"></i></span>' ); $( 'code span.command-copy' ).click( function ( e ) { var text = $( this ).parent().text().trim(); //.text(); var copyHex = document.createElement( 'input' ); copyHex.value = text document.body.appendChild( copyHex ); copyHex.select(); document.execCommand( 'copy' ); console.log( copyHex.value ) document.body.removeChild( copyHex ); } ); $( 'pre span.command-copy' ).click( function ( e ) { var text = $( this ).parent().text().trim(); var copyHex = document.createElement( 'input' ); copyHex.value = text document.body.appendChild( copyHex ); copyHex.select(); document.execCommand( 'copy' ); console.log( copyHex.value ) document.body.removeChild( copyHex ); } ); } ) </script> <script async defer> document.querySelectorAll( 'pre > code' ).forEach( function ( codeBlock ) { var button = document.createElement( 'button' ); button.className = 'copy-code-button'; button.type = 'button'; button.innerText = 'Copy'; var pre = codeBlock.parentNode; if ( pre.parentNode.classList.contains( 'highlight' ) ) { var highlight = pre.parentNode; highlight.parentNode.insertBefore( button, highlight ); } else { pre.parentNode.insertBefore( button, pre ); } } ); document.querySelector( 'button' ).addEventListener( 'click', () => { const code = document.getElementByTagName( 'code' ); navigator.clipboard.writeText( code.innerHTML ); } ); </script> </body> </html>