├── fp ├── meta.txt ├── data.txt ├── package.json ├── zip.py ├── .gitignore ├── WhyMayBeFunctor.html ├── Once.html ├── HeadTail.html ├── Zip.html ├── ImperativeErrorHandlingProb.html ├── Curry.html ├── MathFunction.html ├── Otherwise.html ├── Unary.html ├── Monad.html ├── RamdaNode.js ├── Ramda_1.html ├── WhyApplicative.html ├── RamdaMethod2.html ├── MonadProblem.html ├── TopKFrequentRamda2.html ├── RealWorldHOF.html ├── ValidationWithFP.html ├── FunctionalErrorHandling.html ├── RamdaMethod.html └── Identity.html ├── chapter13 ├── filename.txt ├── PromiseReadFile.js ├── PromiseErrorHandling.js ├── ReadFile.js ├── ReadFilePromise.js ├── ReadFileCallBack.js ├── WhyCallBack.js ├── AsyncRead.js ├── PromiseSettle.html ├── ReadSync.js ├── ReadTwoFilePromise ├── Promise2.html ├── ForAwait.html ├── AsyncAwait.html ├── HowAsync.html └── Promise.html ├── backend ├── public │ ├── images │ │ └── download.txt │ └── stylesheets │ │ └── style.css ├── .DS_Store ├── config │ ├── database.js │ └── Config.js ├── views │ ├── index.pug │ ├── error.pug │ └── layout.pug ├── .idea │ ├── .gitignore │ ├── vcs.xml │ ├── modules.xml │ └── backend.iml ├── routes │ ├── index.js │ ├── users.js │ ├── movies.js │ ├── reviews.js │ └── todos.js ├── model │ ├── ToDo.js │ ├── user.js │ ├── Review.js │ └── Movie.js └── package.json ├── helloWorld.js ├── demo.js ├── chapter15 ├── script3.js ├── script1.js ├── worker.js ├── XSS.html ├── Clock.html ├── fworker.js ├── Preselected.html ├── Worker.html ├── DOMAPI.html ├── CSS.html ├── apicall.js ├── PseudoSelector.html ├── Storage.html ├── Location.html ├── PreventDefault.html ├── LiveDOM.html └── Traversal.html ├── demo.ts ├── chapter8 ├── swap.py ├── FunctionCon.html ├── WhyNameSpace.html ├── Spread.html ├── multiple_return.go ├── ObjectDestr.html ├── Nested.html ├── Property.html ├── FunctionAsClass.html ├── Closure.html ├── ArrayDestructuring.html ├── WhyFunction.html ├── TypeCheck.html ├── Arguments.html ├── Keys.html ├── MultipleReturn.html ├── ClosureAsObject.html ├── Method.html ├── CallApplyBind.html ├── Optional.html ├── ArrowFunction.html └── FunctionValue.html ├── .DS_Store ├── StaticType ├── chapter10 ├── use_module.js ├── node_m.js ├── es6_m.js ├── UseEs6.html ├── UseModule.html └── Module.js ├── frontend ├── src │ ├── components │ │ ├── HelloWorld.css │ │ ├── PageComponent.css │ │ ├── GrayBorder.css │ │ ├── hook │ │ │ ├── Transition.css │ │ │ ├── fakeName.js │ │ │ ├── IdDemo.js │ │ │ ├── ExternalStore.js │ │ │ ├── CustomInput.js │ │ │ ├── todoStore.js │ │ │ ├── LayoutEffectDemo.js │ │ │ ├── RefCounterProblem.js │ │ │ ├── FocusDemo.js │ │ │ └── RefCounter.js │ │ ├── pattern │ │ │ ├── hoc │ │ │ │ ├── Border.css │ │ │ │ ├── Border.js │ │ │ │ ├── withHover.js │ │ │ │ ├── withLoader.js │ │ │ │ ├── ToDoWithFetchUrl.js │ │ │ │ ├── useFetchUrl.js │ │ │ │ └── useHover.js │ │ │ └── render-property │ │ │ │ └── MouseTracker.css │ │ ├── context │ │ │ ├── ContextData.js │ │ │ └── reducerWithContext │ │ │ │ └── ToDoContext.js │ │ ├── class-component.css │ │ ├── JsxChildren.js │ │ ├── RenderWithCondition.js │ │ ├── GrayBorder.js │ │ ├── FuncGreeting.js │ │ ├── classedbased │ │ │ ├── BugComponent.js │ │ │ ├── Greeting.js │ │ │ └── LifeCycleWrapper.js │ │ ├── ClassComponent.js │ │ ├── RepeatDemo.js │ │ ├── portal │ │ │ └── MyModal.css │ │ ├── stateful │ │ │ ├── ReRenderIssue.js │ │ │ ├── CounterAlert.js │ │ │ └── CounterTwo.js │ │ ├── interaction │ │ │ └── EventDemo.js │ │ ├── Tab.css │ │ ├── FlushSync.js │ │ ├── effect │ │ │ └── ChatRoom.js │ │ ├── ConditionalRendering.js │ │ ├── Table.js │ │ ├── JsxProperty.js │ │ ├── HelloWorld.js │ │ └── thirdparty │ │ │ └── DatePicker.js │ ├── setupTests.js │ ├── routes │ │ ├── Destroy.js │ │ └── Index.js │ ├── App.test.js │ ├── index.css │ ├── reportWebVitals.js │ └── pages │ │ └── ErrorPage.js ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ └── manifest.json └── .gitignore ├── frontend-redux-typescript ├── src │ ├── react-app-env.d.ts │ ├── setting │ │ └── API.ts │ ├── features │ │ ├── reviews │ │ │ ├── Review.css │ │ │ └── reviewApi.ts │ │ ├── todo │ │ │ ├── Todo.css │ │ │ └── todoAPI.ts │ │ ├── counter │ │ │ └── counterAPI.ts │ │ ├── movies │ │ │ ├── movieApi.ts │ │ │ ├── Movie.css │ │ │ └── MovieListUI.tsx │ │ └── auth │ │ │ └── authApi.ts │ ├── page │ │ ├── HomePage.tsx │ │ ├── ToDoPage.tsx │ │ ├── MoviePage.tsx │ │ └── LogoutPage.tsx │ ├── components │ │ ├── HelloWorld.tsx │ │ └── PrivateRoute.tsx │ ├── setupTests.ts │ ├── app │ │ └── hooks.ts │ ├── index.css │ ├── services │ │ └── authService.ts │ ├── App.test.tsx │ ├── reportWebVitals.ts │ └── App.css ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ └── manifest.json ├── .idea │ ├── .gitignore │ ├── vcs.xml │ ├── inspectionProfiles │ │ └── Project_Default.xml │ ├── modules.xml │ └── frontend-redux-typescript.iml ├── .gitignore └── tsconfig.json ├── py_byte_code.py ├── HelloWorld.class ├── chapter2 ├── .DS_Store ├── literal.js ├── type.js ├── identifier.js ├── case_sen.js ├── arithmetic.js └── float_problem.js ├── typescript ├── hello.js ├── OptionalInheritance.ts ├── enum.ts ├── optional_par.ts ├── PrivateField.ts ├── tuple.js ├── intersection.ts ├── any_function.ts ├── object_type.js ├── ClassIndexSignature.ts ├── FirstClassClass.ts ├── function_type_2.ts ├── objects.ts ├── assign.ts ├── RuntimeThis.ts ├── Sonar.ts ├── rest_parameter.ts ├── this_in_function.ts ├── types.ts ├── index_signature.ts ├── typegurad.ts ├── readonly_Arr.ts ├── hello.ts ├── function_type.ts ├── Abstract.ts ├── ParamProperty.ts ├── JSProblem.js ├── object_type.ts ├── push_down_type.ts ├── tuple.ts ├── CallOrConstruct.ts ├── GetterSetter.ts ├── interfaces.ts ├── construct_singature.ts ├── functions.ts ├── ArrowFunction.ts ├── Initialization.ts ├── WhyGeneric.ts ├── union.ts ├── intersect_type.ts ├── call_signature.ts ├── literal_type.ts ├── constraint.js ├── type_alias.ts ├── Visibility.ts ├── constraint.ts ├── why_gen.ts ├── Static.ts └── ThisTypeGuard.ts ├── chapter3 ├── parallel.py ├── StaticType.java ├── ToNumber.html ├── DateTime.html ├── Gloabal.html ├── Equality.html ├── Symbol.html ├── number_liter.js ├── multi_return.go ├── TypeConversion.html ├── DynamicType.html ├── ObjectDestruct.html ├── Swap.html ├── Variable.html ├── math.js ├── ArrayToPrimitive.html ├── NaN.js ├── ObjectToType.html ├── boolean.html ├── Resolution.html ├── Template.html ├── NullUndefined.html ├── GlobalScope.html ├── Object_StringPritmitive.html ├── NumberToBoolean.html ├── str_demo.html ├── Destructuring.html ├── ObjectToPrimitive.html ├── StringToNumber.html ├── string_method.html ├── VarLetConst.html └── AddTwoObject.html ├── HelloWorld.html ├── chapter4 ├── Comma.html ├── Function.html ├── Expression.html ├── Equality.html ├── Operator.html ├── PlusPlusOp.html ├── Comparison.html ├── Conditional.html ├── unary-arthmetic.html ├── Delete.html ├── in.html ├── Assignment.html ├── CompoundAssignment.html ├── Arithmetic.html ├── Bitwise.html └── Logical.html ├── dynamic.js ├── HelloWorld.java ├── dyanmic.html ├── chapter11 ├── URL.html ├── ConsoleTime.html ├── MapKey.html ├── TypedArray.html ├── Allocation.html ├── Reg_5.html ├── EventLoop.html ├── Error.html ├── Reg_Email.html ├── DateManipulation.html ├── DateTime.html ├── Internationalization.html ├── SetTImeout.html ├── CompareString.html ├── Reg_4.html ├── JSON_Parse.html ├── Reg_3.html ├── FormatParseDate.html ├── DeepClone.html └── Timer.html ├── chapter5 ├── UseStrict.html ├── go_to_demo.go ├── Continue.html ├── While.html ├── Compound.html ├── ElseIf.html ├── Yield.html ├── SetMap.html ├── Return.html ├── ExpressionStatement.html ├── NestedLoop.html ├── ForLoop.html ├── ForEachKeyValue.html ├── Break.html ├── WhyLoop.html ├── Throw2.html ├── Switch.html ├── ForEach.html └── Exam.html ├── chapter6 ├── Spread.html ├── CreateTwo.html ├── Object2.html ├── ShortHand.html ├── ObjectDemo.html ├── Create.html ├── Query.html ├── Prototype.html ├── Serialization.html ├── Assign.html ├── GetterSetter.html └── Clone.html ├── StaticType.cpp ├── chapter7 ├── Method3.html ├── ArrayCon.html ├── Sparse.html ├── ArrayFrom.html ├── Method4.html ├── ArrayMethod6.html ├── ForEach.html ├── WhyArray.html └── MultiDimensional.html ├── MaxElement.html ├── chapter9 ├── Abstract.html ├── ClassExpression.html ├── AddMethod.html ├── Private.html └── BeforeClass.html ├── chapter12 ├── Iterator.html ├── Tree.html ├── Generator3.html ├── Generator2.html └── Generator.html └── chapter14 ├── Seal.html ├── Validation.html └── PropertyAttribute.html /fp/meta.txt: -------------------------------------------------------------------------------- 1 | data.txt -------------------------------------------------------------------------------- /chapter13/filename.txt: -------------------------------------------------------------------------------- 1 | hello.txt -------------------------------------------------------------------------------- /backend/public/images/download.txt: -------------------------------------------------------------------------------- 1 | Data -------------------------------------------------------------------------------- /fp/data.txt: -------------------------------------------------------------------------------- 1 | Some data from data.txt -------------------------------------------------------------------------------- /helloWorld.js: -------------------------------------------------------------------------------- 1 | console.log("Hello World"); -------------------------------------------------------------------------------- /demo.js: -------------------------------------------------------------------------------- 1 | var a = 10; 2 | console.log("A is ", a); 3 | -------------------------------------------------------------------------------- /chapter15/script3.js: -------------------------------------------------------------------------------- 1 | console.log('Script 3 run by async'); -------------------------------------------------------------------------------- /demo.ts: -------------------------------------------------------------------------------- 1 | let a :number = 10; 2 | console.log("A is ",a); -------------------------------------------------------------------------------- /chapter8/swap.py: -------------------------------------------------------------------------------- 1 | i = 10 2 | j = 20 3 | j,i = i,j 4 | print("I ",i, " J ",j) -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrthetkhine/TuringReact5thBatch/HEAD/.DS_Store -------------------------------------------------------------------------------- /StaticType: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrthetkhine/TuringReact5thBatch/HEAD/StaticType -------------------------------------------------------------------------------- /chapter10/use_module.js: -------------------------------------------------------------------------------- 1 | const our_module = require('./node_m.js'); 2 | our_module.api(); -------------------------------------------------------------------------------- /fp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "ramda": "^0.28.0" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /frontend/src/components/HelloWorld.css: -------------------------------------------------------------------------------- 1 | .avatar 2 | { 3 | border-radius: 50%; 4 | } -------------------------------------------------------------------------------- /frontend/src/components/PageComponent.css: -------------------------------------------------------------------------------- 1 | .avatar 2 | { 3 | border-radius: 50%; 4 | } -------------------------------------------------------------------------------- /frontend-redux-typescript/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /frontend/src/components/GrayBorder.css: -------------------------------------------------------------------------------- 1 | .gray-border 2 | { 3 | border:1px solid gray; 4 | } -------------------------------------------------------------------------------- /chapter10/node_m.js: -------------------------------------------------------------------------------- 1 | function api() 2 | { 3 | console.log('Api'); 4 | } 5 | exports.api = api; -------------------------------------------------------------------------------- /frontend-redux-typescript/src/setting/API.ts: -------------------------------------------------------------------------------- 1 | export const API_URL = "http://localhost:3000/api"; -------------------------------------------------------------------------------- /py_byte_code.py: -------------------------------------------------------------------------------- 1 | import dis 2 | 3 | def hello(msg): 4 | print("Hello ",msg) 5 | dis.dis(hello) -------------------------------------------------------------------------------- /HelloWorld.class: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrthetkhine/TuringReact5thBatch/HEAD/HelloWorld.class -------------------------------------------------------------------------------- /backend/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrthetkhine/TuringReact5thBatch/HEAD/backend/.DS_Store -------------------------------------------------------------------------------- /chapter2/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrthetkhine/TuringReact5thBatch/HEAD/chapter2/.DS_Store -------------------------------------------------------------------------------- /frontend-redux-typescript/src/features/reviews/Review.css: -------------------------------------------------------------------------------- 1 | .review 2 | { 3 | padding-top: 10px; 4 | } -------------------------------------------------------------------------------- /typescript/hello.js: -------------------------------------------------------------------------------- 1 | var str = 10; 2 | var result = str * 3; 3 | console.log('Result ', result); 4 | -------------------------------------------------------------------------------- /backend/config/database.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | db: 'mongodb://0.0.0.0:27017/react_5th_batch' 3 | } -------------------------------------------------------------------------------- /frontend/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /frontend/src/components/hook/Transition.css: -------------------------------------------------------------------------------- 1 | .highlight 2 | { 3 | color:green; 4 | font-weight: bold; 5 | } -------------------------------------------------------------------------------- /chapter10/es6_m.js: -------------------------------------------------------------------------------- 1 | console.log('ES6 module loaded'); 2 | export function api() 3 | { 4 | console.log('API'); 5 | } -------------------------------------------------------------------------------- /frontend/src/components/pattern/hoc/Border.css: -------------------------------------------------------------------------------- 1 | .border 2 | { 3 | padding:10px; 4 | border:1px solid gray; 5 | } -------------------------------------------------------------------------------- /frontend/src/components/pattern/render-property/MouseTracker.css: -------------------------------------------------------------------------------- 1 | .mouse-tracker 2 | { 3 | background: gray; 4 | } -------------------------------------------------------------------------------- /backend/views/index.pug: -------------------------------------------------------------------------------- 1 | extends layout 2 | 3 | block content 4 | h1= title 5 | p Welcome to home page #{title} 6 | -------------------------------------------------------------------------------- /frontend-redux-typescript/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /frontend/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrthetkhine/TuringReact5thBatch/HEAD/frontend/public/favicon.ico -------------------------------------------------------------------------------- /frontend/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrthetkhine/TuringReact5thBatch/HEAD/frontend/public/logo192.png -------------------------------------------------------------------------------- /frontend/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrthetkhine/TuringReact5thBatch/HEAD/frontend/public/logo512.png -------------------------------------------------------------------------------- /chapter3/parallel.py: -------------------------------------------------------------------------------- 1 | a = 10 2 | b = 20 3 | 4 | #temp = a 5 | #a = b 6 | #b = temp 7 | b,a = a,b 8 | print("A ",a , " B ",b) -------------------------------------------------------------------------------- /backend/views/error.pug: -------------------------------------------------------------------------------- 1 | extends layout 2 | 3 | block content 4 | h1= message 5 | h2= error.status 6 | pre #{error.stack} 7 | -------------------------------------------------------------------------------- /chapter15/script1.js: -------------------------------------------------------------------------------- 1 | window.something= 'Update by script 1'; 2 | console.log('Script 1'); 3 | throw new Error('Error on script1'); -------------------------------------------------------------------------------- /chapter2/literal.js: -------------------------------------------------------------------------------- 1 | let a = 2;//number literal 2 | a = "2"; //string literal 3 | a = '2'; 4 | a = `2`; 5 | a = false; //boolean literal -------------------------------------------------------------------------------- /frontend/src/components/context/ContextData.js: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | 3 | export const ContextData = createContext(1); -------------------------------------------------------------------------------- /backend/.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | # Editor-based HTTP Client requests 5 | /httpRequests/ 6 | -------------------------------------------------------------------------------- /frontend-redux-typescript/src/features/todo/Todo.css: -------------------------------------------------------------------------------- 1 | .todo-item 2 | { 3 | 4 | border-radius: 10px; 5 | margin-bottom: 10px; 6 | 7 | } -------------------------------------------------------------------------------- /fp/zip.py: -------------------------------------------------------------------------------- 1 | a = [1,2,3] 2 | b = ["one","two"] 3 | result = zip(a,b) 4 | print("Result ",result) 5 | for item in result: 6 | print("Item ",item) -------------------------------------------------------------------------------- /backend/config/Config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config:{ 3 | TOKEN_SECRET : "!&#^&!^#!722!@@(!" //should be store in env file, 4 | } 5 | } -------------------------------------------------------------------------------- /frontend/src/components/class-component.css: -------------------------------------------------------------------------------- 1 | .class-component 2 | { 3 | background: gray; 4 | min-height: 100px; 5 | min-width: 100px; 6 | } -------------------------------------------------------------------------------- /HelloWorld.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | -------------------------------------------------------------------------------- /chapter13/PromiseReadFile.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | fs.promises.readFile('hello.txt') 3 | .then(data=>console.log(data.toString().length)); -------------------------------------------------------------------------------- /frontend-redux-typescript/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrthetkhine/TuringReact5thBatch/HEAD/frontend-redux-typescript/public/favicon.ico -------------------------------------------------------------------------------- /frontend-redux-typescript/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrthetkhine/TuringReact5thBatch/HEAD/frontend-redux-typescript/public/logo192.png -------------------------------------------------------------------------------- /frontend-redux-typescript/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrthetkhine/TuringReact5thBatch/HEAD/frontend-redux-typescript/public/logo512.png -------------------------------------------------------------------------------- /frontend-redux-typescript/src/page/HomePage.tsx: -------------------------------------------------------------------------------- 1 | export default function HomePage() 2 | { 3 | return (
4 | Home page 5 |
); 6 | } -------------------------------------------------------------------------------- /frontend-redux-typescript/.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | # Editor-based HTTP Client requests 5 | /httpRequests/ 6 | -------------------------------------------------------------------------------- /chapter3/StaticType.java: -------------------------------------------------------------------------------- 1 | class StaticType 2 | { 3 | public static void main(String[]args) 4 | { 5 | int a = 10; 6 | a = "Hello"; 7 | } 8 | } -------------------------------------------------------------------------------- /frontend-redux-typescript/src/features/todo/todoAPI.ts: -------------------------------------------------------------------------------- 1 | export function apiLoadAllTodo() 2 | { 3 | return fetch('https://jsonplaceholder.typicode.com/todos'); 4 | } -------------------------------------------------------------------------------- /chapter2/type.js: -------------------------------------------------------------------------------- 1 | let a = 2; 2 | let obj = { 3 | name : "TK", 4 | age : 38 5 | }; 6 | console.log("Type of a ",typeof(a)); 7 | console.log("Type of Obj ",typeof(obj)); -------------------------------------------------------------------------------- /typescript/OptionalInheritance.ts: -------------------------------------------------------------------------------- 1 | interface A { 2 | x: number; 3 | y?: number; 4 | } 5 | class C implements A { 6 | x = 0; 7 | } 8 | const c = new C(); 9 | //c.y = 10; -------------------------------------------------------------------------------- /backend/views/layout.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | title= title 5 | link(rel='stylesheet', href='/stylesheets/style.css') 6 | body 7 | block content 8 | -------------------------------------------------------------------------------- /backend/public/stylesheets/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 50px; 3 | font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; 4 | } 5 | 6 | a { 7 | color: #00B7FF; 8 | } 9 | -------------------------------------------------------------------------------- /chapter8/FunctionCon.html: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /frontend/src/components/pattern/hoc/Border.js: -------------------------------------------------------------------------------- 1 | export default function Border({children}) 2 | { 3 | return (
4 | {children} 5 |
); 6 | } -------------------------------------------------------------------------------- /typescript/enum.ts: -------------------------------------------------------------------------------- 1 | enum Direction { 2 | Up = 1, 3 | Down, 4 | Left, 5 | Right, 6 | } 7 | let dir : Direction = Direction.Right; 8 | 9 | console.log('Dir ',dir); 10 | -------------------------------------------------------------------------------- /chapter3/ToNumber.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | -------------------------------------------------------------------------------- /frontend/src/components/JsxChildren.js: -------------------------------------------------------------------------------- 1 | export default function JsxChildren({children}) 2 | { 3 | return (
4 | Jsx Children 5 | {children} 6 |
); 7 | } -------------------------------------------------------------------------------- /typescript/optional_par.ts: -------------------------------------------------------------------------------- 1 | function process2(a:number=1000,b?:number) 2 | { 3 | console.log('A ',a, ' B ',b); 4 | return a; 5 | } 6 | process2(1,2); 7 | process2(100); 8 | process2(); -------------------------------------------------------------------------------- /chapter4/Comma.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | -------------------------------------------------------------------------------- /dynamic.js: -------------------------------------------------------------------------------- 1 | let a = 10; 2 | 3 | console.log("A ",a ,' Type ',typeof(a)); 4 | a = "Hello"; 5 | console.log("A ",a ,' Type ',typeof(a)); 6 | 7 | a = 5/2; 8 | console.log("A ",a ,' Type ',typeof(a)); -------------------------------------------------------------------------------- /frontend/src/components/hook/fakeName.js: -------------------------------------------------------------------------------- 1 | import { faker } from '@faker-js/faker'; 2 | 3 | export const fakeNames = Array.from(Array(30), () => { 4 | return faker.name.findName(); 5 | }); 6 | -------------------------------------------------------------------------------- /typescript/PrivateField.ts: -------------------------------------------------------------------------------- 1 | class Dog { 2 | #barkAmount = 0; 3 | personality = "happy"; 4 | 5 | constructor() {} 6 | } 7 | let d = new Dog(); 8 | //console.log('Truly private ',d.barkAmount); -------------------------------------------------------------------------------- /typescript/tuple.js: -------------------------------------------------------------------------------- 1 | var tuple = ["Hello", 13]; 2 | console.log('Tuple ', tuple[0], ' element 1 ', tuple[1]); 3 | tuple[0] = "Something"; 4 | //tuple[1] = "No"; 5 | console.log('Tuple ', tuple); 6 | -------------------------------------------------------------------------------- /chapter3/DateTime.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | -------------------------------------------------------------------------------- /typescript/intersection.ts: -------------------------------------------------------------------------------- 1 | type P = { 2 | x : number, 3 | y : number 4 | }; 5 | type P3D = P & { z : number}; 6 | let k: P3D = { 7 | x : 10, 8 | y : 200, 9 | z : 300 10 | } -------------------------------------------------------------------------------- /chapter2/identifier.js: -------------------------------------------------------------------------------- 1 | let _$a = 1; 2 | let a2 = 2; 3 | //let a^2 = 2; 4 | //let let; 5 | let ကားခ = 10; 6 | console.log('ကားခ ',ကားခ); 7 | console.log("\u{1F600}") 8 | console.log('\u006a\u006e\u0064\u0069') -------------------------------------------------------------------------------- /HelloWorld.java: -------------------------------------------------------------------------------- 1 | public class HelloWorld 2 | { 3 | public static void main(String[]args) 4 | { 5 | int a = 10; 6 | a = 5/2; 7 | 8 | System.out.println(a); 9 | } 10 | } -------------------------------------------------------------------------------- /dyanmic.html: -------------------------------------------------------------------------------- 1 | 2 | 9 | -------------------------------------------------------------------------------- /frontend-redux-typescript/src/page/ToDoPage.tsx: -------------------------------------------------------------------------------- 1 | import TodoUi from "../features/todo/TodoUi"; 2 | 3 | export default function ToDoPage() 4 | { 5 | return (
6 | 7 |
); 8 | } -------------------------------------------------------------------------------- /chapter11/URL.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | -------------------------------------------------------------------------------- /chapter2/case_sen.js: -------------------------------------------------------------------------------- 1 | let a=10; 2 | 3 | //below line declare a variable 4 | let A = "Helo"; 5 | 6 | /* 7 | This is line 1 8 | another line 9 | 10 | */ 11 | console.log("A ",A); 12 | console.log("a ",a); -------------------------------------------------------------------------------- /chapter3/Gloabal.html: -------------------------------------------------------------------------------- 1 | 2 | 8 | -------------------------------------------------------------------------------- /frontend-redux-typescript/src/components/HelloWorld.tsx: -------------------------------------------------------------------------------- 1 | export default function HelloWorld() 2 | { 3 | let num = 2; 4 | //num = "Hello"; 5 | return (
6 | Hello World {num} 7 |
); 8 | } -------------------------------------------------------------------------------- /chapter15/worker.js: -------------------------------------------------------------------------------- 1 | 2 | onmessage = (event)=>{ 3 | console.log('Event in worker ',event.data); 4 | postMessage("Send back to server "+ (event.data+"").toUpperCase()); 5 | }; 6 | console.log('Worker.js loaded...'); -------------------------------------------------------------------------------- /chapter5/UseStrict.html: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /typescript/any_function.ts: -------------------------------------------------------------------------------- 1 | function execute(f:Function) 2 | { 3 | f(); 4 | } 5 | execute(()=>console.log('Hello')); 6 | 7 | execute(function(a:number) 8 | { 9 | console.log('Another function'); 10 | }); -------------------------------------------------------------------------------- /backend/.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /frontend/src/components/context/reducerWithContext/ToDoContext.js: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | 3 | 4 | export const ToDoItemsContext = createContext([]); 5 | export const ToDoDispatchContext = createContext(null); -------------------------------------------------------------------------------- /typescript/object_type.js: -------------------------------------------------------------------------------- 1 | function greet(person) { 2 | //person.name = "Something"; 3 | return "Hello " + person.name; 4 | } 5 | var result = greet({ 6 | name: 'Tk' 7 | }); 8 | console.log('Result ', result); 9 | -------------------------------------------------------------------------------- /chapter3/Equality.html: -------------------------------------------------------------------------------- 1 | 2 | 8 | -------------------------------------------------------------------------------- /frontend/src/components/RenderWithCondition.js: -------------------------------------------------------------------------------- 1 | export default function RenderWithCondition({flag}) 2 | { 3 | console.log('Flag ',typeof flag); 4 | return flag &&
5 | It render due to flag 6 |
; 7 | } -------------------------------------------------------------------------------- /typescript/ClassIndexSignature.ts: -------------------------------------------------------------------------------- 1 | class MyClass { 2 | [s: string]: boolean | ((s: string) => boolean); 3 | 4 | check(s: string) { 5 | return this[s] as boolean; 6 | } 7 | } 8 | let obj = new MyClass(); 9 | obj['name'] = true; -------------------------------------------------------------------------------- /typescript/FirstClassClass.ts: -------------------------------------------------------------------------------- 1 | const someClass = class { 2 | content: Type; 3 | constructor(value: Type) { 4 | this.content = value; 5 | } 6 | }; 7 | 8 | const m = new someClass("Hello, world"); 9 | console.log('M ',m); -------------------------------------------------------------------------------- /chapter15/XSS.html: -------------------------------------------------------------------------------- 1 | 2 |

