freeCodeCamp video project tutorials.
Here is the code for project tutorials Beau Carnes has created for freeCodeCamp.
O = minimax
1 2 3 4 5 6 7 8
_|_|_ _|_|_ _|_|_ _|_|_ _|X|_ O|X|_ O|X|X O|X|X
_|_|_ _|O|_ _|O|_ _|O|_ _|O|_ _|O|_ _|O|_ O|O|_
_|_|X _|_|X _|X|X O|X|X O|X|X O|X|X O|X|X O|X|X
On the step 5 mimimax can win right NOW, but chose long 100% win way.
In Postman It shows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot POST /notes</pre>
</body>
</html>
Instead of
"Hello"
In browser : -
"Cannot GET /notes"
Any Idea, what is wrong, where is wrong? :)
Hiya,
Thanks for the lovely tutorial @beaucarnes . I followed along with your tutorial yesterday evening, typing as you talked, in order to review React and noticed what I believe to be two wee typos/errors:
Box needs props.id to add an id to the given box element that it is rendering ...
class Box extends React.Component {
selectBox = () => {
this.props.selectBox(this.props.row, this.props.col)
};
render() {
return(
<div
className = {this.props.boxClass}
id = {this.props.id}
onClick = {this.selectBox}
>
</div>
);
};
};
... however, the Grid component is passing the property boxId rather than the property id...
class Grid extends React.Component {
render() {
const width = this.props.cols * 15;
let rowsArr = [];
let boxClass = "";
for (let i = 0; i < this.props.rows; i++) {
for (let j = 0; j < this.props.cols; j ++) {
let boxId = i + "_" + j;
boxClass = this.props.gridFull[i][j] ? "box on" : "box off";
rowsArr.push(
<Box
boxClass = {boxClass}
key = {boxId}
boxId = {boxId}
row = {i}
col = {j}
selectBox = {this.props.selectBox}
/>
);
};
};
return(
<div className="grid" style={{width: width}}>
{rowsArr}
</div>
);
};
};
Similarly, Grid passes the property key to Box, but the latter doesn't use/need it. In fact it seems that there are no other instances of key in the whole JS file.
Change the following line of Box component's render method:
id = {this.props.id}
to the following, which should keep things clearer and more consistent (e.g., as compared to boxClass):
id = {this.props.boxId}
and remove the following line from Grid:
key={boxId}
Thanks again Beau!
There is a bug: if AI wins from the last turn of the board, then the pop-up should display 'You Lose,' but it currently shows 'Tie.' This issue can be fixed by adding an additional condition inside the if() statement of the checkTie() function that checks for any winning combinations.
TypeError: _registerServiceWorker__WEBPACK_IMPORTED_MODULE_4__ is not a function
Module../src/index.js
src/index.js:33
30 | </Provider>,
31 | document.getElementById('root')
32 | );
> 33 | registerServiceWorker();
34 |
35 | // If you want your app to work offline and load faster, you can change
36 | // unregister() to register() below. Note this comes with some pitfalls.
View compiled
__webpack_require__
/home/sabrina/Desktop/API/chat/chat/webpack/bootstrap:782
779 | };
780 |
781 | // Execute the module function
> 782 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 783 |
784 | // Flag the module as loaded
785 | module.l = true;
View compiled
fn
/home/sabrina/Desktop/API/chat/chat/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
0
http://localhost:3001/static/js/main.chunk.js:837:18
__webpack_require__
/home/sabrina/Desktop/API/chat/chat/webpack/bootstrap:782
779 | };
780 |
781 | // Execute the module function
> 782 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 783 |
784 | // Flag the module as loaded
785 | module.l = true;
View compiled
checkDeferredModules
/home/sabrina/Desktop/API/chat/chat/webpack/bootstrap:45
42 | }
43 | if(fulfilled) {
44 | deferredModules.splice(i--, 1);
> 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
| ^ 46 | }
47 | }
48 | return result;
View compiled
Array.webpackJsonpCallback [as push]
/home/sabrina/Desktop/API/chat/chat/webpack/bootstrap:32
29 | deferredModules.push.apply(deferredModules, executeModules || []);
30 |
31 | // run deferred modules when all chunks ready
> 32 | return checkDeferredModules();
| ^ 33 | };
34 | function checkDeferredModules() {
35 | var result;
View compiled
(anonymous function)
http://localhost:3001/static/js/main.chunk.js:1:57
But in my Compiler it says : -
Hello! I just completed your node web scraper tutorial, and it was a great video. However, you have an unnecessary line of code:
let users = [];
When this line of code is removed, the code behaves the same way. I can create a pull request to address this.
When the user clicks on tiles "3,4,5" (they should win), the AI player plays too (this is wrt the code at the end of section 5) and chooses tile number "2". On tracing the path of the programme, we see that in the script, the 'turn' function is called which is meant to "checkWin" which will return "True" (as the human player has won). But, according to the way java execution works, simply returning from that function doesn't stop the execution of the next line of code in the parent function. Thus, even though we win, the only condition being checked before the AI player playing is if the game has been drawn, not won. This can be rectified easily by changing line 31 from
if (!checkTie()) turn(bestSpot(), aiPlayer);to
if (!checkTie() && !checkWin(origBoard, huPlayer)) turn(bestSpot(), aiPlayer);MongoParseError: URI does not have hostname, domain name and tld
at parseSrvConnectionString (E:\Projects\NodeAPI\node_modules\mongodb-core\lib\uri_parser.js:41:21)
at parseConnectionString (E:\Projects\NodeAPI\node_modules\mongodb-core\lib\uri_parser.js:509:12)
at connect (E:\Projects\NodeAPI\node_modules\mongodb\lib\operations\mongo_client_ops.js:195:3)
at connectOp (E:\Projects\NodeAPI\node_modules\mongodb\lib\operations\mongo_client_ops.js:284:3)
at executeOperation (E:\Projects\NodeAPI\node_modules\mongodb\lib\utils.js:416:24)
at MongoClient.connect (E:\Projects\NodeAPI\node_modules\mongodb\lib\mongo_client.js:175:10)
at Function.MongoClient.connect (E:\Projects\NodeAPI\node_modules\mongodb\lib\mongo_client.js:341:22)
at Object. (E:\Projects\NodeAPI\server.js:12:13)
at Module._compile (internal/modules/cjs/loader.js:816:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
name: 'MongoParseError',
[Symbol(mongoErrorContextSymbol)]: {} }
Great video about creating the Game of Life.
I was trying to enhance the gridSize function to call this.seed and then this.playButton after this.clear but I get an out of bounds error when choosing the largest grid because the array is still 50x30 and it's trying to seed 70x50. This obviously doesn't happen in the original code when you select gridSize and then separately click the seed button.
I'm not sure if this is state vs prop vars, an array creation issue or if this is a array scope issue? Any thoughts would be appreciated.
If a clicked clear button, generation still increasing continuosly.
i want, if clear button press then generation should set to 0 and stop till playButton press.
MongoParseError: URI does not have hostname, domain name and tld..///
I think, we need to add possibility to select which symbols you want to play
Hello, @beaucarnes , thank you for, great tutorial! I know that it is not an issue, but I completely lost the moment in the video when you configure the closing of the web socket on the front-end side. I've tried to make it in componentWillUnmount of the root app component, but it seems to be not the correct way and it wasn't working... Can you make advice about where it will be better to do? Because when I'm reloading the page the ids continue increments so I conclude that web sockets are not closed.
Error:db.collection is not a function
at note_routes.js:43:6
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.