<divid="table-of-contents"></div> <divclass="html-container"style="border-top: .5px solid grey; margin-top: 26px;"> <h2id="cat-o-nine-tails">Cat O'Nine Tails</h2> <p>Cat o'nine tails Pieces of Eight swab carouser tackle. Pink hornswaggle gabion Sea Legs Davy Jones' Locker.</p> <p>Hang the jib Nelsons folly trysail ahoy prow. Transom strike colors scallywag aft league.</p> <h3id="the-brig">The Brig</h3> <p>Dead men tell no tales topmast Sail ho Davy Jones' Locker chantey. Wherry fluke pillage rope's end brig.</p> <h4id="privateer">Privateer</h4> <p>Tack topgallant draft line flogging. Maroon overhaul grog blossom Privateer main sheet.</p> <p>Provost me cackle fruit Corsair Cat o'nine tails. Hempen halter Davy Jones' Locker clipper bring a spring upon her cable run a shot across the bow.</p> <h2id="ahoy">Ahoy</h2> <p>Booty squiffy wench overhaul ahoy. Parrel Pirate Round long clothes long boat come about.</p> <p>Squiffy jack crow's nest bilged on her anchor barkadeer. Snow bucko mizzen six pounders tack.</p> <h3id="man-of-war">Man-of-War</h3> <p>Lee lad nipperkin avast pressgang. Man-of-war prow ho Sail ho landlubber or just lubber.</p> <p>Ho no prey, no pay fire ship salmagundi capstan. Hail-shot doubloon wherry loaded to the gunwalls cutlass.</p> <h2id="corsair">Corsair</h2> <p>Corsair chantey hardtack ahoy snow. Maroon cog galleon topmast tender.</p> <h3id="shiver-me-timbers">Shiver Me Timbers</h3> <p>Galleon nipper Shiver me timbers lugger Nelsons folly. Wench ballast scurvy man-of-war hearties.</p> <p>Poop deck clap of thunder Corsair grog hornswaggle. Dead men tell no tales brigantine long clothes black spot sutler.</p> <h4id="scurvy-dog">Scurvy Dog</h4> <p>Jury mast Letter of Marque boatswain scurvy sheet. Jolly boat plunder jack starboard Pirate Round.</p> <p>Holystone bring a spring upon her cable grog blossom deadlights league. Lanyard gabion reef sails booty gaff.</p> <h4id="sea-legs">Sea Legs</h4> <p>Sea Legs to go on account skysail Yellow Jack heave down. Spanker heave down yawl starboard barque.</p> <p>To go on account hulk swing the lead heave to tack. Fore fire in the hole prow run a rig Jack Ketch.</p> <h2id="quarterdeck">On the Quarterdeck</h2> <p>Tack chase red ensign league pinnace. Holystone quarterdeck me boatswain rope's end.</p> <p>Sink me lanyard Pieces of Eight starboard black spot. Blimey heave down crimp mutiny matey.</p> <h3id="jolly-roger">Jolly Roger</h3> <p>Belay piracy come about jolly boat transom. Heave to gally snow Arr wherry.</p> <p>Sutler Davy Jones' Locker ahoy walk the plank lugger. Jolly Roger matey hornswaggle Privateer marooned.</p> <h2id="davy-jones-locker">Davy Jones' Locker</h2> <p>Davy Jones' Locker jib trysail bowsprit heave down. Transom square-rigged clipper Jack Ketch chandler.</p> <p>Square-rigged yawl execution dock sloop American Main. Six pounders red ensign lugger heave to dead men tell no tales.</p> <h3id="sloop">Sloop</h3> <p>Spanker rutters Arr sloop pinnace. List crimp swab Blimey grog.</p> <p>Shiver me timbers hulk black jack Pirate Round clap of thunder. Scuppers six pounders carouser spirits jib.</p> <footer> <em>Text provided by <ahref="https://pirateipsum.me/">Pirate Ipsum</a>.</em> </footer>
/* Display this image by default, and reveal the monster behind it after it’s clicked. People who navigate the web with a keyboard or use a screen reader should still be able to play this game. */
const render = function () { app.innerHTML = '<p>Click a door to reveal a monster. Try not to find the sock.</p><div class="row">' + monsters.map(monster => { return (` <div class="grid" aria-live="polite"><button class="show_button" data-id="${monster}"><img alt= "Click this picture of door to see monster" src="../img/door.svg"/></button></div> `) }).join('') + '</div>'; };
const shuffleArr = function (arr) { var currentIndex = arr.length; var temporaryValue, randomIndex;
shuffleBtn.addEventListener('click', function () { shuffleArr(monsters); });
=======
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/* The document contains an element with the #table-of-contents ID. There are also an assortment of heading elements with unique IDs. Get all of the h2 elements, create a list of anchor links, and inject it into the #table-of-contents element. */
/* Before rendering the time into the UI, convert it into M:SS format. For example, the starting time should be displayed at 2:00. When the remaining time is 5 seconds, it should be displayed as 0:05. */
const timeValue = 120; const Rue = function (selector, options) { this.elem = document.querySelector(selector); this.data = options.data; this.template = options.template; }; Rue.prototype.render = function () { this.elem.innerHTML = this.template(this.data); }; Rue.prototype.restartTimer = function () { this.data.time = timeValue; app.timer() } Rue.prototype.stopTimer = function () { this.elem.innerHTML = `<h2>It's over, start again:</h2><button onclick="app.restartTimer()" class="button">Start Again</button>` } Rue.prototype.timer = function () { const intervalCount = window.setInterval(function () { if(!app) return; app.data.time-- app.render(); if (app.data.time < 1) { window.clearInterval(intervalCount) app.stopTimer() } }, 1000); app.render(); }; Rue.prototype.formatTime = function (time) { let minutes = Math.floor(time / 60); let seconds = time % 60; return`${(minutes.toString().padStart(2,'0'))}:${seconds.toString().padStart(2,'0')}`; } const app = new Rue('#app', { data: { time: timeValue, }, template: function (props) { if (!props) return; let html = `<h2>You've got only <span class="counter">${app.formatTime(props.time)}</span> seconds!</h2>`; return html; } }) app.timer();