DEV Community: Jisan Mia

30+ String Manipulation Techniques in JavaScript

Jisan Mia — Sat, 01 Mar 2025 17:48:59 +0000

1. charAt

The String.charAt(index) method takes a parameter index (the position in the string) and returns the character at that index in the string.
If no index is provided, the default value is 0 (the first character).

Examples

const string = "Hello World!";
console.log(string.charAt(4)); // 'o'
console.log(string.charAt()); // 'H'

2. indexOf

The String.indexOf(searchString) method takes a parameter searchString and searches for it within the string, starting from the beginning (left side).
It returns the index of the first occurrence of searchString if found; if not found, it returns -1.
If no parameter is provided, it defaults to undefined.

Examples

const string = 'The code undefined code code';
console.log(string.indexOf('code')); // 4
console.log(string.indexOf('Code')); // -1
console.log(string.indexOf('')); // 0
console.log(string.indexOf()); // 9 (since undefined was passed automatically, and 'undefined' is present in the string)

3. lastIndexOf

The String.lastIndexOf(searchString) method takes a parameter searchString and searches for it within the string starting from the end (right side).
It returns the index of the last occurrence of searchString if found; if not found, it returns -1.
If no parameter is provided, it defaults to undefined.

Examples

const string = "The code undefined code code";
console.log(string.lastIndexOf("code")); // 24
console.log(string.lastIndexOf("Code")); // -1
console.log(string.lastIndexOf("")); // 28
console.log(string.lastIndexOf()); // 9 (since undefined was passed automatically, and 'undefined' is present in the string)

4. slice

The String.slice() method extracts a section of a string and returns it as a new string, leaving the original string unchanged.
Syntax: String.slice(indexStart, indexEnd)
- indexStart is the position from where the slice starts.
- If a negative index is given, slice() starts counting from the end of the string (e.g., -1 is the last character).
- indexEnd is the position where the slicing stops (this position is excluded).
- If indexStart is greater than indexEnd, slice() returns an empty string.

Examples

const string = "The morning is upon us.";
console.log(string.slice(12)); // 'is upon us.'
console.log(string.slice(-11)); // 'is upon us.'
console.log(string.slice(13, 16)); // 's u'
console.log(string.slice(16, 13)); // ''
console.log(string.slice(-8, -4)); // 'upon'
console.log(string.slice(-8, 4)); // ''
console.log(string.slice(8, -4)); // 'ing is upon'

5. substring

The String.substring() method extracts a section of a string and returns it as a new string, leaving the original string unchanged.
Syntax: String.substring(indexStart, indexEnd)
- indexStart is the position from where to start extracting.
- If a negative index is provided, substring() treats it as 0, starting from the beginning of the string.
- indexEnd is where the extraction stops (this position is excluded).
- If indexStart is greater than indexEnd, substring() swaps their positions.

Examples

const string = "The morning is upon us.";
console.log(string.substring(12)); // 'is upon us.'
console.log(string.substring(-11)); // 'is upon us.'
console.log(string.substring(13, 16)); // 's u'
console.log(string.substring(16, 13)); // 's u'
console.log(string.substring(-8, -4)); // 'upon'
console.log(string.substring(-8, 4)); // 'The'
console.log(string.substring(8, -4)); // 'The morn'

6. split

The String.split(separator) method is used to divide a string into substrings based on a specified separator.
It returns the substrings in an array, without modifying the original string.

Examples

const string = "The morning is upon us.";
console.log(string.split()); // [ 'The morning is upon us.' ]
console.log(string.split(" ")); // [ 'The', 'morning', 'is', 'upon', 'us.' ]
console.log(string.split(""));
/* 
[
  'T', 'h', 'e', ' ', 'm',
  'o', 'r', 'n', 'i', 'n',
  'g', ' ', 'i', 's', ' ',
  'u', 'p', 'o', 'n', ' ',
  'u', 's', '.'
]
*/
console.log(string.split("o")); // [ 'The m', 'rning is up', 'n us.' ]

7. includes

The String.includes(searchString) method checks if a string contains a specified substring and returns true if it does, or false if it does not.

Examples

const string = "The brown fox jumps over the lazy dog undefined";
console.log(string.includes("fox")); // true
console.log(string.includes("Fox")); // false
console.log(string.includes()); // true

