diff --git a/cmsc388a/code_examples/state/events_and_state.html b/cmsc388a/code_examples/state/events_and_state.html
new file mode 100644
index 0000000000000000000000000000000000000000..2db4468d0e1d3c267750ae83d028c9845987010c
--- /dev/null
+++ b/cmsc388a/code_examples/state/events_and_state.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>Events and State</title>
+ <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+ <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+ <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+ <style>
+ #container {
+ padding: 50px;
+ background-color: #FFF;
+ }
+ </style>
+</head>
+<body>
+ <div id="container"></div>
+ <script type="text/babel">
+ class Counter extends React.Component {
+ render() {
+ var textStyle = {
+ fontSize: 72,
+ fontFamily: "sans-serif",
+ color: "#333",
+ fontWeight: "bold"
+ };
+
+ return (
+ <div style={textStyle}>
+ {this.props.display}
+ </div>
+ );
+ }
+ }
+
+ class CounterParent extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ count: 0
+ };
+ }
+
+ render() {
+ var backgroundStyle = {
+ padding: 50,
+ backgroundColor: "#FFC53A",
+ width: 250,
+ height: 100,
+ borderRadius: 10,
+ textAlign: "center"
+ };
+ var buttonStyle = {
+ fontSize: "1em",
+ width: 30,
+ height: 30,
+ fontFamily: "sans-serif",
+ color: "#333",
+ fontWeight: "bold",
+ lineHeight: "3px"
+ };
+
+ return (
+ <div style={backgroundStyle}>
+ <Counter display={this.state.count} />
+ <button style={buttonStyle}>+</button>
+ </div>
+ );
+ }
+ }
+
+ ReactDOM.render(
+ <div>
+ <CounterParent />
+ </div>,
+ document.querySelector("#container")
+ );
+ </script>
+</body>
+
+</html>
diff --git a/cmsc388a/code_examples/state/events_and_state_v2.html b/cmsc388a/code_examples/state/events_and_state_v2.html
new file mode 100644
index 0000000000000000000000000000000000000000..62076c19ba77cbf3a4bbe2a1762c0bce94d02567
--- /dev/null
+++ b/cmsc388a/code_examples/state/events_and_state_v2.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>Events and State</title>
+ <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+ <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+ <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+ <style>
+ #container {
+ padding: 50px;
+ background-color: #FFF;
+ }
+ </style>
+</head>
+<body>
+ <div id="container"></div>
+ <script type="text/babel">
+ class Counter extends React.Component {
+ render() {
+ var textStyle = {
+ fontSize: 72,
+ fontFamily: "sans-serif",
+ color: "#333",
+ fontWeight: "bold"
+ };
+
+ return (
+ <div style={textStyle}>
+ {this.props.display}
+ </div>
+ );
+ }
+ }
+
+ class CounterParent extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ count: 0
+ };
+
+ this.increase = this.increase.bind(this);
+ }
+
+ increase(e) {
+ this.setState({
+ count: this.state.count + 1
+ });
+ }
+
+ render() {
+ var backgroundStyle = {
+ padding: 50,
+ backgroundColor: "#FFC53A",
+ width: 250,
+ height: 100,
+ borderRadius: 10,
+ textAlign: "center"
+ };
+ var buttonStyle = {
+ fontSize: "1em",
+ width: 30,
+ height: 30,
+ fontFamily: "sans-serif",
+ color: "#333",
+ fontWeight: "bold",
+ lineHeight: "3px"
+ };
+
+ return (
+ <div style={backgroundStyle}>
+ <Counter display={this.state.count} />
+ <button onClick={this.increase} style={buttonStyle}>+</button>
+ </div>
+ );
+ }
+ }
+
+ ReactDOM.render(
+ <div>
+ <CounterParent />
+ </div>,
+ document.querySelector("#container")
+ );
+ </script>
+</body>
+
+</html>
diff --git a/cmsc388a/code_examples/state/events_and_state_v3.html b/cmsc388a/code_examples/state/events_and_state_v3.html
new file mode 100644
index 0000000000000000000000000000000000000000..b52e19429e5de643a50e6ae531bd416d27c7aa3b
--- /dev/null
+++ b/cmsc388a/code_examples/state/events_and_state_v3.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>Events and State</title>
+ <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+ <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+ <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+ <style>
+ #container {
+ padding: 50px;
+ background-color: #FFF;
+ }
+ </style>
+</head>
+<body>
+ <div id="container"></div>
+ <script type="text/babel">
+ class Counter extends React.Component {
+ render() {
+ var textStyle = {
+ fontSize: 72,
+ fontFamily: "sans-serif",
+ color: "#333",
+ fontWeight: "bold"
+ };
+
+ return (
+ <div style={textStyle}>
+ {this.props.display}
+ </div>
+ );
+ }
+ }
+
+ class CounterParent extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ count: 0
+ };
+
+ this.increase = this.increase.bind(this);
+ }
+
+ increase(e) {
+ var currentCount = this.state.count;
+ if (e.shiftKey) {
+ currentCount += 10;
+ } else {
+ currentCount += 1;
+ }
+ this.setState({
+ count: currentCount
+ });
+ };
+
+ render() {
+ var backgroundStyle = {
+ padding: 50,
+ backgroundColor: "#FFC53A",
+ width: 250,
+ height: 100,
+ borderRadius: 10,
+ textAlign: "center"
+ };
+ var buttonStyle = {
+ fontSize: "1em",
+ width: 30,
+ height: 30,
+ fontFamily: "sans-serif",
+ color: "#333",
+ fontWeight: "bold",
+ lineHeight: "3px"
+ };
+
+ return (
+ <div style={backgroundStyle}>
+ <Counter display={this.state.count} />
+ <button onClick={this.increase} style={buttonStyle}>+</button>
+ </div>
+ );
+ }
+ }
+
+ ReactDOM.render(
+ <div>
+ <CounterParent />
+ </div>,
+ document.querySelector("#container")
+ );
+ </script>
+</body>
+
+</html>
diff --git a/cmsc388a/code_examples/state/events_and_state_v4.html b/cmsc388a/code_examples/state/events_and_state_v4.html
new file mode 100644
index 0000000000000000000000000000000000000000..0730e1f6d39c3998de10571035e32d30e90c41c3
--- /dev/null
+++ b/cmsc388a/code_examples/state/events_and_state_v4.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>Events and State</title>
+ <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+ <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+ <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+ <style>
+ #container {
+ padding: 50px;
+ background-color: #FFF;
+ }
+ </style>
+</head>
+<body>
+ <div id="container"></div>
+ <script type="text/babel">
+ class Counter extends React.Component {
+ render() {
+ var textStyle = {
+ fontSize: 72,
+ fontFamily: "sans-serif",
+ color: "#333",
+ fontWeight: "bold"
+ };
+
+ return (
+ <div style={textStyle}>
+ {this.props.display}
+ </div>
+ );
+ }
+ }
+
+ class CounterParent extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ count: 0
+ };
+
+ this.increase = this.increase.bind(this);
+ this.decrease = this.decrease.bind(this);
+ }
+
+ increase(e) {
+ var currentCount = this.state.count;
+ if (e.shiftKey) {
+ currentCount += 10;
+ } else {
+ currentCount += 1;
+ }
+ this.setState({
+ count: currentCount
+ });
+ }
+
+ decrease(e) {
+ var currentCount = this.state.count;
+ if (e.shiftKey) {
+ currentCount -= 10;
+ } else {
+ currentCount -= 1;
+ }
+ this.setState({
+ count: currentCount
+ });
+ }
+
+ render() {
+ var backgroundStyle = {
+ padding: 50,
+ backgroundColor: "#FFC53A",
+ width: 250,
+ height: 100,
+ borderRadius: 10,
+ textAlign: "center"
+ };
+ var buttonStyle = {
+ fontSize: "1em",
+ width: 30,
+ height: 30,
+ fontFamily: "sans-serif",
+ color: "#333",
+ fontWeight: "bold",
+ lineHeight: "3px"
+ };
+
+ return (
+ <div style={backgroundStyle}>
+ <Counter display={this.state.count} />
+ <button onClick={this.increase} style={buttonStyle}>+</button>
+ <button onClick={this.decrease} style={buttonStyle}>-</button>
+ </div>
+ );
+ }
+ }
+
+ ReactDOM.render(
+ <div>
+ <CounterParent />
+ </div>,
+ document.querySelector("#container")
+ );
+ </script>
+</body>
+
+</html>
diff --git a/cmsc388a/code_examples/state/state_example.html b/cmsc388a/code_examples/state/state_example.html
new file mode 100644
index 0000000000000000000000000000000000000000..0e47eff64788ff49ff7419413dd3fc46089b8a46
--- /dev/null
+++ b/cmsc388a/code_examples/state/state_example.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>Component State Example</title>
+ <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+ <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+ <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+
+<body>
+ <div id="container"></div>
+
+ <script type="text/babel">
+ class Counter extends React.Component {
+ constructor(props) {
+ console.log("inside counter constructor");
+ super(props);
+
+ this.state = {
+ strikes: 0
+ };
+
+ console.log(this);
+ this.timerTick = this.timerTick.bind(this);
+ }
+
+ timerTick() {
+ console.log("inside timerTick");
+ console.log(this);
+ this.setState({
+ strikes: this.state.strikes + 100
+ });
+ }
+
+ componentDidMount() {
+ console.log("inside didMount");
+ console.log(this);
+ setInterval(this.timerTick, 1000);
+ }
+
+ render() {
+ return (
+ <h1>{this.state.strikes}</h1>
+ );
+ }
+ }
+
+ class CounterDisplay extends React.Component {
+ render() {
+ var divStyle = {
+ width: 250,
+ textAlign: "center",
+ backgroundColor: "black",
+ padding: 40,
+ fontFamily: "sans-serif",
+ color: "#999",
+ borderRadius: 10
+ };
+ console.log("returning from Counter Display");
+ return (
+ <div style={divStyle}>
+ <Counter/>
+ </div>
+ );
+ }
+ }
+
+ ReactDOM.render(
+ <CounterDisplay/>,
+ document.querySelector("#container")
+ );
+ </script>
+</body>
+
+</html>
diff --git a/javascript_resources/code_examples/ExpressCode/examples/formPost.html b/javascript_resources/code_examples/ExpressCode/examples/formPost.html
index b27570ed0f35f46aa99abd4f0a6cc1eff78f0309..d1045bee5e9d004a4eae57fe23ba025eec6ffe7f 100755
--- a/javascript_resources/code_examples/ExpressCode/examples/formPost.html
+++ b/javascript_resources/code_examples/ExpressCode/examples/formPost.html
@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8" />
- <title>PHP Example</title>
+ <title>Express Post Example</title>
</head>
<body>
diff --git a/javascript_resources/code_examples/ExpressCode/examples/loggingHTML.js b/javascript_resources/code_examples/ExpressCode/examples/loggingHTML.js
index e772a1ebf7cd6657cb8e5d0b1d8e026f7868a62e..9f8381196a83ef6ce885c0d5b06981a824c13394 100755
--- a/javascript_resources/code_examples/ExpressCode/examples/loggingHTML.js
+++ b/javascript_resources/code_examples/ExpressCode/examples/loggingHTML.js
@@ -2,8 +2,15 @@ let http = require("http");
let express = require("express"); /* Accessing express module */
let app = express(); /* app is a request handler function */
let morganLogger = require("morgan");
+var fs = require('fs');
+var path = require('path');
+var morgan = require('morgan');
-app.use(morganLogger("short")); /* You can try dev instead of short */
+
+var accessLogStream = fs.createWriteStream(path.join(__dirname, 'access.log'), { flags: 'a' });
+
+app.use(morganLogger("dev")); /* You can try dev instead of short */
+app.use(morgan('tiny', { stream: accessLogStream }))
app.use(function(request, response) {
let statusCode = 200; /* OK */
diff --git a/javascript_resources/code_examples/ExpressCode/examples/postParameters.js b/javascript_resources/code_examples/ExpressCode/examples/postParameters.js
index bafc598558f66da745af51055441015c74b1bc78..d9e68707a1d54133fa3e01b40a156ecd612ecf1a 100755
--- a/javascript_resources/code_examples/ExpressCode/examples/postParameters.js
+++ b/javascript_resources/code_examples/ExpressCode/examples/postParameters.js
@@ -15,7 +15,13 @@ app.post("/", function(request, response) {
let variables = { semester: request.body.semester,
teacher : request.body.teacher
};
- response.render("courseInfo", variables);
+ console.log(request.body);
+ //response.render("courseInfo", variables);
+
+ //switch to make an api
+
+ // is there a way to do both???
+ response.json(variables);
});
console.log("Server started on port 7003");
diff --git a/javascript_resources/code_examples/ExpressCode/examples/routing.js b/javascript_resources/code_examples/ExpressCode/examples/routing.js
index 67e3258a3526564fd2da9d45e66e4113a4b90430..9ded02823ce555d3e91b6313504a211bf5151b33 100755
--- a/javascript_resources/code_examples/ExpressCode/examples/routing.js
+++ b/javascript_resources/code_examples/ExpressCode/examples/routing.js
@@ -18,6 +18,10 @@ app.get("/class/:semester", function(request, response) {
response.end("Information for semester: " + request.params.semester);
});
+app.get("/children/:name", function(request, response) {
+ response.json({ firstName: request.params.name });
+});
+
/* Middleware function invoked if above ones don't match */
app.use(function (request, response) {
response.status(404).send("Resource not found");
diff --git a/javascript_resources/code_examples/ExpressCode/examples/servingFiles.js b/javascript_resources/code_examples/ExpressCode/examples/servingFiles.js
index 372e80e646af7d4e385d92a67bd6d5f812164972..23c646c40efdb57635a2bd49347b6ad45a11638f 100755
--- a/javascript_resources/code_examples/ExpressCode/examples/servingFiles.js
+++ b/javascript_resources/code_examples/ExpressCode/examples/servingFiles.js
@@ -18,7 +18,7 @@ app.use(function(request, response) {
let statusCode = 200; /* OK */
response.writeHead(statusCode, {"Content-type": "text/html"});
- response.end("<h1>Requested file not found2</h1>");
+ response.end("<h1>Requested file not found!</h1>");
});
console.log("Server started on port 7001");