From 034d6b1569f9175f8733eb6b9320e40f174041e2 Mon Sep 17 00:00:00 2001 From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com> Date: Sat, 4 Oct 2025 00:50:59 +0700 Subject: [PATCH] feat(curriculum): JS checkpoint cert (#62188) Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com> --- client/config/cert-and-project-map.ts | 14 + client/i18n/locales/english/intro.json | 1075 +++++++++++++++++ client/src/assets/superblock-icon.tsx | 3 +- .../src/components/settings/certification.tsx | 1 + client/src/pages/learn/javascript-v9/index.md | 14 + .../components/super-block-accordion.tsx | 7 +- client/utils/index.ts | 3 +- curriculum/build-curriculum.js | 3 +- .../68c462d7dc707f3ca82f8e6d.md | 18 + .../english/certifications/javascript-v9.yml | 8 + .../blocks/exam-javascript-certification.json | 14 + curriculum/structure/curriculum.json | 6 +- .../structure/superblocks/javascript-v9.json | 305 +++++ shared/config/certification-settings.ts | 7 +- shared/config/curriculum.ts | 37 +- 15 files changed, 1496 insertions(+), 19 deletions(-) create mode 100644 client/src/pages/learn/javascript-v9/index.md create mode 100644 curriculum/challenges/english/blocks/exam-javascript-certification/68c462d7dc707f3ca82f8e6d.md create mode 100644 curriculum/challenges/english/certifications/javascript-v9.yml create mode 100644 curriculum/structure/blocks/exam-javascript-certification.json create mode 100644 curriculum/structure/superblocks/javascript-v9.json diff --git a/client/config/cert-and-project-map.ts b/client/config/cert-and-project-map.ts index 011b67e9b28..847baa1ade5 100644 --- a/client/config/cert-and-project-map.ts +++ b/client/config/cert-and-project-map.ts @@ -33,6 +33,7 @@ const takeHomeBase = '/learn/coding-interview-prep/take-home-projects'; const foundationalCSharpBase = '/learn/foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam'; const fullStackDeveloperBase = '/learn/full-stack-developer'; +const jsV9Base = '/learn/javascript-v9'; const a2EnglishBase = '/learn/a2-english-for-developers'; const b1EnglishBase = '/learn/b1-english-for-developers'; const a2SpanishBase = '/learn/a2-professional-spanish'; @@ -813,6 +814,19 @@ const allStandardCerts = [ } ] }, + { + id: '68c4069c1ef859270e17c495', + title: 'JavaScript', + certSlug: Certification.JsV9, + projects: [ + { + id: '645147516c245de4d11eb7ba', + title: 'JavaScript Certification Exam', + link: `${jsV9Base}/exam-javascript-certification/exam-javascript-certification`, + certSlug: Certification.JsV9 + } + ] + }, { id: '651dd7e01d697d0aab7833b7', title: 'A2 English for Developers', diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index 83875012489..1e8f8b06ab7 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -5016,6 +5016,1081 @@ } } }, + "javascript-v9": { + "title": "JavaScript Certification", + "intro": [ + "This course teaches you core JavaScript programming concepts such as working with variables, functions, objects, arrays, and control flow. You'll also learn how to manipulate the DOM, handle events, and apply techniques like asynchronous programming, functional programming, and accessibility best practices.", + "To earn your JavaScript Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the JavaScript Certification exam." + ], + "chapters": { "javascript": "JavaScript" }, + "modules": { + "javascript-variables-and-strings": "Variables and Strings", + "javascript-booleans-and-numbers": "Booleans and Numbers", + "javascript-functions": "Functions", + "javascript-arrays": "Arrays", + "javascript-objects": "Objects", + "javascript-loops": "Loops", + "review-javascript-fundamentals": "JavaScript Fundamentals Review", + "higher-order-functions-and-callbacks": "Higher Order Functions and Callbacks", + "dom-manipulation-and-events": "DOM Manipulation and Events", + "js-a11y": "JavaScript and Accessibility", + "debugging-javascript": "Debugging", + "basic-regex": "Basic Regex", + "lab-markdown-to-html-converter": "Build a Markdown to HTML Converter", + "form-validation": "Form Validation", + "javascript-dates": "Dates", + "audio-and-video-events": "Audio and Video Events", + "lab-drum-machine": "Build a Drum Machine", + "maps-and-sets": "Maps and Sets", + "lab-voting-system": "Build a Voting System", + "localstorage-and-crud-operations": "localStorage and CRUD Operations", + "classes-and-the-this-keyword": "Classes", + "lab-bank-account-manager": "Build a Bank Account Management Program", + "recursion": "Recursion", + "functional-programming": "Functional Programming", + "asynchronous-javascript": "Asynchronous JavaScript", + "lab-weather-app": "Build a Weather App", + "review-javascript": "JavaScript Review", + "javascript-certification-exam": "JavaScript Certification Exam" + }, + "blocks": { + "lecture-introduction-to-javascript": { + "title": "Introduction to JavaScript", + "intro": [ + "In these lectures, you will learn the fundamentals of JavaScript. Topics covered include, but are not limited to, variables, data types, how JavaScript interacts with HTML and CSS, strings, and much more." + ] + }, + "workshop-greeting-bot": { + "title": "Build a Greeting Bot", + "intro": [ + "In this workshop, you will learn JavaScript fundamentals by building a greeting bot.", + "You will learn about variables, let, const, console.log and basic string usage." + ] + }, + "lab-javascript-trivia-bot": { + "title": "Build a JavaScript Trivia Bot", + "intro": [ + "In this lab, you'll practice working with JavaScript variables and strings by building a trivia bot." + ] + }, + "lab-sentence-maker": { + "title": "Build a Sentence Maker", + "intro": [ + "In this lab, you will continue practicing with strings and concatenation by creating and customizing various stories." + ] + }, + "lecture-working-with-data-types": { + "title": "Working with Data Types", + "intro": [ + "In the following lectures, you will learn how to work with data types in JavaScript. You will also learn how dynamic typing differs from static typing, the typeof operator, and the typeof null bug." + ] + }, + "review-javascript-variables-and-data-types": { + "title": "JavaScript Variables and Data Types Review", + "intro": [ + "Before you are quizzed on JavaScript variables and data types you first need to review the concepts.", + "Open up this page to review variables, data types, logging and commenting." + ] + }, + "quiz-javascript-variables-and-data-types": { + "title": "JavaScript Variables and Data Types Quiz", + "intro": [ + "Test your knowledge of JavaScript variables and data types with this quiz." + ] + }, + "lecture-working-with-strings-in-javascript": { + "title": "Working with Strings in JavaScript", + "intro": [ + "In these lectures, you will learn how to work with strings in JavaScript. You will learn how to access characters from a string, how to use template literals and interpolation, how to create a new line in strings, and much more." + ] + }, + "workshop-teacher-chatbot": { + "title": "Build a Teacher Chatbot", + "intro": [ + "In this workshop, you will continue to learn more about JavaScript strings by building a chatbot.", + "You will learn how to work with template literals, and the indexOf method." + ] + }, + "lecture-working-with-string-character-methods": { + "title": "Working with String Character Methods", + "intro": [ + "In this lecture you will learn about ASCII character encoding and how to use JavaScript's charCodeAt() and fromCharCode() methods to convert between characters and their numerical ASCII values." + ] + }, + "lecture-working-with-string-search-and-slice-methods": { + "title": "Working with String Search and Slice Methods", + "intro": [ + "In this lecture you will learn how to search for substrings using the includes() method and how to extract portions of strings using the slice() method." + ] + }, + "lecture-working-with-string-formatting-methods": { + "title": "Working with String Formatting Methods", + "intro": [ + "In this lecture you will learn how to format strings by changing their case using toUpperCase() and toLowerCase() methods, and how to remove whitespace using trim(), trimStart(), and trimEnd() methods." + ] + }, + "lecture-working-with-string-modification-methods": { + "title": "Working with String Modification Methods", + "intro": [ + "In this lecture you will learn how to modify strings by replacing parts of them using the replace() method and how to repeat strings multiple times using the repeat() method." + ] + }, + "review-javascript-strings": { + "title": "JavaScript Strings Review", + "intro": [ + "Before you are quizzed on working with JavaScript strings, you first need to review.", + "Open up this page to review how to work with template literals, the slice method, the includes method, the trim method and more." + ] + }, + "quiz-javascript-strings": { + "title": "JavaScript Strings Quiz", + "intro": ["Test your knowledge of JavaScript strings with this quiz."] + }, + "lecture-working-with-numbers-and-arithmetic-operators": { + "title": "Working with Numbers and Arithmetic Operators", + "intro": [ + "In these lectures you will learn about the number type, arithmetic operators, and using them with numbers and strings." + ] + }, + "lecture-working-with-operator-behavior": { + "title": "Working with Operator Behavior", + "intro": [ + "In these lectures you will learn about operator precedence, the increment and decrement operators, and compound assignment operators." + ] + }, + "lecture-working-with-comparison-and-boolean-operators": { + "title": "Working with Comparison and Boolean Operators", + "intro": [ + "In these lectures you will learn about booleans, and equality and inequality operators, and other comparison operators." + ] + }, + "lecture-working-with-unary-and-bitwise-operators": { + "title": "Working with Unary and Bitwise Operators", + "intro": [ + "In these lectures, you will learn about unary and bitwise operators." + ] + }, + "lecture-working-with-conditional-logic-and-math-methods": { + "title": "Working with Conditional Logic and Math Methods", + "intro": [ + "In these lectures, you will learn about conditional statements, binary logical operators, and the Math object." + ] + }, + "workshop-mathbot": { + "title": "Build a Mathbot", + "intro": [ + "In this workshop, you will review how to work with the different Math object methods by building a Mathbot." + ] + }, + "lab-fortune-teller": { + "title": "Build a Fortune Teller", + "intro": [ + "In this lab, you'll build a fortune teller by randomly selecting a fortune from the available fortunes.", + "You'll practice how to work with the Math.random() method and the Math.floor() method to generate random numbers." + ] + }, + "lecture-working-with-numbers-and-common-number-methods": { + "title": "Working with Numbers and Common Number Methods", + "intro": [ + "In these lectures, you will learn about numbers and common number methods. These include isNaN(), parseInt(), parseFloat(), and toFixed()." + ] + }, + "review-javascript-math": { + "title": "JavaScript Math Review", + "intro": [ + "Before you're quizzed on working with the Math object, you should review what you've learned.", + "Open up this page to review how to work with the Math.random() method, the Math.floor() method and more." + ] + }, + "quiz-javascript-math": { + "title": "JavaScript Math Quiz", + "intro": [ + "Test your knowledge of the JavaScript Math object with this quiz." + ] + }, + "lecture-understanding-comparisons-and-conditionals": { + "title": "Understanding Comparisons and Conditionals", + "intro": [ + "In these lectures, you will learn about comparison operators and conditionals. You will learn how the various conditionals differ from one another, and how comparisons work with null and undefined." + ] + }, + "review-javascript-comparisons-and-conditionals": { + "title": "JavaScript Comparisons and Conditionals Review", + "intro": [ + "Before you're quizzed on working with conditionals, you should review what you've learned about them.", + "Open up this page to review how to work with switch statements, other types of conditionals and more." + ] + }, + "quiz-javascript-comparisons-and-conditionals": { + "title": "JavaScript Comparisons and Conditionals Quiz", + "intro": [ + "Test your knowledge of JavaScript Comparisons and Conditionals with this quiz." + ] + }, + "lecture-working-with-functions": { + "title": "Working with Functions", + "intro": [ + "In these lectures, you will learn how to reuse a block of code with functions. You will learn what the purpose of a function is and how they work, and how scope works in programming. " + ] + }, + "workshop-calculator": { + "title": "Build a Calculator", + "intro": [ + "In this workshop, you will review your knowledge of functions by building a calculator." + ] + }, + "lab-boolean-check": { + "title": "Build a Boolean Check Function", + "intro": [ + "In this lab, you'll implement a function that checks if a value is a boolean." + ] + }, + "lab-email-masker": { + "title": "Build an Email Masker", + "intro": [ + "In this lab, you'll build an email masker that will take an email address and obscure it.", + "You'll practice string slicing, concatenation, and using functions." + ] + }, + "workshop-loan-qualification-checker": { + "title": "Build a Loan Qualification Checker", + "intro": [ + "In this workshop, you will continue to learn how to work with conditionals by building a loan qualification checker app.", + "You will learn more about if statements, and how to use comparison operators and multiple conditions in an if statement." + ] + }, + "lab-celsius-to-fahrenheit-converter": { + "title": "Build a Celsius to Fahrenheit Converter", + "intro": [ + "In this lab you will implement a function that converts the temperature from Celsius to Fahrenheit." + ] + }, + "lab-counting-cards": { + "title": "Build a Card Counting Assistant", + "intro": ["In this lab you will use JavaScript to count dealt cards."] + }, + "lab-leap-year-calculator": { + "title": "Build a Leap Year Calculator ", + "intro": [ + "In this lab you'll use conditional statements and loops to determine if a year is a leap year." + ] + }, + "lab-truncate-string": { + "title": "Implement the Truncate String Algorithm", + "intro": [ + "In this lab, you will practice truncating a string at a certain length." + ] + }, + "lab-string-ending-checker": { + "title": "Build a Confirm the Ending Tool", + "intro": [ + "In this lab, you will implement a function that checks if a given string ends with a specified target string." + ] + }, + "review-javascript-functions": { + "title": "JavaScript Functions Review", + "intro": [ + "Before you're quizzed on JavaScript functions, you should review what you've learned about them.", + "Open up this page to review functions, arrow functions and scope." + ] + }, + "quiz-javascript-functions": { + "title": "JavaScript Functions Quiz", + "intro": ["Test your knowledge of JavaScript functions with this quiz."] + }, + "lecture-working-with-arrays": { + "title": "Working with Arrays", + "intro": [ + "In these lectures, you will learn how to work with JavaScript arrays. You will learn about what makes an array, one-dimensional and two-dimensional arrays, how to access and update the elements in an array, and much more." + ] + }, + "workshop-shopping-list": { + "title": "Build a Shopping List", + "intro": [ + "In this workshop, you will practice how to work with arrays by building a shopping list.", + "You will review how to add and remove elements from an array using methods like push, pop, shift, and unshift." + ] + }, + "lab-lunch-picker-program": { + "title": "Build a Lunch Picker Program", + "intro": [ + "In this lab, you'll review working with arrays and random numbers by building a lunch picker program." + ] + }, + "lab-golf-score-translator": { + "title": "Build a Golf Score Translator", + "intro": [ + "For this lab, you will use array methods to translate golf scores into their nickname." + ] + }, + "lab-reverse-a-string": { + "title": "Build a String Inverter", + "intro": [ + "In this lab, you create a function that reverses a given string." + ] + }, + "lecture-working-with-common-array-methods": { + "title": "Working with Common Array Methods", + "intro": [ + "In these lectures, you will learn about the array methods for performing more advanced operations like getting the position of an item in an array, checking if an array contains a certain element, copying an array, and lots more." + ] + }, + "review-javascript-arrays": { + "title": "JavaScript Arrays Review", + "intro": [ + "Before you're quizzed on JavaScript arrays, you should review what you've learned about them.", + "Open up this page to review concepts like array destructuring, how to add and remove elements from an array, and more." + ] + }, + "quiz-javascript-arrays": { + "title": "JavaScript Arrays Quiz", + "intro": ["Test your knowledge of JavaScript arrays with this quiz."] + }, + "lecture-introduction-to-javascript-objects-and-their-properties": { + "title": "Introduction to JavaScript Objects and Their Properties", + "intro": [ + "In these lectures, you will learn the fundamentals of JavaScript objects, including how to create them, access their properties, and understand the difference between primitive and non-primitive data types." + ] + }, + "lecture-working-with-optional-chaining-and-object-destructuring": { + "title": "Working with Optional Chaining and Object Destructuring", + "intro": [ + "In these lectures, you will learn about advanced object manipulation techniques in JavaScript, including the optional chaining operator and object destructuring syntax." + ] + }, + "lecture-working-with-json": { + "title": "Working with JSON", + "intro": [ + "In these lectures, you will learn about JavaScript Object Notation (JSON), including how to access JSON data and use the JSON.parse() and JSON.stringify() methods." + ] + }, + "workshop-recipe-tracker": { + "title": "Build a Recipe Tracker", + "intro": [ + "In this workshop, you will review working with JavaScript objects by building a recipe tracker." + ] + }, + "lab-quiz-game": { + "title": "Build a Quiz Game", + "intro": [ + "In this lab, you'll build a quiz game using JavaScript arrays and objects.", + "You'll also practice using functions to randomly select a question and an answer from an array and compare them." + ] + }, + "lab-record-collection": { + "title": "Build a Record Collection", + "intro": [ + "In this lab you will build a function to manage a record collection." + ] + }, + "review-javascript-objects": { + "title": "JavaScript Objects Review", + "intro": [ + "Before you're quizzed on JavaScript objects, you should review what you've learned about them.", + "Open up this page to review concepts including how to access information from objects, object destructuring, working with JSON, and more." + ] + }, + "quiz-javascript-objects": { + "title": "JavaScript Objects Quiz", + "intro": ["Test your knowledge of JavaScript objects with this quiz."] + }, + "lecture-working-with-loops": { + "title": "Working with Loops", + "intro": [ + "Loops are an essential part of JavaScript. That's why the following lectures have been prepared for you to learn about the different types of loops and how they work, and also how iteration works." + ] + }, + "workshop-sentence-analyzer": { + "title": "Build a Sentence Analyzer", + "intro": [ + "In this workshop, you'll review how to work with JavaScript loops by building a sentence analyzer app." + ] + }, + "lab-longest-word-in-a-string": { + "title": "Build a Longest Word Finder App", + "intro": [ + "In this lab, you will use JavaScript loops to find the length of the longest word in the given sentence." + ] + }, + "lab-factorial-calculator": { + "title": "Build a Factorial Calculator ", + "intro": [ + "In this lab, you'll build a factorial calculator.", + "You'll practice using loops and conditionals to calculate the factorial of a number." + ] + }, + "lab-mutations": { + "title": "Implement the Mutations Algorithm", + "intro": [ + "In this lab, you will practice iterating over two different strings to compare their characters." + ] + }, + "lab-chunky-monkey": { + "title": "Implement the Chunky Monkey Algorithm", + "intro": [ + "In this lab, you will practice dividing an array into smaller arrays with the technique of your choice." + ] + }, + "lab-profile-lookup": { + "title": "Build a Profile Lookup", + "intro": [ + "In this lab, you'll create a function that looks up profile information." + ] + }, + "lab-repeat-a-string": { + "title": "Build a String Repeating Function", + "intro": [ + "In this lab, you will implement loops to repeat a string a specified number of times." + ] + }, + "review-javascript-loops": { + "title": "JavaScript Loops Review", + "intro": [ + "Before you're quizzed on the different JavaScript loops, you should review them.", + "Open up this page to review the for...of loop, while loop, break and continue statements and more." + ] + }, + "quiz-javascript-loops": { + "title": "JavaScript Loops Quiz", + "intro": ["Test your knowledge of JavaScript loops with this quiz."] + }, + "lecture-working-with-types-and-objects": { + "title": "Working with Types and Objects", + "intro": [ + "In these lectures you will learn about string objects, the toString() method, the Number constructor and more." + ] + }, + "lecture-working-with-arrays-variables-and-naming-practices": { + "title": "Working with Arrays, Variables, and Naming Practices", + "intro": [ + "In these lectures you will learn about common practices for naming variables and functions, and how to work with arrays." + ] + }, + "lecture-working-with-code-quality-and-execution-concepts": { + "title": "Working with Code Quality and Execution Concepts", + "intro": [ + "In these lectures you will learn what are linters and formatters, what is memory management, and closures." + ] + }, + "lab-largest-number-finder": { + "title": "Build the Largest Number Finder", + "intro": [ + "In this lab, you will use JavaScript fundamentals to create a function that finds the largest number in each sub-array of a given array." + ] + }, + "lab-first-element-finder": { + "title": "Build a First Element Finder", + "intro": [ + "In this lab, you will create a function that looks through an array and returns the first element in it that passes a \"truth test\"." + ] + }, + "lab-slice-and-splice": { + "title": "Implement the Slice and Splice Algorithm", + "intro": [ + "In this lab, you will practice merging an array with another." + ] + }, + "lab-pyramid-generator": { + "title": "Build a Pyramid Generator", + "intro": [ + "In this lab you'll build a pyramid generator.", + "You'll take a number as input and generate a pyramid with that many levels using a loop." + ] + }, + "lab-gradebook-app": { + "title": "Build a Gradebook App", + "intro": [ + "For this lab, you'll create a gradebook app.", + "You'll practice conditionals to determine the student's grade based on their score." + ] + }, + "lecture-the-var-keyword-and-hoisting": { + "title": "The var Keyword and Hoisting", + "intro": [ + "In these lectures, you will learn about the var keyword and why it is not recommended for use anymore. You will also learn about hoisting in JavaScript so you can avoid subtle bugs in your code." + ] + }, + "lab-falsy-remover": { + "title": "Implement a Falsy Remover", + "intro": [ + "In this lab, you will create a function that removes all falsy values from an array." + ] + }, + "lab-inventory-management-program": { + "title": "Build an Inventory Management Program", + "intro": [ + "For this lab, you'll build an inventory management program using JavaScript.", + "You'll use JavaScript array of objects to manage the inventory." + ] + }, + "lecture-understanding-modules-imports-and-exports": { + "title": "Understanding Modules, Imports, and Exports", + "intro": [ + "In this lecture, you will learn about modules, imports, and exports in JavaScript." + ] + }, + "lab-password-generator": { + "title": "Build a Password Generator App", + "intro": [ + "In this lab, you'll build a password generator app based on the user's input." + ] + }, + "lab-sum-all-numbers-algorithm": { + "title": "Design a Sum All Numbers Algorithm", + "intro": [ + "In this lab, you will design a sum all numbers algorithm. This algorithm takes an array of two numbers and returns the sum of those two numbers plus the sum of all the numbers between them." + ] + }, + "lab-html-entitiy-converter": { + "title": "Implement an HTML Entity Converter", + "intro": [ + "In this lab, you will convert special characters in a string to their corresponding HTML entities." + ] + }, + "lab-optional-arguments-sum-function": { + "title": "Build an Optional Arguments Sum Function", + "intro": [ + "In this lab you will build a function that accepts up to two arguments, and sum them, but if there is only one argument returns a function that waits for the second number to sum." + ] + }, + "review-javascript-fundamentals": { + "title": "JavaScript Fundamentals Review", + "intro": [ + "Before you are quizzed on JavaScript fundamentals, you first need to review the concepts.", + "Open up this page to review concepts like closures, memory management, and more." + ] + }, + "quiz-javascript-fundamentals": { + "title": "JavaScript Fundamentals Quiz", + "intro": [ + "Test your knowledge of JavaScript fundamentals with this quiz." + ] + }, + "lecture-working-with-higher-order-functions-and-callbacks": { + "title": "Working with Higher Order Functions and Callbacks", + "intro": [ + "In these lectures, you will learn how to work with higher order functions and callbacks. The higher order functions you will learn include map(), filter(), reduce(), sort(), every(), and some(). You will also learn how to chain these methods together to achieve your desired results." + ] + }, + "workshop-library-manager": { + "title": "Build a Library Manager", + "intro": [ + "In this workshop, you will learn higher order array methods by building a library manager." + ] + }, + "lab-book-organizer": { + "title": "Build a Book Organizer", + "intro": [ + "In this lab, you'll build a book organizer using higher order functions in JavaScript." + ] + }, + "lab-sorted-index-finder": { + "title": "Implement a Sorted Index Finder", + "intro": [ + "In this lab, you will create a function that finds the index at which a given number should be inserted into a sorted array to maintain the array's sorted order." + ] + }, + "lab-symmetric-difference": { + "title": "Build a Symmetric Difference Function", + "intro": [ + "In this lab, you will practice using higher order functions to find the symmetric difference between two arrays." + ] + }, + "review-javascript-higher-order-functions": { + "title": "JavaScript Higher Order Functions Review", + "intro": [ + "Before you're quizzed on JavaScript higher order functions, you should review them.", + "Open up this page to review concepts including how to work with the map(), filter(), and reduce() methods." + ] + }, + "quiz-javascript-higher-order-functions": { + "title": "JavaScript Higher Order Functions Quiz", + "intro": [ + "Test what you've learned about JavaScript higher order functions with this quiz." + ] + }, + "lecture-working-with-the-dom-click-events-and-web-apis": { + "title": "Working with the DOM, Click Events, and Web APIs", + "intro": [ + "In these lectures, you will learn how to work with the Document Object Model (DOM), the addEventListener() method and events, and web APIs." + ] + }, + "workshop-storytelling-app": { + "title": "Build a Storytelling App", + "intro": [ + "In this workshop, you will build a storytelling app that will allow you to list different stories based on genre." + ] + }, + "lab-favorite-icon-toggler": { + "title": "Build a Favorite Icon Toggler", + "intro": [ + "In this lab, you'll build a favorite icon toggler by utilizing JavaScript click events." + ] + }, + "lecture-understanding-the-event-object-and-event-delegation": { + "title": "Understanding the Event Object and Event Delegation", + "intro": [ + "In these lectures, you will learn about the event object, the change event, event bubbling, and event delegation." + ] + }, + "workshop-music-instrument-filter": { + "title": "Build a Music Instrument Filter", + "intro": [ + "In this workshop, you will build a music instrument filter with JavaScript." + ] + }, + "lab-real-time-counter": { + "title": "Build a Real Time Counter", + "intro": [ + "In this lab, you'll build a real-time character counter", + "You'll practice how to work with the input event when the user types in the input field." + ] + }, + "lab-lightbox-viewer": { + "title": "Build a Lightbox Viewer", + "intro": [ + "In this lab, you'll build a lightbox viewer for viewing images in a focused mode.", + "You'll practice click events and toggling classes." + ] + }, + "workshop-rps-game": { + "title": "Build a Rock, Paper, Scissors Game", + "intro": [ + "In this workshop, you will review DOM manipulation and events by building a Rock, Paper, Scissors Game." + ] + }, + "lab-football-team-cards": { + "title": "Build a Set of Football Team Cards", + "intro": [ + "In this lab, you'll use DOM manipulation, object destructuring, event handling, and data filtering to build a set of football team cards." + ] + }, + "review-dom-manipulation-and-click-events-with-javascript": { + "title": "DOM Manipulation and Click Events with JavaScript Review", + "intro": [ + "Before you're quizzed on the DOM, you should review what you've learned about it.", + "Open up this page to review concepts including how to work with the DOM, Web APIs, the addEventListener() method, change events, event bubbling and more." + ] + }, + "quiz-dom-manipulation-and-click-event-with-javascript": { + "title": "DOM Manipulation and Click Events with JavaScript Quiz", + "intro": [ + "Test your knowledge of DOM manipulation and click events in JavaScript with this quiz." + ] + }, + "lecture-understanding-aria-expanded-aria-live-and-common-aria-states": { + "title": "Understanding aria-expanded, aria-live, and Common ARIA States", + "intro": [ + "In these lectures you will learn more about ARIA attributes like aria-expanded, aria-live, and common ARIA states." + ] + }, + "workshop-planets-tablist": { + "title": "Build a Planets Tablist", + "intro": [ + "In this workshop, you will build a dynamic tabbed interface that showcases facts about the planets in the solar system." + ] + }, + "workshop-note-taking-app": { + "title": "Build a Note Taking App", + "intro": [ + "In this workshop, you are going to build an accessible note taking app.", + "This will provide you with the opportunity to practice working with aria-live attribute." + ] + }, + "lab-theme-switcher": { + "title": "Build a Theme Switcher", + "intro": [ + "In this lab, you will build a theme switcher and practice working with the aria-haspopup, aria-expanded, and aria-controls attributes." + ] + }, + "review-js-a11y": { + "title": "JavaScript and Accessibility Review", + "intro": [ + "Before you're quizzed on JavaScript and accessibility, you should review what you've learned about it.", + "Open up this page to review concepts including how to work with the aria-expanded, aria-live, and aria-controls attributes." + ] + }, + "quiz-js-a11y": { + "title": "JavaScript and Accessibility Quiz", + "intro": [ + "Test your knowledge of JavaScript and accessibility best practices with this quiz." + ] + }, + "lecture-debugging-techniques": { + "title": "Debugging Techniques", + "intro": [ + "In these lectures, you will learn about the common errors in JavaScript and the techniques you can use to fix them – a process called debugging." + ] + }, + "lab-random-background-color-changer": { + "title": "Debug a Random Background Color Changer", + "intro": [ + "In this lab, you'll debug a random background color changer and fix the errors to make it work properly." + ] + }, + "review-debugging-javascript": { + "title": "Debugging JavaScript Review", + "intro": [ + "Before you're quizzed on common debugging techniques, you should review what you've learned.", + "Open up this page to review concepts including how to work with the throw statement, try...catch...finally and more." + ] + }, + "quiz-debugging-javascript": { + "title": "Debugging JavaScript Quiz", + "intro": ["Test your knowledge of JavaScript debugging with this quiz."] + }, + "lecture-working-with-regular-expressions": { + "title": "Working with Regular Expressions", + "intro": [ + "In these lectures, you will learn about regular expressions in JavaScript. You will learn about the methods for working with regular expressions, modifiers, character classes, lookaheads, lookbehinds, back-references, quantifiers, and more." + ] + }, + "workshop-spam-filter": { + "title": "Build a Spam Filter", + "intro": [ + "Regular expressions, often shortened to \"regex\" or \"regexp\", are patterns that help programmers match, search, and replace text. Regular expressions are powerful, but can be difficult to understand because they use so many special characters.", + "In this workshop, you'll use capture groups, positive lookaheads, negative lookaheads, and other techniques to match any text you want." + ] + }, + "lab-palindrome-checker": { + "title": "Build a Palindrome Checker", + "intro": [ + "For this lab, you'll build an application that checks whether a given word is a palindrome." + ] + }, + "lab-markdown-to-html-converter": { + "title": "Build a Markdown to HTML Converter", + "intro": [ + "For this lab, you'll build a Markdown to HTML converter using JavaScript.", + "You'll practice regular expressions, string manipulation, and more." + ] + }, + "lab-regex-sandbox": { + "title": "Build a RegEx Sandbox", + "intro": ["In this lab you'll build a regex sandbox."] + }, + "review-javascript-regular-expressions": { + "title": "JavaScript Regular Expressions Review", + "intro": [ + "Before you're quizzed on Regular Expressions, you should review what you've learned.", + "Open up this page to review concepts like lookaheads, lookbehinds, common regex modifiers and more." + ] + }, + "quiz-javascript-regular-expressions": { + "title": "JavaScript Regular Expressions Quiz", + "intro": [ + "Test your knowledge of JavaScript Regular Expressions with this quiz." + ] + }, + "lecture-understanding-form-validation": { + "title": "Understanding Form Validation", + "intro": [ + "In these lectures, you will learn about form validation in JavaScript. You will learn about the various ways to validate forms, how the preventDefault() method works, and how the submit event works." + ] + }, + "workshop-calorie-counter": { + "title": "Build a Calorie Counter", + "intro": [ + "Sometimes when you're coding a web application, you'll need to be able to accept input from a user. In this calorie counter workshop, you'll practice how to validate user input, perform calculations based on that input, and dynamically update your interface to display the results.", + "You'll also practice basic regular expressions, template literals, the addEventListener() method, and more." + ] + }, + "lab-customer-complaint-form": { + "title": "Build a Customer Complaint Form", + "intro": [ + "For this lab, you'll use JavaScript to validate a customer complaint form.", + "You'll practice how to validate form inputs, display error messages, and prevent the form from submitting if there are errors." + ] + }, + "review-form-validation-with-javascript": { + "title": "Form Validation with JavaScript Review", + "intro": [ + "Before you're quizzed on form validation, you should review what you've learned.", + "Open up this page to review concepts including the preventDefault() method, the submit event and more." + ] + }, + "quiz-form-validation-with-javascript": { + "title": "Form Validation with JavaScript Quiz", + "intro": [ + "Test what you've learned about JavaScript form validation with this quiz." + ] + }, + "lecture-working-with-dates": { + "title": "Working with Dates", + "intro": [ + "In these lectures, you will learn about the JavaScript date object. You will learn about the methods for working with dates and how to format dates." + ] + }, + "lab-date-conversion": { + "title": "Build a Date Conversion Program", + "intro": [ + "In this lab, you'll build a program to convert a date from one format to another." + ] + }, + "review-javascript-dates": { + "title": "JavaScript Dates Review", + "intro": [ + "Before you're quizzed on working with dates, you should review what you've learned.", + "Open up this page to review the Date() object and common methods." + ] + }, + "quiz-javascript-dates": { + "title": "JavaScript Dates Quiz", + "intro": [ + "Test what you've learned about JavaScript Dates with this quiz." + ] + }, + "lecture-working-with-audio-and-video": { + "title": "Working with Audio and Video", + "intro": [ + "In these lectures, you will learn how to work with audio and video files using JavaScript. You will learn about the Audio and Video constructors, their methods and properties, audio and video formats, codecs, the HTMLMediaElement API, and much more." + ] + }, + "workshop-music-player": { + "title": "Build a Music Player", + "intro": [ + "In this workshop, you'll code a basic MP3 player using HTML, CSS, and JavaScript.", + "The project covers fundamental concepts such as handling audio playback, managing a playlist, implementing play, pause, next, and previous functionalities and dynamically update your user interface based on the current song." + ] + }, + "lab-drum-machine": { + "title": "Build a Drum Machine", + "intro": [ + "For this lab you will use the audio element to build a drum machine." + ] + }, + "review-javascript-audio-and-video": { + "title": "JavaScript Audio and Video Review", + "intro": [ + "Before you're quizzed on working with audio and video in JavaScript, you should review what you've learned about them.", + "Open up this page to review concepts including the Audio constructor, the HTMLMediaElement API and more." + ] + }, + "quiz-javascript-audio-and-video": { + "title": "JavaScript Audio and Video Quiz", + "intro": [ + "Test what you've learned about JavaScript audio and video with this quiz." + ] + }, + "lecture-working-with-maps-and-sets": { + "title": "Working with Maps and Sets", + "intro": [ + "In these lectures, you will learn about JavaScript Map and Set. You will also learn how they both differ from WeakSets and WeakMaps." + ] + }, + "workshop-plant-nursery-catalog": { + "title": "Build a Plant Nursery Catalog", + "intro": [ + "In this workshop, you will practice using Maps and Sets by building a plant nursery catalog." + ] + }, + "lab-voting-system": { + "title": "Build a Voting System", + "intro": [ + "In this lab, you'll build a voting system using Maps and Sets.", + "You'll practice how to use the Map object to store key-value pairs and the Set object to store unique values." + ] + }, + "review-javascript-maps-and-sets": { + "title": "JavaScript Maps and Sets Review", + "intro": [ + "Before you're quizzed on JavaScript Maps and Sets, you should review what you've learned about them.", + "Open up this page to review concepts such as the Map and Set objects, as well as WeakSet and WeakMap." + ] + }, + "quiz-javascript-maps-and-sets": { + "title": "JavaScript Maps and Sets Quiz", + "intro": [ + "Test what you've learned about JavaScript Maps and Sets with this quiz." + ] + }, + "lecture-working-with-client-side-storage-and-crud-operations": { + "title": "Working with Client-Side Storage and CRUD Operations", + "intro": [ + "In these lectures, you will learn about client-side storage and CRUD operations in JavaScript. You will learn about localStorage and sessionStorage alongside their methods and properties, cookies, the Cache API, IndexDB, and much more." + ] + }, + "workshop-todo-app": { + "title": "Build a Todo App using Local Storage", + "intro": [ + "Local storage is a web browser feature that lets web applications store key-value pairs persistently within a user's browser. This allows web apps to save data during one session, then retrieve it in a later page session.", + "In this workshop, you'll learn how to handle form inputs, manage local storage, perform CRUD (Create, Read, Update, Delete) operations on tasks, implement event listeners, and toggle UI elements." + ] + }, + "lab-bookmark-manager-app": { + "title": "Build a Bookmark Manager App", + "intro": [ + "For this lab, you'll build a bookmark manager app.", + "You'll utilize local storage to store bookmarks, and practice how to add, remove, and display bookmarks." + ] + }, + "review-local-storage-and-crud": { + "title": "Local Storage and CRUD Review", + "intro": [ + "Before you are quizzed on working with localStorage, you first need to review the concepts.", + "Open up this page to review the localStorage property, sessionStorage property and more." + ] + }, + "quiz-local-storage-and-crud": { + "title": "Local Storage and CRUD Quiz", + "intro": [ + "Test what you've learned about local storage and CRUD with this quiz." + ] + }, + "lecture-understanding-how-to-work-with-classes-in-javascript": { + "title": "Understanding How to Work with Classes in JavaScript", + "intro": [ + "In these lectures, you will learn about classes in JavaScript. You will learn about inheritance, the this keyword, static properties and methods, and more." + ] + }, + "workshop-shopping-cart": { + "title": "Build a Shopping Cart", + "intro": [ + "In this workshop you'll create a shopping cart using JavaScript classes.", + "You will practice how to use the this keyword, create class instances, implement methods for data manipulation and more." + ] + }, + "lab-project-idea-board": { + "title": "Build a Project Idea Board", + "intro": [ + "In this lab, you'll build a project idea board using OOP in JavaScript.", + "You'll practice how to create classes, add methods to classes, and create instances of classes." + ] + }, + "lab-bank-account-manager": { + "title": "Build a Bank Account Management Program", + "intro": [ + "In this lab, you'll build a simple transaction management system for a bank account." + ] + }, + "review-javascript-classes": { + "title": "JavaScript Classes Review", + "intro": [ + "Before you're quizzed on how to work with classes, you should review what you've learned about them.", + "Open up this page to review concepts including the this keyword, class inheritance and more." + ] + }, + "quiz-javascript-classes": { + "title": "JavaScript Classes Quiz", + "intro": [ + "Test what you've learned about JavaScript classes with this quiz." + ] + }, + "lecture-understanding-recursion-and-the-call-stack": { + "title": "Understanding Recursion and the Call Stack", + "intro": [ + "In this lecture, you will learn about recursion and the call stack." + ] + }, + "workshop-decimal-to-binary-converter": { + "title": "Build a Decimal to Binary Converter", + "intro": [ + "Recursion is a programming concept where a function calls itself. This can reduce a complex problem into simpler sub-problems, until they become straightforward to solve.", + "In this workshop, you'll build a decimal-to-binary converter using JavaScript. You'll practice the fundamental concepts of recursion, explore the call stack, and build out a visual representation of the recursion process through an animation." + ] + }, + "lab-permutation-generator": { + "title": "Build a Permutation Generator", + "intro": [ + "For this lab, you'll build a permutation generator that produces all possible permutations of a given string." + ] + }, + "review-recursion": { + "title": "Recursion Review", + "intro": [ + "Before you're quizzed on recursion, you should review what you've learned.", + "Open up this page to review what is recursion and what is it used for." + ] + }, + "quiz-recursion": { + "title": "Recursion Quiz", + "intro": ["Test your knowledge of Recursion with this quiz."] + }, + "lecture-understanding-functional-programming": { + "title": "Understanding Functional Programming", + "intro": [ + "In these lectures, you will learn about functional programming and how to nest functions using a technique called currying." + ] + }, + "workshop-recipe-ingredient-converter": { + "title": "Build a Recipe Ingredient Converter", + "intro": [ + "In the previous lectures, you learned the core concepts behind functional programming and currying.", + "Now you will be able to apply what you have learned about currying and functional programming by building a recipe ingredient converter application." + ] + }, + "lab-sorting-visualizer": { + "title": "Build a Sorting Visualizer", + "intro": [ + "For this lab, you'll use JavaScript to visualize the steps that the Bubble Sort algorithm takes to reorder an array of integers." + ] + }, + "review-javascript-functional-programming": { + "title": "JavaScript Functional Programming Review", + "intro": [ + "Before you're quizzed on functional programming, you should review what you've learned.", + "Open up this page to review concepts on functional programming, currying and more." + ] + }, + "quiz-javascript-functional-programming": { + "title": "JavaScript Functional Programming Quiz", + "intro": [ + "Test what you've learned about JavaScript functional programming with this quiz." + ] + }, + "lecture-understanding-asynchronous-programming": { + "title": "Understanding Asynchronous Programming", + "intro": [ + "In these lectures, you will learn about asynchronous programming in JavaScript. You will learn about the differences between synchronous and asynchronous programming, how the async keyword works, the Fetch API, promises, async/await, the Geolocation API, and much more." + ] + }, + "workshop-fcc-authors-page": { + "title": "Build an fCC Authors Page", + "intro": [ + "One common aspect of web development is learning how to fetch data from an external API, then work with asynchronous JavaScript.", + "In this workshop you will practice how to use the fetch method, dynamically update the DOM to display the fetched data and paginate your data so you can load results in batches." + ] + }, + "lab-fcc-forum-leaderboard": { + "title": "Build an fCC Forum Leaderboard", + "intro": [ + "For this lab you'll practice asynchronous JavaScript by coding your own freeCodeCamp forum leaderboard." + ] + }, + "lab-weather-app": { + "title": "Build a Weather App", + "intro": [ + "In this lab you'll build a Weather App using an API", + "You'll practice how to fetch data from the API, store and display it on your app." + ] + }, + "review-asynchronous-javascrip": { + "title": "Asynchronous JavaScript Review", + "intro": [ + "Review asynchronous JavaScript concepts to prepare for the upcoming quiz." + ] + }, + "quiz-asynchronous-javascript": { + "title": "Asynchronous JavaScript Quiz", + "intro": [ + "Test what you've learned about asynchronous JavaScript with this quiz." + ] + }, + "review-javascript": { + "title": "JavaScript Review", + "intro": [ + "Before you take the JavaScript prep exam, you should review everything you've learned about JavaScript.", + "Open up this page to review all of the concepts taught including variables, strings, booleans, functions, objects, arrays, debugging, working with the DOM and more." + ] + }, + "exam-javascript-certification": { + "title": "JavaScript Certification Exam", + "intro": ["Pass this exam to earn your JavaScript Certification."] + } + } + }, "a1-professional-spanish": { "title": "A1 Professional Spanish Certification (Beta)", "note": "This certification is currently in active development. While there isn't a claimable certification available for this section at the moment, one will be available soon. In the meantime, you're welcome to explore the courses we have created below.", diff --git a/client/src/assets/superblock-icon.tsx b/client/src/assets/superblock-icon.tsx index 3a982dcec94..daa0f149a91 100644 --- a/client/src/assets/superblock-icon.tsx +++ b/client/src/assets/superblock-icon.tsx @@ -52,7 +52,8 @@ const iconMap = { [SuperBlocks.BasicHtml]: Code, [SuperBlocks.SemanticHtml]: Code, [SuperBlocks.FullStackOpen]: Code, - [SuperBlocks.DevPlayground]: Code + [SuperBlocks.DevPlayground]: Code, + [SuperBlocks.JsV9]: JavaScriptIcon }; type SuperBlockIconProps = { diff --git a/client/src/components/settings/certification.tsx b/client/src/components/settings/certification.tsx index 33ef6ecfa6e..c9f1a6a7e69 100644 --- a/client/src/components/settings/certification.tsx +++ b/client/src/components/settings/certification.tsx @@ -89,6 +89,7 @@ const createCertifiedMap = ({ // be rendered. The new FullStackDeveloper certification is a normal // certification with projects. [Certification.FullStackDeveloper]: false, + [Certification.JsV9]: false, [Certification.A2English]: false, [Certification.B1English]: false, [Certification.A2Spanish]: false, diff --git a/client/src/pages/learn/javascript-v9/index.md b/client/src/pages/learn/javascript-v9/index.md new file mode 100644 index 00000000000..5b1fc680520 --- /dev/null +++ b/client/src/pages/learn/javascript-v9/index.md @@ -0,0 +1,14 @@ +--- +title: JavaScript Certification +superBlock: javascript-v9 +certification: javascript-v9 +--- + +## Introduction to JavaScript Certification + +This course teaches you core JavaScript programming concepts such as working with variables, functions, objects, arrays, and control flow. You'll also learn how to manipulate the DOM, handle events, and apply techniques like asynchronous programming, functional programming, and accessibility best practices. + +To earn your JavaScript Certification: + +- Complete the five required projects to qualify for the certification exam. +- Pass the JavaScript Certification exam. diff --git a/client/src/templates/Introduction/components/super-block-accordion.tsx b/client/src/templates/Introduction/components/super-block-accordion.tsx index 5dff8899904..79f5583396b 100644 --- a/client/src/templates/Introduction/components/super-block-accordion.tsx +++ b/client/src/templates/Introduction/components/super-block-accordion.tsx @@ -10,6 +10,7 @@ import DropDown from '../../../assets/icons/dropdown'; import fullStackCert from '../../../../../curriculum/structure/superblocks/full-stack-developer.json'; import fullStackOpen from '../../../../../curriculum/structure/superblocks/full-stack-open.json'; import a1Spanish from '../../../../../curriculum/structure/superblocks/a1-professional-spanish.json'; +import javascriptV9 from '../../../../../curriculum/structure/superblocks/javascript-v9.json'; import { ChapterIcon } from '../../../assets/chapter-icon'; import { type Chapter } from '../../../../../shared-dist/config/chapters'; @@ -189,6 +190,8 @@ export const SuperBlockAccordion = ({ return fullStackCert; case SuperBlocks.A1Spanish: return a1Spanish; + case SuperBlocks.JsV9: + return javascriptV9; default: throw new Error("The SuperBlock structure hasn't been imported."); } @@ -287,7 +290,9 @@ export const SuperBlockAccordion = ({