Test

3 | 8 | -------------------------------------------------------------------------------- /frontend-redux-typescript/.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chapter3/Symbol.html: -------------------------------------------------------------------------------- 1 | 2 | 9 | -------------------------------------------------------------------------------- /chapter10/UseEs6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 10 | -------------------------------------------------------------------------------- /chapter8/WhyNameSpace.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | -------------------------------------------------------------------------------- /chapter13/PromiseErrorHandling.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | fs.promises.readFile('somethingelse.txt') 3 | .then(data=>console.log('Succes ',data)) 4 | .catch(err=>console.log("Error ",err)) 5 | .finally(()=>console.log("Finally executed")) -------------------------------------------------------------------------------- /chapter3/number_liter.js: -------------------------------------------------------------------------------- 1 | let a = 2; 2 | let b = 0xFF; 3 | console.log("B is ",b); 4 | 5 | b = 0b10; 6 | console.log("B is ",b); 7 | 8 | b = 020; 9 | console.log("B is ",b); 10 | 11 | let c = 0.2; 12 | c = .2; 13 | console.log("C ",c); 14 | 15 | -------------------------------------------------------------------------------- /chapter5/go_to_demo.go: -------------------------------------------------------------------------------- 1 | package main 2 | 3 | import "fmt" 4 | 5 | func main() { 6 | i := 0 7 | loop: 8 | fmt.Println("hello") 9 | goto end 10 | i += 1 11 | if i < 10 { 12 | goto loop 13 | } 14 | end: 15 | fmt.Println("End") 16 | } 17 | -------------------------------------------------------------------------------- /frontend/src/components/GrayBorder.js: -------------------------------------------------------------------------------- 1 | import './GrayBorder.css'; 2 | export default function GrayBorder({children}) 3 | { 4 | console.log("Props ",children[0]); 5 | return (
6 | {children} 7 |
) 8 | } -------------------------------------------------------------------------------- /typescript/function_type_2.ts: -------------------------------------------------------------------------------- 1 | type FnStringVoid = (a:string)=>void; 2 | function greeter(fn: FnStringVoid) { 3 | fn("Hello, World"); 4 | } 5 | 6 | function printToConsole(s: string) { 7 | console.log(s); 8 | } 9 | 10 | greeter(printToConsole); -------------------------------------------------------------------------------- /typescript/objects.ts: -------------------------------------------------------------------------------- 1 | let obj = { 2 | name : 'TK', 3 | age : 38 4 | }; 5 | function display(obj:{ 6 | name:string 7 | }) 8 | { 9 | console.log('Name is ',obj.name); 10 | } 11 | display(obj); 12 | display(display); -------------------------------------------------------------------------------- /chapter10/UseModule.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 11 | -------------------------------------------------------------------------------- /chapter2/arithmetic.js: -------------------------------------------------------------------------------- 1 | let a = 10; 2 | let b = 3; 3 | 4 | console.log("a+b ", a+b); 5 | console.log("a - b ", a-b); 6 | console.log("a*b ", a*b); 7 | console.log("a/b ", a/b); 8 | console.log("a%b ", a%b); 9 | console.log("a**b ", a**b); 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /chapter4/Function.html: -------------------------------------------------------------------------------- 1 | 2 | 12 | -------------------------------------------------------------------------------- /chapter3/multi_return.go: -------------------------------------------------------------------------------- 1 | package main 2 | 3 | import "fmt" 4 | 5 | func vals() (int, int) { 6 | return 3, 7 7 | } 8 | 9 | func main() { 10 | 11 | a, b := vals() 12 | fmt.Println(a) 13 | fmt.Println(b) 14 | 15 | _, c := vals() 16 | fmt.Println(c) 17 | } 18 | -------------------------------------------------------------------------------- /chapter8/Spread.html: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | -------------------------------------------------------------------------------- /chapter8/multiple_return.go: -------------------------------------------------------------------------------- 1 | package main 2 | 3 | import "fmt" 4 | 5 | func vals() (int, int) { 6 | return 3, 7 7 | } 8 | 9 | func main() { 10 | 11 | a, b := vals() 12 | fmt.Println(a) 13 | fmt.Println(b) 14 | 15 | _, c := vals() 16 | fmt.Println(c) 17 | } 18 | -------------------------------------------------------------------------------- /chapter13/ReadFile.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | 3 | console.log('Before file read'); 4 | fs.readFile('./Hello.txt',function(err,data) 5 | { 6 | if(!err) 7 | { 8 | console.log('Data ',data.toString()); 9 | } 10 | }); 11 | console.log('After file read'); -------------------------------------------------------------------------------- /frontend/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /chapter13/ReadFilePromise.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs/promises'); 2 | fs.readFile('hello.txt', 'utf8') 3 | //.then(data=>"File read output "+data) 4 | .then(data=>fs.readFile(data,'utf-8')) 5 | .then(finalContent=> console.log('Final Content ',finalContent.length)) 6 | .catch(console.error); -------------------------------------------------------------------------------- /frontend-redux-typescript/src/features/counter/counterAPI.ts: -------------------------------------------------------------------------------- 1 | // A mock function to mimic making an async request for data 2 | export function fetchCount(amount = 1) { 3 | return new Promise<{ data: number }>((resolve) => 4 | setTimeout(() => resolve({ data: amount }), 500) 5 | ); 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/routes/Destroy.js: -------------------------------------------------------------------------------- 1 | import { redirect } from "react-router-dom"; 2 | import { deleteContact } from "../contact"; 3 | 4 | export async function action({ params }) { 5 | //throw new Error("oh dang!"); 6 | await deleteContact(params.contactId); 7 | return redirect("/"); 8 | } -------------------------------------------------------------------------------- /typescript/assign.ts: -------------------------------------------------------------------------------- 1 | type voidFunc = () => void; 2 | 3 | const f1: voidFunc = () => { 4 | return true; 5 | }; 6 | 7 | const f2: voidFunc = () => true; 8 | 9 | const f3: voidFunc = function () { 10 | return true; 11 | }; 12 | let result = f2(); 13 | console.log('Result ',result); -------------------------------------------------------------------------------- /frontend/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /backend/routes/index.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | 4 | /* GET home page. */ 5 | router.get('/', function(req, res, next) { 6 | console.log('Route /'); 7 | res.render('index', { title: 'Express' }); 8 | }); 9 | 10 | module.exports = router; 11 | -------------------------------------------------------------------------------- /typescript/RuntimeThis.ts: -------------------------------------------------------------------------------- 1 | class MyClass { 2 | name = "MyClass"; 3 | getName() { 4 | return this.name; 5 | } 6 | } 7 | const c = new MyClass(); 8 | const obj = { 9 | name: "obj", 10 | getName: c.getName, 11 | }; 12 | 13 | // Prints "obj", not "MyClass" 14 | console.log(obj.getName()); -------------------------------------------------------------------------------- /typescript/Sonar.ts: -------------------------------------------------------------------------------- 1 | interface Pingable { 2 | ping(): void; 3 | } 4 | 5 | class Sonar implements Pingable { 6 | ping() { 7 | console.log("ping!"); 8 | } 9 | } 10 | /* 11 | class Ball implements Pingable { 12 | 13 | pong() { 14 | console.log("pong!"); 15 | } 16 | } 17 | */ -------------------------------------------------------------------------------- /typescript/rest_parameter.ts: -------------------------------------------------------------------------------- 1 | function multiply(n: number, ...m: number[]) { 2 | return m.map((x) => n * x); 3 | } 4 | const a = multiply(10, 1, 2, 3, 4,4,5,); 5 | console.log('A ',a); 6 | 7 | let arr = [1,2,3]; 8 | let stack:Array = []; 9 | 10 | stack.push(...arr);// stack.push(1,2,3) -------------------------------------------------------------------------------- /typescript/this_in_function.ts: -------------------------------------------------------------------------------- 1 | const user = { 2 | id: 123, 3 | admin: false, 4 | becomeAdmin: function () { 5 | this.admin = true; 6 | }, 7 | display() 8 | { 9 | console.log('Admin ',this.admin, ' Id ',this.id); 10 | } 11 | }; 12 | 13 | user.becomeAdmin(); 14 | user.display(); -------------------------------------------------------------------------------- /typescript/types.ts: -------------------------------------------------------------------------------- 1 | let a:number = 10; 2 | let b:number; 3 | 4 | b = a; 5 | 6 | let flag:boolean; 7 | flag = true; 8 | //flag = '12'; 9 | 10 | let arr: Array = [10,20,30]; 11 | console.log("Arr ",arr[2]); 12 | 13 | let anything: any = false; 14 | anything = "Hello"; 15 | anything = 330; -------------------------------------------------------------------------------- /chapter2/float_problem.js: -------------------------------------------------------------------------------- 1 | let a = 0.3-0.2; 2 | console.log("A is ",a); 3 | 4 | let posZero = 0; 5 | let negZero = -0; 6 | console.log("+0 == -0 ", posZero==negZero) 7 | 8 | let result = 100/posZero; 9 | console.log("Result ",result) 10 | 11 | result = 100/negZero; 12 | console.log("Result ",result) -------------------------------------------------------------------------------- /typescript/index_signature.ts: -------------------------------------------------------------------------------- 1 | interface StringArray { 2 | [index: number]: string; 3 | } 4 | function getStringArray() 5 | { 6 | return ['Hello','Morning'] 7 | } 8 | const myArray: StringArray = getStringArray(); 9 | const secondItem = myArray[1]; 10 | console.log('Second item ',secondItem); -------------------------------------------------------------------------------- /typescript/typegurad.ts: -------------------------------------------------------------------------------- 1 | function display(a: number |string) 2 | { 3 | if(typeof a === 'number') 4 | { 5 | a++; 6 | console.log('A ',a); 7 | } 8 | else 9 | { 10 | console.log('A ',a.toUpperCase()); 11 | } 12 | } 13 | display(12); 14 | display('Hello'); -------------------------------------------------------------------------------- /frontend-redux-typescript/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /backend/.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /frontend-redux-typescript/src/features/movies/movieApi.ts: -------------------------------------------------------------------------------- 1 | import {API_URL} from "../../setting/API"; 2 | import axios from "../../setting/our_axios"; 3 | const API = API_URL+"/movies"; 4 | export function apiGetAllMovie() 5 | { 6 | console.log('API request send to load all movie'); 7 | return axios.get(API); 8 | } -------------------------------------------------------------------------------- /typescript/readonly_Arr.ts: -------------------------------------------------------------------------------- 1 | let k:ReadonlyArray = ["one","two"]; 2 | //k.push('three'); 3 | 4 | let j:any = k; 5 | j.push('Three'); 6 | console.log('J ',j); 7 | 8 | let x: readonly string[] = []; 9 | let y: string[] = []; 10 | 11 | x = ['one','two']; 12 | //x.push('Three'); 13 | //y = x; 14 | x = y; -------------------------------------------------------------------------------- /chapter13/ReadFileCallBack.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | fs.readFile('filename.txt',(err,fileName)=>{ 3 | //console.log('Err ',err); 4 | if(!err) 5 | { 6 | fs.readFile(fileName,(err2,content)=> 7 | { 8 | console.log('Data ',content.length); 9 | }); 10 | } 11 | }) -------------------------------------------------------------------------------- /typescript/hello.ts: -------------------------------------------------------------------------------- 1 | let str = 10; 2 | let result = str * 3; 3 | console.log('Result ',result); 4 | 5 | //result = 'Hello'; 6 | let obj = { 7 | age : 38 8 | }; 9 | console.log('Age ',obj.age); 10 | //obj.another ="Hello"; 11 | 12 | let message = "Hello"; 13 | console.log('ToUpperCase ', message.toUpperCase()); -------------------------------------------------------------------------------- /typescript/function_type.ts: -------------------------------------------------------------------------------- 1 | function add(a:number,b:number) 2 | { 3 | return a+b; 4 | } 5 | function isEven(a : number) 6 | { 7 | return a % 2== 0; 8 | } 9 | let k:(a: number, b: number) => number = add; 10 | //k = isEven; 11 | 12 | type PredicateFun = (a:number) => boolean; 13 | let pred:PredicateFun = isEven; -------------------------------------------------------------------------------- /chapter13/WhyCallBack.js: -------------------------------------------------------------------------------- 1 | function getData(cb) 2 | { 3 | setTimeout(()=>{ 4 | console.log('Get data completed'); 5 | return cb(100); 6 | },1000); 7 | } 8 | console.log('Before get data'); 9 | getData( (value)=>console.log("Result ",value)); 10 | //console.log('Data ',data); 11 | console.log('After get data'); -------------------------------------------------------------------------------- /frontend-redux-typescript/.idea/inspectionProfiles/Project_Default.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | -------------------------------------------------------------------------------- /typescript/Abstract.ts: -------------------------------------------------------------------------------- 1 | abstract class Base { 2 | abstract getName(): string; 3 | 4 | printName() { 5 | console.log("Hello, " + this.getName()); 6 | } 7 | } 8 | class Derived extends Base 9 | { 10 | getName(): string { 11 | return "Derived" 12 | } 13 | } 14 | const b = new Derived(); 15 | b.printName(); -------------------------------------------------------------------------------- /typescript/ParamProperty.ts: -------------------------------------------------------------------------------- 1 | class Params { 2 | constructor( 3 | public readonly x: number, 4 | protected y: number, 5 | private z: number 6 | ) { 7 | // No body necessary 8 | /* 9 | *this.x = x; 10 | this.y = y; 11 | */ 12 | } 13 | } 14 | const a = new Params(1, 2, 3); 15 | console.log(a.x); -------------------------------------------------------------------------------- /backend/model/ToDo.js: -------------------------------------------------------------------------------- 1 | const mongoose = require('mongoose'); 2 | const Schema = mongoose.Schema; 3 | const ToDoSchema = new Schema({ 4 | title: { 5 | type: String, 6 | required: true, 7 | }, 8 | completed:{ 9 | type:Boolean 10 | } 11 | }); 12 | module.exports = mongoose.model('Todos', ToDoSchema); -------------------------------------------------------------------------------- /chapter6/Spread.html: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /typescript/JSProblem.js: -------------------------------------------------------------------------------- 1 | let str = 'Hello'; 2 | let result = str * 3; 3 | console.log('Result ',result); 4 | 5 | let obj = { 6 | age : 38 7 | }; 8 | console.log('Age ',obj.aeg); 9 | obj.aeg = 39; 10 | console.log('Obj ',obj); 11 | 12 | function display(message) 13 | { 14 | console.log('Message ',message); 15 | } 16 | display(); -------------------------------------------------------------------------------- /StaticType.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | 3 | using namespace std; 4 | 5 | 6 | int main() 7 | { 8 | int a = 24; 9 | cout<<"A is "<{ 7 | let end = new Date(); 8 | let time = end- start; 9 | console.log("Time ",time); 10 | }) 11 | -------------------------------------------------------------------------------- /frontend/src/components/FuncGreeting.js: -------------------------------------------------------------------------------- 1 | const PropTypes = require("prop-types"); 2 | 3 | function FuncGreeting({message}) 4 | { 5 | return (
6 | Greeting 7 |