8. startsWith

The String.startsWith(searchString) method checks if a string begins with a specified substring.

Examples

const string = "Playing cricket is good for health";
console.log(string.startsWith("Playing")); // true
console.log(string.startsWith("cricket")); // false

9. endsWith

String.endsWith(searchString) checks whether a string ends with a specified substring.

Examples

const string = "The cat is beautiful!";
console.log(string.endsWith("beautiful!")); // true
console.log(string.endsWith("beautiful")); // false

10. concat

String.concat(str1, str2, strN) is used to concatenate multiple strings.
It returns a new string without modifying the original strings.

Examples

const str1 = "Hello";
const str2 = "World!";
const concatenatedStr = str1.concat(" ", str2); // Hello World!
console.log(concatenatedStr);

/* Performance note: 
It is strongly recommended to use the assignment operators (+, +=) instead of the concat() method.
*/

11. repeat

String.repeat(count) is used to create multiple copies of a string.
It takes a count parameter that defines how many copies of the string should be made.
It returns a new string without modifying the original string.
If 0 or no parameter is passed, repeat() will return an empty string.
If a decimal number is passed, repeat() will convert it into an integer.
Passing any negative value as the counter will return a RangeError.

Examples

const string = "hello";
const fiveCopies = string.repeat(5); // hellohellohellohellohello
console.log(fiveCopies);

console.log(string.repeat()); // ''
console.log(string.repeat(1)); // hello
console.log(string.repeat(2.5)); // hellohello
console.log(string.repeat(-1)); // RangeError
console.log(string.repeat(1 / 0)); // RangeError

12. trim

String.trim() is used to remove whitespace from both the start and end of a string.
It removes leading and trailing whitespace and line terminator characters.
It returns a new string without modifying the original string.

Examples

const string = " Hello World ";
const trimmedStr = string.trim();

console.log(trimmedStr); // 'Hello World'

13. trimStart

String.trimStart() is used to remove whitespace from the start of a string.
It removes leading whitespace and line terminator characters.
It returns a new string and does not modify the original string.

Examples

const string = " Hello World ";
const trimmedStr = string.trimStart();

console.log(trimmedStr); // 'Hello World '

14. trimEnd

String.trimEnd() is used to remove whitespace from the end of a string.
It removes trailing whitespace and line terminator characters.
It returns a new string without modifying the original string.

Examples

const string = " Hello World ";
const trimmedStr = string.trimEnd();

console.log(trimmedStr); // ' Hello World'

15. padStart

String.padStart(targetLength, padString) is used to pad the original string from the start with another string to reach a specified target length.
If targetLength is provided but padString is not, it defaults to a space.
It returns a new string without modifying the original string.

Examples

const string = "abc";
console.log(string.padStart(10)); // '       abc'
console.log(string.padStart(10, "foo")); // 'foofoofabc'
console.log(string.padStart(10, "12345678")); // '12345678abc'
console.log(string.padStart(2)); // 'abc'

16. padEnd

String.padEnd(targetLength, padString) is used to pad the original string from the end with another string to reach a specified target length.
If targetLength is provided but padString is not, it defaults to a space.
It returns a new string without modifying the original string.

Examples

const string = "abc";
console.log(string.padEnd(10)); // 'abc       '
console.log(string.padEnd(10, "foo")); // 'abcfoofoof'
console.log(string.padEnd(10, "12345678")); // 'abc12345678'
console.log(string.padEnd(2)); // 'abc'

17. localeCompare

referenceString.localeCompare(compareString) is used whenever we want to compare two strings.
localeCompare() returns a numeric value:
- If referenceString comes before compareString, t will return a negative value (-1, -2, -3, etc.).
- If referenceString comes after compareString, it will return a positive value (+1, +2, etc.).
- If the referenceString is equivalent to compareString, it will return 0.

Examples

const a = "a";
const b = "b";

console.log(a.localeCompare(b)); // -1
console.log(b.localeCompare(a)); // 1
console.log(a.localeCompare(a)); // 0

18. search

String.search(regex) is used to search for a match between a regular expression and the string object.
search() will always returns the index of the first match and it is case sensitive.
If no match is found, it returns -1.

Examples

const string = "The rain in SPAIN stays mainly in the plain";

