├── .gitattributes ├── README.md ├── lecture-01-introduction-to-cli └── README.md ├── lecture-02-getting-started-with-Git-VScode-Hosting └── README.md ├── lecture-03-getting-started-with-html5 ├── README.md └── images │ ├── container.png │ ├── footer.png │ ├── header.png │ ├── inline-vs-block.png │ ├── links.png │ ├── list-reversed-order.png │ ├── list-unordered-inline.png │ ├── list-unordered.png │ ├── navigation.png │ ├── section.png │ └── typography.png ├── lecture-04-getting-started-with-CSS3 ├── README.md └── images │ ├── accessroot.png │ ├── boxmodel.png │ ├── cssVscss3.png │ ├── csssyntax.png │ ├── external.png │ ├── inline.png │ ├── internal.png │ ├── lengths.png │ ├── numbers.png │ ├── relative_lengths.png │ ├── root.png │ └── selectors.png ├── lecture-05-javascript-in-the-browser ├── README.md └── images │ ├── api.PNG │ ├── console-innerHTML.png │ ├── console-innerText.png │ ├── console-p.png │ ├── console-textContent.png │ ├── demo-p.png │ ├── emmet.PNG │ ├── innerHTML-alert.PNG │ ├── innerHTML-console.PNG │ ├── innerHTML-doc.PNG │ ├── innerText-alert.PNG │ ├── innerText-console.PNG │ ├── innerText-doc.PNG │ ├── p-tag.PNG │ ├── textContent-alert.PNG │ ├── textContent-console.PNG │ ├── textContent-doc.PNG │ └── uri.png ├── lecture-06-introduction-to-reactjs-library ├── README.md └── images │ ├── impvsdec.png │ ├── jsx.png │ ├── keyprop.png │ ├── keypropsoln.png │ ├── map.png │ ├── onchange.png │ ├── onclick.png │ ├── useState.png │ └── viser.png ├── lecture-07-build-your-cash-register ├── README.md └── l7-images │ ├── display-block.png │ ├── display-inline-block.png │ ├── display-inline.png │ ├── flex-column-reverse.png │ ├── flex-column.png │ ├── flex-row-reverse.png │ ├── flex-row.png │ └── none-hidden.png ├── lecture-08-is-your-birthday-lucky ├── README.md └── l8-images │ ├── checkbox.png │ ├── click.png │ ├── color.png │ ├── date-time.png │ ├── date.png │ ├── file.png │ ├── input-button.png │ ├── number.png │ ├── password.png │ ├── radio.png │ ├── round-off-values.png │ ├── send-request.png │ └── text.png ├── lecture-09-fun-with-triangles ├── README.md └── images │ ├── addvsclick.JPG │ ├── classvsid.png │ ├── form.JPG │ ├── forof.jpeg │ ├── matheg.jpeg │ └── radio.jpeg ├── lecture-10-is-your-birthday-a-palindrome └── README.md └── lecture-11-stock-purchase-profir-or-loss ├── README.md └── images ├── label.jpeg ├── main.jpeg └── tofixed.jpeg /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # neogcamp-levelZero-only-concepts 2 | All concepts taught in neogCamp's levelZero that are necessary for interview preparation. 3 | -------------------------------------------------------------------------------- /lecture-01-introduction-to-cli/README.md: -------------------------------------------------------------------------------- 1 | # Introduction to CLI 2 | ### What is **CLI** ?
3 | - CLI stands for **Command Line Interface**
4 | - **Command Line Interface** is a text-based interface that processes the commands of a computer program in the form of lines of text to perform functions and responds in the same way. 5 | 6 | ## Concept no 1: JavaScript and NodeJS 7 | ### JavaScript 8 | - A text-based programming language which executes on a browser, allows making webpages interactive. 9 | JavaScript is a programming language, which runs in the browser. 10 | ### NodeJS 11 | - Node.js is an interpreter or running environment for JavaScript 12 | 13 | ### JavaScript can run in a browser as well as in CLI only if **NodeJs runtime environment** is installed. 14 | 15 | Tools we can use for JavaScript and NodeJS 16 | - [repl.it](https://replit.com/) 17 | - What is a repl?
18 | repl stands for **read-evaluate-print-loop**
19 | Replit is a simple yet powerful online IDE, Editor, Compiler, Interpreter, and REPL. Code, compile, run, and host in 50+ programming languages. 20 | 21 | - Any Browser 22 | - JavaScript can run inside nearly all modern web browser 23 | 24 | ## Getting started with JavaScript 25 | 26 | ### 1. To print the output 27 | - To print a statement in both browser or in CLI
28 | 
console.log(“statement”);
29 | 30 | ### 2. To get the input from the user 31 | - In browser
32 | 
prompt(“enter your name”);