{message}

8 |
); 9 | } 10 | FuncGreeting.propTypes = { 11 | message: PropTypes.string.isRequired 12 | } 13 | export default FuncGreeting; 14 | -------------------------------------------------------------------------------- /typescript/push_down_type.ts: -------------------------------------------------------------------------------- 1 | function firstElement1(arr: Type[]) { 2 | return arr[0]; 3 | } 4 | 5 | function firstElement2(arr: Type) { 6 | return arr[0]; 7 | } 8 | 9 | // a: number (good) 10 | const a = firstElement1([1, 2, 3]); 11 | // b: any (bad) 12 | const b = firstElement2([1, '2', 3]); 13 | console.log(''); -------------------------------------------------------------------------------- /chapter4/Expression.html: -------------------------------------------------------------------------------- 1 | 2 | 14 | -------------------------------------------------------------------------------- /chapter4/Equality.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | -------------------------------------------------------------------------------- /chapter5/Continue.html: -------------------------------------------------------------------------------- 1 | 2 | 16 | -------------------------------------------------------------------------------- /typescript/tuple.ts: -------------------------------------------------------------------------------- 1 | type StringNumberPair = readonly [string, number]; 2 | let tuple : StringNumberPair = ["Hello",13]; 3 | 4 | console.log('Tuple ',tuple[0], ' element 1 ',tuple[1]); 5 | 6 | //tuple[0] = "Something"; 7 | //tuple[1] = "No"; 8 | console.log('Tuple ',tuple); 9 | const [str,age] = tuple; 10 | console.log('Str ',str, 'Age ',age); 11 | 12 | -------------------------------------------------------------------------------- /chapter13/PromiseSettle.html: -------------------------------------------------------------------------------- 1 | 2 | 12 | -------------------------------------------------------------------------------- /chapter3/TypeConversion.html: -------------------------------------------------------------------------------- 1 | 2 | 13 | -------------------------------------------------------------------------------- /chapter8/ObjectDestr.html: -------------------------------------------------------------------------------- 1 | 2 | 15 | 16 | -------------------------------------------------------------------------------- /frontend-redux-typescript/.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /chapter5/While.html: -------------------------------------------------------------------------------- 1 | 2 | 14 | -------------------------------------------------------------------------------- /chapter8/Nested.html: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | -------------------------------------------------------------------------------- /frontend-redux-typescript/src/features/auth/authApi.ts: -------------------------------------------------------------------------------- 1 | import {API_URL} from "../../setting/API"; 2 | import axios from "../../setting/our_axios"; 3 | 4 | export function login(username:string,password:string){ 5 | const loginUrl = API_URL+"/users/login"; 6 | return axios.post(loginUrl,{ 7 | userName: username, 8 | password 9 | }); 10 | } -------------------------------------------------------------------------------- /chapter15/Clock.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Clock 4 | 5 | 15 | -------------------------------------------------------------------------------- /chapter4/Operator.html: -------------------------------------------------------------------------------- 1 | 2 | 16 | -------------------------------------------------------------------------------- /chapter4/PlusPlusOp.html: -------------------------------------------------------------------------------- 1 | 2 | 14 | -------------------------------------------------------------------------------- /chapter7/Method3.html: -------------------------------------------------------------------------------- 1 | 2 | 13 | 14 | -------------------------------------------------------------------------------- /chapter3/DynamicType.html: -------------------------------------------------------------------------------- 1 | 2 | 18 | -------------------------------------------------------------------------------- /frontend/src/components/classedbased/BugComponent.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | export default class BugComponent extends React.Component 3 | { 4 | constructor(props) { 5 | super(props); 6 | } 7 | 8 | render() { 9 | throw new Error('Something went wrong'); 10 | return (
11 | Bug 12 |
); 13 | } 14 | } -------------------------------------------------------------------------------- /typescript/CallOrConstruct.ts: -------------------------------------------------------------------------------- 1 | interface CallOrConstruct { 2 | new (s: string): Date; 3 | (n?: number): string; 4 | } 5 | function createDate(func:CallOrConstruct) 6 | { 7 | //return new func('2023/03/11'); 8 | return func(100101020202); 9 | } 10 | let d:Date|string = createDate(Date); 11 | console.log('Date ',d); 12 | 13 | d = Date(); 14 | console.log('Date ',d); -------------------------------------------------------------------------------- /typescript/GetterSetter.ts: -------------------------------------------------------------------------------- 1 | class Circle 2 | { 3 | radius:number; 4 | 5 | constructor(radius:number) 6 | { 7 | this.radius = radius; 8 | } 9 | get area() 10 | { 11 | console.log('Getter executed'); 12 | return Math.PI * this.radius * this.radius; 13 | } 14 | } 15 | let c = new Circle(3); 16 | console.log('C.area ',c.area); -------------------------------------------------------------------------------- /MaxElement.html: -------------------------------------------------------------------------------- 1 | 2 | 18 | -------------------------------------------------------------------------------- /chapter11/ConsoleTime.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 20 | -------------------------------------------------------------------------------- /chapter11/MapKey.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 18 | -------------------------------------------------------------------------------- /chapter11/TypedArray.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /chapter6/CreateTwo.html: -------------------------------------------------------------------------------- 1 | 2 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /typescript/interfaces.ts: -------------------------------------------------------------------------------- 1 | interface Point { 2 | x: number; 3 | y: number; 4 | } 5 | interface Point3D extends Point 6 | { 7 | z : number; 8 | } 9 | 10 | function printCoord(pt: Point) { 11 | console.log("The coordinate's x value is " + pt.x); 12 | console.log("The coordinate's y value is " + pt.y); 13 | } 14 | 15 | printCoord({ x: 100, y: 100 }); 16 | 17 | -------------------------------------------------------------------------------- /chapter11/Allocation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 19 | -------------------------------------------------------------------------------- /chapter11/Reg_5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 14 | -------------------------------------------------------------------------------- /chapter4/Comparison.html: -------------------------------------------------------------------------------- 1 | 2 | 12 | -------------------------------------------------------------------------------- /chapter7/ArrayCon.html: -------------------------------------------------------------------------------- 1 | 2 | 15 | 16 | -------------------------------------------------------------------------------- /frontend/src/components/ClassComponent.js: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import './class-component.css'; 3 | export default class ClassComponent extends React.Component 4 | { 5 | render() { 6 | //const [state,setState] =useState(); 7 | return(
8 | Class Component Example 9 |
) 10 | } 11 | } -------------------------------------------------------------------------------- /frontend/src/routes/Index.js: -------------------------------------------------------------------------------- 1 | export default function Index() { 2 | return ( 3 |

4 | This is a demo for React Router. 5 |
6 | Check out{" "} 7 | 8 | the docs at reactrouter.com 9 | 10 | . 11 |

12 | ); 13 | } -------------------------------------------------------------------------------- /typescript/construct_singature.ts: -------------------------------------------------------------------------------- 1 | class Human 2 | { 3 | name:string; 4 | constructor(name:string) 5 | { 6 | this.name = name; 7 | console.log('Human constructor ',this.name); 8 | } 9 | } 10 | type SomeConstructor = { 11 | new (s: string): Human; 12 | }; 13 | function fn(ctor: SomeConstructor) { 14 | return new ctor("hello"); 15 | } 16 | fn(Human); -------------------------------------------------------------------------------- /typescript/functions.ts: -------------------------------------------------------------------------------- 1 | function display(msg:string) 2 | { 3 | console.log('Display ',msg); 4 | } 5 | display("Hello"); 6 | 7 | function add(a:number,b:number):number 8 | { 9 | return a+b; 10 | } 11 | let k = add(1,3); 12 | console.log('K is ',k); 13 | 14 | const names = ["Alice", "Bob", "Eve"]; 15 | names.forEach(function (s) { 16 | console.log(s.toUpperCase()); 17 | }); -------------------------------------------------------------------------------- /chapter3/ObjectDestruct.html: -------------------------------------------------------------------------------- 1 | 2 | 13 | -------------------------------------------------------------------------------- /chapter3/Swap.html: -------------------------------------------------------------------------------- 1 | 2 | 15 | -------------------------------------------------------------------------------- /chapter3/Variable.html: -------------------------------------------------------------------------------- 1 | 2 | 15 | -------------------------------------------------------------------------------- /chapter3/math.js: -------------------------------------------------------------------------------- 1 | console.log("Math.pow(2,3) ",Math.pow(2,3)); 2 | console.log("Math.round(.6) ",Math.round(.6)); 3 | console.log("Math.round(.4) ",Math.round(.4)); 4 | console.log("Math.sin(90) ",Math.sin(90*(Math.PI/180))); 5 | 6 | let result = "hello" * 2; 7 | console.log("Result ",result); 8 | console.log("Typeof result ",typeof(result)); 9 | let data = result +2; 10 | console.log("Data ",data); -------------------------------------------------------------------------------- /typescript/ArrowFunction.ts: -------------------------------------------------------------------------------- 1 | class MyClass { 2 | name = "MyClass"; 3 | getName = () => { 4 | return this.name; 5 | }; 6 | getThisName(this: MyClass) { 7 | return this.name; 8 | } 9 | } 10 | const c = new MyClass(); 11 | const g = c.getName; 12 | // Prints "MyClass" instead of crashing 13 | console.log(g()); 14 | 15 | let method = c.getThisName; 16 | //console.log('Method ',method()); -------------------------------------------------------------------------------- /frontend-redux-typescript/src/app/hooks.ts: -------------------------------------------------------------------------------- 1 | import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'; 2 | import type { RootState, AppDispatch } from './store'; 3 | 4 | // Use throughout your app instead of plain `useDispatch` and `useSelector` 5 | export const useAppDispatch = () => useDispatch(); 6 | export const useAppSelector: TypedUseSelectorHook = useSelector; 7 | -------------------------------------------------------------------------------- /chapter8/Property.html: -------------------------------------------------------------------------------- 1 | 2 | 14 | 15 | -------------------------------------------------------------------------------- /frontend-redux-typescript/src/features/movies/Movie.css: -------------------------------------------------------------------------------- 1 | .movie 2 | { 3 | border:1px solid lightgray; 4 | margin-top: 10px; 5 | margin-bottom: 20px; 6 | margin-left: 50px; 7 | margin-right: 50px; 8 | border-radius: 10px; 9 | min-height: 100px; 10 | padding-bottom: 10px; 11 | } 12 | .movie-title 13 | { 14 | font-weight: bold; 15 | border-bottom: 1px solid lightgray; 16 | } -------------------------------------------------------------------------------- /chapter3/ArrayToPrimitive.html: -------------------------------------------------------------------------------- 1 | 2 | 13 | -------------------------------------------------------------------------------- /chapter15/fworker.js: -------------------------------------------------------------------------------- 1 | 2 | function fact(n) 3 | { 4 | if(n==0) 5 | { 6 | return 1; 7 | } 8 | else 9 | { 10 | return fact(n-1)*n; 11 | } 12 | } 13 | onmessage = (event)=>{ 14 | console.log('Event in factorial worker ',event.data); 15 | let n = event.data; 16 | let result = fact(n); 17 | postMessage(result); 18 | }; 19 | console.log('Worker Factorial .js loaded...'); -------------------------------------------------------------------------------- /chapter8/FunctionAsClass.html: -------------------------------------------------------------------------------- 1 | 2 | 16 | 17 | -------------------------------------------------------------------------------- /chapter13/ReadSync.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | let start = new Date(); 3 | 4 | try { 5 | console.log("Start"); 6 | const data = fs.readFileSync('hello.txt', 'utf8'); 7 | //console.log(data); 8 | const data2 = fs.readFileSync('hello2.txt', 'utf8'); 9 | let end = new Date(); 10 | let time = end- start; 11 | console.log("Time ",time); 12 | } catch (err) { 13 | console.error(err); 14 | } 15 | -------------------------------------------------------------------------------- /typescript/Initialization.ts: -------------------------------------------------------------------------------- 1 | class Base { 2 | name = "base"; 3 | constructor() { 4 | console.log("My name is " + this.name); 5 | } 6 | } 7 | 8 | class Derived extends Base { 9 | name = "derived"; 10 | 11 | constructor() 12 | { 13 | super(); 14 | console.log('Derived constructor'); 15 | } 16 | } 17 | 18 | // Prints "base", not "derived" 19 | const d = new Derived(); 20 | console.log('D ',d); -------------------------------------------------------------------------------- /chapter11/EventLoop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 | Something 6 |
7 |
8 | 16 | -------------------------------------------------------------------------------- /chapter7/Sparse.html: -------------------------------------------------------------------------------- 1 | 2 | 19 | 20 | -------------------------------------------------------------------------------- /fp/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /chapter3/NaN.js: -------------------------------------------------------------------------------- 1 | let result = Number.NaN; 2 | console.log("NaN == NaN ", (result==result)); 3 | console.log("NaN != NaN ", (result!=result)); 4 | console.log("NaN > NaN ", (result > result)); 5 | console.log("isNaN ", isNaN(result)); 6 | 7 | let max = Number.MAX_VALUE; 8 | let str = "1" + "0".repeat(1000); 9 | let large_num = BigInt(str); 10 | console.log("Large Num ",large_num); 11 | console.log("Large Num type ",typeof(large_num)); -------------------------------------------------------------------------------- /chapter3/ObjectToType.html: -------------------------------------------------------------------------------- 1 | 2 | 17 | -------------------------------------------------------------------------------- /chapter11/Error.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 21 | -------------------------------------------------------------------------------- /chapter11/Reg_Email.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 14 | -------------------------------------------------------------------------------- /chapter13/ReadTwoFilePromise: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | fs.promises.readFile('filename.txt') 3 | .then(data=>fs.promises.readFile(data)) 4 | .then(content=> content.toString()) 5 | .then(content=>console.log('Content ',content.length)) 6 | 7 | fs.promises.readFile('somethingelse.txt') 8 | .then( 9 | data=> console.log('Success case '), 10 | (err)=>console.log('Error case ',err)) -------------------------------------------------------------------------------- /chapter15/Preselected.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | google 9 | Ask 10 | 11 | 12 | 16 | -------------------------------------------------------------------------------- /chapter3/boolean.html: -------------------------------------------------------------------------------- 1 | 2 | 17 | -------------------------------------------------------------------------------- /frontend/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | /.idea 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /frontend/src/components/classedbased/Greeting.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | export default class Greeting extends React.Component { 5 | render() { 6 | return ( 7 |

Hello, {this.props.name}

8 | ); 9 | } 10 | } 11 | Greeting.defaultProps = { 12 | name: 'Good evening' 13 | }; 14 | Greeting.propTypes = { 15 | name: PropTypes.string.isRequired 16 | }; -------------------------------------------------------------------------------- /frontend/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /chapter3/Resolution.html: -------------------------------------------------------------------------------- 1 | 2 | 19 | -------------------------------------------------------------------------------- /chapter5/Compound.html: -------------------------------------------------------------------------------- 1 | 2 | 18 | -------------------------------------------------------------------------------- /chapter5/ElseIf.html: -------------------------------------------------------------------------------- 1 | 2 | 21 | -------------------------------------------------------------------------------- /frontend-redux-typescript/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /frontend/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /backend/routes/users.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | var users = require('./../controller/UsersController'); 4 | /* GET users listing. */ 5 | /*router.get('/', function(req, res, next) { 6 | res.send('respond with a resource'); 7 | });*/ 8 | 9 | router.get('/:userId', users.getUserById); 10 | router.post('/', users.registerUser); 11 | router.post('/login', users.login); 12 | module.exports = router; 13 | 14 | -------------------------------------------------------------------------------- /frontend-redux-typescript/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /frontend/src/components/RepeatDemo.js: -------------------------------------------------------------------------------- 1 | function Repeat(props) { 2 | let items = []; 3 | for (let i = 0; i < props.numTimes; i++) { 4 | items.push(props.children(i)); 5 | } 6 | return
{items}
; 7 | } 8 | 9 | export default function RepeatDemo() { 10 | return ( 11 | 12 | {(index) =>
This is item {index} in the list
} 13 | 14 | ); 15 | } -------------------------------------------------------------------------------- /chapter5/Yield.html: -------------------------------------------------------------------------------- 1 | 2 | 17 | -------------------------------------------------------------------------------- /frontend/src/components/portal/MyModal.css: -------------------------------------------------------------------------------- 1 | .our-modal 2 | { 3 | position: fixed; 4 | left: 0; 5 | top:0; 6 | background: gray; 7 | /*opacity: 0.5;*/ 8 | width:100%; 9 | height:100%; 10 | } 11 | .our-modal-body 12 | { 13 | background: white; 14 | position: absolute; 15 | left: 40%; 16 | top:30%; 17 | width:400px; 18 | height:400px; 19 | border-radius: 10px; 20 | opacity: 1; 21 | z-index: 10000; 22 | } -------------------------------------------------------------------------------- /backend/model/user.js: -------------------------------------------------------------------------------- 1 | //Filename: Posts.js 2 | const mongoose = require('mongoose'); 3 | const Schema = mongoose.Schema; 4 | const UserSchema = new Schema({ 5 | username: { 6 | type: 'String', 7 | required: true, 8 | trim: true, 9 | unique: true 10 | }, 11 | password: { 12 | type: 'String', 13 | required: true, 14 | trim: true 15 | } 16 | }); 17 | module.exports = mongoose.model('User', UserSchema) -------------------------------------------------------------------------------- /chapter3/Template.html: -------------------------------------------------------------------------------- 1 | 2 | 14 | -------------------------------------------------------------------------------- /frontend-redux-typescript/src/services/authService.ts: -------------------------------------------------------------------------------- 1 | import { useAppSelector, useAppDispatch } from '../app/hooks'; 2 | import {selectAuth} from "../features/auth/authSlice"; 3 | 4 | export default function useAuth() 5 | { 6 | let authUser = useAppSelector(selectAuth); 7 | console.log("Use Auth user",authUser); 8 | return authUser; 9 | } 10 | export function useAuthentication() 11 | { 12 | let authUser = useAuth(); 13 | return authUser.token; 14 | } -------------------------------------------------------------------------------- /chapter5/SetMap.html: -------------------------------------------------------------------------------- 1 | 2 | 15 | -------------------------------------------------------------------------------- /chapter8/Closure.html: -------------------------------------------------------------------------------- 1 | 2 | 18 | 19 | -------------------------------------------------------------------------------- /backend/routes/movies.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | var movies = require('./../controller/MovieController'); 4 | 5 | router.get('/', movies.getAllMovie); 6 | router.get('/:movieId', movies.getMovieById); 7 | router.get('/title/:title',movies.findMovieByTitle); 8 | router.post('/',movies.newMovie); 9 | router.put('/:movieId',movies.updateMovie); 10 | router.delete('/:movieId',movies.deleteMovie); 11 | 12 | module.exports = router; -------------------------------------------------------------------------------- /chapter7/ArrayFrom.html: -------------------------------------------------------------------------------- 1 | 2 | 20 | 21 | -------------------------------------------------------------------------------- /chapter8/ArrayDestructuring.html: -------------------------------------------------------------------------------- 1 | 2 | 20 | 21 | -------------------------------------------------------------------------------- /frontend-redux-typescript/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import { Provider } from 'react-redux'; 4 | import { store } from './app/store'; 5 | import App from './App'; 6 | 7 | test('renders learn react link', () => { 8 | const { getByText } = render( 9 | 10 | 11 | 12 | ); 13 | 14 | expect(getByText(/learn/i)).toBeInTheDocument(); 15 | }); 16 | -------------------------------------------------------------------------------- /frontend/src/components/classedbased/LifeCycleWrapper.js: -------------------------------------------------------------------------------- 1 | import LifeCycleDemo from "./LifeCycleDemo"; 2 | import {useState} from "react"; 3 | 4 | export default function LifeCycleWrapper() 5 | { 6 | const [input,setInput] = useState(); 7 | return (
8 | setInput(event.target.value)} 11 | /> 12 | 13 |
) 14 | } -------------------------------------------------------------------------------- /chapter5/Return.html: -------------------------------------------------------------------------------- 1 | 2 | 19 | -------------------------------------------------------------------------------- /chapter8/WhyFunction.html: -------------------------------------------------------------------------------- 1 | 2 | 21 | 22 | -------------------------------------------------------------------------------- /backend/routes/reviews.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | var review = require('./../controller/ReviewController'); 4 | 5 | 6 | router.get('/', review.getAllReview); 7 | router.get('/movie/:movieId',review.getReviewByMovieId); 8 | router.get('/:reviewId', review.getReviewById); 9 | router.post('/',review.saveReview); 10 | router.put('/:reviewId',review.updateReview); 11 | router.delete('/:reviewId',review.deleteReview); 12 | module.exports = router; -------------------------------------------------------------------------------- /chapter11/DateManipulation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 14 | -------------------------------------------------------------------------------- /chapter11/DateTime.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 19 | -------------------------------------------------------------------------------- /fp/WhyMayBeFunctor.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 12 | -------------------------------------------------------------------------------- /typescript/WhyGeneric.ts: -------------------------------------------------------------------------------- 1 | class Stack 2 | { 3 | items:Array = []; 4 | 5 | push(element:Type) 6 | { 7 | this.items.push(element); 8 | } 9 | pop() 10 | { 11 | return this.items.pop(); 12 | } 13 | } 14 | let stack = new Stack(); 15 | stack.push(10); 16 | //stack.push('Hello'); 17 | console.log('Stack ',stack.pop()); 18 | 19 | let strStack = new Stack(); 20 | strStack.push('Hello'); 21 | console.log('Stack ',strStack.pop()); -------------------------------------------------------------------------------- /frontend-redux-typescript/src/page/MoviePage.tsx: -------------------------------------------------------------------------------- 1 | import MovieListUI from "../features/movies/MovieListUI"; 2 | import {useAppDispatch} from "../app/hooks"; 3 | import {useEffect} from "react"; 4 | import {getAllMovie} from "../features/movies/movieSlice"; 5 | 6 | export default function MoviePage() 7 | { 8 | const dispatch = useAppDispatch(); 9 | useEffect(()=>{ 10 | dispatch(getAllMovie()); 11 | },[]); 12 | return (
13 | 14 |
); 15 | } -------------------------------------------------------------------------------- /frontend/src/components/stateful/ReRenderIssue.js: -------------------------------------------------------------------------------- 1 | import {useState} from "react"; 2 | 3 | export default function ReRenderIssue() 4 | { 5 | const [items, setItems] = useState([]); 6 | console.log('Re render counter two'); 7 | return ( 8 | <> 9 |

{items.length}

10 | 15 | 16 | ) 17 | } -------------------------------------------------------------------------------- /typescript/union.ts: -------------------------------------------------------------------------------- 1 | let color : "red" | "green" | "blue" = "blue"; 2 | //color = 'yellow'; 3 | console.log('Color ',color); 4 | 5 | let data : number | string; 6 | data = "Hello"; 7 | //data++; 8 | data = 32; 9 | data ++; 10 | 11 | function printId(id: number | string) { 12 | if (typeof id === "string") 13 | { 14 | console.log(id.toUpperCase()); 15 | } 16 | else 17 | { 18 | ++ id; 19 | console.log("Id is ",id); 20 | } 21 | 22 | } 23 | printId(data); -------------------------------------------------------------------------------- /chapter3/NullUndefined.html: -------------------------------------------------------------------------------- 1 | 2 | 19 | -------------------------------------------------------------------------------- /frontend/src/components/stateful/CounterAlert.js: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | export default function CounterAlert() 3 | { 4 | const [number, setNumber] = useState(0); 5 | 6 | return ( 7 | <> 8 |