console.log(string.search("ain")); // 5 (search converts 'ain' into a regular expression)
console.log(string.search(/ain/)); // 5
console.log(string.search(/AIN/)); // 14
console.log(string.search(/AIN/i)); // 5
console.log(string.search(/w/)); // -1

19. match

String.match(regex) method is used to find a match between a regular expression and the string object.
match() method returns an array containing information about the match.
It will return only the first match it finds unless the global flag(g) is used in the regular expression.
If match() fails, it returns null.

Examples

const string = "The rain in SPAIN stays mainly in the plain";

console.log(string.match("ain")); // The match() method converts 'ain' into a regular expression
/* 
[
  'ain',
  index: 5,
  input: 'The rain in SPAIN stays mainly in the plain',
  groups: undefined
]
*/
console.log(string.match(/ain/)); // same as the first example
console.log(string.match(/AIN/g)); // [ 'AIN' ]
console.log(string.match(/AIN/gi)); // [ 'ain', 'AIN', 'ain', 'ain' ]
console.log(string.match(/w/)); // null

20. matchAll

String.matchAll(regex) method is used to find all matches between a regular expression and the string object.
matchAll() method returns an iterable containing all matches along with their details.
It requires a regular expression with the global flag (g)
If matchAll() fails, it returns an empty array [].

Examples

const string = "The rain in SPAIN stays mainly in the plain";

console.log([...string.matchAll("ain")]);

// matchAll() converts this to a regular expression by adding a global modifier
// string.matchAll(/ain/g)
/* 
[
  [
    'ain',
    index: 5,
    input: 'The rain in SPAIN stays mainly in the plain',
    groups: undefined
  ],
  [
    'ain',
    index: 25,
    input: 'The rain in SPAIN stays mainly in the plain',
    groups: undefined
  ],
  [
    'ain',
    index: 40,
    input: 'The rain in SPAIN stays mainly in the plain',
    groups: undefined
  ]
]
*/

console.log([...string.matchAll(/w/gi)]); // []

21. replace

The String.replace(searchString, replaceString) method is used to replace a substring inside a string with another string.
searchString can be either a string or a regular expression.
The method returns a new string and does not modify the original string.
By default, replace() will only replaces the first occurrence of the match unless the global flag(g) is used in the regular expression.
The second parameter can also be a function. If a function is used, it takes the matched substring as it's parameter.
Function usage: String.replace(searchString, replaceFunction)

Examples

const string = "Mr Blue has a blue house and a blue car";
console.log(string.replace("blue", "red")); // Mr Blue has a red house and a blue car

const result = string.replace("blue", (match) => {
  return match.toUpperCase();
});
console.log(result); // Mr Blue has a BLUE house and a blue car

console.log(string.replace(/blue/g, "red")); // Mr Blue has a red house and a red car
console.log(string.replace(/blue/gi, "red")); // Mr red has a red house and a red car

22. replaceAll

String.replaceAll(searchString, replaceString) method replaces all matches of the string with another string.
searchString can be either a string or a regular expression.
It returns a new string and does not modify the original string.
The second parameter can also be a function that takes the matched substring as its argument.
Usage: String.replaceAll(searchString, replaceFunction)

Examples

const string = "Mr Blue has a blue house and a blue car";
console.log(string.replaceAll("blue", "red")); // Mr Blue has a red house and a red car

const result = string.replaceAll("blue", (match) => {
  return match.toUpperCase();
});
console.log(result); // Mr Blue has a BLUE house and a BLUE car

console.log(string.replaceAll(/blue/g, "red")); // Mr Blue has a red house and a red car
console.log(string.replaceAll(/blue/gi, "red")); // Mr red has a red house and a red car

23. charCodeAt

The String.charCodeAt(index) method is based on UTF-16 and accepts an index ranging from 0 to the length of the string minus one.
It returns the Unicode value of the character at the specified index.
If the index parameter is not provided, it defaults to 0.
If there is no character at the specified position, it will return NaN.

Examples

const str = "Ok 👍";
console.log(str.length); // 5
console.log(str.charCodeAt(0)); // 79
console.log(str.charCodeAt(1)); // 107
console.log(str.charCodeAt(2)); // 32
console.log(str.charCodeAt(3)); // 55357
console.log(str.charCodeAt(4)); // 56397
console.log(str.charCodeAt(5)); // NaN
console.log(str.charCodeAt()); // 79

