This repository is for the Linkedin Learning course: JavaScript Essential Training

License: Other

JavaScript 68.60% HTML 30.16% CSS 1.23%

javascript-essential-training-2832077's Introduction

JavaScript Essential Training

This is the repository for the LinkedIn Learning course JavaScript Essential Training. The full course is available from LinkedIn Learning.

JavaScript is a scripting language of the web. As the web evolves from a static to a dynamic environment, technology focus is shifting from static markup and styling—frequently handled by content management systems or automated scripts—to dynamic interfaces and advanced interaction. Once seen as optional, JavaScript is now becoming an integral part of the web, infusing every layer with its script.

Through practical examples and mini-projects, this course helps you build your understanding of JavaScript piece by piece, from core principles like variables, data types, conditionals, and functions through advanced topics including loops, and DOM scripting. Along the way, instructor Morten Rand-Hendriksen provides challenges that allow you to put your new skills to the test.

Instructions

This repository does not have any branches. Download the entire repository and you get the exercise files in their final state.

Each folder corresponds with a movie with an exercise file. The naming convention is CHAPTER#_MOVIE#. As an example, the folder named 02_03 corresponds to the second chapter and the third video in that chapter.

Some movies will have a beginning and an end state. In the exercise files, the end-state for a movie is marked with an e for "end" as in 02_03e. This folder contains the code as it is at the end of the movie.

Installing

To use these exercise files, you must have the following installed:
- A code editor (VS Code is recommended)
- Node.js
- Prettier code formatter extension
- ESLint extension
From the root folder, open the terminal and enter the command nmp install to install dependencies.

Instructor

Morten Rand-Hendriksen

Web Designer and Developer

Check out my other courses on LinkedIn Learning.

javascript-essential-training-2832077's People

Contributors

Stargazers

Watchers

Forkers

jamesvanwaza inocencio80 ramiimagdi mati1976 marceloklotz indraphan jeweltungpalan jrkruger89 myd3boro apothecat tsannifer aelgeneidy phildavies renesaletros patyfc codepoetin kippkuchera brifee dacs95 luvika bonini81 darennie ssmith35590 parthsaija courtneyr-dev swimlane2 im-energyutilities audous yueqiliu hilbug lucieli9911 christinaheadley dolphyfluffy cnikolik pvela23 read0wang sokan93 joaomartins-callmejohn jeffreysebastian-pursuit cassiehlinka ph3ll3r bedoebied saharal-shurafat1990 hannahshumway chiangpin connievon2003 wafaaalhussain t3j0n laura-arditti neoargento maxcodextc saffouri g-martin21 paflynn-msft mubarak-mustopha ahammad-abdullah czaaru arshamyaghoobi sejal16 ytorahe mulindierick bireworld ahtserhsjarus claudianaszarkowska pnmensah clarechoi clivebande royalkoepsell thomajkim13 gaelporteu anilparikipandla bradytrudeau melaphor mariamz01 ank1t-a404a rojinraju jaybarbhaiya meshreef hardik-singhal alyelmowafi jkpr paynea03 joseidarraga7 moches itsiqbal roshiboy gorb1k t1minator sourouryaakoubi worun-exe lebogangseome kkundank ommoluchi kmhrussell17 demet29 lucasli233 daffabarin jollygecko zsofiatoth1988 saad-saheed

javascript-essential-training-2832077's Issues

Missing excercise folder 03_09

Expected Behavior

For the practice "Build a new method", the video points to folder 03_09, which is not available.

Missing exercise files

Issue Overview

Exercise files 3_9 and 3_12 are not here

Misspelling in 'aquired' word in many exercise files.

Issue Overview

Correction of spelling in script.js files

Describe your environment

Independent of Environment

Steps to Reproduce

All files having the below statement ( script.js <- Lecture 03_14 to script.js <- Lecture 04_02) including the Practice Files

console.log("Days since aquired:", everydayPack.backpackAge());

Current Behavior

Not a major issue, but would increase the quality of content.

Possible Solution

As changing whole videos might not be feasible, all the repo files can have the spellings changed of aquired -> acquired

Screenshots / Video

Screenshot from one of the lecture videos 05_01

Missing exercise files 05_04

Excercise file 02_02 not broken while it should be

Hi Morten Rand-Hendriksen (and all other readers of this question), according to this video, I should open index.html of 02_02, get an empty screen with an error in the console. Mine's not empty and there's no error in the console. Must be a good sign then, eh..?

