Apply for the next session

Hi, there. You're not logged in. So, you must be a visitor. Welcome!

What is this? You are viewing one of our supplemental "Stories." In addition to our core design curriculum, we are constantly building out additional resources. Stories are a collection of real work tasks, design history, UX explorations, and work-throughs. Stories are often off-the-cuff and less concerned with production value.


OK! So, here’s how you might think through how to do the tasks needed to make something that behaves like an app.

You have buttons – and you click them to make the page change.

You know how to make buttons, “do stuff” when they are clicked, and how to make the page change. BUT – you probably don’t know that you can actually do those things. So, prove it to yourself.

App layouts

IDs and event delegation

Data attributes

The dataset property

Grouping by dataset

A function to handle the screen changes

Separating concerns

Fooling around with other data attribute possibilities

You can use them for whatever you dream up.

(sorry for the random “any” overlay blocking style.backgroundColor...

Organizing page templates

Follow what the user wants. They click a button – but how do they tell you what they want? Then what happens?

Next steps

This is just one way to approach this.

The only thing new here is importing and exporting code between files.

(Maybe the  element.matches(selector) method. (but also you don’t really need it to accomplish all of these things)

HTML, CSS, Objects, Strings, String templates, functions, and element.innerHTML  have been around for a month if you are seeing this.

Sometimes you just have to be told about a pattern

We don’t expect you to come up with the answers to everything magically. There ARE certain things that someone just needs to kinda show you for the first time and make you go, “Oh! I hadn’t thought I could use that thing in that way!” As those add up, though – then your ability to come up with your own tricks will grow.

But this code above here should be pretty clear to follow at this point. If it’s not – then you probably need to start putting in about 10x as many repetitions with these concepts. If you don’t have 20 E4P forms done – then why not? If you haven’t been meeting with an instructor or another student every single day until this all makes sense – then why not? If you aren’t able to read this code with confidence – it’s because you’re actively avoiding the necessary time and effort. Don’t do that! Just learn it®.

Keep it real

Some exploration of timing with setTimout()

See the Pen HTML cheatsheet 1 / display types by (@perpetual-education) on CodePen.

Video in the works!

Maybe we’ll make a video about this…

But you can do it without a video. We know it.

Apply for the next session