{number}

9 | 15 | 16 | ) 17 | } -------------------------------------------------------------------------------- /chapter4/Conditional.html: -------------------------------------------------------------------------------- 1 | 2 | 20 | -------------------------------------------------------------------------------- /chapter6/Object2.html: -------------------------------------------------------------------------------- 1 | 2 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /chapter8/TypeCheck.html: -------------------------------------------------------------------------------- 1 | 2 | 18 | 19 | -------------------------------------------------------------------------------- /chapter3/GlobalScope.html: -------------------------------------------------------------------------------- 1 | 2 | 20 | -------------------------------------------------------------------------------- /chapter9/Abstract.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 22 | -------------------------------------------------------------------------------- /frontend/src/components/hook/IdDemo.js: -------------------------------------------------------------------------------- 1 | import { useId } from 'react'; 2 | export default function IdDemo() 3 | { 4 | const passwordHintId = useId(); 5 | return (
6 | 13 |

14 | The password should contain at least 18 characters 15 |

16 |
) 17 | } -------------------------------------------------------------------------------- /chapter4/unary-arthmetic.html: -------------------------------------------------------------------------------- 1 | 2 | 21 | -------------------------------------------------------------------------------- /chapter6/ShortHand.html: -------------------------------------------------------------------------------- 1 | 2 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /fp/Once.html: -------------------------------------------------------------------------------- 1 | 2 | 18 | 19 | -------------------------------------------------------------------------------- /frontend/src/components/pattern/hoc/withHover.js: -------------------------------------------------------------------------------- 1 | import {useEffect, useState} from "react"; 2 | 3 | export default function withHover(Element) { 4 | return props => { 5 | const [hovering, setHover] = useState(false); 6 | 7 | return ( 8 | setHover(true)} 12 | onMouseLeave={() => setHover(false)} 13 | /> 14 | ); 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /frontend/src/components/stateful/CounterTwo.js: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | 3 | export default function CounterTwo() { 4 | const [number, setNumber] = useState(0); 5 | console.log('Re render counter two'); 6 | return ( 7 | <> 8 |

{number}

9 | 14 | 15 | ) 16 | } -------------------------------------------------------------------------------- /backend/.idea/backend.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /chapter3/Object_StringPritmitive.html: -------------------------------------------------------------------------------- 1 | 2 | 18 | -------------------------------------------------------------------------------- /chapter9/ClassExpression.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 20 | -------------------------------------------------------------------------------- /typescript/intersect_type.ts: -------------------------------------------------------------------------------- 1 | interface Colorful { 2 | color: string; 3 | } 4 | interface Circle { 5 | radius: number; 6 | } 7 | 8 | type ColorfulCircle = Colorful & Circle; 9 | let obj : ColorfulCircle = { 10 | color:'green', 11 | radius:23 12 | }; 13 | console.log('Obj ',obj); 14 | 15 | //let myArr:[] = 16 | let myArray:Array = ["hello", "world"]; 17 | console.log('MyArray ',myArray); 18 | 19 | let myArray2 = []; 20 | myArray2[0] = 21; 21 | myArray2[1] = '21'; 22 | console.log('MyArray2 ',myArray2[1]); -------------------------------------------------------------------------------- /chapter5/ExpressionStatement.html: -------------------------------------------------------------------------------- 1 | 2 | 22 | -------------------------------------------------------------------------------- /chapter8/Arguments.html: -------------------------------------------------------------------------------- 1 | 2 | 19 | 20 | -------------------------------------------------------------------------------- /frontend-redux-typescript/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /frontend/src/pages/ErrorPage.js: -------------------------------------------------------------------------------- 1 | import { useRouteError } from "react-router-dom"; 2 | 3 | export default function ErrorPage() { 4 | const error = useRouteError(); 5 | console.error(error); 6 | 7 | return ( 8 |
9 |

Oops!

10 |

Sorry, an unexpected error has occurred.

11 |

12 | {error.statusText || error.message} 13 |

14 | Back to Home 15 |
16 | ); 17 | } -------------------------------------------------------------------------------- /chapter13/Promise2.html: -------------------------------------------------------------------------------- 1 | 2 | 17 | -------------------------------------------------------------------------------- /chapter4/Delete.html: -------------------------------------------------------------------------------- 1 | 2 | 20 | -------------------------------------------------------------------------------- /frontend/src/components/interaction/EventDemo.js: -------------------------------------------------------------------------------- 1 | export function ParentEvent(props) 2 | { 3 | console.log('Props ',props); 4 | let clickHandler = ()=>{ 5 | console.log('Click handler ',props); 6 | }; 7 | return (
8 | 9 |
); 10 | } 11 | export default function EventDemo({onClick}) 12 | { 13 | return(
14 | 18 |
); 19 | } -------------------------------------------------------------------------------- /backend/model/Review.js: -------------------------------------------------------------------------------- 1 | //Filename: Posts.js 2 | const mongoose = require('mongoose'); 3 | const Schema = mongoose.Schema; 4 | /* 5 | review use movie as reference 6 | * */ 7 | const ReviewSchema = new Schema({ 8 | movie: { 9 | type: Schema.Types.ObjectId, 10 | ref: "Movies" 11 | }, 12 | rating: { 13 | type: Number, 14 | required: true, 15 | }, 16 | review: { 17 | type: String, 18 | required: true, 19 | }, 20 | 21 | }); 22 | module.exports = mongoose.model('Reviews', ReviewSchema); -------------------------------------------------------------------------------- /chapter12/Iterator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 22 | -------------------------------------------------------------------------------- /chapter6/ObjectDemo.html: -------------------------------------------------------------------------------- 1 | 2 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /chapter7/Method4.html: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | -------------------------------------------------------------------------------- /chapter10/Module.js: -------------------------------------------------------------------------------- 1 | +function() 2 | { 3 | if(window.MyModule) 4 | { 5 | return; 6 | } 7 | function privateFunc() 8 | { 9 | console.log('Private api'); 10 | } 11 | function apiOne() 12 | { 13 | console.log('Api One'); 14 | privateFunc(); 15 | } 16 | function apiTwo() 17 | { 18 | console.log('Api Two'); 19 | } 20 | console.log('My Module intialized'); 21 | window.MyModule = window.MyModule || { 22 | 23 | apiOne, 24 | apiTwo 25 | }; 26 | 27 | }(); -------------------------------------------------------------------------------- /frontend-redux-typescript/.idea/frontend-redux-typescript.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /chapter15/Worker.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 19 | 20 | -------------------------------------------------------------------------------- /typescript/call_signature.ts: -------------------------------------------------------------------------------- 1 | type Animal = { 2 | shout:()=>void 3 | } 4 | let obj : Animal = { 5 | shout() 6 | { 7 | console.log("Woo"); 8 | } 9 | } 10 | obj.shout(); 11 | 12 | type DescribableFunction = { 13 | description: string; 14 | (someArg: number): boolean; 15 | }; 16 | function doSomething(fn: DescribableFunction) { 17 | console.log(fn.description + " returned " + fn(6)); 18 | } 19 | 20 | function isEven(n: number) 21 | { 22 | return n % 2==0; 23 | } 24 | isEven.description = "IsEven function"; 25 | doSomething(isEven); -------------------------------------------------------------------------------- /backend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "backend", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "node ./bin/www", 7 | "dev": "nodemon app.js" 8 | }, 9 | "dependencies": { 10 | "bcrypt": "^5.1.0", 11 | "cookie-parser": "~1.4.4", 12 | "cors": "^2.8.5", 13 | "debug": "~2.6.9", 14 | "express": "~4.16.1", 15 | "http-errors": "~1.6.3", 16 | "jsonwebtoken": "^9.0.0", 17 | "mongoose": "^6.8.4", 18 | "morgan": "~1.9.1", 19 | "nodemon": "^2.0.20", 20 | "pug": "2.0.0-beta11" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /chapter7/ArrayMethod6.html: -------------------------------------------------------------------------------- 1 | 2 | 19 | 20 | -------------------------------------------------------------------------------- /chapter7/ForEach.html: -------------------------------------------------------------------------------- 1 | 2 | 23 | 24 | -------------------------------------------------------------------------------- /chapter8/Keys.html: -------------------------------------------------------------------------------- 1 | 2 | 19 | 20 | -------------------------------------------------------------------------------- /fp/HeadTail.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 18 | -------------------------------------------------------------------------------- /frontend/src/components/Tab.css: -------------------------------------------------------------------------------- 1 | .tab-container 2 | { 3 | background: lightgray; 4 | margin:10px; 5 | border-radius: 10px; 6 | padding-top: 10px; 7 | } 8 | .header-container 9 | { 10 | 11 | } 12 | .tab-header 13 | { 14 | width: 100px; 15 | padding:10px; 16 | font-weight: bold; 17 | height: 50px; 18 | margin-top: 5px; 19 | margin-bottom: 5px; 20 | cursor:pointer; 21 | } 22 | .tab-header.active 23 | { 24 | border-bottom:5px solid aquamarine; 25 | } 26 | .tab-body 27 | { 28 | min-height: 200px; 29 | padding-top: 15px; 30 | } -------------------------------------------------------------------------------- /typescript/literal_type.ts: -------------------------------------------------------------------------------- 1 | let x: "hello" = "hello"; 2 | 3 | let state : "pending" | "completed" | "rejected"; 4 | //state = "another"; 5 | state = "pending"; 6 | console.log('State ',state); 7 | 8 | function doSomething(x: string | null) { 9 | if (x === null) { 10 | // do nothing 11 | } else { 12 | console.log("Hello, " + x.toUpperCase()); 13 | } 14 | } 15 | let str = 'null'; 16 | doSomething(str); 17 | 18 | function liveDangerously(x?: number | null) { 19 | // No error 20 | console.log(x!.toFixed()); 21 | } 22 | 23 | liveDangerously(12); -------------------------------------------------------------------------------- /chapter4/in.html: -------------------------------------------------------------------------------- 1 | 2 | 15 | -------------------------------------------------------------------------------- /chapter5/NestedLoop.html: -------------------------------------------------------------------------------- 1 | 2 | 23 | -------------------------------------------------------------------------------- /fp/Zip.html: -------------------------------------------------------------------------------- 1 | 2 | 16 | 17 | -------------------------------------------------------------------------------- /frontend/src/components/pattern/hoc/withLoader.js: -------------------------------------------------------------------------------- 1 | import {useEffect, useState} from "react"; 2 | 3 | export default function withLoader(Element, url) { 4 | return props => { 5 | const [data, setData] = useState(null); 6 | 7 | useEffect(() => { 8 | fetch(url) 9 | .then(res => res.json()) 10 | .then(data => setData(data)); 11 | }, []); 12 | 13 | if (!data) { 14 | return
Loading...
; 15 | } 16 | 17 | return ; 18 | }; 19 | } 20 | -------------------------------------------------------------------------------- /typescript/constraint.js: -------------------------------------------------------------------------------- 1 | function longest(a, b) { 2 | if (a.length >= b.length) { 3 | return a; 4 | } 5 | else { 6 | return b; 7 | } 8 | } 9 | // longerArray is of type 'number[]' 10 | var longerArray = longest([1, 2], [1, 2, 3]); 11 | console.log('Loger Array ', longerArray); 12 | var result = longest('Hello', 'Hi'); 13 | console.log('Result ', result); 14 | var result2 = longest({ 15 | name: 'Objwith length 2', 16 | length: 2 17 | }, { 18 | name: 'Objwith length 4', 19 | length: 4 20 | }); 21 | console.log('Result ', result2); 22 | -------------------------------------------------------------------------------- /chapter12/Tree.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 30 | -------------------------------------------------------------------------------- /chapter15/DOMAPI.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
Div
4 | 5 | 8 | 11 | 21 | -------------------------------------------------------------------------------- /chapter5/ForLoop.html: -------------------------------------------------------------------------------- 1 | 2 | 21 | -------------------------------------------------------------------------------- /chapter8/MultipleReturn.html: -------------------------------------------------------------------------------- 1 | 2 | 25 | 26 | -------------------------------------------------------------------------------- /fp/ImperativeErrorHandlingProb.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 22 | -------------------------------------------------------------------------------- /chapter4/Assignment.html: -------------------------------------------------------------------------------- 1 | 2 | 25 | -------------------------------------------------------------------------------- /frontend/src/components/pattern/hoc/ToDoWithFetchUrl.js: -------------------------------------------------------------------------------- 1 | import useFetchUrl from "./useFetchUrl"; 2 | 3 | export default function ToDoWithFetchUrl() 4 | { 5 | const [loading,data] = useFetchUrl('https://jsonplaceholder.typicode.com/todos/'); 6 | return (
7 | ToDoWithFetchUrl 8 | { 9 | loading?

loading

:null 10 | } 11 | { 12 | data.map((todo)=>{ 13 | return (
14 | {todo.title} 15 |
); 16 | }) 17 | } 18 |
); 19 | }; -------------------------------------------------------------------------------- /typescript/type_alias.ts: -------------------------------------------------------------------------------- 1 | type Point = { 2 | x: number; 3 | y: number; 4 | }; 5 | type Another = { 6 | x : number; 7 | y : number 8 | } 9 | type Point3D = { 10 | x : number, 11 | y : number, 12 | z : number, 13 | } 14 | let p:Point = { 15 | x: 10, 16 | y: 20 17 | }; 18 | let k:Another = p; 19 | function display(arg:Point) 20 | { 21 | console.log('Arg ',arg.x, " , ",arg.y); 22 | } 23 | display(k); 24 | 25 | let point3D: Point3D = { 26 | x: 10, 27 | y : 20, 28 | z : 30 29 | }; 30 | p = point3D; 31 | //point3D = p; 32 | 33 | type MyNumber = number; 34 | -------------------------------------------------------------------------------- /chapter3/NumberToBoolean.html: -------------------------------------------------------------------------------- 1 | 2 | 23 | -------------------------------------------------------------------------------- /chapter5/ForEachKeyValue.html: -------------------------------------------------------------------------------- 1 | 2 | 22 | -------------------------------------------------------------------------------- /typescript/Visibility.ts: -------------------------------------------------------------------------------- 1 | class Greeter { 2 | private internalVar = 10; 3 | public greet() { 4 | console.log("hi!"); 5 | } 6 | protected getName() { 7 | return "hi"; 8 | } 9 | } 10 | class SpecialGreeter extends Greeter { 11 | //internalVar = 10; 12 | public howdy() { 13 | // OK to access protected member here 14 | console.log("Howdy, " + this.getName()); 15 | } 16 | } 17 | const g = new SpecialGreeter(); 18 | g.greet(); 19 | //console.log('Get ',g.getName()); 20 | //g.howdy(); 21 | let obj = g as any; 22 | console.log('Private ',obj['internalVar']); -------------------------------------------------------------------------------- /chapter11/Internationalization.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 18 | -------------------------------------------------------------------------------- /chapter11/SetTImeout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 | Something 6 |
7 |
8 | 21 | -------------------------------------------------------------------------------- /chapter4/CompoundAssignment.html: -------------------------------------------------------------------------------- 1 | 2 | 23 | -------------------------------------------------------------------------------- /typescript/constraint.ts: -------------------------------------------------------------------------------- 1 | function longest(a: Type, b: Type) { 2 | if (a.length >= b.length) { 3 | return a; 4 | } else { 5 | return b; 6 | } 7 | } 8 | 9 | // longerArray is of type 'number[]' 10 | const longerArray = longest([1, 2], [1, 2, 3]); 11 | console.log('Loger Array ',longerArray); 12 | 13 | let result = longest('Hello','Hi'); 14 | console.log('Result ',result); 15 | 16 | let result2 = longest({ 17 | name : 'Objwith length 2', 18 | length:2 19 | },{ 20 | name : 'Objwith length 4', 21 | length:4 22 | }); 23 | console.log('Result ',result2); -------------------------------------------------------------------------------- /frontend/src/components/hook/ExternalStore.js: -------------------------------------------------------------------------------- 1 | import { useSyncExternalStore } from 'react'; 2 | import { todosStore } from './todoStore.js'; 3 | export default function ExternalStore() 4 | { 5 | const todos = useSyncExternalStore(todosStore.subscribe, todosStore.getSnapshot); 6 | return ( 7 | <> 8 | 9 |
10 |
    11 | {todos.map(todo => ( 12 |
  • {todo.text}
    • 13 | ))} 14 |
