[{"data":1,"prerenderedAt":1264},["ShallowReactive",2],{"docs-navigation":3,"doc-\u002Fteaching\u002Fapps-dev\u002Factivities\u002Fdynamic-portfolio-website":186,"surround-\u002Fteaching\u002Fapps-dev\u002Factivities\u002Fdynamic-portfolio-website":1111,"notes-index":1116},[4,62,127,138,149,160,175],{"title":5,"path":6,"stem":7,"children":8},"Dev","\u002Fdev","1.dev",[9,12,26,36,46,52],{"title":10,"path":6,"stem":11},"Development","1.dev\u002Findex",{"title":13,"path":14,"stem":15,"children":16},"Laravel","\u002Fdev\u002Flaravel","1.dev\u002F1.laravel\u002Findex",[17,18,22],{"title":13,"path":14,"stem":15},{"title":19,"path":20,"stem":21},"Eloquent Relationships","\u002Fdev\u002Flaravel\u002Feloquent-relationships","1.dev\u002F1.laravel\u002F1.eloquent-relationships",{"title":23,"path":24,"stem":25},"Laravel Homestead","\u002Fdev\u002Flaravel\u002Flaravel-homestead","1.dev\u002F1.laravel\u002F2.laravel-homestead",{"title":27,"path":28,"stem":29,"children":30},"Bash","\u002Fdev\u002Fbash","1.dev\u002F13.bash\u002Findex",[31,32],{"title":27,"path":28,"stem":29},{"title":33,"path":34,"stem":35},"My Bash RC","\u002Fdev\u002Fbash\u002Fbash-rc","1.dev\u002F13.bash\u002F2.bash-rc",{"title":37,"path":38,"stem":39,"children":40},"Clean Code","\u002Fdev\u002Fclean-code","1.dev\u002F15.clean-code\u002Findex",[41,42],{"title":37,"path":38,"stem":39},{"title":43,"path":44,"stem":45},"Naming Things","\u002Fdev\u002Fclean-code\u002Fnaming-things","1.dev\u002F15.clean-code\u002F1.naming-things",{"title":47,"path":48,"stem":49,"children":50},"AI Prompting","\u002Fdev\u002Fai-prompting","1.dev\u002F17.ai-prompting\u002Findex",[51],{"title":47,"path":48,"stem":49},{"title":53,"path":54,"stem":55,"children":56},"Git","\u002Fdev\u002Fgit","1.dev\u002F9.git\u002Findex",[57,58],{"title":53,"path":54,"stem":55},{"title":59,"path":60,"stem":61},"Git Cheat Sheet","\u002Fdev\u002Fgit\u002Fgit-cheat-sheet","1.dev\u002F9.git\u002F1.git-cheat-sheet",{"title":63,"path":64,"stem":65,"children":66},"Teaching","\u002Fteaching","2.teaching",[67,69],{"title":63,"path":64,"stem":68},"2.teaching\u002Findex",{"title":70,"path":71,"stem":72,"children":73},"AppsDev","\u002Fteaching\u002Fapps-dev","2.teaching\u002F1.apps-dev\u002Findex",[74,75,93,107,117],{"title":70,"path":71,"stem":72},{"title":76,"path":77,"stem":78,"children":79},"Lesson Plans","\u002Fteaching\u002Fapps-dev\u002Flesson-plans","2.teaching\u002F1.apps-dev\u002F1.lesson-plans\u002Findex",[80,81,85,89],{"title":76,"path":77,"stem":78},{"title":82,"path":83,"stem":84},"Coding with AI","\u002Fteaching\u002Fapps-dev\u002Flesson-plans\u002Fcoding-with-ai","2.teaching\u002F1.apps-dev\u002F1.lesson-plans\u002F1.coding-with-ai",{"title":86,"path":87,"stem":88},"Coding with AI: Prompts & Reading JavaScript","\u002Fteaching\u002Fapps-dev\u002Flesson-plans\u002Fprompts-and-reading-js","2.teaching\u002F1.apps-dev\u002F1.lesson-plans\u002F2.prompts-and-reading-js",{"title":90,"path":91,"stem":92},"JavaScript for Beginners","\u002Fteaching\u002Fapps-dev\u002Flesson-plans\u002Fjavascript-for-beginners","2.teaching\u002F1.apps-dev\u002F1.lesson-plans\u002F3.javascript-for-beginners",{"title":94,"path":95,"stem":96,"children":97},"Activities","\u002Fteaching\u002Fapps-dev\u002Factivities","2.teaching\u002F1.apps-dev\u002F2.activities\u002Findex",[98,99,103],{"title":94,"path":95,"stem":96},{"title":100,"path":101,"stem":102},"Dynamic Portfolio Website","\u002Fteaching\u002Fapps-dev\u002Factivities\u002Fdynamic-portfolio-website","2.teaching\u002F1.apps-dev\u002F2.activities\u002F2.dynamic-portfolio-website",{"title":104,"path":105,"stem":106},"Mini Product Store","\u002Fteaching\u002Fapps-dev\u002Factivities\u002Fmini-product-store","2.teaching\u002F1.apps-dev\u002F2.activities\u002F3.mini-product-store",{"title":108,"path":109,"stem":110,"children":111},"Exercises","\u002Fteaching\u002Fapps-dev\u002Fexercises","2.teaching\u002F1.apps-dev\u002F4.exercises\u002Findex",[112,113],{"title":108,"path":109,"stem":110},{"title":114,"path":115,"stem":116},"Read & Predict","\u002Fteaching\u002Fapps-dev\u002Fexercises\u002Fread-and-predict","2.teaching\u002F1.apps-dev\u002F4.exercises\u002F1.read-and-predict",{"title":118,"path":119,"stem":120,"children":121},"AI Prompts","\u002Fteaching\u002Fapps-dev\u002Fai-prompts","2.teaching\u002F1.apps-dev\u002F7.ai-prompts\u002Findex",[122,123],{"title":118,"path":119,"stem":120},{"title":124,"path":125,"stem":126},"Prompt Flow","\u002Fteaching\u002Fapps-dev\u002Fai-prompts\u002Fbasic-prompting","2.teaching\u002F1.apps-dev\u002F7.ai-prompts\u002F1.basic-prompting",{"title":128,"path":129,"stem":130,"children":131},"Snippets","\u002Fsnippets","3.snippets",[132,134],{"title":128,"path":129,"stem":133},"3.snippets\u002Findex",{"title":135,"path":136,"stem":137},"Debounce and Throttle","\u002Fsnippets\u002Fdebounce-and-throttle","3.snippets\u002F1.debounce-and-throttle",{"title":139,"path":140,"stem":141,"children":142},"Cheat Sheets","\u002Fcheat-sheets","4.cheat-sheets",[143,145],{"title":139,"path":140,"stem":144},"4.cheat-sheets\u002Findex",{"title":146,"path":147,"stem":148},"Vim Cheat Sheet","\u002Fcheat-sheets\u002Fvim-cheat-sheet","4.cheat-sheets\u002F1.vim-cheat-sheet",{"title":150,"path":151,"stem":152,"children":153},"Templates","\u002Ftemplates","5.templates",[154,156],{"title":150,"path":151,"stem":155},"5.templates\u002Findex",{"title":157,"path":158,"stem":159},"Pull Request Template","\u002Ftemplates\u002Fpull-request-template","5.templates\u002F1.pull-request-template",{"title":161,"path":162,"stem":163,"children":164},"Meta","\u002Fmeta","6.meta",[165,167,171],{"title":161,"path":162,"stem":166},"6.meta\u002Findex",{"title":168,"path":169,"stem":170},"Authoring Guide","\u002Fmeta\u002Fauthoring-guide","6.meta\u002F1.authoring-guide",{"title":172,"path":173,"stem":174},"Markdown Showcase","\u002Fmeta\u002Fmarkdown-showcase","6.meta\u002F2.markdown-showcase",{"title":176,"path":177,"stem":178,"children":179},"Troubleshooting","\u002Ftroubleshooting","7.troubleshooting",[180,182],{"title":176,"path":177,"stem":181},"7.troubleshooting\u002Findex",{"title":183,"path":184,"stem":185},"Fixing CORS Errors","\u002Ftroubleshooting\u002Fcors-errors","7.troubleshooting\u002F1.cors-errors",{"id":187,"title":100,"body":188,"category":94,"createdAt":1092,"description":1093,"draft":1094,"extension":1095,"featured":1094,"keywords":1096,"links":1102,"meta":1103,"navigation":599,"path":101,"readingTime":442,"seo":1104,"stem":102,"tags":1105,"updatedAt":1092,"__hash__":1110},"docs\u002F2.teaching\u002F1.apps-dev\u002F2.activities\u002F2.dynamic-portfolio-website.md",{"type":189,"value":190,"toc":1077},"minimark",[191,200,205,208,227,231,254,258,261,285,288,292,378,382,385,458,461,553,556,737,740,805,822,826,829,908,912,915,929,932,936,939,960,966,970,1057,1073],[192,193,194,195,199],"p",{},"Build a personal portfolio website that generates its content using JavaScript.\nThe goal is to practice thinking in ",[196,197,198],"strong",{},"data"," instead of hardcoding HTML.",[201,202,204],"h2",{"id":203},"learning-objectives","Learning Objectives",[192,206,207],{},"By the end of this activity, students should be able to:",[209,210,211,215,218,221,224],"ul",{},[212,213,214],"li",{},"Store portfolio information in JavaScript objects and arrays.",[212,216,217],{},"Generate sections dynamically using loops.",[212,219,220],{},"Manipulate the DOM to display content.",[212,222,223],{},"Write reusable JavaScript instead of duplicated HTML.",[212,225,226],{},"Organize code into reusable functions.",[201,228,230],{"id":229},"the-big-idea","The Big Idea",[232,233,234,237,240],"note",{},[192,235,236],{},"Real applications don't hardcode repeated content.",[192,238,239],{},"Instead of writing multiple HTML elements by hand, store the information as data\nand let JavaScript generate the page automatically.",[192,241,242,243,245,246,249,250,253],{},"Think in ",[196,244,198],{},", ",[196,247,248],{},"loops",", and ",[196,251,252],{},"reusable functions",", not copy-paste.",[201,255,257],{"id":256},"requirements","Requirements",[192,259,260],{},"Your portfolio website must contain the following sections:",[209,262,263,266,269,272,279,282],{},[212,264,265],{},"Navigation Bar",[212,267,268],{},"Hero Section",[212,270,271],{},"About Me",[212,273,274,275,278],{},"Projects ",[196,276,277],{},"or"," Hobbies",[212,280,281],{},"Contact Me",[212,283,284],{},"Footer",[192,286,287],{},"Each section should be generated or populated using JavaScript where appropriate.",[201,289,291],{"id":290},"instructions","Instructions",[293,294,296,301,304,307,311,314,317,334,337,341,344,347,375],"steps",{"level":295},"3",[297,298,300],"h3",{"id":299},"create-your-portfolio","Create Your Portfolio",[192,302,303],{},"Build a responsive portfolio website using HTML, CSS, and JavaScript.",[192,305,306],{},"The design is entirely up to you.",[297,308,310],{"id":309},"store-your-data","Store Your Data",[192,312,313],{},"Instead of hardcoding repeated information into HTML, store it in JavaScript.",[192,315,316],{},"For example:",[209,318,319,322,325,328,331],{},[212,320,321],{},"Projects",[212,323,324],{},"Hobbies",[212,326,327],{},"Skills",[212,329,330],{},"Social Media Links",[212,332,333],{},"Contact Information",[192,335,336],{},"should come from arrays or objects.",[297,338,340],{"id":339},"render-with-javascript","Render with JavaScript",[192,342,343],{},"Use loops to create the HTML dynamically.",[192,345,346],{},"Use DOM manipulation such as:",[209,348,349,355,360,365,370],{},[212,350,351],{},[352,353,354],"code",{},"getElementById()",[212,356,357],{},[352,358,359],{},"querySelector()",[212,361,362],{},[352,363,364],{},"createElement()",[212,366,367],{},[352,368,369],{},"appendChild()",[212,371,372],{},[352,373,374],{},"innerHTML",[192,376,377],{},"instead of manually writing repeated HTML.",[201,379,381],{"id":380},"example","Example",[192,383,384],{},"Instead of writing:",[386,387,392],"pre",{"className":388,"code":389,"language":390,"meta":391,"style":391},"language-html shiki shiki-themes material-theme-lighter vitesse-light vitesse-dark","\u003Cdiv>Project 1\u003C\u002Fdiv>\n\u003Cdiv>Project 2\u003C\u002Fdiv>\n\u003Cdiv>Project 3\u003C\u002Fdiv>\n","html","",[352,393,394,422,440],{"__ignoreMap":391},[395,396,399,403,407,410,414,417,419],"span",{"class":397,"line":398},"line",1,[395,400,402],{"class":401},"soVBu","\u003C",[395,404,406],{"class":405},"sJFLg","div",[395,408,409],{"class":401},">",[395,411,413],{"class":412},"sftqT","Project 1",[395,415,416],{"class":401},"\u003C\u002F",[395,418,406],{"class":405},[395,420,421],{"class":401},">\n",[395,423,425,427,429,431,434,436,438],{"class":397,"line":424},2,[395,426,402],{"class":401},[395,428,406],{"class":405},[395,430,409],{"class":401},[395,432,433],{"class":412},"Project 2",[395,435,416],{"class":401},[395,437,406],{"class":405},[395,439,421],{"class":401},[395,441,443,445,447,449,452,454,456],{"class":397,"line":442},3,[395,444,402],{"class":401},[395,446,406],{"class":405},[395,448,409],{"class":401},[395,450,451],{"class":412},"Project 3",[395,453,416],{"class":401},[395,455,406],{"class":405},[395,457,421],{"class":401},[192,459,460],{},"Store the data:",[386,462,466],{"className":463,"code":464,"language":465,"meta":391,"style":391},"language-javascript shiki shiki-themes material-theme-lighter vitesse-light vitesse-dark","const projects = [\n    { name: \"Project 1\" },\n    { name: \"Project 2\" },\n    { name: \"Project 3\" }\n];\n","javascript",[352,467,468,485,510,526,544],{"__ignoreMap":391},[395,469,470,474,478,481],{"class":397,"line":398},[395,471,473],{"class":472},"s5Kfy","const",[395,475,477],{"class":476},"sSC40"," projects",[395,479,480],{"class":401}," =",[395,482,484],{"class":483},"snCua"," [\n",[395,486,487,490,494,497,501,504,507],{"class":397,"line":424},[395,488,489],{"class":401},"    {",[395,491,493],{"class":492},"suXOh"," name",[395,495,496],{"class":401},":",[395,498,500],{"class":499},"sbYkP"," \"",[395,502,413],{"class":503},"sTbE_",[395,505,506],{"class":499},"\"",[395,508,509],{"class":401}," },\n",[395,511,512,514,516,518,520,522,524],{"class":397,"line":442},[395,513,489],{"class":401},[395,515,493],{"class":492},[395,517,496],{"class":401},[395,519,500],{"class":499},[395,521,433],{"class":503},[395,523,506],{"class":499},[395,525,509],{"class":401},[395,527,529,531,533,535,537,539,541],{"class":397,"line":528},4,[395,530,489],{"class":401},[395,532,493],{"class":492},[395,534,496],{"class":401},[395,536,500],{"class":499},[395,538,451],{"class":503},[395,540,506],{"class":499},[395,542,543],{"class":401}," }\n",[395,545,547,550],{"class":397,"line":546},5,[395,548,549],{"class":483},"]",[395,551,552],{"class":401},";\n",[192,554,555],{},"Then generate the HTML:",[386,557,559],{"className":463,"code":558,"language":465,"meta":391,"style":391},"const projectsContainer = document.getElementById(\"projects-container\");\n\nprojects.forEach(project => {\n    const projectCard = document.createElement(\"div\");\n\n    projectCard.className = \"project-card\";\n    projectCard.textContent = project.name;\n\n    projectsContainer.appendChild(projectCard);\n});\n",[352,560,561,595,601,624,654,658,680,702,707,727],{"__ignoreMap":391},[395,562,563,565,568,570,573,576,580,583,585,588,590,593],{"class":397,"line":398},[395,564,473],{"class":472},[395,566,567],{"class":476}," projectsContainer",[395,569,480],{"class":401},[395,571,572],{"class":476}," document",[395,574,575],{"class":401},".",[395,577,579],{"class":578},"sljsM","getElementById",[395,581,582],{"class":483},"(",[395,584,506],{"class":499},[395,586,587],{"class":503},"projects-container",[395,589,506],{"class":499},[395,591,592],{"class":483},")",[395,594,552],{"class":401},[395,596,597],{"class":397,"line":424},[395,598,600],{"emptyLinePlaceholder":599},true,"\n",[395,602,603,606,608,611,613,617,621],{"class":397,"line":442},[395,604,605],{"class":476},"projects",[395,607,575],{"class":401},[395,609,610],{"class":578},"forEach",[395,612,582],{"class":483},[395,614,616],{"class":615},"sqOPj","project",[395,618,620],{"class":619},"sIOqK"," =>",[395,622,623],{"class":401}," {\n",[395,625,626,629,632,634,636,638,641,644,646,648,650,652],{"class":397,"line":528},[395,627,628],{"class":472},"    const",[395,630,631],{"class":476}," projectCard",[395,633,480],{"class":401},[395,635,572],{"class":476},[395,637,575],{"class":401},[395,639,640],{"class":578},"createElement",[395,642,582],{"class":643},"sLdnO",[395,645,506],{"class":499},[395,647,406],{"class":503},[395,649,506],{"class":499},[395,651,592],{"class":643},[395,653,552],{"class":401},[395,655,656],{"class":397,"line":546},[395,657,600],{"emptyLinePlaceholder":599},[395,659,661,664,666,669,671,673,676,678],{"class":397,"line":660},6,[395,662,663],{"class":476},"    projectCard",[395,665,575],{"class":401},[395,667,668],{"class":476},"className",[395,670,480],{"class":401},[395,672,500],{"class":499},[395,674,675],{"class":503},"project-card",[395,677,506],{"class":499},[395,679,552],{"class":401},[395,681,683,685,687,690,692,695,697,700],{"class":397,"line":682},7,[395,684,663],{"class":476},[395,686,575],{"class":401},[395,688,689],{"class":476},"textContent",[395,691,480],{"class":401},[395,693,694],{"class":476}," project",[395,696,575],{"class":401},[395,698,699],{"class":476},"name",[395,701,552],{"class":401},[395,703,705],{"class":397,"line":704},8,[395,706,600],{"emptyLinePlaceholder":599},[395,708,710,713,715,718,720,723,725],{"class":397,"line":709},9,[395,711,712],{"class":476},"    projectsContainer",[395,714,575],{"class":401},[395,716,717],{"class":578},"appendChild",[395,719,582],{"class":643},[395,721,722],{"class":476},"projectCard",[395,724,592],{"class":643},[395,726,552],{"class":401},[395,728,730,733,735],{"class":397,"line":729},10,[395,731,732],{"class":401},"}",[395,734,592],{"class":483},[395,736,552],{"class":401},[192,738,739],{},"Your HTML only needs a container:",[386,741,743],{"className":388,"code":742,"language":390,"meta":391,"style":391},"\u003Csection>\n    \u003Ch2>Projects\u003C\u002Fh2>\n    \u003Cdiv id=\"projects-container\">\u003C\u002Fdiv>\n\u003C\u002Fsection>\n",[352,744,745,754,771,797],{"__ignoreMap":391},[395,746,747,749,752],{"class":397,"line":398},[395,748,402],{"class":401},[395,750,751],{"class":405},"section",[395,753,421],{"class":401},[395,755,756,759,761,763,765,767,769],{"class":397,"line":424},[395,757,758],{"class":401},"    \u003C",[395,760,201],{"class":405},[395,762,409],{"class":401},[395,764,321],{"class":412},[395,766,416],{"class":401},[395,768,201],{"class":405},[395,770,421],{"class":401},[395,772,773,775,777,781,784,786,788,790,793,795],{"class":397,"line":442},[395,774,758],{"class":401},[395,776,406],{"class":405},[395,778,780],{"class":779},"s5q8q"," id",[395,782,783],{"class":401},"=",[395,785,506],{"class":499},[395,787,587],{"class":503},[395,789,506],{"class":499},[395,791,792],{"class":401},">\u003C\u002F",[395,794,406],{"class":405},[395,796,421],{"class":401},[395,798,799,801,803],{"class":397,"line":528},[395,800,416],{"class":401},[395,802,751],{"class":405},[395,804,421],{"class":401},[806,807,808,811,816],"tip",{},[192,809,810],{},"If you find yourself copying and pasting similar HTML multiple times, ask\nyourself:",[192,812,813],{},[196,814,815],{},"\"Can I store this as data and generate it with JavaScript?\"",[192,817,818,819,575],{},"The answer is almost always ",[196,820,821],{},"yes",[201,823,825],{"id":824},"requirements-checklist","Requirements Checklist",[192,827,828],{},"Before submitting, make sure your project includes:",[209,830,833,842,848,854,860,866,872,878,890,896,902],{"className":831},[832],"contains-task-list",[212,834,837,841],{"className":835},[836],"task-list-item",[838,839],"input",{"disabled":599,"type":840},"checkbox"," Navigation Bar",[212,843,845,847],{"className":844},[836],[838,846],{"disabled":599,"type":840}," Hero Section",[212,849,851,853],{"className":850},[836],[838,852],{"disabled":599,"type":840}," About Me Section",[212,855,857,859],{"className":856},[836],[838,858],{"disabled":599,"type":840}," Projects or Hobbies Section",[212,861,863,865],{"className":862},[836],[838,864],{"disabled":599,"type":840}," Contact Me Section",[212,867,869,871],{"className":868},[836],[838,870],{"disabled":599,"type":840}," Footer",[212,873,875,877],{"className":874},[836],[838,876],{"disabled":599,"type":840}," At least one array of objects",[212,879,881,883,884,887,888,592],{"className":880},[836],[838,882],{"disabled":599,"type":840}," At least one loop (",[352,885,886],{},"for"," or ",[352,889,610],{},[212,891,893,895],{"className":892},[836],[838,894],{"disabled":599,"type":840}," DOM manipulation",[212,897,899,901],{"className":898},[836],[838,900],{"disabled":599,"type":840}," At least one reusable function",[212,903,905,907],{"className":904},[836],[838,906],{"disabled":599,"type":840}," No repeated hardcoded project or hobby HTML",[201,909,911],{"id":910},"expected-output","Expected Output",[192,913,914],{},"Your finished portfolio should:",[209,916,917,920,923,926],{},[212,918,919],{},"Display your personal information.",[212,921,922],{},"Show projects or hobbies generated from JavaScript data.",[212,924,925],{},"Look organized and readable.",[212,927,928],{},"Demonstrate the use of loops instead of duplicated HTML.",[192,930,931],{},"The appearance is flexible, but the JavaScript logic is the focus of this\nactivity.",[201,933,935],{"id":934},"what-to-submit","What to Submit",[192,937,938],{},"Submit the following:",[940,941,942,951],"ol",{},[212,943,944,887,947,950],{},[196,945,946],{},"GitHub Repository Link",[196,948,949],{},"Google Drive Link"," containing your source code.",[212,952,953,887,956,959],{},[196,954,955],{},"Screenshot",[196,957,958],{},"Google Docs Link"," showing the AI prompts you used while building the project.",[961,962,963],"warning",{},[192,964,965],{},"You may use AI tools such as ChatGPT to assist you, but you must understand the\ncode you submit. During checking, you may be asked to explain how your loops,\nfunctions, or DOM manipulation work.",[201,967,969],{"id":968},"grading-rubric","Grading Rubric",[971,972,973,987],"table",{},[974,975,976],"thead",{},[977,978,979,983],"tr",{},[980,981,982],"th",{},"Category",[980,984,986],{"align":985},"right","Points",[988,989,990,999,1007,1015,1022,1030,1037,1045],"tbody",{},[977,991,992,996],{},[993,994,995],"td",{},"JavaScript Logic",[993,997,998],{"align":985},"25",[977,1000,1001,1004],{},[993,1002,1003],{},"Proper Use of Arrays & Objects",[993,1005,1006],{"align":985},"20",[977,1008,1009,1012],{},[993,1010,1011],{},"Loop Usage",[993,1013,1014],{"align":985},"15",[977,1016,1017,1020],{},[993,1018,1019],{},"DOM Manipulation",[993,1021,1014],{"align":985},[977,1023,1024,1027],{},[993,1025,1026],{},"Code Organization",[993,1028,1029],{"align":985},"10",[977,1031,1032,1035],{},[993,1033,1034],{},"Portfolio Completeness",[993,1036,1029],{"align":985},[977,1038,1039,1042],{},[993,1040,1041],{},"Submission Requirements",[993,1043,1044],{"align":985},"5",[977,1046,1047,1052],{},[993,1048,1049],{},[196,1050,1051],{},"Total",[993,1053,1054],{"align":985},[196,1055,1056],{},"100",[232,1058,1059,1062,1067],{},[192,1060,1061],{},"This activity is designed to reinforce one of the most important programming\nhabits:",[192,1063,1064],{},[196,1065,1066],{},"Don't repeat yourself (DRY).",[192,1068,1069,1070,1072],{},"When information repeats, store it as ",[196,1071,198],{}," and let JavaScript build the\ninterface for you.",[1074,1075,1076],"style",{},"html pre.shiki code .soVBu, html code.shiki .soVBu{--shiki-light:#39ADB5;--shiki-default:#999999;--shiki-dark:#666666}html pre.shiki code .sJFLg, html code.shiki .sJFLg{--shiki-light:#E53935;--shiki-default:#1E754F;--shiki-dark:#4D9375}html pre.shiki code .sftqT, html code.shiki .sftqT{--shiki-light:#90A4AE;--shiki-default:#393A34;--shiki-dark:#DBD7CAEE}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s5Kfy, html code.shiki .s5Kfy{--shiki-light:#9C3EDA;--shiki-default:#AB5959;--shiki-dark:#CB7676}html pre.shiki code .sSC40, html code.shiki .sSC40{--shiki-light:#90A4AE;--shiki-default:#B07D48;--shiki-dark:#BD976A}html pre.shiki code .snCua, html code.shiki .snCua{--shiki-light:#90A4AE;--shiki-default:#999999;--shiki-dark:#666666}html pre.shiki code .suXOh, html code.shiki .suXOh{--shiki-light:#E53935;--shiki-default:#998418;--shiki-dark:#B8A965}html pre.shiki code .sbYkP, html code.shiki .sbYkP{--shiki-light:#39ADB5;--shiki-default:#B5695977;--shiki-dark:#C98A7D77}html pre.shiki code .sTbE_, html code.shiki .sTbE_{--shiki-light:#91B859;--shiki-default:#B56959;--shiki-dark:#C98A7D}html pre.shiki code .sljsM, html code.shiki .sljsM{--shiki-light:#6182B8;--shiki-default:#59873A;--shiki-dark:#80A665}html pre.shiki code .sqOPj, html code.shiki .sqOPj{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#B07D48;--shiki-default-font-style:inherit;--shiki-dark:#BD976A;--shiki-dark-font-style:inherit}html pre.shiki code .sIOqK, html code.shiki .sIOqK{--shiki-light:#9C3EDA;--shiki-default:#999999;--shiki-dark:#666666}html pre.shiki code .sLdnO, html code.shiki .sLdnO{--shiki-light:#E53935;--shiki-default:#999999;--shiki-dark:#666666}html pre.shiki code .s5q8q, html code.shiki .s5q8q{--shiki-light:#9C3EDA;--shiki-default:#B07D48;--shiki-dark:#BD976A}",{"title":391,"searchDepth":442,"depth":442,"links":1078},[1079,1080,1081,1082,1087,1088,1089,1090,1091],{"id":203,"depth":424,"text":204},{"id":229,"depth":424,"text":230},{"id":256,"depth":424,"text":257},{"id":290,"depth":424,"text":291,"children":1083},[1084,1085,1086],{"id":299,"depth":442,"text":300},{"id":309,"depth":442,"text":310},{"id":339,"depth":442,"text":340},{"id":380,"depth":424,"text":381},{"id":824,"depth":424,"text":825},{"id":910,"depth":424,"text":911},{"id":934,"depth":424,"text":935},{"id":968,"depth":424,"text":969},"2026-07-17","Build a personal portfolio website using JavaScript arrays, loops, and DOM manipulation instead of hardcoded HTML.",false,"md",[1097,1098,1099,1100,1101],"javascript portfolio","for loop","foreach","dom manipulation","portfolio activity",[],{},{"title":100,"description":1093},[1106,1107,465,1108,1109,248],"teaching","activity","portfolio","dom","C7wdoKnLwvny0Et6ZbWOaTP-po03-A5yP_w1hKbrQ5w",[1112,1114],{"title":94,"path":95,"stem":96,"description":1113,"children":-1},"In-class activities that get students doing, not just listening.",{"title":104,"path":105,"stem":106,"description":1115,"children":-1},"A JavaScript activity where students build a simple product store using arrays, loops, functions, DOM manipulation, and event listeners.",[1117,1124,1130,1133,1139,1142,1149,1152,1155,1162,1165,1168,1175,1178,1183,1186,1188,1191,1193,1199,1202,1206,1209,1212,1214,1220,1223,1228,1231,1237,1240,1247,1252,1255,1261],{"path":20,"title":19,"description":1118,"tags":1119,"category":13,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":398,"draft":1094},"The core Eloquent relationship types with examples and the N+1 trap to avoid.",[1120,1121,1122,1123],"laravel","eloquent","database","orm",{"path":24,"title":23,"description":1125,"tags":1126,"category":13,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":398,"draft":1094},"My quick reference for setting up and using Laravel Homestead during development.",[1120,1127,1128,1129],"homestead","vagrant","virtualbox",{"path":14,"title":13,"description":1131,"tags":1132,"category":13,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":398,"draft":1094},"The PHP framework for web artisans — Eloquent, routing, queues and more.",[],{"path":34,"title":33,"description":1134,"tags":1135,"category":27,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":424,"draft":1094},"Personal Bash aliases and helper functions that streamline my Laravel and Homestead development workflow.",[1136,1137,1138,1127,1120],"bash","bashrc","git bash",{"path":28,"title":27,"description":1140,"tags":1141,"category":27,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":398,"draft":1094},"Shell scripting and a faster life on the command line.",[],{"path":44,"title":43,"description":1143,"tags":1144,"category":37,"featured":599,"updatedAt":1092,"createdAt":1092,"readingTime":398,"draft":1094},"Practical rules for naming variables, functions and types so code reads like prose.",[1145,1146,1147,1148],"clean-code","naming","readability","craft",{"path":38,"title":37,"description":1150,"tags":1151,"category":37,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":398,"draft":1094},"Writing code that other people (and future you) can read.",[],{"path":48,"title":47,"description":1153,"tags":1154,"category":47,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":398,"draft":1094},"Getting reliable, useful results out of language models.",[],{"path":60,"title":59,"description":1156,"tags":1157,"category":53,"featured":599,"updatedAt":1092,"createdAt":1092,"readingTime":424,"draft":1094},"The Git commands I actually use day to day, plus how to undo things safely.",[1158,1159,1160,1161],"git","cli","version-control","cheat-sheet",{"path":54,"title":53,"description":1163,"tags":1164,"category":53,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":398,"draft":1094},"Version control — everyday commands and getting out of trouble.",[],{"path":6,"title":10,"description":1166,"tags":1167,"category":10,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":398,"draft":1094},"Languages, frameworks and the craft of building software.",[],{"path":83,"title":82,"description":1169,"tags":1170,"category":63,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":528,"draft":1094},"An introduction to AI-assisted software development, modern development workflows, and the mindset needed to use AI responsibly throughout the course.",[1171,1172,1173,1174],"ai","software development","prompt engineering","beginners",{"path":87,"title":86,"description":1176,"tags":1177,"category":63,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":528,"draft":1094},"Learn how to write effective AI prompts and read JavaScript code confidently. This lesson teaches students how to direct AI instead of blindly copying its output.",[1171,465,1173,1174],{"path":91,"title":90,"description":1179,"tags":1180,"category":63,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":442,"draft":1094},"Introduction to the fundamentals of JavaScript, from variables and functions to loops, DOM manipulation, and events. This lesson prepares students for the Mini Product Store activity.",[465,1174,1181,1182],"programming","web development",{"path":77,"title":76,"description":1184,"tags":1185,"category":76,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":398,"draft":1094},"Session-by-session plans with objectives, timing and materials.",[],{"path":101,"title":100,"description":1093,"tags":1187,"category":94,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":442,"draft":1094},[1106,1107,465,1108,1109,248],{"path":105,"title":104,"description":1115,"tags":1189,"category":94,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":442,"draft":1094},[1106,1107,465,1109,1190,248],"arrays",{"path":95,"title":94,"description":1113,"tags":1192,"category":94,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":398,"draft":1094},[],{"path":115,"title":114,"description":1194,"tags":1195,"category":94,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":424,"draft":1094},"Practice reading JavaScript code, predicting its output, and verifying your understanding before running the program.",[1106,1107,465,1196,1197,1198],"functions","if-statement","debugging",{"path":109,"title":108,"description":1200,"tags":1201,"category":108,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":398,"draft":1094},"Practice problems that build skill through repetition.",[],{"path":125,"title":124,"description":1203,"tags":1204,"category":118,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":528,"draft":1094},"A structured workflow for working with AI that emphasizes planning, review, and understanding before implementation.",[1171,1173,1205],"workflow",{"path":119,"title":118,"description":1207,"tags":1208,"category":118,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":398,"draft":1094},"Prompt templates for teaching with and about AI.",[],{"path":71,"title":70,"description":1210,"tags":1211,"category":63,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":398,"draft":1094},"Lesson plans, activities, rubrics and student references.",[],{"path":64,"title":63,"description":1210,"tags":1213,"category":63,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":398,"draft":1094},[],{"path":136,"title":135,"description":1215,"tags":1216,"category":128,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":398,"draft":1094},"Two tiny functions to control how often a handler runs — with the difference explained.",[465,1217,1218,1219],"performance","snippets","events",{"path":129,"title":128,"description":1221,"tags":1222,"category":128,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":398,"draft":1094},"Small, copy-ready fragments you reach for again and again.",[],{"path":147,"title":146,"description":1224,"tags":1225,"category":139,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":398,"draft":1094},"The essential Vim motions and commands to get productive and get out.",[1226,1227,1161,1159],"vim","editor",{"path":140,"title":139,"description":1229,"tags":1230,"category":139,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":398,"draft":1094},"Dense, scannable references for commands and syntax.",[],{"path":158,"title":157,"description":1232,"tags":1233,"category":150,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":398,"draft":1094},"A reusable PR description template that makes reviews faster and kinder.",[1158,1234,1235,1236],"github","template","collaboration",{"path":151,"title":150,"description":1238,"tags":1239,"category":150,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":398,"draft":1094},"Reusable starting points for files, configs and docs.",[],{"path":169,"title":168,"description":1241,"tags":1242,"category":161,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":424,"draft":1094},"The frontmatter and markdown conventions every note in this knowledge base follows.",[1243,1244,1245,1246],"meta","conventions","markdown","authoring",{"path":173,"title":172,"description":1248,"tags":1249,"category":161,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":424,"draft":1094},"Every formatting feature this knowledge base supports, on one page — a living reference and rendering test.",[1245,1250,1251],"mdc","reference",{"path":162,"title":161,"description":1253,"tags":1254,"category":161,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":398,"draft":1094},"How this knowledge base itself is built and maintained.",[],{"path":184,"title":183,"description":1256,"tags":1257,"category":176,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":398,"draft":1094},"What a CORS error actually means and how to fix it — on the server, where it belongs.",[1258,1259,1260,1198],"cors","http","apis",{"path":177,"title":176,"description":1262,"tags":1263,"category":176,"featured":1094,"updatedAt":1092,"createdAt":1092,"readingTime":398,"draft":1094},"Symptoms, causes and fixes for problems worth remembering.",[],1784276794974]