2f:T242a,chart = { const width = 700, height = 700; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // Use Mercator projection var projection = d3 .geoMercator() .fitSize([width, height], zoomed_walk); var path = d3.geoPath().projection(projection); var path2 = d3.geoPath().projection(projection); var path3 = d3.geoPath().projection(projection); var path4 = d3.geoPath().projection(projection); var path5 = d3.geoPath().projection(projection); var g = svg.append("g").attr("id", "paths"); if(stops=='0'){ //then draw the first stop line segment -it's the same as the polyline code above this } g.selectAll("path") //d3 geopath //svg //.selectAll('path') .data(bldgs.features) //get data to define path .enter() //there are more data than elements, this selects them .append("path") //appends path to data .attr('class','outlines') .attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", "none") .style('stroke-opacity','.2') .style("stroke-width", '.5') .style("stroke", "rgb(0,0,0)") g.selectAll("path5") //d3 geopath //svg //.selectAll('path') .data(curbs.features) //get data to define path .enter() //there are more data than elements, this selects them .append("path") //appends path to data .attr('class','curbs') .attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", "none") .style('stroke-opacity','.5') .style("stroke-width", '.5') .style("stroke", "rgb(0,0,0)") g.selectAll("path3") //d3 geopath //svg //.selectAll('path') .data(zips.features) //get data to define path .enter() //there are more data than elements, this selects them .append("path") //appends path to data .attr('class','outlines') .attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", "white") .style('fill-opacity','.5') .style("stroke-width", '1.2') .style("stroke", "rgb(0,0,0)") g.selectAll("path") //d3 geopath .data(nycParks.features) //get data to define path .enter() //there are more data than elements, this selects them .append("path") //appends path to data .attr('class','outlines') .attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", "green") .style('fill-opacity','.25') .style("stroke-width", ".1") .style("stroke", "rgb(0,255,0)") var cir = svg.selectAll("circle") //d3 geopath .data(spots) //get data to define path .enter() //there are more data than elements, this selects them .append("circle") //appends path to data .attr('class','spots') .attr('cx',function(d) {return projection([d.long,d.lat])[0]}) .attr("cy",function(d) {return projection([d.long,d.lat])[1]}) .attr('r', spotSize) .attr('fill', 'black') .style('fill-opacity','1') .style("stroke-width", "1") .on('mouseover', spotText) .on('mouseleave', spotErase) function spotSize(d,i){ var r = 3 if(d.type=='bldg'){r=2} return r } function spotText(event,d){ d3.select(this).style("fill", 'cyan'); svg .append('text') .attr('class','spotText') .attr('x','370') .attr('y','385') .attr("font-family", "Helvetica") .attr('font-size','.75em') .attr('font-weight','bold') .attr('fill','rgb(0,0,0)') .attr('text-anchor','end') //.attr('background-color', 'rgba(255, 0, 0)') .text(d.name) svg .append('text') .attr('class','spotText') .attr('x','370') .attr('y','400') .attr("font-family", "Helvetica") .attr('font-size','.75em') .attr('fill','rgb(0,0,0)') .attr('text-anchor','end') //.attr('background-color', 'rgba(255, 0, 0)') .text(d.description) var wrap = svg.selectAll("text.spotText") .each(function(d, i) { wrap_text(d3.select(this), 100) }); } function spotErase(event,d){ d3.selectAll('circle.spots').style('fill','black') d3.selectAll('text.spotText').remove() } svg.append("circle") //d3 geopath .attr('class','home') .attr('cx',function(d) {return projection([-73.99431354,40.69009372])[0]}) .attr("cy",function(d) {return projection([-73.99431354,40.69009372])[1]}) .attr('r', '3') .attr('fill', 'cyan') .style('fill-opacity','1') .style("stroke-width", ".5") .style('stroke','black') .style('transform','translate(100 100)') .on('mouseover', homeText) .on('mouseleave', homeErase) function homeText(event,d){ d3.select(this).style("fill", 'black'); svg .append('text') .attr('class','homeText') .attr('x','370') .attr('y','385') .attr("font-family", "Helvetica") .attr('font-size','.75em') .attr('font-weight','bold') .attr('fill','rgb(0,0,0)') .attr('text-anchor','end') //.attr('background-color', 'rgba(255, 0, 0)') .text('home sweet home') var wrap = svg.selectAll("text.homeText") .each(function(d, i) { wrap_text(d3.select(this), 100) }); } function homeErase(event,d){ d3.selectAll('circle.home').style('fill','cyan') d3.selectAll('text.homeText').remove() } //display site name var t = svg.selectAll('text') //use word wrap function to limit line width var wrap = svg.selectAll("text.siteDescription") .each(function(d, i) { wrap_text(d3.select(this), 200) }); var wrap = svg.selectAll("text.poisd") .each(function(d, i) { wrap_text(d3.select(this), 160) }); function poiErase(event,d){ d3.selectAll('text.pois').remove() d3.selectAll('line.pois').remove() } g.selectAll("path2") //d3 geopath //svg //.selectAll('path') .data(subway_lines.features) //get data to define path .enter() //there are more data than elements, this selects them .append("path") //appends path to data .attr('class','outlines') .attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements .style('fill-opacity','0') .style("stroke-width", ".15") .style("stroke", "rgb(0,0,0)") g.selectAll("circle") //d3 geopath //svg //.selectAll('path') .data(subSts.features) //get data to define path .enter() //there are more data than elements, this selects them .append("circle") //appends path to data .attr('cx',function(d) {return path.centroid(d)[0]}) .attr("cy",function(d) {return path.centroid(d)[1]}) .attr('r',1.5) .attr('fill','black') .style('fill-opacity','.9') //var t = svg.selectAll('text') t.enter().append('text') .data(subSts.features) .enter() .append('text') .attr('class','subStops') .attr('x',function(d) {return path.centroid(d)[0]}) .attr('y',function(d) {return path.centroid(d)[1]-5}) .attr("font-family", "Helvetica") .attr('font-size','.55em') .attr('fill','rgb(0,0,0)') .attr('text-anchor','middle') .text(function(d){return d.properties.name}) g.selectAll("path4") //d3 geopath .data(single_walk.features) //get data to define path .enter() //there are more data than elements, this selects them .append("path") //appends path to data .attr('class','walks') .attr("d", path4) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", "none") .style('fill-opacity','0') .style("stroke-width", "1") .style("stroke-dasharray", "4 2") .style("stroke", "rgb(0,0,0)") .on('mouseover', walkText) .on('mouseleave', walkErase) function walkText(event,d){ d3.select(this).style("stroke-width", '3'); d3.select(this).style("stroke-dasharray", '4 0'); svg .append('text') .attr('class','walkText') .attr('x','370') .attr('y','385') .attr("font-family", "Helvetica") .attr('font-size','.75em') .attr('fill','rgb(0,0,0)') .attr('text-anchor','end') //.attr('background-color', 'rgba(255, 0, 0)') .text(d.properties.Text) var wrap = svg.selectAll("text.walkText") .each(function(d, i) { wrap_text(d3.select(this), 100) }); } function walkErase(event,d){ d3.selectAll('path.walks').style('stroke-width','1') d3.selectAll('path.walks').style('stroke-dasharray','4 2') d3.selectAll('text.walkText').remove() } var p = svg.selectAll("polyline") .data(dog_icon) //get data to define path .enter() //there are more data than elements, this selects them .append("polyline") //appends path to data .attr('points', function(d){return d}) .style("fill", "black") .style('stroke-opacity','0') .style("stroke-width", '0') .style("stroke", "rgb(0,0,0)") .attr('transform',iconLocation) //.attr('transform',"translate(-5)") function iconLocation(){ var xVal = projection([walkStops[stops].long,walkStops[stops].lat])[0] var yVal = projection([walkStops[stops].long,walkStops[stops].lat])[1] //console.log(xVal) return "translate("+(xVal-20)+" "+(yVal-10)+")" } return svg.node(); }30:[{"id":"3ee1028cbad40cd9b8aec632c38feec734a096a414f931c0af65a5be845410deb42c2da6feef6bdb2e225ddeb2b877e9235aeb89489e111d35f43ba4eb3f6798","href":"https://static.observableusercontent.com/files/3ee1028cbad40cd9b8aec632c38feec734a096a414f931c0af65a5be845410deb42c2da6feef6bdb2e225ddeb2b877e9235aeb89489e111d35f43ba4eb3f6798","name":"zoomed_walk.geojson","type":"application/geo+json","lastModified":1677683836265.386,"size":642},{"id":"08729713013052671b62b71eb3065b18eb97cd7b15e1f0991825212eec009c0c8eced78dcad64a2ddda5f9d22c94fd0a9f21b2d1448eb043e0223c7c4dbfa468","href":"https://static.observableusercontent.com/files/08729713013052671b62b71eb3065b18eb97cd7b15e1f0991825212eec009c0c8eced78dcad64a2ddda5f9d22c94fd0a9f21b2d1448eb043e0223c7c4dbfa468","name":"single_walk.geojson","type":"application/geo+json","lastModified":1677683836265.386,"size":1240},{"id":"8ca3dce1aa8597f35327512b0b98970b4f678fe5ab9052bcd6ca645731d0dbc721531d9b50ec2e52091487eab27a3e98805fc31d16490afa6aea8d64c81307a7","href":"https://static.observableusercontent.com/files/8ca3dce1aa8597f35327512b0b98970b4f678fe5ab9052bcd6ca645731d0dbc721531d9b50ec2e52091487eab27a3e98805fc31d16490afa6aea8d64c81307a7","name":"walks@1.geojson","type":"application/geo+json","lastModified":1677683836265.386,"size":7737},{"id":"a73345853414c33e85b3745abbcdee5244972666a37070b3fa02a846f5b2b975b951dad2eb2f740336390da7dc2d54bce3d0ccd8df154ae779218dac9ad7c5b6","href":"https://static.observableusercontent.com/files/a73345853414c33e85b3745abbcdee5244972666a37070b3fa02a846f5b2b975b951dad2eb2f740336390da7dc2d54bce3d0ccd8df154ae779218dac9ad7c5b6","name":"curbs.geojson","type":"application/geo+json","lastModified":1677683836265.386,"size":4358442},{"id":"91273385d8b1fb74bb202412a0a7165d33c8988d8e7130ddd18a7208af119d0bd8e7a1f8d7250fae3c8683ff0718cbcfe16fa9b4e9bfc827a4be344a1e6dbf82","href":"https://static.observableusercontent.com/files/91273385d8b1fb74bb202412a0a7165d33c8988d8e7130ddd18a7208af119d0bd8e7a1f8d7250fae3c8683ff0718cbcfe16fa9b4e9bfc827a4be344a1e6dbf82","name":"bldgs.geojson","type":"application/geo+json","lastModified":1677683836265.386,"size":5944996},{"id":"17407d813eb50a0ffd5bbf3f6b84bee7872ca4c3fc7f6b0dac669a35ddbd1b03ef248154e8dee3c073673d9302f80b9a06c42ee4e8ceafa3aa9083ee96cf9bda","href":"https://static.observableusercontent.com/files/17407d813eb50a0ffd5bbf3f6b84bee7872ca4c3fc7f6b0dac669a35ddbd1b03ef248154e8dee3c073673d9302f80b9a06c42ee4e8ceafa3aa9083ee96cf9bda","name":"boundaries.geojson","type":"application/geo+json","lastModified":1677683836265.386,"size":1399512},{"id":"b7b758d8b135b2527714773a802667d940de6f2f243e9c6e2f82527bdd619a9ebaf157a58261629c425e1ee8d80eaa40e5e247a1f3d4488f883332afe54abedc","href":"https://static.observableusercontent.com/files/b7b758d8b135b2527714773a802667d940de6f2f243e9c6e2f82527bdd619a9ebaf157a58261629c425e1ee8d80eaa40e5e247a1f3d4488f883332afe54abedc","name":"site_boundaries.geojson","type":"application/geo+json","lastModified":1677683836265.386,"size":653},{"id":"e8dc63f5d2e220f327b590b7578320e3994d54d8b3dc9b2c26bbc2edac1561e637d399e94a4a6dfc66b3ba3d4a55b00248b99b3297d89b05f49dc9982a902907","href":"https://static.observableusercontent.com/files/e8dc63f5d2e220f327b590b7578320e3994d54d8b3dc9b2c26bbc2edac1561e637d399e94a4a6dfc66b3ba3d4a55b00248b99b3297d89b05f49dc9982a902907","name":"subway_sts@1.geojson","type":"application/geo+json","lastModified":1677683836265.386,"size":133690},{"id":"9f499bca9e9222efb64df7f6dee1ad5f8a2e143b194b73b71d7a4e535fb1d0d0071478c6ae4213cbc431730cc26197c07106acf5ff93f65154e44a07c74135ac","href":"https://static.observableusercontent.com/files/9f499bca9e9222efb64df7f6dee1ad5f8a2e143b194b73b71d7a4e535fb1d0d0071478c6ae4213cbc431730cc26197c07106acf5ff93f65154e44a07c74135ac","name":"subway_lines@2.geojson","type":"application/geo+json","lastModified":1677683836265.386,"size":730835},{"id":"c264c2e669aad80ed8d8be0699804545ca874badec626b48f7b613549283abab44a8a9f6fbb3fbdc1c5f9bcb7ed35a34aa7f504044a19afefe38d88a171920b7","href":"https://static.observableusercontent.com/files/c264c2e669aad80ed8d8be0699804545ca874badec626b48f7b613549283abab44a8a9f6fbb3fbdc1c5f9bcb7ed35a34aa7f504044a19afefe38d88a171920b7","name":"parks_nyc_reduced@2.geojson","type":"application/geo+json","lastModified":1677683836265.386,"size":10380364},{"id":"abc2fd004d4b38590e13a5afd00246e414bca424792f540627822a729118304dadd32524cfa0aa2a8bbed14dfd2c8b1729fe307600e59756a3c99fd6c482b26d","href":"https://static.observableusercontent.com/files/abc2fd004d4b38590e13a5afd00246e414bca424792f540627822a729118304dadd32524cfa0aa2a8bbed14dfd2c8b1729fe307600e59756a3c99fd6c482b26d","name":"weekend_walk.geojson","type":"application/geo+json","lastModified":1677683836265.386,"size":1660},{"id":"cf7c93e704e531deff8d6d6af7279560ccd11a87405c5843d1c228662a778cad6796e4b39764f2f84c44b9fabd772e8b613570e28c7c36d1f10bf5cdec5880f0","href":"https://static.observableusercontent.com/files/cf7c93e704e531deff8d6d6af7279560ccd11a87405c5843d1c228662a778cad6796e4b39764f2f84c44b9fabd772e8b613570e28c7c36d1f10bf5cdec5880f0","name":"dog_icon.txt","type":"text/plain","lastModified":1677684073208.366,"size":11275}] 2d:{"title":"dog walking - Mariam Inclass March.1.23","cells":[{"id":762,"value":"# dog walking - Mariam Inclass March.1.23","pinned":false,"hidden":false,"mode":"md"},{"id":1022,"value":"//type = [food,bar,store,coffee]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1016,"value":"spotsLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vR3CZr6kGX_rJPp1kxD15JkuGcMvAgLpKfd_XyMay6aAhbEIxv14_Uy4i7ckgGqhyNUnAwCpuEQ3r3s/pub?output=csv'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1018,"value":"spots = d3.csv(spotsLink,d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1031,"value":"walks = FileAttachment(\"walks@1.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1042,"value":"curbs = FileAttachment(\"curbs.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":976,"value":"walks1 = FileAttachment(\"weekend_walk.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"zips = FileAttachment(\"boundaries.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":771,"value":"nycParks = FileAttachment(\"parks_nyc_reduced@2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":787,"value":"subway_lines = FileAttachment(\"subway_lines@2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":815,"value":"subSts = FileAttachment(\"subway_sts@1.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":831,"value":"bbox = FileAttachment(\"site_boundaries.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":840,"value":"box = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRlLW6JcSye2uCpq29RZVWNXSCgTKcrPtQZ7XCqGOJuwzf0ZVUB3rhz3x1L2TVgBdRlVo8IZHjylk_Y/pub?output=csv'","pinned":true,"hidden":false,"mode":"ojs"},{"id":842,"value":"studioSite = d3.csv(box,d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":863,"value":"poiLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSF_0FKncruiGvvFmjQ6VrqOb6yDx3k56TGC8DTURcoFKf9vXN0WmhQkJeHdzStfOSfKYmymcAeqrAm/pub?output=csv'","pinned":true,"hidden":false,"mode":"ojs"},{"id":866,"value":"pois = d3.csv(poiLink,d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1070,"value":"zoomed_walk = FileAttachment(\"zoomed_walk.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":913,"value":"bldgs = FileAttachment(\"bldgs.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1073,"value":"single_walk = FileAttachment(\"single_walk.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1088,"value":"walkStopsLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTfUGROIWRxsCwZ7jNRFFlzvHKj1I8iHef0vVf-nH4YcuNmuPT-spuDLfuypib2Kmm4-vIjlqKu0lfW/pub?output=csv'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1093,"value":"walkStops = d3.csv(walkStopsLink, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1080,"value":"dog_icon = FileAttachment(\"dog_icon.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":894,"value":"import { wrap_text, wrap_text_nchar } from \"@ben-tanen/svg-text-and-tspan-word-wrapping\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1099,"value":"viewof stops2 = Inputs.radio([\"0\", \"1\", \"2\", \"3\"], {value:'0'})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1107,"value":"dashboard =\nhtml`\n\n

\n\n\n

\n${chart}\n

\n\n

\n${viewof stops2}\n

\n\n

\n${viewof startTimerButton}\n

\n\n

\n${time}\n

\n\n

\n${pageDisplay}\n

\n\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1118,"value":"pageDisplay = {\n\n//this cell controls the content that goes into the dashboard depending on my 'stops' radio button\n //this is for styling the button like we did for the other div ones\n \n var currentPage\n \n if(stops == '0'){ //this is the initial step of the game\n currentPage = html`\n ${walkStops[stops].prompt}\n

\n ${viewof letsgo}\n

\n `\n }\n if(stops == '1'){\n currentPage = html`\n ${walkStops[stops].prompt}\n ${viewof walkType}\n `\n }\n\n if(stops == '2'){\n currentPage = html`\n ${walkStops[stops].prompt}\n ${viewof parkStop}\n `\n }\n\n if(stops == '3'){\n currentPage = html`\n ${walkStops[stops].prompt}\n ${viewof eyesOnly}\n `\n }\n\n return currentPage\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1133,"value":"## These Cells control the movement logic of the game","pinned":false,"hidden":false,"mode":"md"},{"id":1131,"value":"viewof letsgo = Inputs.button(\"Lets Go!\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1146,"value":"viewof walkType = Inputs.radio([\"shot pee\", \"nice walk\", \"thinking...\"], {})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1150,"value":"viewof parkStop = Inputs.radio([\"sounds great\", \"too much poop around :/\", \"thinking...\"], {})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1153,"value":"viewof eyesOnly = Inputs.select(responses, {})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1155,"value":"responses = [\"you know it\",\"anyone can watch this awesome dog\",\"I don't know what that means\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1166,"value":"mutable stops = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":1161,"value":"{\n\n //this cell looks for correct answers from input, and progresses to the next step when appropriate\n if(letsgo == 1){\n mutable stops = 1 //change to next stop on the map / we use mutable variable when we wanna change its value\n set(viewof letsgo,0)// reset button \n }\n\nif(walkType == \"nice walk\"){\n mutable stops = 2\n}\nif(parkStop == \"too much poop around :/\"){\n mutable stops = 3\n}\n\n if(eyesOnly == \"anyone can watch this awesome dog\"){\n mutable stops = 0\n}\n/*\n if(stops == '0'){\n set(viewof walkType,\"thinking...\")\n set(viewof parkStop,\"thinking...\")\n set(viewof eyesOnly,\"I don't know what that means\")\n \n }\n*/\n \n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1163,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1183,"value":"## These are the timer cells","pinned":true,"hidden":false,"mode":"md"},{"id":1186,"value":"viewof seconds = Inputs.range([0, 59], {value: 0, step:1, label: \"seconds\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1188,"value":"viewof minutes = Inputs.range([0, 59], {value: 0, step:2, label: \"minutes\", value:2}) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":1191,"value":"hours = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":1193,"value":"function* timer(i = 0) {\n yield i;\n while (true) {\n yield Promises.tick(1000).then(() => i++);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1195,"value":"currentTime = {\n if(startTimerButton>0){\n return timer();\n }else{mutable stops = 0}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1197,"value":"countdownTime = {\n return minutes*60 + seconds;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1212,"value":"//mutable timesup = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":1199,"value":"time = {\nlet result = countdownTime - currentTime;\n if (currentTime == undefined){result = 0} \nif ( result < 0 )\n result = \"Time Up!\";\n \nelse {\n const remainHours = \"\"+parseInt(result/3600);\n result = result - remainHours*3600;\n const remainMinutes = \"\"+parseInt(result/60);\n const remainSeconds = \"\"+parseInt(result%60);\n result = remainMinutes.padStart(2,\"0\") + \":\" + \n remainSeconds.padStart(2,\"0\") ;\n}\n\nreturn html`\n\n${result}\n`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1201,"value":"viewof startTimerButton = Inputs.button([\n [\"Start\", value => value + 1],\n [\"Reset\", value => 0]\n], {value: 0})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}