netcracker/ai-for-dummies
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add model routing and hands-on lab

Browse Source
This commit is contained in:
Marcos Paulo
2026-09-02 14:35:27 +00:00
parent ada9b3aa19
commit 9f879ed276
13 changed files with 542 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hands-on/starter/README.md
+13
View File
@@ -0,0 +1,13 @@
# Tiny Tasks hands-on starter
A dependency-free HTML/CSS/JavaScript exercise used by the AI For Dummies
presentation. The task list renders; status filtering is intentionally absent.
Run from the repository root:
```bash
python3 -m http.server 4173
```
Open <http://localhost:4173/hands-on/starter/> and paste either prompt from the
presentation into a fresh coding-agent session rooted at this repository.
hands-on/starter/app.js
+15
View File
@@ -0,0 +1,15 @@
const tasks = [
{ title: 'Review pull request', owner: 'Maya', status: 'open' },
{ title: 'Write release notes', owner: 'Theo', status: 'done' },
{ title: 'Check mobile layout', owner: 'Lina', status: 'open' }
];
const list = document.querySelector('#task-list');
const count = document.querySelector('#task-count');
function renderTasks() {
list.innerHTML = tasks.map((task) => `<article class="task" data-status="${task.status}"><div><h3>${task.title}</h3><p>Owner: ${task.owner}</p></div><span class="task-meta">${task.status}</span></article>`).join('');
count.textContent = `${tasks.length} tasks`;
}
renderTasks();
hands-on/starter/index.html
+22
View File
@@ -0,0 +1,22 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tiny Tasks — Hands-on Starter</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<header>
<div><span>HANDS-ON / STARTER</span><h1>Tiny Tasks</h1></div>
<p>Three tasks. One missing filter.</p>
</header>
<section aria-labelledby="task-heading">
<div class="section-head"><h2 id="task-heading">Today</h2><span id="task-count"></span></div>
<div id="task-list" class="task-list"></div>
</section>
</main>
<script src="app.js" defer></script>
</body>
</html>
hands-on/starter/styles.css
+1
View File
@@ -0,0 +1 @@
:root{--paper:#f4f3ef;--ink:#173044;--muted:#687d8c;--blue:#5683a1;--gold:#efc86d;--line:#d5dde1}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--paper);color:var(--ink);font-family:Arial,sans-serif}main{width:min(880px,calc(100% - 40px));margin:0 auto;padding:70px 0}header,.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end}header{padding-bottom:50px;border-bottom:1px solid var(--line)}header span,.task-meta{font:10px monospace;letter-spacing:.08em}h1{margin:12px 0 0;font-size:clamp(48px,10vw,100px);letter-spacing:-.08em}header p{max-width:220px;color:var(--muted);line-height:1.5}section{padding-top:45px}h2{font-size:24px}.section-head>span{color:var(--blue);font:11px monospace}.task-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}.task{display:grid;grid-template-columns:1fr auto;gap:20px;padding:22px;background:var(--paper)}.task h3{margin:0 0 8px;font-size:17px}.task p{margin:0;color:var(--muted);font-size:13px}.task-meta{align-self:center;padding:7px 9px;color:var(--ink);background:var(--gold)}.task[data-status="done"] .task-meta{color:var(--paper);background:var(--blue)}@media(max-width:560px){header{display:block}header p{margin-top:24px}.task{grid-template-columns:1fr}.task-meta{justify-self:start}}