",
6 | "private": true,
7 | "scripts": {
8 | "start": "browserify -t babelify views/main.js --standalone main -o public/main.js && node app.js"
9 | },
10 | "dependencies": {
11 | "@babel/preset-env": "^7.0.0",
12 | "@babel/preset-react": "^7.0.0",
13 | "babelify": "^10.0.0",
14 | "browserify": "^14.3.0",
15 | "express": "^4.15.3",
16 | "express-react-views": "0.11.0",
17 | "react": "^16.0.0",
18 | "react-dom": "^16.0.0"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/ExpressReactDemos/dynamic/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ExpressReactDemos/dynamic/public/favicon.ico
--------------------------------------------------------------------------------
/ExpressReactDemos/dynamic/readme.md:
--------------------------------------------------------------------------------
1 | Dynamic react views example
2 | ===========================
3 |
4 | This example is the todo list borrowed from the
5 | [react.js main page](http://facebook.github.io/react/).
6 | We render the application server-side using express-react-views.
7 | An initial set of items has been added
8 | to illustrate populating data from the server.
9 |
10 |
11 | run it
12 | ------
13 |
14 | npm install
15 | npm start
16 |
17 |
18 | How it works
19 | ------------
20 |
21 | 1. Separate the page into two templates,
22 | a [static container component](views/Html.js)
23 | and a [dynamic inner component](views/Content.js).
24 |
25 | 2. Use express-react-views to render and serve the container.
26 | Server-side data can be sent via view options.
27 |
28 | 3. Make your views available client-side as javascript.
29 | Here I created a [main](views/main.js) function for bootstrapping
30 | and packaged it up using [browserify](http://browserify.org/).
31 |
32 | 4. Initialize the client-side app into the dynamic component
33 | using the same data from the server-side.
34 | This example passes the initial data to the client
35 | as the argument of the main function.
36 | Be mindful of potential XSS vulnerabilities.
37 |
--------------------------------------------------------------------------------
/ExpressReactDemos/dynamic/views/main.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var ReactDOM = require('react-dom');
3 | //var Content = require('./TodoApp');
4 | var TodoApp = require('./TodoApp');
5 |
6 | module.exports = function(data, containerId) {
7 | var container = document.getElementById(containerId || 'content');
8 | ReactDOM.render(Error: {error.message}
;
42 | } else if (!isLoaded) {
43 | return (
44 |
45 |
46 | Fetch Data
47 |
48 |
49 | );
50 | } else {
51 | return (
52 |
53 |
Courses Taught at CMU
54 | {
55 | courses.map( (course) => (
56 |
57 |
58 | {course.name} {course.times}
59 |
60 |
62 | ))
63 | }
64 |
13 |
14 |
15 |
16 |
Contact
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
Mailing Address
25 |
26 | Colorado Mesa University
31 |
32 |
Office
33 |
34 | Confluence Hall
35 | Room: 329
36 | Office Hours:
See Here
37 |
Twitter
38 |
39 |
40 |
41 |
42 |
44 | );
45 | }
46 | }
47 |
48 | export default Contact;
--------------------------------------------------------------------------------
/ExpressReactDemos/homepage/views/includes/background.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import background from '../../data/background.json';
3 |
4 | class Background extends React.Component {
5 | constructor(props) {
6 | super(props);
7 | this.state = background;
8 | }
9 |
10 | render() {
11 | return (
12 |
13 |
14 |
15 | Date
16 | Position
17 |
18 |
19 |
20 | {
21 | this.state.map((b) => (
22 |
23 | { b.date}
24 | {b.position }
25 |
26 | ))
27 | }
28 |
29 |
30 | );
31 | }
32 | }
33 |
34 | export default Background
--------------------------------------------------------------------------------
/ExpressReactDemos/homepage/views/includes/banner.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | class Banner extends React.Component {
4 | constructor(props) {
5 | super(props);
6 | this.state = {
7 | name: "Dr. Ram Basnet",
8 | title: "Associate Professor of Computer Science",
9 | univer_url: 'http://www.coloradomesa.edu',
10 | univer_logo: '/assets/cmu-logo.png',
11 | };
12 | }
13 |
14 | render() {
15 | const imgStyle = {
16 | position: "absolute",
17 | top: "5px",
18 | left: "10px",
19 | height: "75px",
20 | };
21 |
22 | return (
23 |
24 |
25 |
27 |
{this.state.name}
28 |
{this.state.title}
29 |
15 |
Teaching
16 |
17 |
18 |
19 |
20 |
Teaching Interests
21 |
22 | Cybersecurity
23 | Python, C++, JavaScript, Databases
24 | Data Science and ML Applications
25 | Web Design and Secure Web App Development
26 |
27 |
28 |
Courses Taught at CMU
29 | {
30 | courses.map( (course) => (
31 |
32 |
33 | {course.name} {course.times}
34 |
35 |
37 | ))
38 | }
39 |
20 | |
21 | {
22 | this.state.nav_text.map((text, index) =>
23 | {text} |
24 | )}
25 | © {this.year}
26 |
27 | );
28 | }
29 | }
30 |
31 | module.exports = Footer;
--------------------------------------------------------------------------------
/ExpressReactDemos/homepage/views/includes/navigation.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | class Navbar extends React.Component {
4 | constructor(props) {
5 | super(props);
6 | this.state = {
7 | nav_text: ['Home', 'Teaching', 'Research', 'Resources', 'Contact'],
8 | //nav_urls:['index', 'teaching.html', 'research.html', 'resources.html', 'contact.html'],
9 | activeIndex: 0, //current active navigation id
10 | menu: false
11 | };
12 | }
13 |
14 | render() {
15 | const show = (this.state.menu) ? "show" : "";
16 | return (
17 |
18 |
19 |
21 |
22 |
23 | {
24 | this.state.nav_text.map((value, i) =>
25 | (this.props.currentPage === value.toLocaleLowerCase()) ? {value} :
26 | {value}
27 | )
28 | }
29 |
30 |
32 | );
33 | }
34 | }
35 |
36 | export default Navbar;
37 |
--------------------------------------------------------------------------------
/ExpressReactDemos/homepage/views/includes/publication.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import publications from '../../data/publications.json';
3 |
4 | class Publication extends React.Component {
5 | constructor(props) {
6 | super(props);
7 | this.state =
8 | {
9 | pub: publications
10 | };
11 | }
12 |
13 | render() {
14 | return (
15 |
16 |
PUBLICATIONS
17 |
18 |
19 |
20 | {
21 | this.state.pub.map((pub) => (
22 |
23 |
24 | {pub.title} {pub.pub_info}
27 |
28 |
29 | ))
30 | }
31 |
32 |
33 |
{props.title}
12 |
30 |
32 |
33 |
35 |
36 |
37 | {props.children}
38 |
39 |
40 |
43 |
44 |
45 |
46 |
47 | );
48 | }
49 |
50 | module.exports = Layout;
51 |
--------------------------------------------------------------------------------
/ExpressReactDemos/homepage/views/research.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Publication from './includes/publication';
3 | import Layout from './layout';
4 |
5 | class Research extends React.Component {
6 | constructor(props) {
7 | super(props);
8 | this.state = {
9 | 'interests': ['Phishing attack detection', 'Data science and applications',
10 | 'Network and web application security', 'Computer Science pedagogy']
11 | };
12 | }
13 |
14 | render() {
15 | return (
16 |
17 |
18 |
19 |
20 |
Research
21 |
22 |
23 |
24 |
25 |
Research Interests
26 |
27 | {
28 | this.state.interests.map( (interest) => (
29 | {interest}
30 | ))
31 | }
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
43 | );
44 | }
45 | }
46 |
47 | export default Research;
--------------------------------------------------------------------------------
/ExpressReactDemos/homepage/views/teaching.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Schedule from './includes/schedule';
3 | import Courses from './includes/courses';
4 | import Layout from './layout';
5 |
6 | class Teaching extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | this.state = {
10 |
11 | }
12 | };
13 |
14 | render() {
15 | return (
16 |
17 |
18 |
19 |
23 |
25 | );
26 | }
27 | }
28 |
29 | export default Teaching;
--------------------------------------------------------------------------------
/ExpressReactDemos/simple/app.js:
--------------------------------------------------------------------------------
1 | var express = require('express');
2 | var http = require('http');
3 | var path = require('path');
4 | var errorHandler = require('errorhandler');
5 | var logger = require('morgan');
6 |
7 | // This should refer to the local React and gets installed via `npm install` in
8 | // the example.
9 | var reactViews = require('express-react-views');
10 |
11 | // routes
12 | var routes = require('./routes');
13 | var user = require('./routes/user');
14 |
15 | var app = express();
16 |
17 | // all environments
18 | app.set('port', process.env.PORT || 3000);
19 | app.set('views', __dirname + '/views');
20 | app.set('view engine', 'jsx');
21 | app.engine('jsx', reactViews.createEngine());
22 |
23 | app.use(logger('dev'));
24 | app.use(express.static(path.join(__dirname, 'public')));
25 |
26 | // development only
27 | if ('development' == app.get('env')) {
28 | app.use(errorHandler());
29 | }
30 |
31 | app.get('/', routes.index);
32 | app.get('/users', user.list);
33 |
34 | http.createServer(app).listen(app.get('port'), function() {
35 | console.log('Express server listening on port ' + app.get('port'));
36 | });
37 |
--------------------------------------------------------------------------------
/ExpressReactDemos/simple/data/users.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "10",
4 | "email": "jdoe@mail.com",
5 | "firstName": "John",
6 | "lastName": "Doe",
7 | "DoB": "01/1/1980"
8 | },
9 | {
10 | "id": "20",
11 | "email": "jsmith@mail.com",
12 | "firstName": "Jane",
13 | "lastName": "Smith",
14 | "DoB": "01/1/1990"
15 | }
16 | ]
--------------------------------------------------------------------------------
/ExpressReactDemos/simple/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "simple-static-pages",
3 | "version": "0.0.1",
4 | "private": true,
5 | "scripts": {
6 | "start": "nodemon app.js"
7 | },
8 | "dependencies": {
9 | "errorhandler": "^1.5.0",
10 | "express": "^4.16.1",
11 | "express-react-views": "^0.11.0",
12 | "morgan": "^1.9.0",
13 | "nodemon": "^2.0.7",
14 | "prop-types": "^15.6.0",
15 | "react": "^16.14.0"
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/ExpressReactDemos/simple/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 | }
--------------------------------------------------------------------------------
/ExpressReactDemos/simple/routes/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | * GET home page.
3 | */
4 |
5 | exports.index = function(req, res) {
6 | // must use render method
7 | // render index.js view with given context
8 | res.render('index', {title: 'Express', foo: {bar: 'baz'}});
9 | };
10 |
--------------------------------------------------------------------------------
/ExpressReactDemos/simple/routes/user.js:
--------------------------------------------------------------------------------
1 | /*
2 | * GET users listing.
3 | */
4 |
5 | exports.list = function(req, res) {
6 | // must use render method
7 | // render users.jsx view with given context
8 | res.render('users', {title: "Users List"});
9 | //res.send('send user data...');
10 | };
11 |
--------------------------------------------------------------------------------
/ExpressReactDemos/simple/views/index.jsx:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var PropTypes = require('prop-types');
3 | var Layout = require('./layout');
4 | import users from '../data/users.json';
5 |
6 | // Contrived example to show how one might use Flow type annotations
7 | function countTo(n) {
8 | var a = [];
9 | for (var i = 0; i < n; i++) {
10 | a.push(i + 1);
11 | }
12 | return a.join(', ');
13 | }
14 |
15 | function Title(props) {
16 | return (
17 | Welcome to {props.title}
18 | );
19 | }
20 |
21 | function Index(props) {
22 | return (
23 |
24 | {props.title}
25 |
27 | I can count to 10:
28 | {countTo(10)}
29 |
30 |
31 |
32 | {users.map( (user) => (
33 |
34 | { user.id }
35 | { user.email}
36 | {user.firstName}
37 | {user.lastName}
38 |
39 | ))}
40 |
41 |
42 |
45 |
46 | );
47 | }
48 |
49 | Index.propTypes = {
50 | title: PropTypes.string,
51 | };
52 |
53 | module.exports = Index;
54 |
--------------------------------------------------------------------------------
/ExpressReactDemos/simple/views/layout.jsx:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var PropTypes = require('prop-types');
3 |
4 | function Layout(props) {
5 | return (
6 |
7 |
8 | {props.title}
9 |
16 |
17 |
18 | {users.map( (user) => (
19 |
20 | { user.id }
21 | { user.email}
22 | {user.firstName}
23 | {user.lastName}
24 |
25 | ))}
26 |
27 |
28 |
29 |
32 |
33 | );
34 | }
35 | }
36 |
37 | module.exports = Users;
--------------------------------------------------------------------------------
/JSDemos/async-input.js:
--------------------------------------------------------------------------------
1 | // Reads asynchronously
2 | // Enter some data
3 | console.log('Enter some data: ')
4 |
5 | // use 'data' event
6 | process.stdin.on('data', data => {
7 | data = data.toString().trimEnd();
8 | console.log(`You typed: ${data}`);
9 | if (data == 'end')
10 | process.exit();
11 | });
12 |
13 | process.stdout.write('Good bye!');
14 |
--------------------------------------------------------------------------------
/JSDemos/async-input.mjs:
--------------------------------------------------------------------------------
1 | /*
2 | Guess the Number game
3 | By:
4 | Date:
5 |
6 | This program generates a random number between 1 and 20 and asks user to guess that number.
7 | If the user guesses it within 6 turns, s/he wins otherwise loses.
8 |
9 | Algorithm steps:
10 | 1.
11 | 2.
12 | 3.
13 |
14 | */
15 |
16 | //const readline = require('readline');
17 | import readline from 'readline'
18 |
19 | const rl = readline.createInterface({
20 | input: process.stdin,
21 | output: process.stdout
22 | });
23 |
24 | var name;
25 | console.log("Hi there! What's your name? ");
26 |
27 | rl.on('line', (line) => {
28 | name = line;
29 | console.log('Hello,', name);
30 | console.log('Are you ready to play this game? ')
31 | });
32 |
33 | console.log('All done!')
34 |
--------------------------------------------------------------------------------
/JSDemos/async-input1.js:
--------------------------------------------------------------------------------
1 |
2 | // use 'readable' event
3 | process.stdin.on('readable', () => {
4 | let chunk;
5 | // Use a loop to make sure we read all available data.
6 | while ((chunk = process.stdin.read()) !== null) {
7 | process.stdout.write(`data: ${chunk}`);
8 | if (chunk.toString().trim() === 'end')
9 | process.exit();
10 | }
11 | });
--------------------------------------------------------------------------------
/JSDemos/async-input2.js:
--------------------------------------------------------------------------------
1 | /*
2 | Guess the Number game
3 | By:
4 | Date:
5 |
6 | This program generates a random number between 1 and 20 and asks user to guess that number.
7 | If the user guesses it within 6 turns, s/he wins otherwise loses.
8 |
9 | Algorithm steps:
10 | 1.
11 | 2.
12 | 3.
13 |
14 | */
15 |
16 | const readline = require('readline');
17 |
18 | const rl = readline.createInterface({
19 | input: process.stdin,
20 | output: process.stdout
21 | });
22 |
23 | var name;
24 | console.log("Hi there! What's your name? ");
25 |
26 | rl.on('line', (line) => {
27 | name = line;
28 | console.log('Hello,', name);
29 | console.log('Are you ready to play this game? ')
30 | });
31 |
32 | console.log('All done!')
33 |
--------------------------------------------------------------------------------
/JSDemos/circle.js:
--------------------------------------------------------------------------------
1 | /*
2 | This is module 2. Defines question, answer and
3 | circumference function
4 | */
5 | const assert = require('assert').strict;
6 | //import assert from 'assert';
7 | //import { fileURLToPath } from 'url';
8 |
9 | const { PI } = Math;
10 |
11 | var question = "What is your quest?";
12 | var answer = "To seek the holy grail.";
13 |
14 | function findCircumference(radius) {
15 | /*
16 | Given radius of a circle, finds and returns its circumference.
17 | */
18 | return 2 * Math.PI * radius;
19 | }
20 |
21 | /*
22 | Given radius of a circle, this funciton finds and returns its area.
23 | */
24 | let findArea = radius => PI * radius ** 2;
25 |
26 | // CommonJS
27 | module.exports = { findCircumference, findArea };
28 |
29 | // ESM - EcmaScript Module
30 | //export { findCircumference, findArea };
31 |
32 | //if (process.argv[1] === fileURLToPath(import.meta.url)) {
33 | if (require.main == module) {
34 | console.log(`question: ${question}`);
35 | console.log(`answer: ${answer}`);
36 | var radius = 2;
37 | var circum = findCircumference(radius);
38 | console.log(`circumference = ${circum.toFixed(2)} unit`);
39 | console.log(`area = ${findArea(radius).toFixed(2)} sq. unit`);
40 | test();
41 | }
42 |
43 | function test() {
44 | var radius = 2;
45 | var circum = findCircumference(radius);
46 | console.log(circum.toFixed(2));
47 | assert.strictEqual(circum.toFixed(2), '12.57', 'not equal');
48 | console.log('all test cases passed!');
49 | }
50 |
--------------------------------------------------------------------------------
/JSDemos/cold/1.ans:
--------------------------------------------------------------------------------
1 | 1
2 |
--------------------------------------------------------------------------------
/JSDemos/cold/1.in:
--------------------------------------------------------------------------------
1 | 3
2 | 5 -10 15
3 |
--------------------------------------------------------------------------------
/JSDemos/cold/2.ans:
--------------------------------------------------------------------------------
1 | 5
2 |
--------------------------------------------------------------------------------
/JSDemos/cold/2.in:
--------------------------------------------------------------------------------
1 | 5
2 | -14 -5 -39 -5 -7
3 |
--------------------------------------------------------------------------------
/JSDemos/cold/cold.js:
--------------------------------------------------------------------------------
1 | /*
2 | open.kattis.com
3 | cold problem
4 | - automated testing demo
5 | */
6 | const readline = require('readline');
7 | const assert = require('assert').strict;
8 |
9 | function answer(nums) {
10 | var count = 0;
11 | for(var i in nums) {
12 | if (parseInt(nums[i]) < 0)
13 | count += 1;
14 | }
15 | return count;
16 | }
17 |
18 | function test() {
19 | assert.strictEqual(answer([1, 2, -100, 4545, -34343, -3343]), 3);
20 | assert.strictEqual(answer([123, 343, 3434, 34535, 57, 0]), 0);
21 | console.log('all test cases passed...')
22 | }
23 |
24 | function solve() {
25 | const rl = readline.createInterface({
26 | input: process.stdin,
27 | output: process.stdout
28 | });
29 |
30 | lineCount = 1;
31 | rl.on('line', (line) => {
32 | //console.log(line);
33 | if (lineCount == 2) {
34 | var nums = line.split(' ');
35 | console.log(answer(nums));
36 | }
37 | else
38 | lineCount += 1;
39 | })
40 | }
41 |
42 | if (require.main == module) {
43 | if (process.argv.length > 2 && process.argv[2] === 'test')
44 | test()
45 | else
46 | solve();
47 | }
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/JSDemos/commandLineArgs.js:
--------------------------------------------------------------------------------
1 | // proces.argv is an array containing the command line arguments
2 | // the first element will be path to node
3 | // the second element will be the name of the JS file
4 | // the next elements will be any additional command line arguments
5 |
6 | for (var index in process.argv)
7 | console.log(index, process.argv[index]);
8 |
9 | // run the program in terminal
10 | // node commandLineArgsDemo.js
11 | // node commandLineArgsDemo.js arg1 arg2 name test key=val
12 |
--------------------------------------------------------------------------------
/JSDemos/hello.js:
--------------------------------------------------------------------------------
1 | // open.kattis.com hello problem
2 | // accessing the main module: https://nodejs.org/docs/latest/api/all.html#modules_accessing_the_main_module
3 |
4 | const assert = require('assert').strict;
5 |
6 | function answer() {
7 | return 'Hello World!';
8 | }
9 |
10 | function solve() {
11 | console.log(answer());
12 | }
13 |
14 | function test() {
15 | assert.strictEqual(answer(), 'Hello World!');
16 | console.log('all test cases passed...');
17 | }
18 |
19 | // if the script file has been run directly using node
20 | if (require.main == module) {
21 | if (process.argv.length > 2 && process.argv[2] == 'test')
22 | test();
23 | else
24 | solve();
25 | }
--------------------------------------------------------------------------------
/JSDemos/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
15 |
16 |
17 | this is a para....
18 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/JSDemos/input.txt:
--------------------------------------------------------------------------------
1 | first line
2 | hello there! This is second line.
3 | Third line is as plain as This.
4 | Apple
5 | How about ball?
6 |
--------------------------------------------------------------------------------
/JSDemos/library/my_math.js:
--------------------------------------------------------------------------------
1 | const assert = require('assert').strict;
2 |
3 | /*
4 | factorial module
5 | */
6 |
7 | //find the factorial of given n
8 | function factorial(n) {
9 | var fact = 1;
10 | for (var i=2; i<=n; i++)
11 | fact *= i;
12 | return fact;
13 | }
14 |
15 | /*
16 | Given n, the following function finds nth value in fibonacci sequence
17 | */
18 | var memo = {};
19 | function fib(n) {
20 | if (n <= 1)
21 | return 1;
22 | if (n in memo)
23 | return memo[n];
24 | return memo[n] = fib(n-1) + fib(n-2);
25 | }
26 |
27 | function test() {
28 | assert.strictEqual(factorial(5), 120);
29 | assert.strictEqual(factorial(10), 3628800);
30 | assert.strictEqual(factorial(50), 30414093201713378043612608166064768844377641568960512000000000000);
31 | // factorial(100) too large of integer for JS to handle
32 | //assert.strictEqual(factorial(100), 93326215443944152681699238856266700490715968264381621468592963895217599993229915608941463976156518286253697920827223758251185210916864000000000000000000000000);
33 | console.log('all test cases passed...');
34 | }
35 |
36 | if (require.main == module) {
37 | test();
38 | }
39 |
40 | module.exports = { fib, factorial };
41 |
42 |
--------------------------------------------------------------------------------
/JSDemos/library/my_math.mjs:
--------------------------------------------------------------------------------
1 | //const assert = require('assert').strict;
2 | import assert from 'assert';
3 | import {fileURLToPath} from 'url';
4 | /*
5 | factorial module
6 | */
7 |
8 | //find the factorial of given n
9 | function factorial(n) {
10 | var fact = 1;
11 | for (var i=2; i<=n; i++)
12 | fact *= i;
13 | return fact;
14 | }
15 |
16 | /*
17 | Given n, the following function finds nth value in fibonacci sequence
18 | */
19 | var memo = {};
20 | function fib(n) {
21 | if (n <= 1)
22 | return 1;
23 | if (n in memo)
24 | return memo[n];
25 | return memo[n] = fib(n-1) + fib(n-2);
26 | }
27 |
28 | function test() {
29 | assert.strictEqual(factorial(5), 120);
30 | assert.strictEqual(factorial(10), 3628800);
31 | assert.strictEqual(factorial(50), 30414093201713378043612608166064768844377641568960512000000000000);
32 | // factorial(100) too large of integer for JS to handle
33 | //assert.strictEqual(factorial(100), 93326215443944152681699238856266700490715968264381621468592963895217599993229915608941463976156518286253697920827223758251185210916864000000000000000000000000);
34 | console.log('all test cases passed...');
35 | }
36 |
37 | if (process.argv[1] === fileURLToPath(import.meta.url)) {
38 | //if (require.main == module) {
39 | test();
40 | }
41 |
42 | export { fib, factorial };
43 |
44 |
--------------------------------------------------------------------------------
/JSDemos/moduleDemo.js:
--------------------------------------------------------------------------------
1 | /*
2 | CommonJS Syntax
3 | This is module 1. Declares question, answer, and areaOfCircle function
4 | */
5 |
6 | const circle = require('./circle');
7 | const {findCircumference, findArea} = require('./circle');
8 | // ESM doesn't work!
9 | //const {fib} = require('./library/my_math.mjs')
10 |
11 | // CommonJS module works!
12 | const {fib} = require('./library/my_math.js')
13 |
14 | var question = "What is the meaning of Life, the Universe, and Everything?";
15 | var answer = 42;
16 |
17 | function main() {
18 | console.log(`question: ${question}`);
19 | console.log(`answer: ${answer}`);
20 |
21 | var area = findArea(10);
22 | console.log(`area = ${area.toFixed(2)} sq. unit`);
23 | var circum = findCircumference(10);
24 | console.log(`circumference = ${circum.toFixed(2)} unit`);
25 | console.log(`Third number in fibonacci seq = ${fib(3)}`);
26 | }
27 |
28 | if (require.main === module) {
29 | main();
30 | }
31 |
--------------------------------------------------------------------------------
/JSDemos/moduleDemo.mjs:
--------------------------------------------------------------------------------
1 | /*
2 | This is module 1. Declares question, answer, and areaOfCircle function
3 | */
4 |
5 | // ES6 syntax
6 | import {fileURLToPath} from 'url';
7 |
8 | //const circle = require('./circle');
9 | // const {findCircumference, findArea} = require('./circle');
10 | //import {findCircumference, findArea} from './circle.js'
11 |
12 | //const math = require('./library/my_math.js');
13 | // import all the exported names under math namespace
14 | import { findCircumference, findArea } from './circle.js';
15 | import * as my_math from './library/my_math.mjs';
16 |
17 | var question = "What is the meaning of Life, the Universe, and Everything?";
18 | var answer = 42;
19 |
20 | function main() {
21 | console.log(`question: ${question}`);
22 | console.log(`answer: ${answer}`);
23 |
24 | var area = findArea(10);
25 | console.log(`area = ${area.toFixed(2)} sq. unit`);
26 | var circum = findCircumference(10);
27 | console.log(`circumference = ${circum.toFixed(2)} unit`);
28 | console.log(`Third number in fibonacci seq = ${my_math.fib(3)}`);
29 | }
30 |
31 | if (process.argv[1] === fileURLToPath(import.meta.url)) {
32 | //if (require.main === module) {
33 | main();
34 | }
35 |
--------------------------------------------------------------------------------
/JSDemos/myScript.mjs:
--------------------------------------------------------------------------------
1 | document.write("hello from script file...Output Demo 1
5 |
17 | All done...
18 |
19 |
--------------------------------------------------------------------------------
/JSDemos/output2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Output Demo 2
5 | All done...
10 |
11 |
--------------------------------------------------------------------------------
/JSDemos/output3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Output Demo 3
5 |
9 | All done...
10 |
11 |
--------------------------------------------------------------------------------
/JSDemos/output4.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Output Demo 4
5 |
10 | All done...
11 |
12 |
--------------------------------------------------------------------------------
/JSDemos/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "JSDemo",
3 | "version": "1.0.0",
4 | "lockfileVersion": 2,
5 | "requires": true,
6 | "packages": {
7 | "": {
8 | "name": "JSDemo",
9 | "version": "1.0.0",
10 | "license": "ISC",
11 | "dependencies": {
12 | "chalk": "^5.0.0",
13 | "readline-sync": "^1.4.10"
14 | }
15 | },
16 | "node_modules/chalk": {
17 | "version": "5.0.0",
18 | "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.0.0.tgz",
19 | "integrity": "sha512-/duVOqst+luxCQRKEo4bNxinsOQtMP80ZYm7mMqzuh5PociNL0PvmHFvREJ9ueYL2TxlHjBcmLCdmocx9Vg+IQ==",
20 | "engines": {
21 | "node": "^12.17.0 || ^14.13 || >=16.0.0"
22 | },
23 | "funding": {
24 | "url": "https://github.com/chalk/chalk?sponsor=1"
25 | }
26 | },
27 | "node_modules/readline-sync": {
28 | "version": "1.4.10",
29 | "resolved": "https://registry.npmjs.org/readline-sync/-/readline-sync-1.4.10.tgz",
30 | "integrity": "sha512-gNva8/6UAe8QYepIQH/jQ2qn91Qj0B9sYjMBBs3QOB8F2CXcKgLxQaJRP76sWVRQt+QU+8fAkCbCvjjMFu7Ycw==",
31 | "engines": {
32 | "node": ">= 0.8.0"
33 | }
34 | }
35 | },
36 | "dependencies": {
37 | "chalk": {
38 | "version": "5.0.0",
39 | "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.0.0.tgz",
40 | "integrity": "sha512-/duVOqst+luxCQRKEo4bNxinsOQtMP80ZYm7mMqzuh5PociNL0PvmHFvREJ9ueYL2TxlHjBcmLCdmocx9Vg+IQ=="
41 | },
42 | "readline-sync": {
43 | "version": "1.4.10",
44 | "resolved": "https://registry.npmjs.org/readline-sync/-/readline-sync-1.4.10.tgz",
45 | "integrity": "sha512-gNva8/6UAe8QYepIQH/jQ2qn91Qj0B9sYjMBBs3QOB8F2CXcKgLxQaJRP76sWVRQt+QU+8fAkCbCvjjMFu7Ycw=="
46 | }
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/JSDemos/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "JSDemo",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "builtinInput.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "dependencies": {
13 | "chalk": "^5.0.0",
14 | "readline-sync": "^1.4.10"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/JSDemos/packages_demo/chalk-demo.mjs:
--------------------------------------------------------------------------------
1 | import readlineSync from 'readline-sync';
2 | //const {chalk} = require('chalk');
3 | import chalk from 'chalk';
4 | const log = console.log
5 |
6 | var user, pw, command;
7 |
8 | log(chalk.black.bold.bgYellow(' Your Account '));
9 | user = readlineSync.question(chalk.gray.underline(' USER NAME ') + ' : ');
10 | pw = readlineSync.question(chalk.gray.underline(' PASSWORD ') + ' : ',
11 | {hideEchoBack: true});
12 | // Authorization ...
13 | log(chalk.green('Welcome, ' + user + '!'));
14 | command = readlineSync.prompt();
15 |
--------------------------------------------------------------------------------
/JSDemos/sync-input.js:
--------------------------------------------------------------------------------
1 | // must install readline-sync package via npm
2 | // https://www.npmjs.com/package/readline-sync
3 | // on terminal: $ npm i readline-sync
4 | const readline = require('readline-sync');
5 |
6 | var name = readline.question('May I have your name? ');
7 | console.log('Hi there ' + name + '!');
8 |
9 | var num1 = readline.question("Enter a number between 1 and 20: ");
10 | console.log("Type of num1 is %s", typeof(num1));
11 | var num2 = Number(num1) ** 2;
12 | console.log("Squared of %s = %s", num1, num2);
13 |
14 | if (readline.keyInYN('Do you want this module?')) {
15 | // 'Y' key was pressed.
16 | console.log('Installing now...');
17 | // Do something...
18 | } else {
19 | // Another key was pressed.
20 | console.log('Searching another...');
21 | // Do something...
22 | }
23 |
24 |
25 | animals = ['Lion', 'Elephant', 'Crocodile', 'Giraffe', 'Hippo'];
26 | index = readline.keyInSelect(animals, 'Which animal?');
27 | //console.log(index)
28 | if (index === -1)
29 | console.log('Cancelling...')
30 | else
31 | console.log('Ok, ' + animals[index] + ' goes to your room.');
32 |
33 |
--------------------------------------------------------------------------------
/JSDemos/unittesting/demo1.js:
--------------------------------------------------------------------------------
1 | const functions = require('./functions');
2 | const assert = require('assert');
3 |
4 | // ES6 Module syntax not supported yet by jest
5 | //import * as functions from './functions.js'
6 | //import assert from 'assert'
7 |
8 | function test() {
9 | assert.strictEqual(functions.add(-10, -5), -15, '-5 + -10 != -15');
10 | assert.strictEqual(functions.add(5, -100), -95, '5 + -100 != -95');
11 | assert.strictEqual(functions.add(100, 0), 100, '100 + 0 != 100');
12 |
13 | assert.strictEqual(functions.sub(-10, -5), -5, '-10 - -5 != -5');
14 | assert.strictEqual(functions.sub(5, -100), 105, '5 - -100 != 105');
15 | assert.strictEqual(functions.sub(100, 0), 100, '100 - 0 != 100');
16 | console.log('All test cases passed!');
17 | }
18 |
19 |
20 | function solve() {
21 | let n1 = 10;
22 | let n2 = 5;
23 | console.log(`${n1} + ${n2} = ${n1+n2}`);
24 | console.log(`${n1} - ${n2} = ${n1-n2}`);
25 | }
26 |
27 | test();
28 | solve();
29 |
--------------------------------------------------------------------------------
/JSDemos/unittesting/demo2.js:
--------------------------------------------------------------------------------
1 | const functions = require('./functions');
2 | const url = require('url');
3 | const assert = require('assert');
4 |
5 | //import assert from 'assert'
6 | //import { fileURLToPath } from 'url';
7 | //import * as functions from './functions.js';
8 |
9 |
10 |
11 |
12 | function test() {
13 | assert.strictEqual(functions.add(-10, -5), -15, '-5 + -10 != -15');
14 | assert.strictEqual(functions.add(5, -100), -95, '5 + -100 != -95');
15 | assert.strictEqual(functions.add(100, 0), 100, '100 + 0 != 100');
16 |
17 | assert.strictEqual(functions.sub(-10, -5), -5, '-10 - -5 != -5');
18 | assert.strictEqual(functions.sub(5, -100), 105, '5 - -100 != 105');
19 | assert.strictEqual(functions.sub(100, 0), 100, '100 - 0 != 100');
20 | console.log('All test cases passed!');
21 | }
22 |
23 |
24 | function solve() {
25 | let n1 = 10;
26 | let n2 = 5;
27 | console.log(`${n1} + ${n2} = ${n1+n2}`);
28 | console.log(`${n1} - ${n2} = ${n1-n2}`);
29 | }
30 |
31 | if (require.main == module) {
32 | //if (process.argv[1] === url.fileURLToPath(import.meta.url)) {
33 | if (process.argv.length > 2 && process.argv[2] === 'test')
34 | test();
35 | else
36 | solve();
37 | }
38 |
39 |
--------------------------------------------------------------------------------
/JSDemos/unittesting/func_sub.test.js:
--------------------------------------------------------------------------------
1 |
2 | // Use CommonJS syntax (default in NodeJS)
3 | const functions = require('./functions');
4 | // Use ES6 syntax
5 | // import * as functions from './functions.js'
6 |
7 | test('two minus three is -1', () => {
8 | expect(functions.sub(2, 3)).toBe(-1);
9 | });
10 |
11 | test('two minus three is five', () => {
12 | expect(functions.sub(2, 3)).toBe(1);
13 | });
14 |
15 | test('-5 minus -15 equals -20', () => {
16 | expect(functions.sub(-5, -15)).toBe(-20);
17 | });
18 |
19 | test('subtracting floating point numbers', ()=>{
20 | expect(functions.sub(3.5, 3.1)).toBeCloseTo(0.4);
21 | });
22 |
23 |
--------------------------------------------------------------------------------
/JSDemos/unittesting/functions.js:
--------------------------------------------------------------------------------
1 | function add(n1, n2) {
2 | return n1+n2;
3 | }
4 |
5 | const sub = (n1, n2) => n1-n2;
6 |
7 | //exports.add = add
8 | //exports.sub = sub;
9 |
10 | //export {add, sub}
11 | module.exports = {add, sub}
--------------------------------------------------------------------------------
/JSDemos/unittesting/functions_add.test.js:
--------------------------------------------------------------------------------
1 |
2 | // Use CommonJS format (default in NodeJS)
3 | const functions = require('./functions');
4 |
5 | test('two plus three is six', () => {
6 | expect(functions.add(2, 3)).toBe(6);
7 | });
8 |
9 | test('two plus three is five', () => {
10 | expect(functions.add(2, 3)).toBe(5);
11 | });
12 |
13 | test('-5 plus -15 equals -20', () => {
14 | expect(functions.add(-5, -15)).toBe(-20);
15 | });
16 |
17 | test('adding floating point numbers correctly', () => {
18 | expect(functions.add(0.1, 0.2)).toBeCloseTo(0.3);
19 | });
20 |
21 | test('adding floating point numbers fail', () => {
22 | expect(functions.add(0.1, 0.2)).toBe(0.3); // doesn't work because of rounding error
23 | });
--------------------------------------------------------------------------------
/JSDemos/unittesting/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "unittest",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "demo1.js",
6 | "scripts": {
7 | "test": "jest",
8 | "start": "node ./bin/www"
9 | },
10 | "keywords": [],
11 | "author": "",
12 | "license": "ISC",
13 | "devDependencies": {
14 | "jest": "^26.6.3"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Ram Basnet
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/NextJSDemos/mflix/.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 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 |
21 | # debug
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 |
26 | # local env files
27 | .env.local
28 | .env.development.local
29 | .env.test.local
30 | .env.production.local
31 |
--------------------------------------------------------------------------------
/NextJSDemos/mflix/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "with-mongodb",
3 | "version": "0.1.0",
4 | "scripts": {
5 | "dev": "next dev",
6 | "build": "next build",
7 | "start": "next start"
8 | },
9 | "dependencies": {
10 | "mongodb": "^3.5.9",
11 | "next": "latest",
12 | "react": "^16.13.1",
13 | "react-dom": "^16.13.1"
14 | },
15 | "license": "MIT"
16 | }
17 |
--------------------------------------------------------------------------------
/NextJSDemos/mflix/pages/api/movies.js:
--------------------------------------------------------------------------------
1 | // this end point will return 20 movies as json data
2 |
3 | import { connectToDatabase } from "../../util/mongodb";
4 |
5 | export default async (req, res) => {
6 | const { db } = await connectToDatabase();
7 |
8 | const movies = await db
9 | .collection("movies")
10 | .find({})
11 | .sort({ metacritic: -1 })
12 | .limit(20)
13 | .toArray();
14 |
15 | res.json(movies);
16 | };
--------------------------------------------------------------------------------
/NextJSDemos/mflix/pages/movies.js:
--------------------------------------------------------------------------------
1 | import { connectToDatabase } from "../util/mongodb";
2 |
3 | // create React Movies component
4 | export default function Movies({ movies }) {
5 | return (
6 |
7 |
Top 20 Movies of All Time
8 |
9 | (According to Metacritic)
10 |
11 |
12 | {movies.map((movie) => (
13 |
14 | {movie.title}
15 | {movie.metacritic}
16 | {movie.plot}
17 |
18 | ))}
19 |
20 |
6 |
Top 1000 Movies of All Time
7 |
8 | (According to Metacritic)
9 |
10 |
11 | {movies.map((movie) => (
12 |
13 | {movie.title}
14 | {movie.metacritic}
15 | {movie.plot}
16 |
17 | ))}
18 |
19 |
3 |
--------------------------------------------------------------------------------
/NextJSDemos/mflix/util/mongodb.js:
--------------------------------------------------------------------------------
1 | import { MongoClient } from 'mongodb'
2 |
3 | const { MONGODB_URI, MONGODB_DB } = process.env
4 |
5 | if (!MONGODB_URI) {
6 | throw new Error(
7 | 'Please define the MONGODB_URI environment variable inside .env.local'
8 | )
9 | }
10 |
11 | if (!MONGODB_DB) {
12 | throw new Error(
13 | 'Please define the MONGODB_DB environment variable inside .env.local'
14 | )
15 | }
16 |
17 | /**
18 | * Global is used here to maintain a cached connection across hot reloads
19 | * in development. This prevents connections growing exponentially
20 | * during API Route usage.
21 | */
22 | let cached = global.mongo
23 |
24 | if (!cached) {
25 | cached = global.mongo = { conn: null, promise: null }
26 | }
27 |
28 | export async function connectToDatabase() {
29 | if (cached.conn) {
30 | return cached.conn
31 | }
32 |
33 | if (!cached.promise) {
34 | const opts = {
35 | useNewUrlParser: true,
36 | useUnifiedTopology: true,
37 | }
38 |
39 | cached.promise = MongoClient.connect(MONGODB_URI, opts).then((client) => {
40 | return {
41 | client,
42 | db: client.db(MONGODB_DB),
43 | }
44 | })
45 | }
46 | cached.conn = await cached.promise
47 | return cached.conn
48 | }
49 |
--------------------------------------------------------------------------------
/NodeDemos/datetime.js:
--------------------------------------------------------------------------------
1 | exports.myDateTime = () => new Date();
2 |
--------------------------------------------------------------------------------
/NodeDemos/hello-world.js:
--------------------------------------------------------------------------------
1 | var http = require("http");
2 | var dt = require("./datetime");
3 |
4 | const hostname = "127.0.0.1";
5 | const port = "9999";
6 |
7 | const server = http.createServer((request, response) => {
8 | response.writeHead(200, { "Content-Type": "text/html" });
9 | response.write(" Hello from server... ");
10 | response.write(` Current date and time on the server: +
11 | ${dt.myDateTime()} +
`);
12 | response.end();
13 | });
14 |
15 | server.listen(port, hostname, err => {
16 | if (err) {
17 | console.log("error occured: ", err);
18 | throw err;
19 | }
20 | console.log(`Server running at http://${hostname}:${port}/`);
21 | });
22 |
--------------------------------------------------------------------------------
/NodeDemos/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
19 |
20 |
21 |
22 | My First HTML Page served by node server...
23 | This is a paragraph.
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/NodeDemos/index.js:
--------------------------------------------------------------------------------
1 | var http = require("http");
2 | var fs = require("fs");
3 |
4 | const hostname = "127.0.0.1";
5 | const port = "9999";
6 |
7 | var server = http.createServer((req, res) => {
8 | fs.readFile("index.html", (err, data) => {
9 | if (err) {
10 | res.writeHead(404, { "Content-Type": "text/html" });
11 | res.write("404 Page Not found!");
12 | return res.end();
13 | }
14 | res.writeHead(200, { "Content-Type": "text/html" });
15 | res.write(data);
16 | return res.end();
17 | });
18 | });
19 |
20 | server.listen(port, hostname, err => {
21 | if (err) {
22 | console.log("error occured: ", err);
23 | throw err;
24 | }
25 | console.log(`Server running at http://${hostname}:${port}/`);
26 | });
27 |
--------------------------------------------------------------------------------
/ReactDemos/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Ram Basnet
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/ReactDemos/README.md:
--------------------------------------------------------------------------------
1 | # React-Demo-Apps
--------------------------------------------------------------------------------
/ReactDemos/homepage-v0/assets/EBC.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/homepage-v0/assets/EBC.JPG
--------------------------------------------------------------------------------
/ReactDemos/homepage-v0/assets/basnet_icon32.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/homepage-v0/assets/basnet_icon32.ico
--------------------------------------------------------------------------------
/ReactDemos/homepage-v0/assets/bg-footer.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/homepage-v0/assets/bg-footer.jpg
--------------------------------------------------------------------------------
/ReactDemos/homepage-v0/assets/bg-header.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/homepage-v0/assets/bg-header.jpg
--------------------------------------------------------------------------------
/ReactDemos/homepage-v0/assets/cmu-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/homepage-v0/assets/cmu-logo.png
--------------------------------------------------------------------------------
/ReactDemos/homepage-v0/assets/contact.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/homepage-v0/assets/contact.jpeg
--------------------------------------------------------------------------------
/ReactDemos/homepage-v0/assets/honda.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/homepage-v0/assets/honda.jpg
--------------------------------------------------------------------------------
/ReactDemos/homepage-v0/assets/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/homepage-v0/assets/profile.png
--------------------------------------------------------------------------------
/ReactDemos/homepage-v0/assets/profile1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/homepage-v0/assets/profile1.jpg
--------------------------------------------------------------------------------
/ReactDemos/homepage-v0/assets/research.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/homepage-v0/assets/research.jpg
--------------------------------------------------------------------------------
/ReactDemos/homepage-v0/assets/resources.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/homepage-v0/assets/resources.jpg
--------------------------------------------------------------------------------
/ReactDemos/homepage-v0/assets/style.css:
--------------------------------------------------------------------------------
1 | #header {
2 | background-image:url(bg-header.jpg);
3 | background-repeat: no-repeat;
4 | background-size: cover;
5 | color: white;
6 | text-shadow: 2px 2px rgb(4, 4, 109);
7 | background-color: maroon;
8 | border-radius: 0px;
9 | }
10 |
11 | #footer {
12 | clear:both;
13 | height:100px;
14 | background:url(bg-footer.jpg);
15 | background-repeat: repeat-x;
16 | background-color: rgb(103, 141, 15);
17 | height: 100px;
18 | }
19 |
20 | .officehour
21 | {
22 | background:#D0F5A9;
23 | font-weight: bolder;
24 | text-align: center;
25 | font-size: 14px;
26 | }
27 |
28 | .schedule
29 | {
30 | background:#FAFFFA;
31 | text-align: center;
32 | font-size: 14px;
33 | }
34 |
35 | #footer {
36 | margin-bottom:0;
37 | padding-top:45px;
38 | }
39 |
40 | #currentPage
41 | {
42 | color: white;
43 | }
--------------------------------------------------------------------------------
/ReactDemos/homepage-v0/assets/teaching.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/homepage-v0/assets/teaching.png
--------------------------------------------------------------------------------
/ReactDemos/homepage-v1/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Ram Basnet
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/ReactDemos/homepage-v1/README.md:
--------------------------------------------------------------------------------
1 | # Static Site Demo
2 | Demo Nodejs app using express and pug
3 |
--------------------------------------------------------------------------------
/ReactDemos/homepage-v1/app.js:
--------------------------------------------------------------------------------
1 | var createError = require("http-errors")
2 | var express = require("express")
3 | var path = require("path")
4 | var cookieParser = require("cookie-parser")
5 | var logger = require("morgan")
6 |
7 | var homeRouter = require("./routes/home")
8 |
9 | var app = express()
10 |
11 | // view engine setup
12 | app.set("views", path.join(__dirname, "views"))
13 | app.set("view engine", "pug")
14 |
15 | app.use(logger("dev"))
16 | app.use(express.json())
17 | app.use(express.urlencoded({ extended: false }))
18 | app.use(cookieParser())
19 |
20 | app.use(express.static(path.join(__dirname, "public")))
21 | app.use("/home", express.static(path.join(__dirname, "public")))
22 |
23 | // add your routers
24 | app.use("/", homeRouter)
25 |
26 | // catch 404 and forward to error handler
27 | app.use(function(req, res, next) {
28 | next(createError(404))
29 | })
30 |
31 | // error handler
32 | app.use(function(err, req, res, next) {
33 | // set locals, only providing error in development
34 | res.locals.message = err.message
35 | res.locals.error = req.app.get("env") === "development" ? err : {}
36 |
37 | // render the error page
38 | res.status(err.status || 500)
39 | res.render("error")
40 | })
41 |
42 | module.exports = app
43 |
--------------------------------------------------------------------------------
/ReactDemos/homepage-v1/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "expressdemo",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "start": "nodemon ./bin/www",
7 | "compile": "webpack"
8 | },
9 | "dependencies": {
10 | "cookie-parser": "~1.4.3",
11 | "debug": "~2.6.9",
12 | "express": "~4.16.0",
13 | "http-errors": "~1.6.2",
14 | "morgan": "~1.9.0",
15 | "nodemon": "^2.0.7",
16 | "pug": "^3.0.2"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/ReactDemos/homepage-v1/public/assets/EBC.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/homepage-v1/public/assets/EBC.JPG
--------------------------------------------------------------------------------
/ReactDemos/homepage-v1/public/assets/basnet_icon32.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/homepage-v1/public/assets/basnet_icon32.ico
--------------------------------------------------------------------------------
/ReactDemos/homepage-v1/public/assets/bg-footer.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/homepage-v1/public/assets/bg-footer.jpg
--------------------------------------------------------------------------------
/ReactDemos/homepage-v1/public/assets/bg-header.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/homepage-v1/public/assets/bg-header.jpg
--------------------------------------------------------------------------------
/ReactDemos/homepage-v1/public/assets/cmu-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/homepage-v1/public/assets/cmu-logo.png
--------------------------------------------------------------------------------
/ReactDemos/homepage-v1/public/assets/contact.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/homepage-v1/public/assets/contact.jpeg
--------------------------------------------------------------------------------
/ReactDemos/homepage-v1/public/assets/honda.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/homepage-v1/public/assets/honda.jpg
--------------------------------------------------------------------------------
/ReactDemos/homepage-v1/public/assets/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/homepage-v1/public/assets/profile.png
--------------------------------------------------------------------------------
/ReactDemos/homepage-v1/public/assets/profile1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/homepage-v1/public/assets/profile1.jpg
--------------------------------------------------------------------------------
/ReactDemos/homepage-v1/public/assets/research.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/homepage-v1/public/assets/research.jpg
--------------------------------------------------------------------------------
/ReactDemos/homepage-v1/public/assets/resources.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/homepage-v1/public/assets/resources.jpg
--------------------------------------------------------------------------------
/ReactDemos/homepage-v1/public/assets/style.css:
--------------------------------------------------------------------------------
1 | #header {
2 | background-image:url(bg-header.jpg);
3 | background-repeat: no-repeat;
4 | background-size: cover;
5 | color: white;
6 | text-shadow: 2px 2px rgb(4, 4, 109);
7 | background-color: maroon;
8 | border-radius: 0px;
9 | }
10 |
11 | #footer {
12 | clear:both;
13 | height:100px;
14 | background:url(bg-footer.jpg);
15 | background-repeat: repeat-x;
16 | background-color: rgb(103, 141, 15);
17 | height: 100px;
18 | }
19 |
20 | .officehour
21 | {
22 | background:#D0F5A9;
23 | font-weight: bolder;
24 | text-align: center;
25 | font-size: 14px;
26 | }
27 |
28 | .schedule
29 | {
30 | background:#FAFFFA;
31 | text-align: center;
32 | font-size: 14px;
33 | }
34 |
35 | #footer {
36 | margin-bottom:0;
37 | padding-top:45px;
38 | }
39 |
40 | #currentPage
41 | {
42 | color: white;
43 | }
--------------------------------------------------------------------------------
/ReactDemos/homepage-v1/public/assets/teaching.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/homepage-v1/public/assets/teaching.png
--------------------------------------------------------------------------------
/ReactDemos/homepage-v1/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 |
--------------------------------------------------------------------------------
/ReactDemos/homepage-v1/public/ui/footer.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /*
4 | Goal is to render the following HTML:
5 |
6 | Home | Teaching |
7 | Research | Resources |
8 | Contact
9 | © 2018
10 |
11 | */
12 |
13 | class Footer extends React.Component {
14 | constructor(props) {
15 | super(props);
16 | this.state = {
17 | nav_text: ['Home', 'Teaching', 'Research', 'Resources', 'Contact'],
18 | nav_urls: ['index.html', 'teaching.html', 'research.html', 'resources.html', 'contact.html'],
19 | current_nav: 0 //current navigation id
20 | };
21 | this.year = new Date();
22 | this.year = this.year.getFullYear();
23 | }
24 |
25 | render() {
26 | return (
27 |
28 | |
29 | {
30 | this.state.nav_text.map((text, index) =>
31 | {text} |
32 | )}
33 | © {this.year}
34 |
35 | );
36 | }
37 | }
38 |
39 | ReactDOM.render(
40 | ,
41 | document.getElementById('footer')
42 | );
--------------------------------------------------------------------------------
/ReactDemos/homepage-v1/public/ui/header.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /*
4 | // goal is to render this HTML component
5 |
6 |
8 | Dr. Ram Basnet
9 | Associate Professor of Computer Science
10 | */
11 |
12 | class Header extends React.Component {
13 | constructor(props) {
14 | super(props);
15 | this.state = {
16 | name: "Dr. Ram Basnet",
17 | title: "Associate Professor of Computer Science",
18 | univer_url: 'http://www.coloradomesa.edu',
19 | univer_logo: 'assets/cmu-logo.png'
20 | }
21 | }
22 | render() {
23 | const imgStyle = {
24 | position: "absolute",
25 | top: "5px",
26 | left: "10px",
27 | height: "75px"
28 | };
29 |
30 | return (
31 |
32 |
33 |
35 |
{this.state.name}
36 |
{this.state.title}
37 |
25 |
26 |
28 |
{this.state.name}
29 |
{this.state.title}
30 |
Home | Teaching |
8 | Research | Resources |
9 | Contact
10 | © 2018
11 |
12 | */
13 |
14 | class Footer extends React.Component {
15 | constructor(props) {
16 | super(props);
17 | this.state = {
18 | nav_text:['Home', 'Teaching', 'Research', 'Resources', 'Contact'],
19 | nav_urls:['index.html', 'teaching.html', 'research.html', 'resources.html', 'contact.html'],
20 | current_nav:0 //current navigation id
21 | };
22 | this.year = new Date();
23 | this.year = this.year.getFullYear();
24 | }
25 |
26 | render() {
27 | return (
28 |
29 | |
30 | {
31 | this.state.nav_text.map( (text, index) =>
32 | {text} |
33 | )}
34 | © {this.year}
35 |
36 | );
37 | }
38 | }
39 |
40 |
41 | ReactDOM.render(
42 | ,
43 | document.getElementById('footer')
44 | );
--------------------------------------------------------------------------------
/ReactDemos/homepage-v2/src/components/page-not-found.js:
--------------------------------------------------------------------------------
1 | import { useLocation } from "react-router-dom";
2 |
3 | export default function PageNotFound() {
4 | let location = useLocation();
5 |
6 | return (
7 |
8 |
9 | Error 404: Page Not Found {location.pathname}
10 |
11 |
12 | );
13 | }
--------------------------------------------------------------------------------
/ReactDemos/homepage-v2/src/components/publication.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import publications from './data/publications.json'
4 |
5 | /*
6 | Goal is to generate HTML Component
7 |
8 |
9 |
10 | A Similarity Measure for Clustering and its Applications PDF Proceedings of World Academy of Science, Engineering and Technology , Vol. 31, ISSN
14 | 1307-6884, pp.490-496, Vienna, Austria, July 2008.
15 |
16 |
17 | */
18 |
19 | class Publication extends React.Component {
20 | constructor(props) {
21 | super(props);
22 | this.state =
23 | {
24 | };
25 | }
26 |
27 | render() {
28 | return (
29 |
30 | {publications.map( (pub) => (
31 |
32 |
33 | {pub.title} {pub.detail}
36 |
37 |
38 | ))}
39 |
40 | );
41 | }
42 | }
43 |
44 | ReactDOM.render(
45 |
8 | ,
10 | document.getElementById('content')
11 | );
12 |
13 | // If you want to start measuring performance in your app, pass a function
14 | // to log results (for example: reportWebVitals(console.log))
15 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
16 | reportWebVitals();
17 |
--------------------------------------------------------------------------------
/ReactDemos/homepage-v2/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 |
--------------------------------------------------------------------------------
/ReactDemos/homepage-v2/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 |
--------------------------------------------------------------------------------
/ReactDemos/react-jsx-intro/01-js-hello.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 | Hello HTML!
9 |
10 |
11 | Hello HTML!
12 |
13 |
14 |
15 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/ReactDemos/react-jsx-intro/02-js-funct-event.html:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 | JavaScript function and event
11 |
12 |
18 |
19 |
20 |
21 | JavaScript function and event
22 |
23 | JavaScript can change the style and content of an HTML element.
24 |
25 |
36 |
37 | Click Me!
38 |
39 |
40 |
--------------------------------------------------------------------------------
/ReactDemos/react-jsx-intro/03-react-hello.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 | Hello React!
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/ReactDemos/react-jsx-intro/08-jsx-render-update.html:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 |
11 | Rendering and Updating Components
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | Rendering and Updating Components
21 |
22 |
39 |
40 |
--------------------------------------------------------------------------------
/ReactDemos/react-jsx-intro/09-jsx-function-component.html:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 | Creating Components with Function
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | Creating Components with Function
22 |
23 |
24 |
37 |
38 |
--------------------------------------------------------------------------------
/ReactDemos/react-jsx-intro/10-jsx-conditional-rendering.html:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | Conditional Rendering
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | Conditional Rendering
17 |
18 |
19 |
49 |
50 |
--------------------------------------------------------------------------------
/ReactDemos/route-testing-demo/.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 |
--------------------------------------------------------------------------------
/ReactDemos/route-testing-demo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "route-demo",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.11.8",
7 | "@testing-library/react": "^11.2.3",
8 | "@testing-library/user-event": "^12.6.0",
9 | "react": "^17.0.1",
10 | "react-dom": "^17.0.1",
11 | "react-router-dom": "^5.2.0",
12 | "react-scripts": "4.0.1",
13 | "web-vitals": "^0.2.4"
14 | },
15 | "scripts": {
16 | "start": "react-scripts start",
17 | "build": "react-scripts build",
18 | "test": "react-scripts test",
19 | "eject": "react-scripts eject"
20 | },
21 | "eslintConfig": {
22 | "extends": [
23 | "react-app",
24 | "react-app/jest"
25 | ]
26 | },
27 | "browserslist": {
28 | "production": [
29 | ">0.2%",
30 | "not dead",
31 | "not op_mini all"
32 | ],
33 | "development": [
34 | "last 1 chrome version",
35 | "last 1 firefox version",
36 | "last 1 safari version"
37 | ]
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/ReactDemos/route-testing-demo/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/route-testing-demo/public/favicon.ico
--------------------------------------------------------------------------------
/ReactDemos/route-testing-demo/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | React App
28 |
29 |
30 | You need to enable JavaScript to run this app.
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/ReactDemos/route-testing-demo/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/route-testing-demo/public/logo192.png
--------------------------------------------------------------------------------
/ReactDemos/route-testing-demo/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rambasnet/NodeJS/b5c4163fd4c7c572545ecbb30efb15bd49b7db9f/ReactDemos/route-testing-demo/public/logo512.png
--------------------------------------------------------------------------------
/ReactDemos/route-testing-demo/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 |
--------------------------------------------------------------------------------
/ReactDemos/route-testing-demo/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/ReactDemos/route-testing-demo/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-spin infinite 20s linear;
13 | }
14 | }
15 |
16 | .App-header {
17 | background-color: #282c34;
18 | min-height: 100vh;
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | justify-content: center;
23 | font-size: calc(10px + 2vmin);
24 | color: white;
25 | }
26 |
27 | .App-link {
28 | color: #61dafb;
29 | }
30 |
31 | @keyframes App-logo-spin {
32 | from {
33 | transform: rotate(0deg);
34 | }
35 | to {
36 | transform: rotate(360deg);
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/ReactDemos/route-testing-demo/src/App.js:
--------------------------------------------------------------------------------
1 |
2 | import './App.css';
3 |
4 | import React from "react";
5 |
6 | import Menu from './components/menu'
7 |
8 | // This site has 3 pages, all of which are rendered
9 | // dynamically in the browser (not server rendered).
10 | //
11 | // Although the page does not ever refresh, notice how
12 | // React Router keeps the URL up to date as you navigate
13 | // through the site. This preserves the browser history,
14 | // making sure things like the back button and bookmarks
15 | // work properly.
16 |
17 | function App() {
18 | return (
19 |
12 |
Dashboard
13 |
14 |
15 | );
16 | }
17 | }
18 |
19 | export default Dashboard;
--------------------------------------------------------------------------------
/ReactDemos/route-testing-demo/src/components/home.js:
--------------------------------------------------------------------------------
1 | import LoginForm from './login_form'
2 |
3 | export default function Home() {
4 | return (
5 |
10 | );
11 | }
--------------------------------------------------------------------------------
/ReactDemos/route-testing-demo/src/components/login_form.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | class LoginForm extends React.Component {
4 | constructor(props) {
5 | super(props);
6 | this.state = {};
7 | }
8 |
9 | render() {
10 | return (
11 |
45 | );
46 | }
47 | }
48 |
49 | export default LoginForm;
--------------------------------------------------------------------------------
/ReactDemos/route-testing-demo/src/components/menu.js:
--------------------------------------------------------------------------------
1 | import {
2 | BrowserRouter as Router,
3 | Switch,
4 | Route,
5 | Link
6 | } from "react-router-dom";
7 |
8 | import Dashboard from './dashboard';
9 | import Home from './home';
10 |
11 | function Menu() {
12 | return (
13 |
14 |
15 |
16 |
17 |
19 |
20 |
22 |
23 |
25 |
26 |
27 |
28 |
29 | {/*
30 | A
looks through all its children
31 | elements and renders the first one whose path
32 | matches the current URL. Use a any time
33 | you have multiple routes, but you want only one
34 | of them to render at a time
35 | */}
36 |
37 |
38 |
40 |
41 |
43 |
44 |
46 |
47 |
49 | );
50 | }
51 |
52 | export default Menu
53 |
54 | function About() {
55 | return (
56 |
57 |
About
58 |
59 | );
60 | }
--------------------------------------------------------------------------------
/ReactDemos/route-testing-demo/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 |
--------------------------------------------------------------------------------
/ReactDemos/route-testing-demo/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 |
7 | ReactDOM.render(
8 |
9 | ,
11 | document.getElementById('root')
12 | );
13 |
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 |
--------------------------------------------------------------------------------
/ReactDemos/route-testing-demo/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 |
--------------------------------------------------------------------------------
/ReactDemos/route-testing-demo/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 |
--------------------------------------------------------------------------------
/ReactDemos/route-testing-demo/src/tests/App.test.js:
--------------------------------------------------------------------------------
1 | // https://testing-library.com/docs/queries/about/
2 | import { render, screen } from '@testing-library/react';
3 | import App from '../App';
4 |
5 | test('renders Dashboard link', () => {
6 | render( 
9 | 
19 | 
18 | 
23 | 
7 |
8 |