JS app prototype thoughts
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.
Introduction
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 (@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.