24. codePointAt

The String.codePointAt(index) method is based on Unicode and represents code points (not limited to 16-bit characters), it accepts an index ranging from 0 to the length of the string minus one.
It returns the Unicode value of the character at the specified index.
If the index parameter is not provided, it defaults to 0.
If there is no character at the specified position, it will return undefined.

Examples

const str = "Ok 👍";
console.log(str.length); // 5
console.log(str.codePointAt(0)); // 79
console.log(str.codePointAt(1)); // 107
console.log(str.codePointAt(2)); // 32
console.log(str.codePointAt(3)); // 128077
console.log(str.codePointAt(4)); // 56397
console.log(str.codePointAt(5)); // NaN
console.log(str.codePointAt()); // 79

25. fromCharCode

String.fromCharCode(num1, num2, ..., numN) is used to obtain the actual value/string from one or more UTF-16 code units.
Every number passed as an argument corresponds to the Unicode value of the desired character.

Examples

console.log(String.fromCharCode(79)); // 'O'
console.log(String.fromCharCode(107)); // 'k'
console.log(String.fromCharCode(32)); // ' ' (space)
console.log(String.fromCharCode(55357)); // '\ud83d'
console.log(String.fromCharCode(56397)); // '\udc4d'
console.log(String.fromCharCode(79, 107, 32, 55357, 56397)); // 'Ok 👍'

26. fromCodePoint

String.fromCodePoint(num1, num2, ..., numN) is used to obtain the actual value/string from one or more Unicode code points.
Unlike fromCharCode(), this method can handle characters represented by more than 16 bits.

Examples

console.log(String.fromCodePoint(79)); // 'O'
console.log(String.fromCodePoint(107)); // 'k'
console.log(String.fromCodePoint(32)); // ' ' (space)
console.log(String.fromCodePoint(128077)); // 👍 (example emoji)
console.log(String.fromCodePoint(56397)); // '\udc4d'

console.log(String.fromCodePoint(79, 107, 32, 55357, 56397)); // 'Ok �'
console.log(String.fromCodePoint(79, 107, 32, 128077)); // 'Ok 👍'

27. normalize

String.normalize(form) normalizes the string to the specified Unicode normalization form, where the default is NFC (Canonical Composition).
Other possible normalization forms are:
- "NFD" (Canonical Decomposition)
- "NFKC" (Compatibility Composition)
- "NFKD" (Compatibility Decomposition)

Examples

// Before normalization
let str1 = "\u00c7"; // Ç
console.log(str1.length); // 1

let str2 = "\u0043\u0327"; // C +  ̧
console.log(str2.length); // 2

// After normalization
str1 = str1.normalize();
console.log(str1.length); // 1
console.log(str1.codePointAt(0)); // 199

str2 = str2.normalize();
console.log(str2.length); // 1
console.log(str2.codePointAt(0)); // 199

str1 = str1.normalize("NFD");
console.log(str1.length); // 2
console.log(str1.codePointAt(0)); // 67
console.log(str1.codePointAt(1)); // 807

28. toLowerCase

String.toLowerCase() is used to convert all alphabetic characters in a string to lowercase.
This method returns a new string without modifying the original string.

Examples

const string = "My name is Jisan";
console.log(string.toLowerCase()); // 'my name is jisan'

29. toUpperCase

String.toUpperCase() is used to convert all alphabetic characters in a string to uppercase.
Similar to toLowerCase(), this method also returns a new string without changing the original string.

Examples

const string = "my name is jisan";
console.log(string.toUpperCase()); // 'MY NAME IS JISAN'

30. toLocaleLowerCase

String.toLocaleLowerCase(local) converts all alphabetic characters to lowercase based on the current locale environment.
Like other methods, it returns a new string without altering the original string.

Examples

const string = "ISTANBUL";
console.log(string.toLocaleLowerCase("en-US")); // 'istanbul'
console.log(string.toLocaleLowerCase("tr")); // 'ıstanbul' (Turkish locale)

31. toLocaleUpperCase

String.toLocaleUpperCase(local) converts all alphabetic characters to uppercase, taking into account the current locale environment.
This method also returns a new string without modifying the original.

Examples

