1
Scroll a list
The schedule is a stack of cards, like a feed. Each card is one session instead of one video or post.
Start Here
If you can scroll Instagram or YouTube, you already get part of this site
This page can do two jobs. If you are at the conference just exploring, it can explain what you are looking at in plain language. If you want to open the file later and poke at it, it can also guide you through safe beginner edits.
1 file
The whole app lives in a single HTML file — styles, behavior, and data included
3 tabs
Schedule, Speakers, and Notes — like sections of any app you already use
4 jobs
Store info, draw the page, react to taps, and remember notes — that's the whole engine
0 setup
No accounts, no installs, works offline at the venue once loaded
How are you using this page?
Most conference visitors will want the explainer path. Switch to tinkering only if you want the guide to talk more like a build-along and point you toward safe edits.
The default is the conference-friendly explainer view. Tinkering mode unlocks edit ideas and the coding-depth switch below.
How much coding language should this use?
Since you chose the tinkering path, you can decide how much coding vocabulary you want. The default still keeps things plain and beginner-friendly.
This second switch only changes the amount of technical language. It does not change the overall structure of the guide.
Familiar First
This site behaves like other apps you already know
When you open Instagram, YouTube, or TikTok, you already know what to do: scroll, look for something interesting, tap it, and open more detail. This conference site uses the same habits. It just swaps videos and posts for sessions, speakers, and notes.
2
Tap for more
Tapping a session opens extra details, the same way apps often open more information when you press into something.
3
Switch views
The tabs at the top work like jumping between sections of an app: schedule, people, and your own notes.
4
Keep your place
When you write a note, the browser remembers it on that same device so it is still there after a refresh.
How To Explore
Look, guess, change one thing, then check again
You do not need to understand every line all at once. A better approach is to explore the page the same way you would explore a new app: notice a pattern, make a guess, try a small change, and see what happened.
1
Notice a clue
Pick something simple first: a tab name, a button label, a color, or a heading you can already see on the page.
2
Search for it
Use find-in-page to look for the same word in the file so you can see where that part of the page comes from.
If you already know a little coding, good search words here include renderSchedule, activateTab, and saveNote.
3
Make one guess
Guess why that part of the page exists or what job it is doing for the attendee.
Edit one small thing at a time so you can tell exactly which change caused the result you see.
4
Check yourself
Open the live app again and see whether you can spot the same pattern somewhere else on the page.
Reload the page, notice what changed, and try to explain it back in your own words before moving on.
Tip: even without editing, noticing repeated patterns and guessing why they were chosen is already real builder thinking.
Tip: the best beginner edits are usually visible ones like text, color, spacing, and button labels because the cause and effect are easy to spot.
While You're Browsing
What to notice if you are not editing anything
Even without changing the code, you can still read the app like a builder. The trick is to notice the repeated patterns and ask what job each part is doing.
1
The feed feeling
The schedule works like a feed. It repeats one card pattern over and over, which makes the page easier to scan quickly.
2
The remote at the top
The tab bar acts like a remote control. It changes your view without sending you to a totally different website.
3
The browser's memory shelf
Your notes feel personal because the browser keeps them on this same device, a bit like a draft that stays in your own notebook.
4
The conference shortcut layer
Buttons, chips, and jump links shorten the path to what you need, which matters when people are standing in hallways between sessions.
Good conference question: if you had to explain one part of the app to a friend in ten seconds, which part feels easiest to understand and why?
Big Idea
The site runs on four simple jobs
Under the hood, the site is doing four jobs over and over: keep the conference information somewhere, show it on screen, react when someone taps something, and remember notes on the same device.
1
Keep the information
The conference sessions and speaker details are written down in the file so the page can use them later.
In coding terms, those lists live in JavaScript arrays called SCHEDULE and SPEAKERS.
2
Draw the page
The site takes that written-down information and turns it into the cards and sections you can actually see.
That step is often called rendering. In this project, helpers like renderSchedule() do that work.
3
React to taps
When someone taps a tab, opens a session, or saves a note, the page notices and updates what is on screen.
The coding phrase for this is event handling. The page listens for clicks, then runs a function.
4
Remember notes
The browser keeps your notes on that same phone or computer, so they are still there after a refresh.
This project uses localStorage, which is the browser's built-in little storage shelf.
Main Files
What matters most in this repo
This project is small on purpose. That makes it easier to teach from, easier to edit quickly, and less overwhelming for first-time readers.
index.html
This is the live conference app. Most of the action is here: the page pieces, the visual styling, the tap behavior, and the conference information.
const SCHEDULE = [
function renderSchedule()
function renderSpeakers(filter = '')
function saveNote(type, entityId, text)
renderSchedule();
code-guide.html
This is the explainer page you are reading now. It is separate so curious learners can explore without getting in the way of the live conference view.
Uses the same visual language as the app.
Optimized for mobile reading and quick scrolling.
Explains the real site instead of a fake teaching example.
sw.js
A small service worker file that saves the app to your browser so it works offline at the conference venue, even without WiFi.
Docs
README.md tells the full story of how the project was built, and CLAUDE.md is extra guidance for future coding helpers.
1. Page Outline
HTML is the page outline
HTML is the part that names the big pieces of the page: the top bar, the main area, the tabs, the pop-up, and the little status message. It helps the browser know what belongs where.
Analogy: HTML is like the labeled rooms and signs on a venue map. It tells you what each part of the place is supposed to be.
If you already know a little coding, HTML is the structure layer. Tags such as <header>,
<main>, and <section> are often called semantic HTML.
The main page shape
This is a shortened version of the real layout in index.html.
<header class="app-header">...</header>
<main>
<section id="scheduleTab" class="tab-content active"></section>
<section id="speakersTab" class="tab-content"></section>
<section id="notesTab" class="tab-content">
<div id="notesComposer"></div>
</section>
</main>
<div class="modal-overlay hidden" id="exportModal">...</div>
<div class="toast" id="toast"></div>Why it matters
These named pieces give the rest of the page something to work with later.
The header stays visible while you scroll.
The tabs point to different sections of the page.
The pop-up and little message bubble already exist, so the page can simply show or hide them.
In coder language, JavaScript later looks up these spots by ID or class name and updates them.
2. Look And Feel
CSS controls the look and feel
CSS decides how the site looks and feels. It picks the colors, spacing, fonts, button sizes, and the smooth open-close motion that makes the page feel polished on a phone.
Analogy: CSS is the paint, lighting, spacing, and signage system. The building is the same building, but it feels very different depending on these choices.
Shared color names
The page gives important colors names so they can be reused in many places.
:root {
--bg: #001329;
--surface: #002040;
--teal: #07a8a8;
--orange: #c8531d;
--lime: #afcd53;
--text: #fff7eb;
--font-display: 'Sen', sans-serif;
}Open-close motion
This is part of what makes each session row smoothly expand instead of popping open suddenly.
.session-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}Mobile-first spacing
The layout starts with phones in mind, then opens up a bit more on larger screens.
Safe tap targets
Buttons are large enough to tap comfortably when students are standing, walking, or moving between sessions.
Reusable colors
Changing one shared color can update many parts of the page at once, which is much easier than editing every button one by one.
Those shared named values are often called tokens or CSS custom properties.
3. What Happens On Tap
JavaScript handles the actions
JavaScript is the part that notices what a person did and responds. It opens a session, switches tabs, saves a note, or shows a message after a button press.
Analogy: JavaScript is like the stage manager or usher. It notices what just happened and helps the right next thing happen on time.
Make the session list
The page builds the schedule from the saved conference information.
function renderSchedule() {
const html = SCHEDULE.map(session => `...`).join('');
document.getElementById('scheduleList').innerHTML = html;
attachScheduleEvents();
}Notice a tap
After the buttons exist, the page tells them what to do when someone presses them.
root.querySelectorAll('.session-trigger').forEach(btn => {
btn.addEventListener('click', () => toggleSession(btn.dataset.id));
});Switch tabs
One small helper keeps the top tabs and the visible section in sync.
function activateTab(target) {
document.querySelectorAll('.tab-btn').forEach(btn => {
const isActive = btn.dataset.tab === target;
btn.classList.toggle('active', isActive);
});
}Keep text safe
This helper makes sure user-facing text is treated like text, not like page instructions.
function esc(str) {
return str
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
}
Important idea: the page usually creates something first, then adds behavior to it second. In plain English: make the buttons, then teach the buttons.
If you have coded before, the main ideas here are rendering, event listeners, small helper functions, and keeping text escaped before it is inserted into HTML.
4. Saved data
Why notes stay on this device
The site keeps notes in the browser instead of sending them to an account or a server. That keeps the setup simple for a conference, but it also means your notes stay with the same browser on the same device.
Analogy: think of this like a small locker inside this browser. It is fast and convenient, but it is attached to this one place.
One place for notes
The page keeps all notes under one shared storage name.
const NOTES_KEY = 'emw2026_notes';
localStorage.setItem(NOTES_KEY, JSON.stringify(notes));
const saved = JSON.parse(localStorage.getItem(NOTES_KEY) || '{}');Different kinds of notes
The app can remember a note for a session, a speaker, or a general quick thought.
session:thu-04
speaker:maya-rogers
general:quick-note-1775020500000Why this choice works
Students can open the site and start typing right away. No sign-in is needed.
What it remembers
The app can remember notes tied to a session, notes tied to a speaker, and multiple quick notes for anything else.
The tradeoff
If you switch browsers or clear storage, the notes will not come with you. Simple tools often trade power for ease.
In coder language, the data is stored as JSON text inside localStorage, and the app stamps notes with created and updated times.
If You've Coded Before
A few quick bridges to basic programming
If you have done Scratch or basic programming before, these comparisons can help you connect what you already know to this page.
Scratch list
A JavaScript array like SCHEDULE. Both store many items in order.
Scratch variable
A JavaScript variable or constant like NOTES_KEY or NOTE_TYPES.
When green flag clicked
The startup section near the bottom that calls renderSchedule() when the page loads.
When this sprite clicked
An event listener like btn.addEventListener('click', ...).
Broadcast message
Calling a function such as activateTab('notes') so other parts of the app react.
Change costume / backdrop
Adding or removing classes like active, expanded, or hidden.
Hands-on ideas
Safe experiments to try
These are low-risk edits with a high chance of success. Try one at a time, refresh the page, and notice what changed.
Change the accent color
Find --teal: #07a8a8; in :root and replace it with a new color.
Watch how many buttons, badges, and highlights update together.
Rename a tab
Search for the visible word Speakers in the HTML and rename it to something like People.
Notice how HTML text changes are often the easiest first wins.
Edit a toast message
Find showToast('Note saved ✓') and change the words.
This helps you see where the page stores short feedback messages.
Add a new session detail
Edit one object inside const SCHEDULE = [, then refresh and inspect how it appears in the accordion card.
This shows how written-down information turns into something visible on the page.
Questions To Ask
Good questions while reading the page
Why store conference data in JavaScript instead of writing every card by hand?
Because the cards follow the same pattern. Writing the information once and reusing the pattern means the page stays consistent and is much easier to update — change one speaker name in the data and every place it appears updates automatically.
Why does the app build HTML strings instead of using a framework?
Because simple is a feature here. One easy-to-open file is great for a conference site and easier for beginners to inspect. Frameworks add power, but also add setup steps and learning curve that were not needed for this project.
Why is there an esc() function?
Because the page sometimes drops text into the page structure. Without escaping, a note containing a < character could accidentally be treated as part of the page code instead of displayed as text. This is a basic web security habit.
Why attach event listeners after rendering?
Because the buttons have to exist before the page can connect behavior to them. First create them, then teach them what to do. If you tried to attach a listener to a button that has not been created yet, the code would fail silently.
Why do notes stay on this device instead of syncing to an account?
Because the goal was zero friction for students: open the page, start typing, done. No sign-up, no login, no server. The tradeoff is that notes live in one browser on one device.
How does the app know which session is happening right now?
The JavaScript compares session start and end times against the current time on your phone (in Hawai'i time). It checks every minute and moves the NOW and Up Next badges accordingly.
What would be the next level up from here?
A natural next step would be to split the project into smaller files once one big file starts to feel crowded. After that, a component framework like React or Vue could help manage more complex interactions — but for this scale, plain HTML and JavaScript do the job well.
Works Without WiFi
How the app works offline
Conference WiFi can be unreliable, so the app saves itself to your phone the first time you visit. After that first load, it opens instantly even without an internet connection.
First visit saves everything
A small background helper downloads the app files and stores them in the browser's cache, like pre-loading a playlist before a flight.
Returns are instant
On later visits, the browser opens the saved copy immediately while quietly checking for updates in the background.
This pattern is called stale-while-revalidate. The file sw.js is a service worker that manages the cache.
Why this fits the event
Conference-friendly engineering choices
No build step
Anyone can open the site quickly, and future editors can make changes without extra setup getting in the way.
Fast to teach from
Learners can inspect the real page in one place instead of bouncing through a lot of folders and tools.
Good on a phone
The design focuses on scrolling, contrast, and easy taps because students will actually use it on their phones during the event.
Private notes
Device-only note storage is practical when you want quick note taking without accounts, passwords, or a server.