15 | 16 | ); 17 | } -------------------------------------------------------------------------------- /chapter5/Break.html: -------------------------------------------------------------------------------- 1 | 2 | 26 | -------------------------------------------------------------------------------- /chapter11/CompareString.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 26 | -------------------------------------------------------------------------------- /chapter3/str_demo.html: -------------------------------------------------------------------------------- 1 | 2 | 20 | -------------------------------------------------------------------------------- /frontend/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /frontend/src/components/hook/CustomInput.js: -------------------------------------------------------------------------------- 1 | import {forwardRef, useRef} from 'react'; 2 | 3 | const MyInput = forwardRef((props, ref) => { 4 | return ; 5 | }); 6 | export default function CustomInput() 7 | { 8 | const inputRef = useRef(null); 9 | 10 | function handleClick() { 11 | inputRef.current.focus(); 12 | inputRef.current.style.opacity = 0.2; 13 | } 14 | 15 | return (
16 | Custom Input 17 | 18 | 21 |
); 22 | } -------------------------------------------------------------------------------- /fp/Curry.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 19 | -------------------------------------------------------------------------------- /chapter11/Reg_4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 18 | -------------------------------------------------------------------------------- /chapter9/AddMethod.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 27 | -------------------------------------------------------------------------------- /chapter13/ForAwait.html: -------------------------------------------------------------------------------- 1 | 2 | 21 | -------------------------------------------------------------------------------- /chapter6/Create.html: -------------------------------------------------------------------------------- 1 | 2 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /frontend-redux-typescript/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /chapter6/Query.html: -------------------------------------------------------------------------------- 1 | 2 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /frontend-redux-typescript/src/page/LogoutPage.tsx: -------------------------------------------------------------------------------- 1 | import {useAppDispatch} from "../app/hooks"; 2 | import {useNavigate,useParams,useLocation} from "react-router-dom"; 3 | import {logout} from './../features/auth/authSlice'; 4 | export default function LogoutPage() 5 | { 6 | let navigate = useNavigate(); 7 | let dispatch = useAppDispatch(); 8 | let logoutHandler = ()=>{ 9 | console.log("Logout "); 10 | dispatch(logout()); 11 | navigate("/"); 12 | 13 | } 14 | return (
15 | 18 |
); 19 | } -------------------------------------------------------------------------------- /frontend/src/components/pattern/hoc/useFetchUrl.js: -------------------------------------------------------------------------------- 1 | import {useEffect, useState} from "react"; 2 | 3 | export default function useFetchUrl(url) 4 | { 5 | const [state,setState] = useState({ 6 | loading:true, 7 | data: [] 8 | }) 9 | useEffect(()=>{ 10 | setState({loading:true,data:[]}); 11 | 12 | fetch(url) 13 | .then(response=>response.json()) 14 | .then(json=>{ 15 | setState({ 16 | loading:false, 17 | data : json 18 | }) 19 | }) 20 | 21 | },[url]); 22 | return [state.loading,state.data]; 23 | } -------------------------------------------------------------------------------- /typescript/why_gen.ts: -------------------------------------------------------------------------------- 1 | function firstElement(arr: any[]) { 2 | return arr[0]; 3 | } 4 | console.log('First element ',firstElement([10,'20',30])); 5 | 6 | function firstElement2(arr: string[]| number[]) { 7 | return arr[0]; 8 | } 9 | console.log('First element ',firstElement2(['Hello','20','30'])); 10 | 11 | function firstElementWithGeneric(arr: Type[]): Type | undefined { 12 | return arr[0]; 13 | } 14 | console.log('First element ',firstElementWithGeneric(['Hello','20','30'])); 15 | console.log('First element ',firstElementWithGeneric([20,30])); 16 | console.log('First element ',firstElementWithGeneric([{age:20},{age:30}])); -------------------------------------------------------------------------------- /chapter4/Arithmetic.html: -------------------------------------------------------------------------------- 1 | 2 | 26 | -------------------------------------------------------------------------------- /chapter7/WhyArray.html: -------------------------------------------------------------------------------- 1 | 2 | 23 | 24 | -------------------------------------------------------------------------------- /chapter12/Generator3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 25 | -------------------------------------------------------------------------------- /chapter13/AsyncAwait.html: -------------------------------------------------------------------------------- 1 | 2 | 22 | -------------------------------------------------------------------------------- /fp/MathFunction.html: -------------------------------------------------------------------------------- 1 | 2 | 31 | 32 | -------------------------------------------------------------------------------- /chapter11/JSON_Parse.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 24 | -------------------------------------------------------------------------------- /chapter11/Reg_3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 18 | -------------------------------------------------------------------------------- /chapter8/ClosureAsObject.html: -------------------------------------------------------------------------------- 1 | 2 | 28 | 29 | -------------------------------------------------------------------------------- /frontend/src/components/FlushSync.js: -------------------------------------------------------------------------------- 1 | import {flushSync} from "react-dom"; 2 | import {useRef, useState} from "react"; 3 | 4 | export default function FlushSync() 5 | { 6 | const [count, setCount] = useState(0); 7 | const ref = useRef(); 8 | function handleClick() { 9 | 10 | //setCount(count+1); 11 | flushSync(()=>{ 12 | setCount(count+1); 13 | }); 14 | console.log('Count after flush sync ',ref.current.value); 15 | } 16 | 17 | console.log('Render'); 18 | return (
19 | 20 | 21 | 22 |
); 23 | } -------------------------------------------------------------------------------- /chapter5/WhyLoop.html: -------------------------------------------------------------------------------- 1 | 2 | 28 | -------------------------------------------------------------------------------- /chapter8/Method.html: -------------------------------------------------------------------------------- 1 | 2 | 28 | 29 | -------------------------------------------------------------------------------- /backend/model/Movie.js: -------------------------------------------------------------------------------- 1 | //Filename: Posts.js 2 | const mongoose = require('mongoose'); 3 | const Schema = mongoose.Schema; 4 | const MovieSchema = new Schema({ 5 | title: { 6 | type: String, 7 | required: true, 8 | }, 9 | director: { 10 | type:{ 11 | name:{ 12 | type: String, 13 | required: true, 14 | }, 15 | phoneNo:{ 16 | type: String 17 | } 18 | }, 19 | required:false, 20 | }, 21 | year: { 22 | type: Number, 23 | required: true, 24 | } 25 | }); 26 | module.exports = mongoose.model('Movies', MovieSchema); -------------------------------------------------------------------------------- /chapter15/CSS.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | 15 |

