Rullst AcademyRullst Academy/Lesson
JavaScript and interaction · Lesson 09 / 14

State and screen in agreement

The screen shows a view of the list. That view must not destroy the rest of the plan.

Learning paths16 min

Let's discover together

  1. 1

    State is information the program keeps: tasks and the chosen filter. The interface is derived from that state. Filtering the view should not replace the main list with the filtered result.

  2. 2

    To toggle completion, use map and compare ids; copy the changed object with {...task, done:!task.done}. This produces a new list without changing the original item object. It is not a general deep copy.

  3. 3

    Derive count and total from the current list instead of maintaining independent counters that can drift. The project total sums every duration; the filter changes only visible rows. Define this before testing.

  4. 4

    The demonstration forgets missions on reload or account change. Download plan exports JSON; it does not save code or synchronize devices. The Rullst Academy editor draft and account progress are separate mechanisms.

From the example to your own interaction

Download this activity kit, extract it and open index.html in a browser. Edit lesson.js, save and reload. You do not need Node or packages. README explains local HTTP when needed.

The demonstration uses supplied JavaScript. It does not execute your editor code. Download your edit separately to test in the local kit.

My files and GitHub
Try the project we will build

Small mission planner

Create, complete and review a study plan using fictional data. Missions stay only in this page’s memory and disappear on reload.

Use a short title without personal data and whole minutes from 1 to 120. Up to 20 missions.

Missions in the plan
0
Minutes across all missions
0
Completed missions
0

No missions in this filter. Add one or choose another filter.

    Suggestion lab

    Scenarios are simulated in this browser by default. No suggestion request is sent and your plan is not replaced.

    Available in the kit opened at http://127.0.0.1:8768. See README; no external account is needed.

      This JSON contains only missions, not your code. The demonstration does not import files or synchronize devices. Download edited JavaScript from the lesson file workspace.

      Official links and next step

      ✦
      YOUR MISSION

      Separate data, filter and rendering, and update a mission by id.

      Now it's your turn

      Discovery workshop

      Think before running

      Two missions: id 1 pending, 15 min; id 2 completed, 20 min. The filter shows pending only.
      Build your answers and check when you are ready.
      A moment to understand

      Does downloading missions.json also save edited JavaScript?

      I need a hint

      Predict the result, run your file and explain the difference.

      Loading your journey…

      Take it with you

      Add identical titles, complete only one and use all three filters. Download JSON, reload and explain what the file preserved and what disappeared from the page.

      At your own pace

      My files and GitHub

      Every lesson can become your own record: code, notes or a practice plan. Saving a file to GitHub is optional and does not change your XP.

      Student guide

      The editor and downloads open when this lesson is available to your account. Check access below or return to the track map.

      Checking your access to this lesson…

      Rullstpetbot

      AI can make mistakes. Check the lesson material.