const string = "istanbul";
console.log(string.toLocaleUpperCase("en-US")); // 'ISTANBUL'
console.log(string.toLocaleUpperCase("tr")); // 'İSTANBUL' (Turkish locale)

32. toString

String.prototype.toString() returns a string representation of a string object.
There is no need to call the toString() method explicitly, as string values are automatically converted.

Examples

const string = "Hello World!";
console.log(string.toString()); // 'Hello World!'

33. valueOf

String.prototype.valueOf() returns the primitive value of a specified string object.
Like toString(), it does not need to be called explicitly.

Examples

const string = "Hello World!";
console.log(string.valueOf()); // 'Hello World!'

34. raw

'String.rawtemplateString' is used with template strings.
It creates raw string literal meaning that escape sequence (like \n or \t) are not processed.

Examples

const string = `C\windows\registration\name\filename.js`;
console.log(string);
/* 
This may output:
egistration
ame
   ilename.js
*/

const escapedString = String.raw`C\windows\registration\name\filename.js`;
console.log(escapedString); // Outputs: C\windows\registration\name\filename.js

Originally written at https://github.com/Jisan-mia/string-methods

20+ DOM Projects: Your Frontend Breakthrough!

Jisan Mia — Wed, 15 May 2024 08:52:39 +0000

Level Up Your Frontend Skills with DOM Projects: A Playground for Budding Developers

Transform Your Learning Experience with DOM Projects! Dive into over 20 practical projects built with HTML, CSS, and JavaScript. Great for both newbies and seasoned developers, you'll find something to challenge and inspire you.

Here's what sets DOM Projects apart:

Learn by Doing: DOM Projects dives straight into the practical aspects of frontend development. You'll learn by building actual projects, solidifying your understanding of core concepts.
Progressive Learning: DOM Projects offers a curated selection of projects categorized by difficulty. Start with beginner-friendly projects like "Counter" or "Animation on Scroll" and gradually progress to more advanced projects like "Advanced Todo" or "REST Client".
Open Source and Collaborative: The beauty of DOM Projects lies in its open-source nature. Not only can you learn from existing projects, but you can also contribute your creations to the platform, fostering a vibrant community of learners and developers.
Easy Setup: Setting up DOM Projects is a breeze. There's no complex installation process involved. Simply fork the repository, clone it to your local machine, and open the index.html file in your browser. You're all set to begin your coding adventure!

Deep Dive into the Projects:

DOM Projects boasts over 20 projects, each meticulously crafted to target specific skills and concepts. Here are a few detailed examples to pique your interest:

Counter

Description: A straightforward counter project that allows users to increment and decrement a number displayed on the screen. It also includes a button to reset the counter to zero.

Learning Concepts:

DOM manipulation: Learn how to access and modify HTML elements using JavaScript.
Event handling: Understand how to capture user interactions (clicks in this case) and trigger specific actions using JavaScript.
Basic JavaScript functions: Explore how to write functions to perform tasks like incrementing, decrementing, and resetting the counter value.

DadJokes

Description: This project fetches random dad jokes from an external API using asynchronous techniques in JavaScript. Once retrieved, the joke is displayed on the web page for your entertainment.

Learning Concepts:

Asynchronous programming: Understand how to handle operations that take time to complete (like fetching data from an API) without blocking the main thread of execution in JavaScript.
Fetch API: Learn how to use built-in browser features to make HTTP requests to APIs and retrieve data.
Working with APIs: Explore how to interact with external APIs to access data or functionalities provided by those services.

Form Validation

Description: This project demonstrates client-side form validation using JavaScript. It validates user input in a form before submitting it. Additionally, upon successful validation, it displays a success message and allows users to preview the submitted data in a read-only format.

Learning Concepts:

Form validation: Understand how to use JavaScript to validate user input in forms before submission. This helps ensure data integrity and prevents invalid data from being processed.
DOM manipulation: Learn how to access and modify form elements (like displaying error messages or disabling input fields) based on validation results.
Event handling: Capture the form submission event and trigger validation logic using JavaScript.

Random User

Description: This project utilizes an API to generate random user information. It fetches data like name, email, avatar, and more, and displays it on the web page, simulating a random user profile.

Learning Concepts:

