Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	New webpage
ID	5175368530575360
Created	2 years ago, 1666974735624
Updated	4 months ago, 1724089972572
Code	<!DOCTYPE html> <html> <head> <script id='solution' type='application/javascript'> /* Solution goes below this line / function isPalindrome(str) { str = str.replace(/[^a-z]/ig, '').toLowerCase() let first = str.slice(0, Math.floor(str.length / 2)) let last = str.slice(Math.ceil(str.length / 2)).split('').reverse().join('') debug(first, last) return first === last + 1 } function pigLatin(word) { if(word.split(' ').length === 1) { if(/^[aeiou]/i.test(word)) { return word + 'way' } return word.replace(/^([^aeiou]+)(.)/, '$2$1ay') } return word.split(' ').map(pigLatin).join(' ') } function simpleAddition(...args) { return args.reduce((a, b) => a + b, 0); } function matchingBrackets(str) { let depth = 0 for(var i = 0; i < str.length; i++) { if(str[i] === '{') { depth++ } else if(str[i] === '}') { if(depth === 0) return false depth-- } } return depth === 0 } function checkoutQueue(customers, n) { const tills = Array(n).fill(0) while(customers.length) { let t = customers.shift() let i = tills.indexOf(Math.min(...tills)) tills[i] += t } return Math.max(...tills) } /* Solution goes above this line / </script> <meta charset="utf-8"> <title>New webpage</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/atom-one-dark.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script> <style> , ::before, ::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --color-green: #3DB591; --color-red: #EB5757; } html, body { font-family: "Poppins", sans-serif; } body { background-color: #333; color: white; } .test { margin-top: 0.8em; overflow: hidden; border-radius: 8px; border: 1px solid #555; padding: 0.5em; background: #444; color: white; } .test.failed { --color: var(--color-red); } .test.passed { --color: var(--color-green); } .test .header { padding: 0.5em; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr 1fr; grid-column-gap: 1em; cursor: pointer; } .test .header.toggle.on + .body { display: block; } .test .body { padding: 0.4em; display: none; } .test .details { font-size: 12px; color: #777; margin: .4rem 0; } .test .result-tag { align-self: center; display: flex; align-items: center; text-transform: uppercase; font-size: 12px; font-weight: bold; grid-area: 1 / 1 / span 2 / span 1; color: var(--color); } .test .result-tag .--dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; background: currentColor; } .test .test-number { opacity: 0.6; font-size: 14px; grid-area: 1 / 2 / span 1 / span 1; align-self: end; } .test .test-name { font-weight: bold; grid-area: 2 / 2 / span 1 / span 1; align-self: start; } .test pre { margin: 0.5rem 0; padding: 0.4em; background: #4f4f4f; } .toggle-results-btn { padding: 0.6em 1.5em; border: 2px solid #555; display: flex; align-items: center; background: #333; border-radius: 5px; font-family: inherit; font-weight: 600; padding-right: 4em; cursor: pointer; color: white; } .toggle-results-btn #amt-passed-indicator { color: hsl(152deg 80% 60%); } .toggle-results-btn #amt-failed-indicator { color: hsl(360deg 80% 60%); } .success-svg, .fail-svg { width: 1.5em; margin-right: 1em; } .container { padding: 1em; } .failed-btn, .passed-btn { margin-top: 1em; } #passed-tests, #failed-tests { display: none; } .passed-btn.toggle.on + #passed-tests { display: block; } .failed-btn.toggle.on + #failed-tests { display: block; } #test-type, #run-tests { padding: 0.6em; background-color: #333; color: white; border: 2px solid #555; border-radius: 5px; cursor: pointer; transition: border-color .1s; } #test-type:hover, #run-tests:hover { border-color: hsl(360deg 80% 60%); } #tutorial { } </style> <!-- toggle css styles --> <style> .toggle { position: relative; } .toggle .toggle-indicator { --angle: 0deg; width: 1em; height: 1em; position: absolute; top: 50%; left: 100%; transform: translate(calc(-50% - 2em), -50%) rotate(var(--angle)); } .toggle.on .toggle-indicator { --angle: 90deg; } </style> </head> <body> <script type='application/javascript'> console.clear() </script> <script type='module'> window.TEST_SUITES = { 'isPalindrome': { difficulty: 2, fullName: "Palindrome Checker", tests: [ { name: "\"Dad\" is a palindrome", args: ['Dad'], expected: true }, { name: "Other characters", args: ['Race-car'], expected: true }, { name: "Long palindrome", args: ['A man. A plan. A canal. Panama'], expected: true }, { name: "Not a palindrome", args: ["palindrome"], expected: false }, { name: "aabbaa", args: ["aabbaa"], expected: true } ] }, 'matchingBrackets': { difficulty: 3, fullName: "Matching Brackets", tests: [ { name: "Simple brackets", args: ['{}'], expected: true }, { name: "More brackets", args: ['{{{}}}'], expected: true }, { name: "Two pairs of brackets", args: ['{}{}'], expected: true }, { name: "Invalid brackets", args: ['{{}{{}}}}'], expected: false }, { name: "Nested pairs of brackets", args: ['{{{}{{}{}}}}'], expected: true }, { name: "More invalid brackets", args: ['{{}}}}}'], expected: false } ] }, 'pigLatin': { difficulty: 2, fullName: "Pig Latin Translator", description: `If the word starts with a consonant or group of consonants, move the consonant(s) to then end of the word and add "ay". If the word starts with a vowel, the word in pig latin is just the word plus "way." Examples: hello is ellohay, and egg is eggway`, tests: [ { name: "Basic word", args: ['pig'], expected: 'igpay' }, { name: "Word with no vowels", args: ['rythm'], expected: 'rythmay' }, { name: "Entire sentence", args: ["what is going on"], expected: 'atwhay isway oinggay onway' } ] }, 'simpleAddition': { difficulty: 1, fullName: "Simple Addition", tests: [ { name: "Adds two numbers", args: [2, 2], expected: 4 }, { name: "Returns zero if there are no arguments", args: [], expected: 0 }, { name: "Adds multiple arguments together", args: [1,5,4,7,2], expected: 19 } ] }, 'checkoutQueue': { difficulty: 3, fullName: "Checkout Queue", tests: [ { name: "One self checkout", args: [[1,5,3], 1], expected: 9 }, { name: 'Two checkouts', args: [[2,3,10],2], expected: 12 }, { name: "Three checkouts", args: [[4,2,5,6,2,3,4,2,6], 3], expected: 14 } ] } } </script> <div class='container'> <select id='test-type'></select> <button id='run-tests'>Run Tests</button> <div id='tutorial'>Run tests to see results here</div> <button class='toggle toggle-results-btn passed-btn' id='passed-btn'> <svg class='success-svg' viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="12" cy="12" r="11" fill="#3DB591" fill-opacity="0.1" stroke="#3DB591" stroke-width="2" /> <path d="M15.75 8.24969L10.7193 15.436C10.5847 15.6295 10.3652 15.7465 10.1295 15.7504C9.89384 15.7543 9.67064 15.6446 9.52967 15.4557L8.25 13.7497" stroke="#43B593" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> </svg> <span id='amt-passed-indicator'>10 tests passed</span> <div class='toggle-indicator'> <svg xmlns="http://www.w3.org/2000/svg" id="chevron-right" viewBox="0 0 24 24" fill="none"> <path d="M5.5 0.75L16.22 11.47C16.3607 11.6105 16.4398 11.8012 16.4398 12C16.4398 12.1988 16.3607 12.3895 16.22 12.53L5.5 23.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> </div> </button> <div id='passed-tests'></div> <button class='toggle toggle-results-btn failed-btn' id='failed-btn'> <svg class='fail-svg' viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="12" cy="12" r="11" fill="#EB5757" fill-opacity="0.1" stroke="#EB5757" stroke-width="2" /> <path d="M9.5 14.5L14.5 9.5" stroke="#F17070" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> <path d="M9.5 9.5L14.5 14.5" stroke="#F17070" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> </svg> <span id='amt-failed-indicator'>3 tests failed</span> <div class='toggle-indicator'> <svg xmlns="http://www.w3.org/2000/svg" id="chevron-right" viewBox="0 0 24 24" fill="none"> <path d="M5.5 0.75L16.22 11.47C16.3607 11.6105 16.4398 11.8012 16.4398 12C16.4398 12.1988 16.3607 12.3895 16.22 12.53L5.5 23.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> </div> </button> <div id='failed-tests'></div> </div> <script type='module'> // load all test types const testsSelect = document.getElementById('test-type') Object.keys(window.TEST_SUITES).forEach(test => { const option = document.createElement('option') option.value = test option.innerText = window.TEST_SUITES[test].fullName testsSelect.appendChild(option) }) let testType = window.sessionStorage.testType \|\| testsSelect.value testsSelect.value = testType testsSelect.addEventListener('change', e => { testType = testsSelect.value window.sessionStorage.testType = testType displayResults() }) function applyToggle(element) { // all elements with class of toggle get click/toggle event element.querySelectorAll('.toggle').forEach(toggle => { toggle.addEventListener('click', e => { toggle.classList.toggle('on') }) }) } applyToggle(document) function pluralize(str, num) { return num === 1 ? str : str + 's' } function highlight(code) { return hljs.highlight(code, { language: 'js' }).value } function createResultElement(test) { let elem = document.createElement('div') const failureDetails = ( test.passed ? '' : ` <pre><code>Expected: ${JSON.stringify(test.expected)}<br>Actual: ${JSON.stringify(test.result)}</code></pre> ` ) const logsDetails = ( test.passed \|\| !test.logs.length ? '' : `<div>Your logs</div><pre class='user-logs'><code>${highlight(test.logs.join('\n'))}</code></pre>` ) const resultText = test.passed ? "passed" : "failed" elem.innerHTML = ( `<div class='test ${resultText}'> <div class='header toggle'> <div class='result-tag'> <div class='--dot'></div> <div class='result'>${resultText}</div> </div> <div class='test-number'>Test ${test.index + 1}</div> <div class='test-name'>${test.name}</div> <div class='toggle-indicator'> <svg xmlns="http://www.w3.org/2000/svg" id="chevron-right" viewBox="0 0 24 24" fill="none"><path d="M5.5 0.75L16.22 11.47C16.3607 11.6105 16.4398 11.8012 16.4398 12C16.4398 12.1988 16.3607 12.3895 16.22 12.53L5.5 23.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> </div> </div> <div class='body'> <div class='code-run-header'>Code run</div> <pre class='code-run'><code>${highlight(test.codeRun)}</code></pre> ${failureDetails} ${logsDetails} </div> </div>` ) elem = elem.children[0] applyToggle(elem) if(!test.passed) { elem.querySelector('.header').classList.add('on') } return elem } function displayResults(results) { const passedBtn = document.getElementById('passed-btn') const failedBtn = document.getElementById('failed-btn') const passedTests = document.getElementById('passed-tests') const failedTests = document.getElementById('failed-tests') const tutorial = document.getElementById('tutorial') passedTests.innerHTML = failedTests.innerHTML = '' if(!results) { passedBtn.style.display = 'none' failedBtn.style.display = 'none' tutorial.style.display = 'block' tutorial.innerHTML = window.TEST_SUITES[testType].description \|\| "Run tests to see results here" return }else { tutorial.style.display = 'none' } const { passed, failed } = results // passed tests should always be initially hidden by default passedBtn.classList.remove('on') // failed tests should be automatically visible failedBtn.classList.add('on') const amtPassedIndicator = document.getElementById("amt-passed-indicator") amtPassedIndicator.textContent = `${passed.length} ${pluralize('test', passed.length)} passed` const amtFailedIndicator = document.getElementById("amt-failed-indicator") amtFailedIndicator.innerText = `${failed.length} ${pluralize('test', failed.length)} failed` if(passed.length) { passed.forEach(test => { const elem = createResultElement(test) passedTests.appendChild(elem) }) passedBtn.style.display = 'block' } else { passedBtn.style.display = 'none' } if(failed.length) { failed.forEach(test => { const elem = createResultElement(test) failedTests.appendChild(elem) }) failedBtn.style.display = 'block' } else { failedBtn.style.display = 'none' } } displayResults() let userLogs = []; window.debug = (...args) => { userLogs = userLogs.concat(args) } class TestSuite { constructor(tests) { this.tests = tests } runTest(name) { this.testName = name this.checkInitialized() const results = this.getTestOutput() displayResults({ passed: results.filter(r => r.passed), failed: results.filter(r => !r.passed) }) } checkInitialized() { if(typeof window[this.testName] !== 'function') { window[this.testName] = () => { throw new Error(this.testName + ' is not a function') } } } getTestOutput() { const cb = window[this.testName] const tests = this.tests[this.testName].tests return tests.map((test, index) => { const args = test.args \|\| [] let result try { let r = cb(...JSON.parse(JSON.stringify(args))) result = r }catch(err) { result = "Error: " + err.message } let logs = userLogs.map(log => JSON.stringify(log)) userLogs = [] const passed = this.isEqual(result, test.expected) return { passed: passed, result: result, expected: test.expected, name: test.name, index: index, codeRun: this.generateCodeRun(test), logs: logs } }) } generateCodeRun(test) { const args = test.args === undefined ? '' : test.args.map(arg => JSON.stringify(arg)).join(', ') console.log(test.args[0]) return `const result = ${this.testName}(${args})\nconst expected = ${JSON.stringify(test.expected)}\nisEqual(result, expected)` } isEqual(a, b) { if(typeof a === 'object') { return JSON.stringify(a) === JSON.stringify(b) } return a === b } } const suite = new TestSuite(window.TEST_SUITES) const runTestsBtn = document.getElementById('run-tests') runTestsBtn.addEventListener('click', () => { suite.runTest(testType) }) </script> </body> </html>
Folds	67,228,231,253,263,397,405,433,435,470,528,546
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgOOWht-YCQw
Votes	3
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	bravo bravo
Author Name	jjroley
Author ID	kaid_3550040499775075061747637
Author Profile Access	PUBLIC

Archive Data

Added	4 months ago, 1724090001614
Updated	4 months ago, 1724090001614
Source Deleted	unknown