Starter files, final projects, and FAQ for my Complete JavaScript course
11644
839
13880

sir how can we get ppts of this course.

After completing your course what I should do to gain more knowledge about JavaScript so I can enhance my JS learning to a pro level.
I want to learn advance JS. So recommend me any course, book or any kind of informative things?

While trying to bundle with parcel, i ran "npm run start" after assigning the "start" and "build" in the scripts inside the package.json but it gave an error with the following message:

Build failed.

@parcel/core: Unexpected output file type .html in target "main"

"description": "Reciepe App",

5 | "main": "index.html",
| ^^^^^^^^^^^^ File extension must be .js, .mjs, or .cjs
6 | "scripts": {
7 | "start": "parcel index.html"

๐Ÿ’ก The "main" field is meant for libraries. If you meant to output a .html file, either remove the "main" field or choose a different target
name.

And when i tried removing the main and the index.html. It gives an error that "Browser scripts cannot have imports or exports."

icons are unable to load as i have used the same parcel as in videos but the icons are unable to load even its showing in the element as well and the icons which are not loading is of cookingtime icon and ingredient icon

I just finished learning the Pig Game, it's a simple but fun game, but I think it may not be very fair to the second player, since they don't have a chance to roll the dice one more time after the first player reached 100 points. So I made a more fair version of the game, and felt very good about it ๐Ÿ˜„
Below is the JavaScript code, feel free to test it and let me know if you found any bug or have any suggestions!

"use strict";

const player0El = document.querySelector(".player--0");
const player1El = document.querySelector(".player--1");
const score0El = document.querySelector("#score--0");
const score1El = document.getElementById("score--1");
const current0El = document.getElementById("current--0");
const current1El = document.getElementById("current--1");

const diceEl = document.querySelector(".dice");
const btnNew = document.querySelector(".btn--new");
const btnRoll = document.querySelector(".btn--roll");
const btnHold = document.querySelector(".btn--hold");

// A "finalRound" variant added to detect if it's final roll for player 2
let scores, currentScore, activePlayer, gamePlaying, finalRound;

function init() {
	score0El.textContent = 0;
	score1El.textContent = 0;
	current0El.textContent = 0;
	current1El.textContent = 0;
	diceEl.classList.add("hidden");
	player0El.classList.add("player--active");
	player1El.classList.remove("player--active");
	player0El.classList.remove("player--winner");
	player1El.classList.remove("player--winner");

	scores = [0, 0];
	currentScore = 0;
	activePlayer = 0;
	gamePlaying = true;
	finalRound = false;
}

function switchPlayer() {
	currentScore = 0;
	document.getElementById(`current--${activePlayer}`).textContent =
		currentScore;
	activePlayer = 1 - activePlayer; 
	player0El.classList.toggle("player--active");
	player1El.classList.toggle("player--active");
}

// End game function
function endGame() {
	gamePlaying = false;
	diceEl.classList.add("hidden");
	document.querySelector(".player--active").classList.add("player--winner");
	document.querySelector(".player--active").classList.remove("player--active");
}

init();

// Rolling dice functionality
btnRoll.addEventListener("click", function () {
	if (gamePlaying) {
		let dice = Math.trunc(Math.random() * 6) + 1;
		diceEl.classList.remove("hidden");
		diceEl.src = `dice-${dice}.png`;
		if (dice !== 1) {
			currentScore += dice;
			document.getElementById(`current--${activePlayer}`).textContent =
				currentScore;
		} else if (!finalRound) {
			switchPlayer();
		// it's the last chance for player 2 and they rolled a 1, player 1 wins
		} else {
			gamePlaying = false;
			diceEl.classList.add("hidden");
			player0El.classList.add("player--winner");
			player0El.classList.remove("player--active");
		}
	}
});

// Holding score functionality (where I made the changes)
btnHold.addEventListener("click", function () {
	if (gamePlaying) {
		// Add current score to active player's score
		scores[activePlayer] += currentScore;
		document.querySelector(`#score--${activePlayer}`).textContent =
			scores[activePlayer];

		// If player 1 scores 100 first, give player 2 one more chance to roll
		if (scores[activePlayer] >= 100 && activePlayer === 0 && !finalRound) {
			finalRound = true;
			switchPlayer();
		// If player 2 scores 100 first, they win
		} else if (
			scores[activePlayer] >= 100 &&
			activePlayer === 1 &&
			!finalRound
		) {
			endGame();
		// If it's the last chance for player 2 to score 100+ and beat player 1
		} else if (finalRound) {
			if (scores[0] <= scores[1]) {
				endGame();
			} else {
				gamePlaying = false;
				diceEl.classList.add("hidden");
				player0El.classList.add("player--winner");
				player0El.classList.remove("player--active");
			}
		} else {
			switchPlayer();
		}
	}
});

btnNew.addEventListener("click", init);

Hi, I'm new to Github so excuse me if missing something. I've tried to download the required files for this course. The only items in each of the files is a starter and final folder. When i open the stater or final files, it opens a browser that says "JavaScript fundamentals 1". I dont see any other course material.

not opening any output in chrome condole chapter 1 final code.
is anything i miss?
i am beginner in code
help me to out from this

hi I am not getting the proper file for chapter 2
https://github.com/jonasschmedtmann/complete-javascript-course/tree/master/02-Fundamentals-Part-2
it is showing in safari

Hello,

Could you please explain how the prototype inheritance works between classes and constructor functions. In case of an inheritance from a construction function to a class(same as between classes "Class extends function", but I could find out how to apply prototype inheritance to a construction function from a class as I tried the Class.call(this ,properties...) and I got an error of "Class constructor *** cannot be invoked without 'new' at new ***". still we could use "Function.prototype = Object.create(Class.prototype);" but that will inherence methods and not the properties.

Thanks,

@jonasschmedtmann
I think there might be a little mixup in JavaScript Fundamentals โ€“ Part 1 > Basic Operators, where you classified ++, -- as assignment operators, but after checking MDN I found out they should be arithmetic operators instead.

The code is in line 89 of the file below:
https://github.com/jonasschmedtmann/complete-javascript-course/blob/master/01-Fundamentals-Part-1/final/script.js

I got a ERROR message when I deploied the forkify project .
This is the Error message ---'index.617d3dcf.js:1 Uncaught ReferenceError: Fraction is not defined at index.617d3dcf.js:1:14980' .

I will try solve this problem by myself .But if you guys can help to figure out this ,I will appreciate that .

My URL is spelled correctly but i am getting a 400 bad request message when sending data via the api.
errorMessage

Hello, I am in the last section - 18, and when I run npm start or npx parcel index.html in powershell, it doesn't do anything, not even any errors occur. Does anyone know what to do with it? I have already tried to reinstall parcel and many other things, but none of them worked...

Forkify had problem when - npm run

cant run with "main": "index.html", in package.json

i change it to index.js and it run perfectly.

Hi,
So, I 'm at the end of the course and trying to implement the Add Bookmark feature
Now, when I click the bookmark icon i get the error (see the image). I tried to go back couple of lectures and rewrite the code carefully, yet the error still stays

As error states, the problem is in this code of view.js
if ( !newEl.isEqualNode(curEl) && newEl.firstChild?.nodeValue.trim() !== "" ) { curEl.textContent = newEl.textContent; }

Any solutions?

dgdfgdf

Adding a recipe functionality on the forkify project needs post request and I notice the API documentation has been updated please how do I go about it?

Hello,
As for September '22 this - two years old version of the course have obviously many differences ( at least in interface of Visual Studio Code ) and suggested by Jonas configuration, as may be not crucial - can be significant along the remaining 50 hours (hundreds actually ) of following the guidelines.
It may be also difference between MAC ( which Author is using ) and WIN OS ( which I'm using WIN 10 Pro ) - or simply new VSC version.
By following the video about setting the ''Prettier and VS Code'' - I'm unable to change single quotes ( ' ' ) instead auto correcting double quotes ( "" ) while writing the code.
First of all - I can't create New File in VSC by clicking the right mouse button - as the Author in the video.
Once I'm creating New File - I can't change the name of the file, which is still as ''untitled''. Once I save the file ( as .txt ) I can change the name, but still - it doesn't help with the outcome by writing ''the object'' ( command? ) to direct Prettier app not to changing single quotes in to double quotes...
Exactly the same thing with changing default function of Prettier - putting parentheses into a single parameter ( which Jonas ''don't like'' and not recommending...
The main issue may be, that I can create only new .txt file, which doesn't help with anything...
Anyone had similar issues?
Thank you for any hints or/and help...
Mark
__prettier single quote

Hi Jonas,

The sort button implemented in the course has issue, the sorting is only done on the amounts the dates of the transactions are not sorted. I believe it will be a rewarding task to do it by getting hold of the object.