Asynchronous programming: Similar to project 2 (DadJokes), this project reinforces asynchronous operations in JavaScript.
Fetch API: Continues practicing using tools for making HTTP requests to APIs and retrieving data.
Working with APIs: Further explores interacting with external APIs to access specific functionalities or data.

Morse Code Translator

Description: This project allows users to translate between Morse code and text. Users can either type text and see the corresponding Morse code or enter Morse code and view the translated text.

Learning Concepts:

String manipulation: Understand how to work with strings in JavaScript, including functions for splitting, joining, and character manipulation, which are crucial for Morse code translation.
Conditional statements: Learn how to use conditional statements (if/else) in JavaScript to implement the translation logic based on user input (text or Morse code).

Basic Calculator

Description: This project uses JavaScript to build a bare minimum basic calculator application. It allows users to perform fundamental arithmetic operations like addition, subtraction, multiplication, and division. Users can enter numbers and choose the desired operation using buttons on the screen. The calculator displays the calculated result.

Learning Concepts:

Event handling: Similar to previous projects, this project practices capturing user clicks on calculator buttons and triggering actions (updating the calculation and result).
DOM manipulation: Demonstrates how to update the displayed numbers and result within the calculator interface using JavaScript.
Basic math operations in JavaScript: Explores using JavaScript's built-in math operators and functions for performing calculations like addition, subtraction, multiplication, and division.

Normal Calculator

Description: This project builds upon the basic calculator by offering a more comprehensive user experience for standard mathematical calculations. It caters to users familiar with basic calculator functionalities.

Learning Concepts:

Building upon existing projects: Demonstrates expanding on the basic calculator concept to create a more user-friendly and feature-rich calculator.
Enhanced user interaction: Introduces techniques for improving user interaction with the calculator, such as handling decimal inputs or incorporating memory functions.

Scientific Calculator

Description: This project takes calculator functionality to the next level by offering scientific functions like trigonometry (sine, cosine, tangent), logarithms, and exponents. It caters to users who require advanced mathematical calculations.

Learning Concepts:

Building complex applications: Demonstrates creating a more intricate application with advanced scientific functionalities.
Mathematical functions in JavaScript: Introduces using JavaScript's built-in math functions for advanced calculations

Simple Todo App

Description: This project is a basic to-do list application. Users can add new tasks, mark them as completed, and delete them from the list. It demonstrates managing and keeping track of tasks.

**Learning Concepts:

DOM manipulation: This project reinforces practices of adding, removing, and modifying list items in the HTML dynamically using JavaScript.
Arrays: It demonstrates storing and managing task data using arrays in JavaScript.
User interface updates: Explores how to update the visual representation of the to-do list (adding, completing, deleting tasks) based on user interactions.

Profile Form & Card

Description: This project allows users to create dynamic profile cards with a form. Users can enter their information, and upon submission, a new profile card is created and displayed on the page. It also includes functionality to delete existing profile cards.

Learning Concepts:

Form handling: This project builds upon concepts from form validation (project 3) by focusing on capturing form data and utilizing it for further actions.
DOM creation and manipulation: It goes beyond basic DOM manipulation by dynamically creating new HTML elements (profile cards) based on user input.
Event handling: Continues practicing capturing user interactions with the form and delete buttons and triggering appropriate actions.

PC Component Filtering

Description: This project allows users to filter computer parts based on their selections. Users can choose from various options like CPU brand, RAM size, graphics card type, etc., and the displayed list of components will update dynamically to reflect the chosen filters.

Learning Concepts:

DOM manipulation: Similar to previous projects, this project practices updating the displayed component list dynamically based on user selections.
Arrays and data filtering: Explores using arrays to store computer part data and implements filtering logic in JavaScript to match user selections.
User interface updates: Focuses on updating the visual representation of the component list based on the applied filters.

Weather App

Description: This project is a weather application that allows users to search for current weather information by city name. It utilizes an external weather API to fetch data and displays details like temperature, humidity, and weather conditions on the screen.

Learning Concepts:

Asynchronous programming: Similar to projects like DadJokes (project 2), this project reinforces concepts of handling asynchronous operations for fetching weather data.
Fetch API: Continues practicing using tools for making HTTP requests to APIs and retrieving weather data.
Working with APIs: Further explores interacting with external APIs to access weather information.

Testimonial Slider