Attributes

16 |
17 | Container 18 |
19 | 20 | 21 | 30 | -------------------------------------------------------------------------------- /chapter3/Destructuring.html: -------------------------------------------------------------------------------- 1 | 2 | 27 | -------------------------------------------------------------------------------- /fp/Otherwise.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 16 | -------------------------------------------------------------------------------- /chapter3/ObjectToPrimitive.html: -------------------------------------------------------------------------------- 1 | 2 | 25 | -------------------------------------------------------------------------------- /chapter3/StringToNumber.html: -------------------------------------------------------------------------------- 1 | 2 | 26 | -------------------------------------------------------------------------------- /chapter3/string_method.html: -------------------------------------------------------------------------------- 1 | 2 | 19 | -------------------------------------------------------------------------------- /chapter6/Prototype.html: -------------------------------------------------------------------------------- 1 | 2 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /chapter7/MultiDimensional.html: -------------------------------------------------------------------------------- 1 | 2 | 28 | 29 | -------------------------------------------------------------------------------- /frontend-redux-typescript/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /frontend/src/components/hook/todoStore.js: -------------------------------------------------------------------------------- 1 | let nextId = 0; 2 | let todos = [{ id: nextId++, text: 'Todo #1' }]; 3 | let listeners = []; 4 | 5 | export const todosStore = { 6 | addTodo() { 7 | todos = [...todos, { id: nextId++, text: 'Todo #' + nextId }] 8 | emitChange(); 9 | }, 10 | subscribe(listener) { 11 | listeners = [...listeners, listener]; 12 | return () => { 13 | listeners = listeners.filter(l => l !== listener); 14 | }; 15 | }, 16 | getSnapshot() { 17 | return todos; 18 | } 19 | }; 20 | 21 | function emitChange() { 22 | for (let listener of listeners) { 23 | listener(); 24 | } 25 | } -------------------------------------------------------------------------------- /chapter15/apicall.js: -------------------------------------------------------------------------------- 1 | var http = require('follow-redirects').http; 2 | var fs = require('fs'); 3 | 4 | var options = { 5 | 'method': 'GET', 6 | 'hostname': 'localhost', 7 | 'port': 3000, 8 | 'path': '/todos', 9 | 'headers': { 10 | }, 11 | 'maxRedirects': 20 12 | }; 13 | 14 | var req = http.request(options, function (res) { 15 | var chunks = []; 16 | 17 | res.on("data", function (chunk) { 18 | chunks.push(chunk); 19 | }); 20 | 21 | res.on("end", function (chunk) { 22 | var body = Buffer.concat(chunks); 23 | console.log(body.toString()); 24 | }); 25 | 26 | res.on("error", function (error) { 27 | console.error(error); 28 | }); 29 | }); 30 | 31 | req.end(); -------------------------------------------------------------------------------- /frontend/src/components/effect/ChatRoom.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react'; 2 | export function createConnection() { 3 | // A real implementation would actually connect to the server 4 | return { 5 | connect() { 6 | console.log('✅ Connecting...'); 7 | }, 8 | disconnect() { 9 | console.log('❌ Disconnected.'); 10 | } 11 | }; 12 | } 13 | 14 | 15 | export default function ChatRoom() { 16 | useEffect(() => { 17 | const connection = createConnection(); 18 | connection.connect(); 19 | return () => connection.disconnect(); 20 | }, []); 21 | return

