31:Tbc5,daysArray = [ {title: "Interactive Story", url:"https://observablehq.com/@triptych/interactive-story"}, {title: "Pixel Doodle", url: "https://observablehq.com/@triptych/pixel-doodle"}, {title: "Adopt an Emoji", url:"https://observablehq.com/@triptych/adopt-an-emoji"}, {title: "Material Design Icons", url: "https://observablehq.com/@triptych/material-design-icons"}, {title: "Time for Cats", url: "https://observablehq.com/@triptych/time-for-cats?collection=@triptych/31-days-of-observable"}, {title: "31 Days of Observable", url: "https://observablehq.com/@triptych/31-days-of-observable"}, {title: "Space Race", url: "https://observablehq.com/@triptych/space-race"}, {title: "Etch-a-scape", url: "https://observablehq.com/@triptych/etch-a-scape"}, {title: "My RPG Persona", url: "https://observablehq.com/@triptych/my-rpg-persona"}, {title: "Web Component Test", url:"https://observablehq.com/@triptych/web-component-test"}, {title: "XP Level Calc", url:"https://observablehq.com/@triptych/xp-level-calc"}, {title: "RPG Paint", url:"https://observablehq.com/@triptych/rpg-paint"}, {title: "RSS Reader", url: "https://observablehq.com/@triptych/rss-reader"}, {title: "Hello, maze generator", url:"https://observablehq.com/@triptych/hello-maze-generator"}, {title:"Hello Userbase", url:"https://observablehq.com/@triptych/hello-userbase"}, {title: "Rendering HTML from a Github gist", url:"https://observablehq.com/@triptych/rendering-html-from-a-github-gist"}, {title:"Embedding Observable Notebooks in Observable", url: "https://observablehq.com/@triptych/embedding-an-observable-notebook-in-observable"}, {title:"Random Recursive HTML", url:"https://observablehq.com/@triptych/random-recursive-html"}, {title: "Self Referential Notebook", url:"https://observablehq.com/@triptych/self-referential-notebook"}, {title: "Run Some Code on Button Click", url:"https://observablehq.com/@triptych/run-some-code-on-button-click"}, {title: "Business Card", url:"https://observablehq.com/@triptych/business-card"}, {title: "Idea Collector", url:"https://observablehq.com/@triptych/idea-collector"}, {title: "How to Center a DIV", url:"https://observablehq.com/@triptych/how-to-center-a-div"}, {title: "Island Adventure", url: "https://observablehq.com/@triptych/island-adventure"}, {title: "Simple Icons", url: "https://observablehq.com/@triptych/simple-icons"}, {title:"3d Pixel Art with three-elements", url:"https://next.observablehq.com/@triptych/3d-pixel-art-with-three-elements"}, {title: "Hello Dice Roller", url:"https://next.observablehq.com/@triptych/hello-dice-roller"}, {title: "Magic Sword", url:"https://next.observablehq.com/@triptych/magic-sword"}, {title: "Sliding Back And Forth", url: "https://next.observablehq.com/@triptych/sliding-back-and-forth"}, {title:" Tiny Tools Viewer", url:"https://next.observablehq.com/@triptych/tiny-tools-viewer"}, {title: "My Pinned Tweet", url:"https://next.observablehq.com/@triptych/my-pinned-tweet"} ]32:T47d,{ list.appendChild(img) list.addEventListener("mouseover", (e)=>{ list.querySelector(".img").classList.add("show") }) list.addEventListener("mouseout", (e)=>{ list.querySelector(".img").classList.remove("show"); Array.from(list.querySelectorAll(".selected")).forEach((cur,idx,arr)=>{ cur.classList.remove("selected") }) }) list.addEventListener("mousemove", (e)=>{ list.querySelector(".img").style.left = e.pageX - 20 +"px"; list.querySelector(".img").style.top = e.pageY - 100+"px"; let imgBox = list.querySelector(".img").getBoundingClientRect(); let notebooksArr = Array.from(list.querySelectorAll(".notebooks li")).map((el)=>{ return el.getBoundingClientRect() }) for(let i =0; i < notebooksArr.length; i++){ if(checkOverlap(imgBox, notebooksArr[i])){ list.querySelectorAll(".notebooks li")[i].classList.add("selected"); } else { list.querySelectorAll(".notebooks li")[i].classList.remove("selected"); } } }) list.addEventListener("click", (e)=>{ console.log("click happened") list.querySelector(".selected a").click() }) }33:[{"id":"c5ee478f50d4397df2dae13e49386d91f15cbf25228bb1642274ac3fbda7c69037a51384b5876dd13475c79b7cdb4086bbd3ca839668a3d8b7008fe814dacebd","href":"https://static.observableusercontent.com/files/c5ee478f50d4397df2dae13e49386d91f15cbf25228bb1642274ac3fbda7c69037a51384b5876dd13475c79b7cdb4086bbd3ca839668a3d8b7008fe814dacebd","name":"119765.gif","type":"image/gif","lastModified":1614900444536.996,"size":16564}] 2f:{"title":"31 Days of Observable","cells":[{"id":0,"value":"md`# 31 Days of Observable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"list = html`

${x.title}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"img = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"checkOverlap = (rect1,rect2) => {\n var overlap = !(rect1.right < rect2.left || \n rect1.left > rect2.right || \n rect1.bottom < rect2.top || \n rect1.top > rect2.bottom)\n return overlap;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}