Description: This project creates a testimonial section with a slider functionality. It displays quotes or testimonials from users, and users can navigate through them using a slider control.

Learning Concepts:

DOM manipulation: Demonstrates manipulating the visibility of testimonial elements based on the slider position.
Event handling: Captures user interactions with the slider control and triggers the sliding animation.

Animation on Scroll

Description: This project incorporates animations that are triggered as you scroll down the page. As the user scrolls, different elements on the web page become animated, adding visual interest and interactivity.

Learning Concepts:

CSS animations: Explores using CSS animations to create visual effects that activate based on scroll position.
JavaScript for scroll events: Introduces using JavaScript to detect scroll events and trigger animations accordingly.

Search Field Reveal

Description: This project utilizes animations to enhance the user experience. It creates a search field that reveals itself with an animation upon user interaction (e.g., clicking a button).

Learning Concepts:

CSS animations: Introduces using CSS animations to create dynamic visual effects for the search field reveal.
Event handling: Covers capturing user interactions (eg. button clicks) and using JavaScript to trigger the animations.

Question List & Progress

Description: This project demonstrates common DOM manipulation techniques in JavaScript. It features a list of questions and a progress indicator that updates as the user answers the questions.

Learning Concepts:

DOM manipulation: This project emphasizes manipulating elements like the progress indicator based on user interaction with the questions.
Event handling: Captures user interactions with the question elements and triggers actions like updating the progress indicator.

Modal

Description: This project creates a modal window, which is a popup element that overlays the main content of the page. It's commonly used for things like login forms, signup prompts, or alert messages.

Learning Concepts:

DOM manipulation: Focuses on showing and hiding the modal window element based on user interaction.
Event handling: Captures clicks on the trigger element and the modal's close button to control its visibility.

Advanced Todo

Description: This project builds upon the simple to-do app (project 8) by offering advanced functionalities like filtering, editing, and deleting tasks. Users can categorize tasks, edit existing ones, and delete unwanted tasks from the list.

Learning Concepts:

Building upon existing projects: Similar to the scientific calculator (project 7), this project demonstrates expanding on a basic concept (to-do list) to create a more advanced application.
User interface updates: Extends the concept of updating the to-do list to include functionalities like filtering, editing task content, and removing tasks.

Retro Calculator

Description: This project implements a classic calculator design with a physical keyboard support for input. It allows users to enter numbers and perform calculations using a layout resembling a traditional calculator.

Learning Concepts:

Event handling: Similar to other projects, this project focuses on capturing user interactions, but in this case, it includes handling both clicks on calculator buttons and key presses from the keyboard.
DOM manipulation: Updates the calculator display based on user input and calculation results.
Object-oriented programming: This project introduces concepts of object-oriented programming (OOP) in JavaScript for creating a more modular and reusable calculator functionality.

Simple Quiz App

Description: This project creates a simple quiz application where users can answer questions and see their results. It includes a timer for each question to add a time pressure element.

Learning Concepts:

DOM manipulation: Updates the quiz interface to display questions, handle answer selections, and show the final

Advanced Quiz App

Description: This project builds upon the simple quiz app by offering more customization options. Users can set the number of questions, choose the topic, and define the difficulty level before starting the quiz.

Learning Concepts:

Building upon existing projects: Similar to other projects (scientific calculator, advanced to-do list), this project demonstrates extending a basic concept with additional features.
User input validation: It introduces concepts of validating user input for the customization options (e.g., ensuring a valid number of questions is chosen).
Conditional statements: Plays a more prominent role in this project as JavaScript logic needs to adapt the quiz based on user-defined parameters.

Take the Next Step:

Ready to embark on your front-end development journey? Here's how to get started with DOM Projects:

Visit the DOM Projects repository on GitHub: https://github.com/Jisan-mia/dom-projects
Browse the project list and choose one that aligns with your skill level and interests.
Follow the setup instructions and open the project in your browser.
Dive into the code, experiment, and learn!

Each project in DOM Projects allows you to practice your coding skills and helps you understand key concepts in front-end development. Whether you’re a beginner just starting or an experienced developer looking to brush up your skills, DOM Projects has something for everyone.

Remember, the best way to learn is by doing. So, roll up your sleeves, pick a project, and start coding! Happy learning!