Welcome to the chat!

; 22 | } 23 | -------------------------------------------------------------------------------- /chapter9/Private.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 28 | -------------------------------------------------------------------------------- /chapter6/Serialization.html: -------------------------------------------------------------------------------- 1 | 2 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /frontend-redux-typescript/src/components/PrivateRoute.tsx: -------------------------------------------------------------------------------- 1 | import React,{Component} from 'react'; 2 | import { 3 | Link, 4 | Route, 5 | Navigate, 6 | } from "react-router-dom"; 7 | /* 8 | interface PrivateRouteParams{ 9 | element:Component, 10 | redirectTo:string, 11 | isAuth:boolean, 12 | path:string, 13 | props?:any 14 | }*/ 15 | export default function PrivateRoute({ children, 16 | redirectTo, 17 | isAuth, 18 | path, ...props }:any) { 19 | 20 | console.log('Is auth ',isAuth, ' redirectTo ',redirectTo); 21 | return isAuth ? children : ; 22 | } 23 | -------------------------------------------------------------------------------- /chapter15/PseudoSelector.html: -------------------------------------------------------------------------------- 1 | 2 | 12 | 13 |
14 | Parent 15 |

16 | First 17 |

18 | another line 19 |

20 | 21 |

22 |

23 | Second 24 | third line 25 |

26 |

27 | Third 28 |

29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /chapter14/Seal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 27 | -------------------------------------------------------------------------------- /frontend/src/components/ConditionalRendering.js: -------------------------------------------------------------------------------- 1 | function HomeComponent() { 2 | return
3 |

Home

4 |
; 5 | } 6 | 7 | function LogIn() { 8 | return
9 |

Log In

10 |
; 11 | } 12 | 13 | export default function () 14 | { 15 | let loggedIn = false; 16 | /* 17 | 18 | return (
19 | { 20 | loggedIn?

Home

:

Login

21 | } 22 |
); 23 | */ 24 | let page; 25 | /* if(loggedIn) 26 | { 27 | page = ; 28 | } 29 | else 30 | { 31 | page = 32 | } 33 | return page;*/ 34 | return loggedIn?: ; 35 | } -------------------------------------------------------------------------------- /chapter11/FormatParseDate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 20 | -------------------------------------------------------------------------------- /chapter5/Throw2.html: -------------------------------------------------------------------------------- 1 | 2 | 34 | -------------------------------------------------------------------------------- /chapter8/CallApplyBind.html: -------------------------------------------------------------------------------- 1 | 2 | 28 | 29 | -------------------------------------------------------------------------------- /chapter8/Optional.html: -------------------------------------------------------------------------------- 1 | 2 | 25 | 26 | -------------------------------------------------------------------------------- /fp/Unary.html: -------------------------------------------------------------------------------- 1 | 2 | 24 | 25 | -------------------------------------------------------------------------------- /frontend-redux-typescript/src/features/movies/MovieListUI.tsx: -------------------------------------------------------------------------------- 1 | import {useAppSelector} from "../../app/hooks"; 2 | import {selectTodo, Todo} from "../todo/todoSlice"; 3 | import {MovieModel, selectMovie} from "./movieSlice"; 4 | import MovieUi from "./MovieUi"; 5 | import './Movie.css'; 6 | 7 | export default function MovieListUI() 8 | { 9 | const movie = useAppSelector(selectMovie); 10 | return(
11 | Movie List 12 | { 13 | movie.items.map((m:MovieModel)=>{ 14 | return 19 | }) 20 | } 21 |
); 22 | } -------------------------------------------------------------------------------- /chapter11/DeepClone.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 29 | -------------------------------------------------------------------------------- /chapter6/Assign.html: -------------------------------------------------------------------------------- 1 | 2 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /chapter8/ArrowFunction.html: -------------------------------------------------------------------------------- 1 | 2 | 29 | 30 | -------------------------------------------------------------------------------- /frontend/src/components/Table.js: -------------------------------------------------------------------------------- 1 | export function Row({item}) 2 | { 3 | return(<> 4 | {item} 5 | 6 | 7 | ); 8 | 9 | } 10 | export default function Table() 11 | { 12 | let items= [ 13 | 'One', 14 | 'Two', 15 | 'Three' 16 | ]; 17 | return (
18 | 19 | 20 | { 21 | items.map((item,index) => { 22 | return( 23 | 25 | ) 26 | }) 27 | } 28 | 29 |
30 |
) 31 | } -------------------------------------------------------------------------------- /fp/Monad.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 20 | -------------------------------------------------------------------------------- /fp/RamdaNode.js: -------------------------------------------------------------------------------- 1 | const R = require('ramda'); 2 | const students = [ 3 | { 4 | name: 'Abby', 5 | score: 84, 6 | gender:'Male', 7 | city:'Yangon', 8 | }, 9 | 10 | { 11 | name: 'Eddy', 12 | score: 58, 13 | gender:'Female', 14 | city:'Mandalay', 15 | }, 16 | { 17 | name: 'Another', 18 | score: 81, 19 | gender:'Male', 20 | city:'Yangon', 21 | }, 22 | { 23 | name: 'Jack', 24 | score: 69, 25 | gender:'Female', 26 | city:'Tokyo', 27 | } 28 | ]; 29 | let studentWithSameCity = R.collectBy(R.prop('city'), students); 30 | console.log('SameCity ',studentWithSameCity); 31 | console.log("R.compose ",R.compose); -------------------------------------------------------------------------------- /frontend/src/components/hook/LayoutEffectDemo.js: -------------------------------------------------------------------------------- 1 | import {useLayoutEffect, useRef} from "react"; 2 | 3 | const list = ["apple", 4 | "orange", 5 | "banana" 6 | ] 7 | export default function LayoutEffectDemo() 8 | { 9 | const ref = useRef(null); 10 | useLayoutEffect(()=>{ 11 | const { height } = ref.current.getBoundingClientRect(); 12 | console.log('Height is ',height); 13 | },[]); 14 | console.log('Render'); 15 | return (
16 | LayoutEffectDemo 17 |
18 | { 19 | list.map((item,index)=>{ 20 | return (
{item}
); 21 | }) 22 | } 23 |
24 |
); 25 | } -------------------------------------------------------------------------------- /frontend/src/components/hook/RefCounterProblem.js: -------------------------------------------------------------------------------- 1 | import {useState, useRef} from 'react'; 2 | export default function RefCounterProblem() 3 | { 4 | const [show, setShow] = useState(true); 5 | const ref = useRef(null); 6 | return (
7 | 14 | 21 | {show &&

Hello world

} 22 |
); 23 | } -------------------------------------------------------------------------------- /chapter15/Storage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | 9 | 10 | 11 | 31 | -------------------------------------------------------------------------------- /fp/Ramda_1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 22 | -------------------------------------------------------------------------------- /frontend-redux-typescript/src/features/reviews/reviewApi.ts: -------------------------------------------------------------------------------- 1 | import {API_URL} from "../../setting/API"; 2 | import axios from "../../setting/our_axios"; 3 | import {ReviewModel} from "./reviewSlice"; 4 | const API = API_URL+"/reviews"; 5 | export function apiGetAllReviewForMovie(movieId:string) 6 | { 7 | console.log('API request send to load all review for movie'); 8 | return axios.get(API+'/movie/'+movieId); 9 | } 10 | export function apiSaveReview(review:ReviewModel) 11 | { 12 | return axios.post(API,review); 13 | } 14 | export function apiUpdateReview(review:ReviewModel) 15 | { 16 | return axios.put(API+'/'+review._id,review); 17 | } 18 | export function apiDeleteReview(review:ReviewModel) 19 | { 20 | return axios.delete(API+'/'+review._id); 21 | } -------------------------------------------------------------------------------- /frontend/src/components/hook/FocusDemo.js: -------------------------------------------------------------------------------- 1 | import {useRef} from "react"; 2 | 3 | export default function FocusDemo() 4 | { 5 | const inputRef = useRef(null); 6 | const onClickHandler = ()=>{ 7 | console.log('Focus ',inputRef.current); 8 | inputRef.current.focus(); 9 | 10 | //bad usecase 11 | console.log("Input value ", inputRef.current.value); 12 | inputRef.current.value = 'Something change'; 13 | }; 14 | console.log('Render'); 15 | return
16 | 18 | 23 |
24 | } -------------------------------------------------------------------------------- /chapter12/Generator2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 35 | -------------------------------------------------------------------------------- /fp/WhyApplicative.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 24 | -------------------------------------------------------------------------------- /chapter15/Location.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | 15 |

Attributes

16 | 17 | 18 | 19 | 20 | 29 | -------------------------------------------------------------------------------- /chapter4/Bitwise.html: -------------------------------------------------------------------------------- 1 | 2 | 18 | -------------------------------------------------------------------------------- /chapter3/VarLetConst.html: -------------------------------------------------------------------------------- 1 | 2 | 29 | -------------------------------------------------------------------------------- /fp/RamdaMethod2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 20 | -------------------------------------------------------------------------------- /chapter15/PreventDefault.html: -------------------------------------------------------------------------------- 1 | 2 | 12 | 13 | 14 |
15 | Parent 16 |
17 | Child 18 |
19 |
20 | 21 | 22 | 35 | -------------------------------------------------------------------------------- /chapter6/GetterSetter.html: -------------------------------------------------------------------------------- 1 | 2 | 31 | 32 | -------------------------------------------------------------------------------- /chapter9/BeforeClass.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 23 | -------------------------------------------------------------------------------- /fp/MonadProblem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 21 | -------------------------------------------------------------------------------- /fp/TopKFrequentRamda2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 26 | -------------------------------------------------------------------------------- /frontend-redux-typescript/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-float infinite 3s ease-in-out; 13 | } 14 | } 15 | 16 | .App-header { 17 | min-height: 100vh; 18 | display: flex; 19 | flex-direction: column; 20 | align-items: center; 21 | justify-content: center; 22 | font-size: calc(10px + 2vmin); 23 | } 24 | 25 | .App-link { 26 | color: rgb(112, 76, 182); 27 | } 28 | 29 | @keyframes App-logo-float { 30 | 0% { 31 | transform: translateY(0); 32 | } 33 | 50% { 34 | transform: translateY(10px); 35 | } 36 | 100% { 37 | transform: translateY(0px); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /chapter4/Logical.html: -------------------------------------------------------------------------------- 1 | 2 | 21 | -------------------------------------------------------------------------------- /chapter14/Validation.html: -------------------------------------------------------------------------------- 1 | 2 | 31 | -------------------------------------------------------------------------------- /chapter11/Timer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 | Something 6 |
7 | 10 |
11 | 25 | -------------------------------------------------------------------------------- /chapter13/HowAsync.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | -------------------------------------------------------------------------------- /fp/RealWorldHOF.html: -------------------------------------------------------------------------------- 1 | 2 | 27 | 28 | -------------------------------------------------------------------------------- /fp/ValidationWithFP.html: -------------------------------------------------------------------------------- 1 | 2 | 23 | -------------------------------------------------------------------------------- /chapter12/Generator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 | Something 6 |
7 | 10 |
11 | 25 | -------------------------------------------------------------------------------- /typescript/Static.ts: -------------------------------------------------------------------------------- 1 | class Animal 2 | { 3 | static count:number; 4 | 5 | static 6 | { 7 | console.log('Static block executed'); 8 | Animal.count = 0; 9 | } 10 | id :number; 11 | constructor() 12 | { 13 | console.log('Constructor'); 14 | Animal.count ++; 15 | this.id = Animal.count; 16 | } 17 | getId() 18 | { 19 | return this.id; 20 | } 21 | static staticMethod() 22 | { 23 | console.log('This ',this.count); 24 | } 25 | } 26 | let a1 = new Animal(); 27 | let a2 = new Animal(); 28 | 29 | console.log('A1 ',a1.getId()); 30 | console.log('A2 ',a2.getId()); 31 | Animal.staticMethod(); 32 | console.log('Animal count ',Animal.count); 33 | 34 | function hello() 35 | { 36 | 37 | } 38 | console.log('F.name ',hello.name); -------------------------------------------------------------------------------- /chapter3/AddTwoObject.html: -------------------------------------------------------------------------------- 1 | 2 | 29 | -------------------------------------------------------------------------------- /typescript/ThisTypeGuard.ts: -------------------------------------------------------------------------------- 1 | class FileSystemObject { 2 | isFile(): this is FileRep { 3 | return this instanceof FileRep; 4 | } 5 | isDirectory(): this is Directory { 6 | return this instanceof Directory; 7 | } 8 | isNetworked(): this is Networked & this { 9 | return this.networked; 10 | } 11 | constructor(public path: string, private networked: boolean) {} 12 | } 13 | 14 | class FileRep extends FileSystemObject { 15 | constructor(path: string, public content: string) { 16 | super(path, false); 17 | } 18 | } 19 | 20 | class Directory extends FileSystemObject { 21 | children: FileSystemObject[] = []; 22 | } 23 | 24 | interface Networked { 25 | host: string ; 26 | } 27 | 28 | const fso: FileSystemObject = new FileRep("foo/bar.txt", "foo"); 29 | console.log(' fso ', fso.isFile()); 30 | -------------------------------------------------------------------------------- /chapter8/FunctionValue.html: -------------------------------------------------------------------------------- 1 | 2 | 34 | 35 | -------------------------------------------------------------------------------- /frontend/src/components/JsxProperty.js: -------------------------------------------------------------------------------- 1 | function toUpper(str) 2 | { 3 | return str.toUpperCase(); 4 | } 5 | function Sample({data}) 6 | { 7 | console.log('Data ',data); 8 | return (
11 | Sample {toUpper(data.title)} 12 |
); 13 | } 14 | function AnotherSample({title,message}) 15 | { 16 | return(
17 |
Title =>{title}
18 | 19 | Message =>{message} 20 |
); 21 | } 22 | export default function JsxProperty() 23 | { 24 | let avatar = { 25 | title : "Something", 26 | message : 'Message' 27 | }; 28 | return(
29 | Demo 30 | 33 | 34 |
); 35 | } -------------------------------------------------------------------------------- /frontend/src/components/hook/RefCounter.js: -------------------------------------------------------------------------------- 1 | import {useRef, useState} from "react"; 2 | 3 | export default function RefCounter() 4 | { 5 | const [state,setState] = useState(); 6 | let count = useRef(0); 7 | const incCount = ()=>{ 8 | count.current ++; 9 | console.log('Count is ',count.current); 10 | }; 11 | console.log('Ref Counter render'); 12 | const forceRender= ()=>{ 13 | setState(count); 14 | }; 15 | return (
16 |

Ref Counter

17 | 20 |   21 | 24 |
); 25 | } -------------------------------------------------------------------------------- /chapter5/Switch.html: -------------------------------------------------------------------------------- 1 | 2 | 34 | -------------------------------------------------------------------------------- /backend/routes/todos.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | const todos = require("../controller/ToDoController"); 3 | var router = express.Router(); 4 | 5 | 6 | /* GET todos listing. */ 7 | router.get('/', todos.getAllToDos); 8 | router.get('/completed', todos.getAllCompletedToDos); 9 | router.get('/:id', todos.getToDoById); 10 | router.put('/:id', todos.updateTodo); 11 | router.delete('/:id', todos.deleteTodo); 12 | router.get('/ab+cd',todos.todoWildCard ); 13 | 14 | router.get('/download/file', todos.downloadFile); 15 | router.get('/response/end', todos.responseEnd); 16 | router.get('/response/redirect', todos.todoRedirect); 17 | 18 | router.get('/multiple/another',todos.multipleRoute1); 19 | router.get('/multiple/another',todos.multipleRoute2); 20 | 21 | router.post('/', todos.createTodo); 22 | 23 | module.exports = router; 24 | -------------------------------------------------------------------------------- /chapter15/LiveDOM.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
6 | Div with some class 7 |
8 |
9 | Another Div with some class 10 |
11 | 12 | 13 | 27 | -------------------------------------------------------------------------------- /frontend/src/components/HelloWorld.js: -------------------------------------------------------------------------------- 1 | import ClassComponent from "./ClassComponent"; 2 | import './HelloWorld.css'; 3 | const user = { 4 | name: 'Hedy Lamarr', 5 | imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg', 6 | imageSize: 90, 7 | }; 8 | function HelloWorld() 9 | { 10 | let styleObj = { 11 | width: user.imageSize, 12 | height: user.imageSize 13 | }; 14 | return( 15 |
16 |

Hello World

17 |

How are you 18 | {user.name.toUpperCase()} 19 |

20 | {'Photo 26 |
27 | ); 28 | } 29 | export default HelloWorld; -------------------------------------------------------------------------------- /chapter6/Clone.html: -------------------------------------------------------------------------------- 1 | 2 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /fp/FunctionalErrorHandling.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 27 | -------------------------------------------------------------------------------- /fp/RamdaMethod.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 26 | -------------------------------------------------------------------------------- /fp/Identity.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 28 | -------------------------------------------------------------------------------- /chapter15/Traversal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
6 | Parent 7 |
8 | Child 9 |
10 |
11 |
12 | Another sibling 13 |
14 | 15 | 16 | 28 | -------------------------------------------------------------------------------- /frontend/src/components/pattern/hoc/useHover.js: -------------------------------------------------------------------------------- 1 | import {useEffect, useRef, useState} from "react"; 2 | 3 | export default function useHover() 4 | { 5 | const [hovering, setHover] = useState(false); 6 | const ref = useRef(null); 7 | 8 | const handleMouseOver = () => setHover(true); 9 | const handleMouseOut = () => setHover(false); 10 | 11 | useEffect(() => { 12 | const node = ref.current; 13 | if (node) { 14 | node.addEventListener("mouseover", handleMouseOver); 15 | node.addEventListener("mouseout", handleMouseOut); 16 | 17 | return () => { 18 | node.removeEventListener("mouseover", handleMouseOver); 19 | node.removeEventListener("mouseout", handleMouseOut); 20 | }; 21 | } 22 | }, [ref.current]); 23 | 24 | return [ref, hovering]; 25 | } -------------------------------------------------------------------------------- /frontend/src/components/thirdparty/DatePicker.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import $ from 'jquery'; 3 | //import 'jquery-datepicker/lib/' 4 | import datepickerFactory from 'jquery-datepicker'; 5 | import datepickerJAFactory from 'jquery-datepicker/i18n/jquery.ui.datepicker-ja'; 6 | datepickerFactory($); 7 | datepickerJAFactory($); 8 | 9 | export default class DatePicker extends React.Component 10 | { 11 | componentDidMount() { 12 | $.datepicker.setDefaults($.datepicker.regional['en-GB']); 13 | this.$el = $(this.el); 14 | this.$el.datepicker(); 15 | 16 | } 17 | 18 | componentWillUnmount() { 19 | this.$el.datepicker('destroy'); 20 | } 21 | 22 | render() { 23 | 24 | return (
25 | this.el = el}/> 27 |
); 28 | } 29 | } -------------------------------------------------------------------------------- /chapter14/PropertyAttribute.html: -------------------------------------------------------------------------------- 1 | 2 | 33 | -------------------------------------------------------------------------------- /chapter5/ForEach.html: -------------------------------------------------------------------------------- 1 | 2 | 32 | -------------------------------------------------------------------------------- /chapter13/Promise.html: -------------------------------------------------------------------------------- 1 | 2 | 27 | -------------------------------------------------------------------------------- /chapter5/Exam.html: -------------------------------------------------------------------------------- 1 | 2 | 33 | --------------------------------------------------------------------------------