"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", em: "em", figure: "figure", h2: "h2", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "Hi guys! Today I'm gonna share with you some very little important tricks you can implement when learning JavaScript as a total beginner. For someone like me who is really new to JavaScript programming myself. I often having trouble structuring my JavaScript code every time I create a new web app or features. If you look at my code when I first learn how to code JavaScript. It was really messy. A lot of variables and functions were created and scattered everywhere in the JavaScript file. Even when I really focused on making it look neat and in order, it just would never be enough." }), "\n", _jsx(_components.p, { children: "If you don't know what I mean or basically talking about, then the most simple explanation I can give to you is that Vanilla JavaScript has no fixed or preset structure. You can straightaway code it in any way you like. As long as the code works. So, with that being said, then learning JavaScript could be very challenging for some. No fixed or preset structure means no fixed or given way to do anything, right? That's why when you start learning JavaScript, going back and forth learning from different kinds of sources or specifically different kinds of people, will honestly I'm gonna say, it gets confusing. You ended up don't know which one of the codes or ways you learn it is the best practice when coding JavaScript." }), "\n", _jsx(_components.p, { children: "But of course, I'm not saying that's a bad thing. Actually the opposite. The more you learn, the more experience you get when coding new features or even creating a new web app. But the catch is, it's gonna take much more time to finally understand how to implement it. That's why I'm here today. To help you speed up your learning process much faster. So without further ado, let's begin." }), "\n", _jsxs(_components.p, { children: ["But before we begin, let me inform you that I also do provide ", _jsx(_components.strong, { children: "this" }), " learning process of how to code your JavaScript in a more neat way in video form (more detailed). You can click on this ", _jsx(_components.a, { href: "https://youtu.be/UcSg9OXRqMo", children: "link" }), " to learn it through video. In this video, we basically will go through how we can build a simple budget web app focusing on the logic part only (the JavaScript part of the web app). Where in the beginning we will code the JavaScript in a normal way of coding it. But, if you prefer to learn it here, in written form, you are welcome to do so. It's up to you. The only difference is in here, I'm just gonna show you the important part only. As long as you know how to change and implement a neat and proper way to code your JavaScript programming. So with that being said, let's actually begin our learning process."] }), "\n", _jsx(_components.h2, { id: "a-normal-javascript-code", children: "A. Normal JavaScript Code" }), "\n", _jsx(_components.p, { children: "To make it easier for both of us, why not I give you an example of a normal way of coding JavaScript. So, let's say we have a simple HTML boilerplate that we can work with:-" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#282c34", color: "#abb2bf" }, tabIndex: "0", "data-language": "html", "data-theme": "one-dark-pro", children: _jsxs(_components.code, { "data-language": "html", "data-theme": "one-dark-pro", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "<" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "div" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">My name is <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "span" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " class" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"person_name\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "<" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "div" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " class" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"person_age\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] })] }) }) }), "\n", _jsxs(_components.p, { children: ["So, what we gonna do now is to just display the ", _jsx(_components.code, { children: "name" }), " of the person and his/her calculated ", _jsx(_components.code, { children: "age" }), ". With that in mind let's first start listing what we gonna do next."] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: ["create data of ", _jsx(_components.code, { children: "person" })] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: ["calculate the ", _jsx(_components.code, { children: "age" }), " of the person"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: ["display the ", _jsx(_components.code, { children: "name" }), " and ", _jsx(_components.code, { children: "age" }), " of the person"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#282c34", color: "#abb2bf" }, tabIndex: "0", "data-language": "js", "data-theme": "one-dark-pro", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "one-dark-pro", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// 1. create data of person" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " person" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " name" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"Lalapolalaa Newb\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " yearOfBirth" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "1993" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// 2. calculate the age of the person" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// - get current date" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " current" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " new" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " Date" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// get current year" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " year" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " current" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "getFullYear" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// - calculate person's age" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " age" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " year" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " -" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " person" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "yearOfBirth" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// 3. display the person's name and person's age" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// - display name" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "document" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "querySelector" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'.person_name'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "textContent" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " person" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "name" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// - display age" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "document" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "querySelector" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'.person.age'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "textContent" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " age" })] })] }) }) }), "\n"] }), "\n"] }), "\n", _jsx(_components.p, { children: "That's simple right? Very in order and not messy at all. But how about when we have a lot of other features added? Would it still be very easy to read and go through the code? Let's add new features." }), "\n", _jsxs(_components.p, { children: ["New ", _jsx(_components.strong, { children: "features" }), " to add:-"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["able to ", _jsx(_components.em, { children: "add new" }), " person's data"] }), "\n", _jsxs(_components.li, { children: ["able to ", _jsx(_components.em, { children: "display all" }), " person's data to UI"] }), "\n", _jsxs(_components.li, { children: ["able to ", _jsx(_components.em, { children: "calculate" }), " and ", _jsx(_components.em, { children: "display average age" }), " of all person available"] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Steps" }), " to perform:-"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "adjust the HTML to be able to display all person's data" }), "\n", _jsx(_components.li, { children: "able to display all person's data to UI" }), "\n", _jsxs(_components.li, { children: ["add ", _jsx(_components.code, { children: "div" }), " to display average ", _jsx(_components.code, { children: "age" }), " of people available"] }), "\n", _jsxs(_components.li, { children: ["create new object of ", _jsx(_components.code, { children: "People" }), " containing person's data ", _jsx(_components.code, { children: "array" }), " and average ", _jsx(_components.code, { children: "age" })] }), "\n", _jsx(_components.li, { children: "get user submitted data from input fields (by submit button and enter key)" }), "\n", _jsx(_components.li, { children: "validate data submitted" }), "\n", _jsxs(_components.li, { children: ["store new person data in ", _jsx(_components.code, { children: "People" }), " object"] }), "\n", _jsxs(_components.li, { children: ["calculate ", _jsx(_components.code, { children: "age" }), " of person"] }), "\n", _jsx(_components.li, { children: "display all person's data available" }), "\n", _jsx(_components.li, { children: "calculate & store average age of all person available" }), "\n", _jsxs(_components.li, { children: ["display average ", _jsx(_components.code, { children: "age" }), " of all person available"] }), "\n"] }), "\n", _jsx(_components.p, { children: "We will start with the HTML adjustment first:-" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#282c34", color: "#abb2bf" }, tabIndex: "0", "data-language": "html", "data-theme": "one-dark-pro", children: _jsxs(_components.code, { "data-language": "html", "data-theme": "one-dark-pro", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "<" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "div" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " class" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"people\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "<" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "div" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " class" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"add_new_person\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "input" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " class" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"person_name\"" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " type" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"text\"" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " placeholder" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"Name\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "input" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " class" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"person_yearOfBirth\"" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " type" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"number\"" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " min" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"1900\"" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " max" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"2020\"" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " placeholder" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"Year of Birth\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "div" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " class" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"submit_btn\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">Submit" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "<" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "div" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">Average age of people available is <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "span" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " class" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"average_age\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] })] }) }) }), "\n", _jsx(_components.p, { children: "JavaScript adjustment:-" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#282c34", color: "#abb2bf" }, tabIndex: "0", "data-language": "js", "data-theme": "one-dark-pro", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "one-dark-pro", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// 4. create new Object of People containing person's data array and average age" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// - Object of people" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " people" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " person" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": []," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " averageAge" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "0" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// - person's data - using function constructor" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " Person" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " function" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "name" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "yearOfBirth" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " this" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "id" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " id" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " this" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "name" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " name" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " this" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "yearOfBirth" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " yearOfBirth" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// 5. get user submitted data from input fields" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// - by submit button" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "document" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "querySelector" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'.submit_btn'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "addEventListener" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'click'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "addNewPerson" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// - by enter key" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "document" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "addEventListener" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'keydown'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "event" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " =>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " if" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "event" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "keyCode" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " ===" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " 13" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " ||" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " event" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "which" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " ===" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " 13" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#61AFEF" }, children: " addNewPerson" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "})" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// - 5.1 addNewPerson function" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " addNewPerson" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " () " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // get values inputted" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " input" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " getValuesInputted" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "}" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["But before we continue more, we need to reposition ", _jsx(_components.strong, { children: "5.1" }), " code block above so that it will work. Right now, it will not work since we will get an error of not finding ", _jsx(_components.code, { children: "addNewPerson" }), " function on both our ", _jsx(_components.code, { children: "addEventListener" }), ". So, to make it work, we gonna place ", _jsx(_components.strong, { children: "5.1" }), " code block of ", _jsx(_components.code, { children: "addNewPerson" }), " function above the both ", _jsx(_components.code, { children: "addEventListener" }), " we have created (like shown below):-"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#282c34", color: "#abb2bf" }, tabIndex: "0", "data-language": "js", "data-theme": "one-dark-pro", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "one-dark-pro", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// 4. create new Object of People containing person's data array and average age" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// - Object of people" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " people" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " person" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": []," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " averageAge" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "0" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// - person's data - using function constructor" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " Person" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " function" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "name" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "yearOfBirth" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " this" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "id" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " id" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " this" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "name" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " name" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " this" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "yearOfBirth" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " yearOfBirth" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// get values inputted" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " getValuesInputted" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " () " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " name" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "yearOfBirth" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // get name of person" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " name" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " document" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "querySelector" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'.person_name'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "value" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // get year of birth of person" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " yearOfBirth" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " document" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "querySelector" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'.person_yearOfBirth'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "value" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " return" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " { " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "name" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "yearOfBirth" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// - 5.1 addNewPerson function" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " addNewPerson" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " () " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // get values inputted" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " input" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " getValuesInputted" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // 6. validate data submitted" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " if" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "input" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "name" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " !==" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " ''" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " &&" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " !" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "isNaN" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "input" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "yearOfBirth" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: "&&" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " input" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "yearOfBirth" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " >" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " 0" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // 7. store new person data in People Object" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - create id for new added person" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " let " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "newPerson" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#61AFEF" }, children: " if" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(people.person.length > 0) {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " id" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " people" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "person" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "[" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "people" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "person" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "length" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " -" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " 1" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "]." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "id" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " 1" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " } else {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " id" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " 0" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - create new person data" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " newPerson" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " new" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " Person" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "input" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "name" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "input" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "yearOfBirth" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - insert new person data into People Object" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " people.person.push(newPerson)" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // 8.1 calculate age of person" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " let " }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "calculatedAge" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " (" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "yob" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - get current Date" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " current" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " new" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " Date" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - get current Year" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " year" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " current" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "getFullYear" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // calculate age" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " yob" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " year" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " -" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " yob" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " return" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " yob" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // 9. display all person's data available" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - create html template of each person to display on UI" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " let " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "htmlTemplate" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " `" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#98C379" }, children: "

" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#98C379" }, children: "

My name is " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "${" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "newPerson" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "name" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "}" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "

" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#98C379" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#98C379" }, children: "

" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "${" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "calculatedAge" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "newPerson" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "yearOfBirth" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "}" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "

" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#98C379" }, children: "

" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#98C379" }, children: " `" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - append HTML Template to UI - beforeend" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " document.querySelector(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'.people'" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: ").insertAdjacentHTML(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'beforeend'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", htmlTemplate)" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // 10. calculate & store average age of all person available" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - calculate average age of People" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " let " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "averageAge" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " let " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "totalAge" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " 0" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#61AFEF" }, children: " if" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(people.person.length > 0) {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - get total age of all people" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " people" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "person" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "forEach" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "person" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " =>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " totalAge" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " totalAge" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " calculateAge" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "person" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "yearOfBirth" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - get average age of all people" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " averageAge" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " totalAge" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " /" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " people" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "person" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "length" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - store average age in People Object" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " people." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "averageAge" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " averageAge" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // 11. display average age of all person available" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " document.querySelector(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'.average_age'" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: ").textContent = people.averageAge" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E06C75" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E06C75" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// 5. get user submitted data from input fields" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// - by submit button" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: "document.querySelector(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'.submit_btn'" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: ").addEventListener(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'click'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", addNewPerson)" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// - by enter key" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "document.addEventListener(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'keydown'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "event" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " =>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " if" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "event" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "keyCode" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " ===" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " 13" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " ||" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " event" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "which" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " ===" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " 13" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#61AFEF" }, children: " addNewPerson" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "})" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["So, this way, we are able to make it work as it's supposed to. But, for beginners, it can get confusing sometimes. Adding new features like we did above already make it becomes somewhat complicated to read through. But thanks for the ", _jsx(_components.code, { children: "comments" }), " made before each block of code being written, at least able to help us to know which block of code will run first before others. If let's say, I didn't put any ", _jsx(_components.code, { children: "comments" }), " on any of my code above. That would definitely and immediately make it harder for us to track our code and potentially could introduce new errors while trying to implement new features later on."] }), "\n", _jsx(_components.h2, { id: "b-neat-or-proper-javascript-code", children: "B. Neat or Proper JavaScript Code" }), "\n", _jsxs(_components.p, { children: ["So, the right or better ways for us to do this is simple actually. By applying ", _jsx(_components.strong, { children: "MVC" }), " kinda concept in our JavaScript programming. We are actually able to make it more neat, readable, and easy to add and remove any features for future updates. For briefs and creative explanation in how ", _jsx(_components.strong, { children: "MVC" }), " works, you can go visit this link to at least know about it. Anyhow, ", _jsx(_components.strong, { children: "MVC" }), " stands for ", _jsx(_components.strong, { children: "Model" }), ", ", _jsx(_components.strong, { children: "View" }), ", and ", _jsx(_components.strong, { children: "Controller" }), ". Which every one of them handle specific kind of code or task."] }), "\n", _jsx(_components.p, { children: "What kind of code they can handle?" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Model" }), " - handle codes in and out from a database. Basically any code that deals directly with data storage. In our case would be an object of people"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "View" }), " - handle all code that deals with UI. Such as DOMS manipulation."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Controller" }), " - handle all code that related to both Model to View and View to Model. Basically acts as an interface between those Model and View components."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["So how can we change our code to behave like ", _jsx(_components.strong, { children: "MVC" }), "? Let me show you how it's done."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "1st" }), " - let's have 3 self-invoke functions that represent all ", _jsx(_components.strong, { children: "3 MVC Components" })] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#282c34", color: "#abb2bf" }, tabIndex: "0", "data-language": "js", "data-theme": "one-dark-pro", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "one-dark-pro", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// A. Model Component - deals with data" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " modelController" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " (() " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {})();" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// B. View Component - deals with UI" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " viewController" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " (() " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {})();" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// C. Controller Component - handle code relation between both Model & View Components" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " controller" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " (() " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {})();" })] })] }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "2nd" }), " - make it so that ", _jsx(_components.em, { children: "controller" }), " become the interface between ", _jsx(_components.em, { children: "viewController" }), " and ", _jsx(_components.em, { children: "modelController" })] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#282c34", color: "#abb2bf" }, tabIndex: "0", "data-language": "js", "data-theme": "one-dark-pro", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "one-dark-pro", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// A. Model Component - deals with data" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " modelController" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " (() " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {})();" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// B. View Component - deals with UI" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " viewController" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " (() " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {})();" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// C. Controller Component - handle code relation between both Model & View Components" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " controller" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " ((" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "modelCTRL" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "viewCTRL" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {})(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "modelController" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "viewController" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ");" })] })] }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "3rd" }), " - make it so that all controllers have ", _jsx(_components.em, { children: "public" }), " function/functions (so that other controllers like ", _jsx(_components.em, { children: "controller" }), " able to to call function/functions declared in Model & View Controller)"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#282c34", color: "#abb2bf" }, tabIndex: "0", "data-language": "js", "data-theme": "one-dark-pro", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "one-dark-pro", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// A. Model Component - deals with data" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " modelController" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " (() " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // all function created in this return object are public functions" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " return" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "})();" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// B. View Component - deals with UI" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " viewController" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " (() " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // all function created in this return object are public functions" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " return" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "})();" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// C. Controller Component - handle code relation between both Model & View Components" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " controller" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " ((" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "modelCTRL" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "viewCTRL" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // all function created in this return object are public functions" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " return" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // call this function to run the web app - the web app will not run if this function is not being called" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#61AFEF" }, children: " init" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": () " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // call private function.." }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "})(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "modelController" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// call init function to run the web app" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "controller" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "init" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "()" })] })] }) }) }), "\n", _jsxs(_components.p, { children: ["From here, let's change the adjusted JavaScript code earlier to our ", _jsx(_components.strong, { children: "MVC" }), " code above:-"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#282c34", color: "#abb2bf" }, tabIndex: "0", "data-language": "js", "data-theme": "one-dark-pro", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "one-dark-pro", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// A. Model Component - deals with data" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " modelController" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " (() " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // 4. create new Object of People containing person's data array and average age" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - Object of people" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " people" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " person" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": []," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " averageAge" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "0" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - person's data - using function constructor" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " Person" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " function" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "name" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "yearOfBirth" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " this" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "id" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " id" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " this" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "name" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " name" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " this" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "yearOfBirth" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " yearOfBirth" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // all function created in this return object are public functions" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " return" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // store new person data in People Object" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#61AFEF" }, children: " addNewPerson2Storage" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": (" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "input" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - create id for new added person" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "newPerson" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " if" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "people" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "person" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "length" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " >" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " 0" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " id" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " people" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "person" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "[" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "people" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "person" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "length" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " -" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " 1" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "]." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "id" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " 1" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " } " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "else" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " id" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " 0" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - create new person data" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " newPerson" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " new" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " Person" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "input" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "name" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "input" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "yearOfBirth" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - insert new person data into People Object" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " people" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "person" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "push" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "newPerson" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " return" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " newPerson" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // calculate age of person" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#61AFEF" }, children: " calculateAgeOfPerson" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": (" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "yob" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - get current Date" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " current" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " new" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " Date" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - get current Year" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " year" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " current" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "getFullYear" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // calculate age" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " yob" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " year" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " -" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " yob" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " return" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " yob" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // calculate & store average age of all person available" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#61AFEF" }, children: " calculateAverageAgeOfPeople" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": () " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - calculate average age of People" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " averageAge" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " totalAge" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " 0" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " if" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "people" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "person" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "length" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " >" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " 0" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - get total age of all people" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " people" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "person" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "forEach" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "person" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " =>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " totalAge" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " totalAge" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " calculateAge" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "person" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "yearOfBirth" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - get average age of all people" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " averageAge" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " totalAge" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " /" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " people" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "person" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "length" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - store average age in People Object" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " people" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "averageAge" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " averageAge" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " return" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " people" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "averageAge" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "})();" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// B. View Component - deals with UI" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " viewController" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " (() " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // declare object of DOMStrings" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " DOMStrings" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " submitBtn" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'.submit_btn'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " personName" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'.person_name'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " personYOB" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'.person_yearOfBirth'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " peopleList" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'.people'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " averageAge" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'.averageAge'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // all function created in this return object are public functions" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " return" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // get DOMStrings" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#61AFEF" }, children: " getDOMStrings" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": () " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " return" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " DOMStrings" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // get values inputted" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#61AFEF" }, children: " getValuesInputted" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": () " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " name" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "yearOfBirth" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // get name of person" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " name" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " document" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "querySelector" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "DOMStrings" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "personName" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "value" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // get year of birth of person" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " yearOfBirth" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " document" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "querySelector" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "DOMStrings" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "personYOB" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "value" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " return" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " { " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "name" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "yearOfBirth" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // display all person's data available" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#61AFEF" }, children: " displayPersonData" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": (" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "newPerson" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "calculatedAge" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - create html template of each person to display on UI" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " htmlTemplate" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " `" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#98C379" }, children: "

" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#98C379" }, children: "

" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#98C379" }, children: "