ToMotion AI logo
Menu
Back to gallery

Public AI explainer video

JavaScript, React, and Browser APIs: Resume Data to PDF

If your resume feels like a page you must rebuild by hand, its information has nowhere clear to live. Think of it as one organized record. In...

Prompt

Source idea used to generate this video.

JavaScript + React + Browser APIs Three layers, learned in order, none assumed. First, plain JavaScript — the programming language every browser runs. You will use its two workhorse structures: objects, which group named values together ({ name: 'Priya', email: 'p@x.com' }), and arrays, which hold ordered lists ([job1, job2, job3]). A resume is literally one object containing some arrays — once you see that, the whole project clicks. Second, React — a library that keeps the screen synchronised with your data automatically. You declare 'the preview shows whatever is in state', and React re-draws it whenever state changes; you never manually update the page. Third, two built-in browser APIs that need no installation: localStorage, a tiny permanent store the browser gives every website (this is how sites remember you between visits), and the print engine, which — with the right CSS — turns your beautifully styled preview into a downloadable PDF. Every one of these terms is taught from zero inside the modules, with a video where it helps most. JavaScript Why it matters JavaScript is the only programming language that runs natively in every web browser, which makes it unavoidable — and wonderful — for frontend work: the language you learn here is the language of the entire web. More specifically for this project, the resume itself will live as JavaScript objects and arrays, so how comfortably you create, read and update those structures decides how smooth every later module feels. There is a hidden career payoff too: objects-and-arrays fluency is the substrate under React, under JSON APIs, under practically every coding interview question — investing here pays interest everywhere. Here is the ground floor, assuming you have never programmed. JavaScript stores information in variables — named containers, created with 'const' (won't be reassigned) or 'let' (can be). Values have types: a string is text in quotes ('Priya'), a number is just digits (2024), a boolean is true or false. Now the two structures this whole project runs on. An OBJECT groups related values under names: const person = { name: 'Priya', email: 'p@x.com' } — you read a field with a dot, person.name, and each named slot is called a property. An ARRAY holds an ordered list: const skills = ['HTML', 'CSS', 'JS'] — you read by position starting from zero, skills[0] is 'HTML', and skills.length tells you how many there are. The power move is nesting them: an array OF objects, like a jobs list where each job is an object with company, role and years. Arrays come with helper methods you will use constantly: push(item) appends to the end, map(fn) transforms every item into something new (this later becomes 'turn every job into a preview row'), and filter(fn) keeps only items passing a test. Finally, JSON: a text format that looks almost exactly like JavaScript object syntax, used whenever structured data must become a string — JSON.stringify(obj) converts object to text, JSON.parse(text) converts back. That pair is precisely how your resume will be saved to and loaded from localStorage in module 3, so meeting it now closes the loop early.

Narration

Narration used to create this video.

Video narration

If your resume feels like a page you must rebuild by hand, its information has nowhere clear to live. Think of it as one organized record. In JavaScript, that record is an object: named pieces like your name and email. Repeated sections-jobs and skills-become arrays. That is the turn: your resume stops being a page and becomes data. React reads that data and keeps the preview in sync. Edit it, and React redraws the preview; you do not manually rewrite the page. Then the data gets two services. localStorage saves it between visits, though you can clear it. JSON bridges saving and loading: structured data becomes text, then text becomes data again. The browser's print engine can turn the styled preview into a PDF when the layout supports printing. One resume record drives the project: React shows it, localStorage remembers it, and the browser prints it.