Answer/Solution:
Chris Reid, CIB officer at NAB:
So this one starts off prefixed for some reason (don't worry it got me confused too) In order to follow along with Morten as intended, go into the index.html file, and then cut the line of text that says script src="script.js bit. paste it above the body> <body line This should generate the white error screen.

wrong url in 8_14

Issue Overview

you need to correct that URL in the comment form

/**
 * for...in loop and objects
 * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
 */

/**
* for...in loop and objects
* @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in
*/

from...of to from...in

https://github.com/LinkedInLearning/javascript-essential-training-2832077/blob/main/08_14/script.js#L77

Missing JavaScript files for Chapter 5 Practice

Issue Overview

http://127.0.0.1:5500/Practice/05_04/
http://127.0.0.1:5500/Practice/05_08/

Both of these practice file folders are missing the JavaScript files.

Describe your environment

Steps to Reproduce

Expected Behavior

Current Behavior

GET http://127.0.0.1:5500/Practice/05_04/components/Backpack.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:16
GET http://127.0.0.1:5500/Practice/05_04/components/data.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:17
GET http://127.0.0.1:5500/Practice/05_04/script.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:18

GET http://127.0.0.1:5500/Practice/05_08/components/Backpack.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:16
GET http://127.0.0.1:5500/Practice/05_08/components/data.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:17
GET http://127.0.0.1:5500/Practice/05_08/script.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:18

Possible Solution

Add these files so the index.html file works properly with the console.

Screenshots / Video

Related Issues

Cannot get Practice 03_12 to work.

Issue Overview

Scope issue with classes.

Describe your environment

Windows 10 19041, Chrome 88 or Edge, atom 1.55.0, atom-live-server

Steps to Reproduce

Working directly in the file structure provided, I add the following to the empty script.js.

import Backpack from "./Backpack.js";

const mybackpack = new Backpack(
  'test',
  10,
  'red',
  10,
  26,
  26,
  false);

console.log('Values of mybackpack', mybackpack)

In the browser console it prints the mybackpack as I expect. But if I then try to access mybackpack.name or anything of mybackpack it returns the following error:

Uncaught ReferenceError: mybackpack is not defined
at <anonymous>:1:1

Expected Behavior

Being able to access mybackpack from the console as in previous chapters.

Current Behavior

mybackpack is not part of the scope.

Possible Solution

Copying the class definition of Backpack into script.js and and removing pointers to Backpack.js (in index.html as well as in script.js) helps.

To be honest, I think the presence of Backpack.js is just confusing for this exercise and not needed to work through the given tasks.

Screenshots / Video

Related Issues

Missing exercise file 01_06

Issue Overview

Describe your environment

Steps to Reproduce

Expected Behavior

Current Behavior

Possible Solution

Screenshots / Video

Related Issues

Browser does not display the index.html pages as expected for any of the exercises

Issue Overview

index.html files do not display in browser (chrome/saffari/ffx). I get a blank browser window.

Describe your environment

MacBook Pro 14" M2 Venture 13.2.1

Version: 1.75.1
Commit: 441438abd1ac652551dbe4d408dfcec8a499b8bf
Date: 2023-02-08T21:34:01.965Z
Electron: 19.1.9
Chromium: 102.0.5005.194
Node.js: 16.14.2
V8: 10.2.154.23-electron.0
OS: Darwin arm64 22.3.0
Sandboxed: No

LiveServer v5.7.9

Chrome Version 110.0.5481.177 (Official Build) (arm64)

Steps to Reproduce

Select any exercise and right click on index.html e.g. exercise 03_02
Select Open with Live Server
Chrome opens (default browser) to http://127.0.0.1:5500/javascript-essential-training-2832077-main/03_02/index.html

Expected Behavior

I expect the browser to display everyday backpack properties in this case (exercise 03_02)

Current Behavior

Browser opens but displays no text (ie blank page)

Here is html from console:

<title>Building a JavaScript object from scratch</title> <script src="script.js" defer></script> <script> // = 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf()); } parent.appendChild(elem); } } var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://'; var address = protocol + window.location.host + window.location.pathname + '/ws'; var socket = new WebSocket(address); socket.onmessage = function (msg) { if (msg.data == 'reload') window.location.reload(); else if (msg.data == 'refreshcss') refreshCSS(); }; if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) { console.log('Live reload enabled.'); sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true); } })(); } else { console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.'); } // ]]>

Possible Solution

Attempted to past URL in all browsers in both regular and incognito/private mode
Changed personal setting in live server to open in chromePrivateMode:

{
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.CustomBrowser": "chrome:PrivateMode"
}
(still openes in regular chrome/system browser though)

Screenshots / Video

Related Issues

Misspelling in README file.

Issue Overview

In the README file, it should be npm install currently says nmp install :)

