Media is too big
VIEW IN TELEGRAM
23. Dark Modal Exercise
Students are instructed to create a modal dialog containing the settings for switching between dark and light modes.
- https://anjana.dev/vanilla-js-projects/dark-modal/index.html
#lesson
Students are instructed to create a modal dialog containing the settings for switching between dark and light modes.
- https://anjana.dev/vanilla-js-projects/dark-modal/index.html
#lesson
Media is too big
VIEW IN TELEGRAM
24. Dark Modal: Form Constructor
Anjana begins coding the solutions to the Dark Modal exercise by implementing the Form class constructor.
- https://github.com/vakila/vanilla-js-projects/blob/main/dark-modal/finished.html
#lesson
Anjana begins coding the solutions to the Dark Modal exercise by implementing the Form class constructor.
- https://github.com/vakila/vanilla-js-projects/blob/main/dark-modal/finished.html
#lesson
Media is too big
VIEW IN TELEGRAM
25. Dark Modal: Submit Button
Anjana continues the solution to the Dark Modal exercise by explaining the functionality of the submit button. The default functionality of a button with type submit inside a dialog element is to close the dialog.
- https://github.com/vakila/vanilla-js-projects/blob/main/dark-modal/finished.html
#lesson
Anjana continues the solution to the Dark Modal exercise by explaining the functionality of the submit button. The default functionality of a button with type submit inside a dialog element is to close the dialog.
- https://github.com/vakila/vanilla-js-projects/blob/main/dark-modal/finished.html
#lesson
Media is too big
VIEW IN TELEGRAM
26. Dark Modal: Final Code
Anjana continues the solutions to the Dark Modal exercise by walking through the code in the Modal class.
- https://github.com/vakila/vanilla-js-projects/blob/main/dark-modal/finished.html
#lesson
Anjana continues the solutions to the Dark Modal exercise by walking through the code in the Modal class.
- https://github.com/vakila/vanilla-js-projects/blob/main/dark-modal/finished.html
#lesson
Media is too big
VIEW IN TELEGRAM
27. Dark Modal: preventDefault Method
Anjana debugs and has an issue with the Dark Modal where the selected theme is not saved when the Modal is closed. This is due to the form refreshing the page on submission. The preventDefault method will prevent the refresh from happening.
- https://github.com/vakila/vanilla-js-projects/blob/main/dark-modal/finished.html
#lesson
Anjana debugs and has an issue with the Dark Modal where the selected theme is not saved when the Modal is closed. This is due to the form refreshing the page on submission. The preventDefault method will prevent the refresh from happening.
- https://github.com/vakila/vanilla-js-projects/blob/main/dark-modal/finished.html
#lesson
Media is too big
VIEW IN TELEGRAM
28. Introduction to Node.js
Anjana introduces Node.js as a way to run JavaScript outside of the browser. Developers can write JavaScript that runs server-side or in the command line. While some APIs are similar, Node-based applications can access system-level resources and other APIs not available in the browser. The Node.js REPL (Read-Evaluate-Print Loop) is also demonstrated in this lesson.
#lesson
Anjana introduces Node.js as a way to run JavaScript outside of the browser. Developers can write JavaScript that runs server-side or in the command line. While some APIs are similar, Node-based applications can access system-level resources and other APIs not available in the browser. The Node.js REPL (Read-Evaluate-Print Loop) is also demonstrated in this lesson.
#lesson
Media is too big
VIEW IN TELEGRAM
29. Running Node Scripts
Anjana demonstrates how to run JavaScript in a JS file by creating a file and executing it with the
#lesson
Anjana demonstrates how to run JavaScript in a JS file by creating a file and executing it with the
node command. Differences between browser and Node JavaScript APIs are also discussed in this lesson.#lesson
Media is too big
VIEW IN TELEGRAM
Media is too big
VIEW IN TELEGRAM
31. Creating a Node Package
Anjana creates a new npm package using the npm command line tool. A default package.json file contains the details about the module and scripts available for running, testing, and building the project.
#lesson
Anjana creates a new npm package using the npm command line tool. A default package.json file contains the details about the module and scripts available for running, testing, and building the project.
#lesson
Media is too big
VIEW IN TELEGRAM
32. Creating Custom Scripts
Anjana modifies the package.json file to create a new custom npm script. Custom scripts are key-value pairs. The key is the script's name, and the values are the commands to run. Scripts are executed with npm on the command line.
#lesson
Anjana modifies the package.json file to create a new custom npm script. Custom scripts are key-value pairs. The key is the script's name, and the values are the commands to run. Scripts are executed with npm on the command line.
#lesson
Media is too big
VIEW IN TELEGRAM
33. Installing Dependencies
Anjana demonstrates how to add third-party dependencies to a project with the
#lesson
Anjana demonstrates how to add third-party dependencies to a project with the
npm install command. Packages are downloaded from the npm registry and installed in a node_modules directory. Any dependencies of these packages are also installed.#lesson
Media is too big
VIEW IN TELEGRAM
34. Importing Modules
Anjana introduces JavaScript modules and compares the CommonJS and ECMAScript syntax. When a module is imported, Node looks to see if that module is installed globally or locally in the node_modules directory.
#lesson
Anjana introduces JavaScript modules and compares the CommonJS and ECMAScript syntax. When a module is imported, Node looks to see if that module is installed globally or locally in the node_modules directory.
#lesson
Media is too big
VIEW IN TELEGRAM
35. Using Modules
Anjana explains how modules can be used in a browser or Node.js applications. Browser-based applications must use the type="module" attribute on a script block. In Node.js applications, modules either need an
#lesson
Anjana explains how modules can be used in a browser or Node.js applications. Browser-based applications must use the type="module" attribute on a script block. In Node.js applications, modules either need an
mjs extension or have type="module" specified in the package.json file.#lesson
Media is too big
VIEW IN TELEGRAM
36. Evolution of JS Tooling
Anjana discusses the history of JavaScript tooling and shares some advice for creating a balance between understanding the overwhelming amount of tools available today and choosing the right tools for your project.
#lesson
Anjana discusses the history of JavaScript tooling and shares some advice for creating a balance between understanding the overwhelming amount of tools available today and choosing the right tools for your project.
#lesson
Media is too big
VIEW IN TELEGRAM
37. Introduction to Vite
Anjana introduces Vite and explains why it's a valuable build tool for JavaScript developers. Vite is widely used and provides several of the necessary tools like a development server, code bundling, and a robust set of plugins.
#lesson
Anjana introduces Vite and explains why it's a valuable build tool for JavaScript developers. Vite is widely used and provides several of the necessary tools like a development server, code bundling, and a robust set of plugins.
#lesson
Media is too big
VIEW IN TELEGRAM
38. Creating a Vite Project
Anjana uses the create-vite command-line tool to scaffold a new Vite project. The tool asks a few questions about the type of project and adds the necessary dependencies to the package.json file. The dependencies are installed after the project is created and the development server is started.
#lesson
Anjana uses the create-vite command-line tool to scaffold a new Vite project. The tool asks a few questions about the type of project and adds the necessary dependencies to the package.json file. The dependencies are installed after the project is created and the development server is started.
#lesson
Media is too big
VIEW IN TELEGRAM
39. Exploring the Vite Project Code
Anjana walks through the project structure and explores the generated files. Another benefit of the Vite development server is live reload, which automatically updates the application when changes are made to the source code.
#lesson
Anjana walks through the project structure and explores the generated files. Another benefit of the Vite development server is live reload, which automatically updates the application when changes are made to the source code.
#lesson
Media is too big
VIEW IN TELEGRAM
40. Vite Selfie Cam Project
Anjana explains the Selfie Cam project, which will display video from the user's webcam in a canvas element on the page. The project will use the getUserMedia API to access the webcam and the Canvas API to draw the image to the page.
- https://github.com/vakila/selfie-cam
#lesson
Anjana explains the Selfie Cam project, which will display video from the user's webcam in a canvas element on the page. The project will use the getUserMedia API to access the webcam and the Canvas API to draw the image to the page.
- https://github.com/vakila/selfie-cam
#lesson
Media is too big
VIEW IN TELEGRAM
41. Using the Canvas API
Anjana uses the Canvas API to create a graphic similar to the JavaScript logo. A yellow rectangle is drawn to the canvas element. Then, the fill color is changed to black, and the fillText method is used to draw text on the yellow background.
#lesson
Anjana uses the Canvas API to create a graphic similar to the JavaScript logo. A yellow rectangle is drawn to the canvas element. Then, the fill color is changed to black, and the fillText method is used to draw text on the yellow background.
#lesson
Media is too big
VIEW IN TELEGRAM
42. Accessing the Camera
Anjana begins building the selfie cam functionality. The existing application is refactored to use the getUserMedia API and add the video to a canvas element. The markup rendered by the main.js file is moved into the index.html file.
#lesson
Anjana begins building the selfie cam functionality. The existing application is refactored to use the getUserMedia API and add the video to a canvas element. The markup rendered by the main.js file is moved into the index.html file.
#lesson
Media is too big
VIEW IN TELEGRAM
43. Refactoring the UI
Anjana refactors the UI of the selfie cam projects so the logos appear above the space where the camera image will show. The getVideo method is exported as a module and imported into the main.js file.
#lesson
Anjana refactors the UI of the selfie cam projects so the logos appear above the space where the camera image will show. The getVideo method is exported as a module and imported into the main.js file.
#lesson