33 | Returns the user's input in console 34 | - In NodeJS/ CLI app
35 | In NodeJS/ CLI we need something to get the input, for that purpose we use [readline-sync](https://www.npmjs.com/package/readline-sync)
36 | - To get readline-sync, first we need to get npm

37 | - [What is npm?](https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/#:~:text=npm%20is%20two%20things%3A%20first,version%20management%2C%20and%20dependency%20management.)
38 | - npm stands for **node package manager**
39 | - It is an online repository for the publishing of open-source Node.js projects and it is a command-line utility for interacting with said repository that aids in package installations, version management, and dependency management.

40 | 41 | Steps to get readline-sync
42 | 1. First install and setup nodejs from [nodejs.org](https://nodejs.org/en/), npm will be included in this as well. 43 | 2. Open Command Prompt to check whether the installations were success or not by running the command
44 | 
node -v
45 | it should give the version of nodejs
46 | >v10.16.3
47 | > 48 | Similarly,
49 | 
npm -v
50 | it should give the version of npm
51 | >v6.9.0
52 | > 53 | 3. Install readline-sync by running command in Command Prompt 54 | 
npm install readline-sync


55 | 56 | - **readline-sync is a npm-library** 57 | 58 | - What is a library?
59 | It is a collection of pieces of pre-defined/ already written codes which can be used as it is in bigger programs. 60 | 61 | - After installing required packages, the readlineSync will get added as a dependency. 62 | - What do we mean by a dependency?
63 | A dependency in programming is an essential functionality, library, or piece of code that's essential for a different part of the code to work. For example, a specific library that a given line of code depends on. 64 | 65 | - How to declare readlineSync?
66 | Syntax : 
var readlineSync = require(“readline-sync”);
 67 |    var userInput = readlineSync.question("question");
68 | - readlineSync can be used in 3 ways : 69 | - readlineSync.question('question?')
70 | In this case, the users are prompted to type the answer manually. 71 | - readlineSync.keyInYN('question?')
72 | In this case,the users are prompted to type their answer as y ( returns true ) or n ( returns false ) only. 73 | - readlineSync.keyInSelect(answerSetArray, 'question?')
74 | In this case, along with the question, the mentioned **answerSetArray**'s elements would be displayed as multiple choices for the given question.
The users are prompted to type the index ( which will be mentioned alongside the choices ) of the correct answer. 75 | 76 | ## Basic concepts 77 | ### 1. Variable 78 | - What is a variable?
79 | It is a placeholder in computer memory, where we store a certain value that we will access in the future via a reference name. 80 | - There are different types of variables : 81 | - String 82 | - Number 83 | - Boolean and many more 84 | ### How to declare a variable ? 85 | - To declare a variable we can use three keywords .i.e. var, let, and const 86 | - Syntax: 87 | 
var userName = "user";
88 | - When to use var, let, and const? 89 | 1. var
90 | It can be global/functional scoped and it is used for variables that need to be re-declared and updated. 91 | 2. let
92 | It is block-scoped and can be updated but not re-declared. 93 | 3. const
94 | It is also block-scoped but it can't be updated or redeclared. 95 | ### CamelCase 96 | - Camelcase is used preferably as naming convention in Javascript. 97 | - Example: userName, getPrice, etc. 98 | 99 | ### String 100 | - String can be any text written inside double or single quotes. 101 | - String Concatenation 102 | - Adding two strings or merging two strings, using the addition sign “ + ” is called string concatenation. 103 | 104 | ### 2. Data Structures 105 | A **Data Structure** is a particular way of organizing data in a computer and **Array** is the simplest data structure where each data element can be randomly accessed by using its index number. 106 | - In JavaScript, Arrays are not primitive, they are **Objects**
107 | 108 | ### Object 109 | - An Object stores the data in form of key-value pairs. 110 | - The values can be accessed by using their respective keys. 111 | - Therefore, these keys act as properties of the object. 112 | - How do we access property? 113 | - We access property by using *dot* notation 114 | - Example:
115 | 
var Obj = {key:value};
116 |   console.log(Obj.key);
117 | >value 118 | > 119 | *Everything in JS is an Object* 120 | 121 | ## Processing 122 | ### Conditional Statements 123 | - Conditional Statements decides whether to run the piece of code or not.
124 | - The very best example is if-else
125 | - In if-else block 126 | - first the condition is checked 127 | - if the condition returns true then the piece of code present within the if block executes 128 | - else if the condition returns false then it will run the code present in the else block 129 | - Syntax 130 | 
131 |         if(condition) {
132 |             // if condition true then this block will be executed
133 |             // set of statements
134 |         }
135 |         else {
136 |             // if condition false then this block will be executed
137 |             // set of statements
138 |         }
139 | 140 | ### Functions 141 | - Function is a set of statements that can be used repetitively in one single program just by calling it by its reference name and passing arguments in it.
142 | - Function is a repeating piece of the processing unit.
143 | - Syntax: 144 | 
145 |     function functionName(parameterOne, parameterTwo) {
146 |     // processing
147 |     return outputValue;
148 |     }
149 |
150 | 151 | 152 | #### What are Parameters and Arguments? 153 | - **Parameters** are the names of the variables present in the function definition. 154 | - **Arguments** are the real values passed to the function and received by them. 155 | 156 | 157 | ### Control Flow Statements 158 | - The control flow is the order in which the computer executes statements in a script.
159 | - The example we learnt is for loop
160 | - For loop runs the set of statements mentioned/written inside the block, repetitively until the exit condition is met.
161 | - Syntax: 162 | 
 for (intial CONDITION; exit CONDITION; change CONDITION) {
163 |     // code block to be executed
164 |     }
165 | 166 | 167 | ## Styling 168 | ### Chalk 169 | - [Chalk](https://www.npmjs.com/package/chalk) module in Node.js is the third-party module that is used for styling the format of text and allows us to create our themes in the node.js project. 170 | - To use chalk,module we need to first install it by running the below command line: 171 | 
 npm install chalk
172 | - How to use chalk? 173 | 
const chalk = require('chalk');    // to get the chalk module
174 | 175 | -------------------------------------------------------------------------------- /lecture-02-getting-started-with-Git-VScode-Hosting/README.md: -------------------------------------------------------------------------------- 1 | # **Getting started with Git, VSCode and Hosting** 2 | 3 |

 

4 | 5 | # WHAT IS GIT? 6 | 7 | - Git is a free and open-source distributed **version control** system designed to handle everything from small to very large projects with speed and efficiency. 8 | 9 | - It is a record-keeping mechanism. If any changes are done then one gets to know who did it and what were the changes. 10 | - It is a client/local storage 11 |

12 | >

What is version control in git?

13 | 14 | - Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later. 15 | 16 |

 

17 | 18 | # HOW DOES GIT WORK? 19 | 20 | With Git, a developer can have a full history of their code repository locally. 21 | 22 | Traditionally, a Git workflow will involve the following steps: 23 | 1. Creating a repository 24 | 2. Adding files to your repository 25 | 3. Making changes in the files 26 | 4. Saving those changes with good commit messages so that the history of the entire code can be tracked. 27 | 5. Pushing your changes to the main branch 28 |

29 | >

Why do we have to push the changes?

30 | 31 | - All the changes that you did until now were being saved locally. But your computer might crash and you might lose all these changes. We push the changes so that the code will be available on the cloud and we can share and collaborate with others. 32 | 33 |

 

34 | 35 | # WHAT IS GITHUB? 36 | - GitHub is a web-based interface that uses Git, the open-source version control software that lets multiple people make separate changes to web pages at the same time. 37 |

38 | 39 | >

Difference between Git and GitHub:

40 | * Git is a local change tracking mechanism whereas GitHub is a cloud storage & allows collaboration. 41 |

42 | >

Why GitHub?

43 | - allows real-time collaboration 44 | - it encourages teams to work together to build and edit their site content 45 |

 

46 | 47 | # HOW DOES GITHUB WORK? 48 | 49 | If you don't need to work with files locally, GitHub lets you complete many Git-related actions directly in the browser, including : 50 | 51 | >

Creating a repository

52 | - You can store a variety of projects in GitHub repositories. While creating a new repository add a name without any space and a 53 | small description of what is present in the repository. 54 | - Whenever a new repository is created, a .gitattributes file is automatically generated. It is a hidden file used by the Github desktop to do checks. 55 | 56 | >

Cloning a repository

57 | - When you want to make changes to a repository, you can clone it and work in that repository on your local machine 58 | >

Forking a repository

59 | - you can fork a repository to create a copy of the repository and make changes without 60 | affecting the original repository. 61 | 62 | >

Being social

63 | - You can interact with people, repositories, and organizations on GitHub. See what others are working on and who they're connecting with from your dashboard. 64 | 65 |

 

66 | 67 | # KNOWING HOW A DEV IN A TEAM WORKS? 68 | 69 | 70 | When working in a team, you can work in different branches. 71 | >

Branching

72 | - Use a branch to isolate development work without affecting other branches in the repository. Each repository has one default branch and can have multiple other branches 73 | >

Pull requests

74 | - Let you tell others about changes you've pushed to a branch in a repository on GitHub. Once a pull request is opened, you can discuss and review the potential changes with collaborators and add follow-up commits before your changes are merged into the base(main) branch. If you're working in the shared repository model, it is advisable to use a separate branch for your pull request. 75 | >

Pull origin

76 | - When you want to make changes in the repository, always remember to pull origin to have all the changes on your local machine. Changes are pulled from server to client. 77 | >

Push origin

78 | - When you are done making changes locally u need to push them so that everyone in the team can view your work. Changes are pushed from client to server. 79 |

 

80 | 81 | # ALL ABOUT COMMITS! 82 | 83 | >

What is commit?

84 | - change and save (in simple terms) 85 | - In Git, a commit is a snapshot of your repository at a specific point in time. 86 |

87 | >

Types of Commit:

88 | 1. feat: The new feature you're adding to a particular application 89 | 2. fix: A bug fix 90 | 3. style: Feature and updates related to **styling** 91 | 4. refactor: Refactoring a specific section of the codebase 92 | 5. test: Everything related to testing 93 | 6. docs: Everything related to documentation 94 | 7. chore: Regular code maintenance. 95 |

96 | >

What is a good commit message?

97 | - Specify the type of commit 98 | - Separate the subject from the body with a blank line 99 | - Your commit message should not contain any whitespace errors 100 | - Remove unnecessary punctuation marks 101 | - Do not end the subject line with a period 102 | - Capitalize the subject line and each paragraph 103 | - Use the imperative mood in the subject line 104 | - Use the body to explain what changes you have made and why you made them. 105 | - Do not assume the reviewer understands what the original problem was, ensure you add it. 106 | - Do not think your code is self-explanatory 107 | - Follow the commit convention defined by your team 108 |

109 | >

Reverting a commit

110 | - The git revert command is used for undoing changes to a repository's commit history. 111 | _(just like undo)_ 112 |

 

113 | 114 | # HOW DOES THE INTERNET WORK? 115 | >

Example

116 | 117 | - When you type the name of a website, the browser goes and asks the server if it has this website. 118 | - There are 2 types of servers involved here:
119 | server 1 - knows where the website is/tells address of the website
120 | server 2 - the one who hosts the website.
121 | server 2 then gives the information to server 1 which further gives it to the browser and then the browser downloads it for you. 122 |

 

123 | 124 | # WHAT IS HOSTING? 125 | Web hosting is an online service that allows you to publish your website on the internet. 126 | Anyone who has access to the internet has access to your website 127 | 128 | _Not hosting a good app is like baking a cake, decorating it, but not eating_ :( 129 |

 

130 | 131 | # HOW TO HOST YOUR WEBSITE FOR FREE? 132 | _Now, let's enjoy the cake!!!!_ 133 | 134 | There are many platforms to host your website for free like Vercel, Netlify, GitHub Pages, Heroku, etc. 135 | 136 | 137 | Netlify has GitHub integration and is very simple to use. 138 | 139 | >

How to use netlify?

140 | - sign up to netlify using your GitHub login 141 | - Select a new site from a repository 142 | - Select your GitHub repository 143 | - And your website will get deployed 144 | - you can even edit the domain name 145 |

146 | >

What is continuous deployment?

147 | - Every time you change something on the website and push it on GitHub it will be published automatically 148 | on netlify. 149 |

150 | 151 | _Some things to remember:_ 152 | - main file should be index.html otherwise netlify won't deploy 153 | - netlify deploys only from the main branch 154 | 155 |

 

156 | 157 | # GETTING FAMILIAR WITH VSCODE 158 | An IDE (integrated development environment) made by Microsoft for Windows, Linux, and macOS. 159 | >Makes life easier with its ample amount of extensions 160 | 161 | A few examples:
162 | - Live Server - Launch a development local Server with live reload feature for static & dynamic pages.
163 | Know more 164 | - Prettier - Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
Know more 165 |

166 | >

Integration of github (connects with github):

167 | * Add a GitHub account to sign in to Visual Studio Code. 168 | * Initialize a Git repository and push it to GitHub by using Visual Studio Code 169 | * Make and push commits to your remote branch using Visual Studio Code 170 | 171 | _Right from creating a repo to pushing it, all can be done in this space!!!!_ 172 |

173 | >

Some shortcuts to save time

174 | 175 | - Show and hide terminal: ctrl + ` 176 | - Show and hide sidebar: ctrl + b 177 | - Open any file: ctrl + p 178 | - Access all available commands based on your current context : ctrl+shift + p 179 | - Jump to symbols: ctrl + p and then type '@symbol' 180 | - Jump to line : ctrl + p and then type ' : line-number ' 181 | - Toggle wrap: alt+z 182 | - Code formatting: alt + shift + f 183 | 184 |

 

185 | 186 | ***Know more about how to open PR's in a repo which you don't own*** 👇
187 | https://youtu.be/jUxy4WNdc0s 188 | 189 | 190 | -------------------------------------------------------------------------------- /lecture-03-getting-started-with-html5/README.md: -------------------------------------------------------------------------------- 1 | # **Getting started with HTML5** 2 | In this document, along with the concepts, we will also address some keywords used in HTML. 3 | ## Introduction to HTML5 4 | ### [**HTML**](https://developer.mozilla.org/en-US/docs/Web/HTML) stands for **HyperText Markup Language**. It allows the modification and adjustments of the appearance of web pages. It is responsible for the layout the structure of the web page. 5 | 6 | - Here, **HyperText** means a text which contains links to other texts and **Markup Language** is a computer language that uses tags to define elements within a document. 7 | 8 | ***HTML and CSS are not programming, they are more about using high-level tokens used to show that how the page should look like*** 9 | 10 | ## Semantic HTML 11 | - In programming, **Semantic** refers to the *meaning* of the code. It tells that what is the purpose of this piece of code 12 | - Eg. `

` tag is used to write the main heading of the webpage 13 | So the data are written within this tag then it is understood that it is the main title. 14 | - But in the case of `
`, it is used to wrap flow content. It does not affect the content. It is a **non-Semantic** tag. 15 | 16 | 17 | ## HTML **`` tag** vs **`` tag** 18 | - In the `` tag we mention the code which is not to be displayed on the web page. It includes information about the page, **metadata** (data about data), and how to process it. It is the first section of the HTML document 19 | - In the `` to `
` -- **heading tags**
29 | These tags are used to wrap headings according to their priorities. 30 | - eg. The largest heading will be written within the `

` tag and the smallest heading will be written within `

` tag

31 | 32 | - `

` -- **paragraph tag**
33 | It defines a paragraph of text

34 | 35 | - `` -- **strong tag**
36 | It indicates the browser that the wrapped content is to be strongly emphasized, hence, changes the font-weight of the wrapped text to **bold**

37 | 38 | - `` -- **i tag**
39 | It changes the font-style of the wrapped text to *italics*

40 | 41 | - `` -- **small tag**
42 | It changes the font size of the wrapped text to a relatively smaller size

43 | 44 | 45 | 46 | ### Container 47 | - The Container is used for storing a group of inter-related content of the document which shares the same background color, font color, font size, font family, etc. 48 | - Container is a space that doesn’t have a meaning 49 | 50 | 51 | 52 | 53 | ### Links 54 | - Anything that connects us to a different page is a link and the web browser has many links. 55 | - We use anchor tag and href attribute for specifying link
56 | ``` 57 | primary link 58 | ``` 59 | - Two types of links: 60 | - Primary link -> important link that we want user to click. 61 | - Secondary link -> not so important link that user can click or not.

62 | 63 | 64 | ### Inline Element Vs Block Element 65 | - In Html, we lay bricks .i.e. we sequentially write the code. 66 | - Block Element - The element/tag which occupies whole row is called as block element. 67 | - Example: `

,

` 68 | - Inline Element - The element/tag which occupies only the space required by the content is called as an inline element. 69 | - Example: ` , `

70 | 71 | 72 | ### Lists 73 | - HTML Lists are used to specify lists of information. All lists may contain one or more list elements. 74 | - There are three different types of HTML lists. 75 | 1. unordered list
76 | The `

    ` tag defines an unordered (bulleted) list. 77 | ``` 78 |
      79 |
    • Item One
      • 80 |
    • Item Two
      • 81 |
    • Item Three
      • 82 |
    83 | ``` 84 | 85 | 2. unordered inline
    86 | The `display` style of the unordered list items is changed to inline 87 | ``` 88 |
      89 |
    • Inline Item One
      • 90 |
    • Inline Item Two
      • 91 |
    • Inline Item Three
      • 92 |
    93 | ``` 94 | 95 | 3. reverse ordered
    96 | The list is an ordered list but displayed in a reverse manner by adding the attribute `reversed` 97 | ``` 98 |
      99 |
    1. Item One
      2. 100 |
    2. Item Two
      3. 101 |
    3. Item Three
      4. 102 |
    103 | ``` 104 | 105 | 106 | ### Nav 107 | - It is a navigation component from where we can navigate to other pages of a website. 108 | - We use the `

191 | 192 | 193 |

194 | 195 | >

Why does React need this key prop? 🔑

196 | 197 | - Keys help React identify which items have changed, are added, or are removed. 198 | - Keys should be given to the elements inside the array to give the elements a stable identity.
199 | 200 |
201 | _Resource:_ 202 | https://medium.com/swlh/understanding-the-importance-of-the-key-prop-in-react-f2b92ce65f45 203 | 204 | >

Map function

205 | 206 | - The map() method creates a new array with the results of calling a function for every array element. 207 | - The map() method calls the provided function once for each element in an array, in order. 208 | - map() does not execute the function for empty elements. 209 | - map() does not change the original array. 210 |

211 | 212 | 213 | 214 |

 

215 | 216 | # Arrow functions 217 | 218 | Arrow functions were introduced in ES6. 219 | Arrow functions allow us to write shorter function syntax: 220 | 221 | Normal Function: 222 | 223 | 
224 | hello = function() {
225 |   return "Hello World!";
226 | }
227 |
228 | 229 | Arrow Function:: 230 | 231 | 
232 | hello = () => {
233 |   return "Hello World!";
234 | }
235 |
236 | 237 | It gets shorter! If the function has only one statement, and the statement returns a value, you can remove the brackets and the return keyword: 238 | 239 | Example: 240 | 
241 | hello = () => "Hello World!";
242 |
243 | 244 | If you have parameters, you pass them inside the parentheses: 245 | Example: 246 | 247 | 
248 | hello = (val) => "Hello " + val;
249 |
250 | 251 | In fact, if you have only one parameter, you can skip the parentheses as well: 252 | Example: 253 | 254 | 
255 | hello = val => "Hello " + val;
256 |
257 | 258 |

 

259 | 260 | # Know more: 261 | 262 | ReactJs 263 | 264 | Object.keys() 265 | 266 | -------------------------------------------------------------------------------- /lecture-06-introduction-to-reactjs-library/images/impvsdec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/horsemaker/neogcamp-levelZero-only-concepts/eded709eceb661b22074060d590cd83d8afefa93/lecture-06-introduction-to-reactjs-library/images/impvsdec.png -------------------------------------------------------------------------------- /lecture-06-introduction-to-reactjs-library/images/jsx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/horsemaker/neogcamp-levelZero-only-concepts/eded709eceb661b22074060d590cd83d8afefa93/lecture-06-introduction-to-reactjs-library/images/jsx.png -------------------------------------------------------------------------------- /lecture-06-introduction-to-reactjs-library/images/keyprop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/horsemaker/neogcamp-levelZero-only-concepts/eded709eceb661b22074060d590cd83d8afefa93/lecture-06-introduction-to-reactjs-library/images/keyprop.png -------------------------------------------------------------------------------- /lecture-06-introduction-to-reactjs-library/images/keypropsoln.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/horsemaker/neogcamp-levelZero-only-concepts/eded709eceb661b22074060d590cd83d8afefa93/lecture-06-introduction-to-reactjs-library/images/keypropsoln.png -------------------------------------------------------------------------------- /lecture-06-introduction-to-reactjs-library/images/map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/horsemaker/neogcamp-levelZero-only-concepts/eded709eceb661b22074060d590cd83d8afefa93/lecture-06-introduction-to-reactjs-library/images/map.png -------------------------------------------------------------------------------- /lecture-06-introduction-to-reactjs-library/images/onchange.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/horsemaker/neogcamp-levelZero-only-concepts/eded709eceb661b22074060d590cd83d8afefa93/lecture-06-introduction-to-reactjs-library/images/onchange.png -------------------------------------------------------------------------------- /lecture-06-introduction-to-reactjs-library/images/onclick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/horsemaker/neogcamp-levelZero-only-concepts/eded709eceb661b22074060d590cd83d8afefa93/lecture-06-introduction-to-reactjs-library/images/onclick.png -------------------------------------------------------------------------------- /lecture-06-introduction-to-reactjs-library/images/useState.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/horsemaker/neogcamp-levelZero-only-concepts/eded709eceb661b22074060d590cd83d8afefa93/lecture-06-introduction-to-reactjs-library/images/useState.png -------------------------------------------------------------------------------- /lecture-06-introduction-to-reactjs-library/images/viser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/horsemaker/neogcamp-levelZero-only-concepts/eded709eceb661b22074060d590cd83d8afefa93/lecture-06-introduction-to-reactjs-library/images/viser.png -------------------------------------------------------------------------------- /lecture-07-build-your-cash-register/README.md: -------------------------------------------------------------------------------- 1 | # Mark 10: Build Your Own Cash Register 2 | 3 | 4 | ### What is the purpose of `