nmp install command incorrect

The nmp install command is incorrect under the Installing section.

https://github.com/LinkedInLearning/javascript-essential-training-2832077?tab=readme-ov-file#installing
2) From the root folder, open the terminal and enter the command nmp install to install dependencies. Should be

npm install

Practice files 03_09 missing an object property 'lidOpen'

Issue Overview

Practice/03_09/script.js Line 18 missing the object property and value lidOpen: false

Describe your environment

VS Code, Safari browser

Steps to Reproduce

Expected Behavior

Current Behavior

Possible Solution

Screenshots / Video

Related Issues

Missing exercise files 08_09

Issue Overview

While watching the video "Practice: pass values between functions" it mentions to open the 08_09 files (around 2:33) and I'm not seeing them.

Describe your environment

Editor: Visual Studio Code
Browser: Chrome

Steps to Reproduce

When looking for 08_09 in the root of this repo you don't see those files.
https://github.com/LinkedInLearning/javascript-essential-training-2832077

Expected Behavior

To find those files

Current Behavior

Files are not there

Possible Solution

Add the files :)

The Linkdin course refers to files such as 03.09 that do not exist in the zipped files download. How do I get them?

Issue Overview

Describe your environment

Steps to Reproduce

Expected Behavior

Current Behavior

Possible Solution

Screenshots / Video

Related Issues

Missing Folder 01_06 file

Issue Overview

Describe your environment

Steps to Reproduce

Expected Behavior

Current Behavior

Possible Solution

Screenshots / Video

Related Issues

can't run npm install

After I download the latest code and run npm install. Dependency error appears.

npm ERR! code MODULE_NOT_FOUND
npm ERR! Cannot find module './build-ideal-tree.js'
npm ERR! Require stack:
npm ERR! - /usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/index.js
npm ERR! - /usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/index.js
npm ERR! - /usr/local/lib/node_modules/npm/node_modules/libnpmfund/index.js
npm ERR! - /usr/local/lib/node_modules/npm/lib/utils/reify-output.js
npm ERR! - /usr/local/lib/node_modules/npm/lib/utils/reify-finish.js
npm ERR! - /usr/local/lib/node_modules/npm/lib/install.js
npm ERR! - /usr/local/lib/node_modules/npm/lib/npm.js
npm ERR! - /usr/local/lib/node_modules/npm/lib/cli.js
npm ERR! - /usr/local/lib/node_modules/npm/bin/npm-cli.js

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/robin_chen/.npm/_logs/2021-11-29T09_00_53_614Z-debug.log

I am not sure if you miss the build-ideal-tree.js file.

linkedinlearning / javascript-essential-training-2832077 Goto Github PK

javascript-essential-training-2832077's Introduction

JavaScript Essential Training

Instructions

Installing

Instructor

javascript-essential-training-2832077's People

Contributors

Stargazers

Watchers

Forkers

javascript-essential-training-2832077's Issues

Expected Behavior

Issue Overview

Issue Overview

Describe your environment

Steps to Reproduce

Current Behavior

Possible Solution

Screenshots / Video

Issue Overview

Issue Overview

Describe your environment

Steps to Reproduce

Expected Behavior

Current Behavior

Possible Solution

Screenshots / Video

Related Issues

Issue Overview

Describe your environment

Steps to Reproduce

Expected Behavior

Current Behavior

Possible Solution

Screenshots / Video

Related Issues

Issue Overview

Describe your environment

Steps to Reproduce

Expected Behavior

Current Behavior

Possible Solution

Screenshots / Video

Related Issues

Issue Overview

Describe your environment

Steps to Reproduce

Expected Behavior

Current Behavior

Possible Solution

Screenshots / Video

Related Issues

Issue Overview

Issue Overview

Describe your environment

Steps to Reproduce

Expected Behavior

Current Behavior

Possible Solution

Screenshots / Video

Related Issues

Issue Overview

Describe your environment

Steps to Reproduce

Expected Behavior

Current Behavior

Possible Solution

Issue Overview

Describe your environment

Steps to Reproduce

Expected Behavior

Current Behavior

Possible Solution

Screenshots / Video

Related Issues

Issue Overview

Describe your environment

Steps to Reproduce

Expected Behavior