Skip to content
Snippets Groups Projects
Commit ddade52b authored by Andrej Rasevic's avatar Andrej Rasevic
Browse files

lecture updates

parent 0258c332
No related branches found
No related tags found
No related merge requests found
Showing
with 480 additions and 4 deletions
<!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>
<!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>
<!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>
<!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>
<!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>
......@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8" />
<title>PHP Example</title>
<title>Express Post Example</title>
</head>
<body>
......
......@@ -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 */
......
......@@ -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");
......
......@@ -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");
......
......@@ -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");
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment