From ddade52b66dd0ffdc57e5683a1f2e2819cb5d470 Mon Sep 17 00:00:00 2001
From: Andrej Rasevic <andrej@rasevicengineering.com>
Date: Tue, 15 Jan 2019 13:44:13 -0500
Subject: [PATCH] lecture updates
---
.../code_examples/state/events_and_state.html | 83 +++++++++++++
.../state/events_and_state_v2.html | 91 ++++++++++++++
.../state/events_and_state_v3.html | 97 +++++++++++++++
.../state/events_and_state_v4.html | 111 ++++++++++++++++++
.../code_examples/state/state_example.html | 77 ++++++++++++
.../ExpressCode/examples/formPost.html | 2 +-
.../ExpressCode/examples/loggingHTML.js | 9 +-
.../ExpressCode/examples/postParameters.js | 8 +-
.../ExpressCode/examples/routing.js | 4 +
.../ExpressCode/examples/servingFiles.js | 2 +-
10 files changed, 480 insertions(+), 4 deletions(-)
create mode 100644 cmsc388a/code_examples/state/events_and_state.html
create mode 100644 cmsc388a/code_examples/state/events_and_state_v2.html
create mode 100644 cmsc388a/code_examples/state/events_and_state_v3.html
create mode 100644 cmsc388a/code_examples/state/events_and_state_v4.html
create mode 100644 cmsc388a/code_examples/state/state_example.html
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 0000000..2db4468
--- /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 0000000..62076c1
--- /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 0000000..b52e194
--- /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 0000000..0730e1f
--- /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 0000000..0e47eff
--- /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 b27570e..d1045be 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 e772a1e..9f83811 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 bafc598..d9e6870 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 67e3258..9ded028 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 372e80e..23c646c 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");
--
GitLab