├── day1-10 ├── Day1 │ └── longestWord.js ├── Day2 │ └── hashtag_generator.js ├── Day3 │ └── index.js ├── Day4 │ └── index.js └── Day5 │ └── index.js ├── day11-20 ├── day15 │ └── index.js ├── day16 │ └── index.js ├── day17 │ └── index.js ├── day18 │ └── index.js ├── day19 │ └── index.js └── day20 │ └── index.js ├── day21-30 ├── day21 │ └── index.js ├── day22 │ └── index.js ├── day24 │ └── index.js ├── day25 │ └── index.js ├── day26 │ └── index.js ├── day27 │ └── index.js ├── day28 │ └── index.js ├── day29 │ └── index.js └── day30 │ └── index.js ├── day31-40 ├── day31 │ └── index.js ├── day33 │ └── index.js ├── day34 │ └── index.js ├── day35 │ └── index.js ├── day36 │ └── index.js ├── day37 │ └── index.js ├── day38 │ └── index.js ├── day39 │ └── index.js └── day40 │ └── index.js ├── day41 └── index.js ├── day42 └── index.js ├── day43 └── index.js ├── day44 ├── data.md └── index.js ├── day45 └── index.js ├── day46 └── index.js ├── day47 └── index.js ├── day48 └── index.js ├── day49 └── index.js ├── day50 ├── css │ ├── style.css │ ├── style.css.map │ └── style.scss ├── fonts │ ├── linearicons │ │ ├── Read Me.txt │ │ ├── fonts │ │ │ ├── Linearicons-Free.eot │ │ │ ├── Linearicons-Free.svg │ │ │ ├── Linearicons-Free.ttf │ │ │ ├── Linearicons-Free.woff │ │ │ └── Linearicons-Free.woff2 │ │ ├── selection.json │ │ └── style.css │ └── muli │ │ ├── Muli-Bold.ttf │ │ ├── Muli-Regular.ttf │ │ └── Muli-SemiBold.ttf ├── images │ ├── image-1.png │ └── image-2.png ├── index.html └── js │ └── main.js └── jsproject ├── index.html ├── index.js └── style.css /day1-10/Day1/longestWord.js: -------------------------------------------------------------------------------- 1 | //* --------------------------------------------------------- 2 | //* Programming Question: Longest Word in a String 3 | //* --------------------------------------------------------- 4 | 5 | //? Q: Write a function findLongestWord that takes a string as input and returns the longest word in the string. If there are multiple longest words, return the first one encountered. 6 | 7 | //* Constraints: 8 | //? The input string may contain alphabetic characters, digits, spaces, and punctuation. 9 | //? The input string is non-empty. 10 | //? The input string may contain multiple words separated by spaces. 11 | 12 | //* Note: 13 | //? If the input string is empty or contains only whitespace, the function should return an false. 14 | //? The function should ignore leading and trailing whitespace when determining the longest word. 15 | 16 | const findLongestWord = (str) => { 17 | if (str.trim().length === 0) { 18 | return false; 19 | } 20 | 21 | words = str.split(" "); 22 | words = words.sort((a, b) => b.length - a.length); 23 | console.log(words); 24 | // return words.at(-1); 25 | return words[0]; 26 | }; 27 | 28 | console.log( 29 | findLongestWord( 30 | "Watch Thapa Technical javascript awesomethapatechnical course on youtube" 31 | ) 32 | ); 33 | -------------------------------------------------------------------------------- /day1-10/Day2/hashtag_generator.js: -------------------------------------------------------------------------------- 1 | //*------------------------------------------- 2 | //* Programming Question: Hash Tag Generator 3 | //*------------------------------------------- 4 | 5 | //? You are required to implement a function generateHash that generates a hash tag from a given input string. The hash tag should be constructed as follows: 6 | 7 | //? The input string should be converted to a hash tag format, where each word is capitalized and concatenated together without spaces. 8 | //? If the length of the input string is greater than 280 characters or if the input string is empty or contains only whitespace, the function should return false. 9 | //? Otherwise, the function should return the generated hash tag prefixed with #. 10 | 11 | //* Write a function generateHash to accomplish this task. 12 | 13 | const generateHash = (str) => { 14 | if (str.length > 280 || str.trim().length === 0) { 15 | return false; 16 | } 17 | 18 | str = str.split(" "); 19 | str = str.map( 20 | (curElem) => 21 | // curElem.replace(curElem[0], curElem[0].toUpperCase()) 22 | curElem.charAt(0).toUpperCase() + curElem.slice(1) 23 | ); 24 | str = `#${str.join("")}`; 25 | console.log(str); 26 | return str; 27 | }; 28 | 29 | console.log(generateHash("my name is thapa technical")); 30 | // o/p = "#MyNameIsThapaTechnical" 31 | -------------------------------------------------------------------------------- /day1-10/Day3/index.js: -------------------------------------------------------------------------------- 1 | //*--------------------------------------------------------- 2 | //* Interview Question: Count Occurrences of Character 3 | //*--------------------------------------------------------- 4 | 5 | //! Task: 6 | //? Write a function called countChar that takes two parameters: a string and a character to count. The function should return the number of times the specified character appears in the string. 7 | 8 | const countChar = (word, char) => { 9 | word = word.toLowerCase(); 10 | char = char.toLowerCase(); 11 | 12 | totalCount = word.split("").reduce((accum, curChar) => { 13 | if (curChar === char) { 14 | accum++; 15 | } 16 | return accum; 17 | }, 0); 18 | // console.log(totalCount); 19 | return totalCount; 20 | }; 21 | 22 | console.log(countChar("MissIssippi", "I")); // Output: 4 23 | 24 | //todo Constraints: 25 | //? The function should be case-sensitive. 26 | //? The function should handle both lowercase and uppercase characters. 27 | //? The character parameter can be any printable ASCII character (the function should accept any character that is part of the ASCII character set and is printable). 28 | -------------------------------------------------------------------------------- /day1-10/Day4/index.js: -------------------------------------------------------------------------------- 1 | //*--------------------------------------------------------- 2 | //* Interview Question: 3 | //*--------------------------------------------------------- 4 | //? Write a function called checkTriangleType that takes three parameters representing the lengths of the sides of a triangle. The function should return a string indicating the type of triangle: "equilateral", "isosceles", or "scalene". 5 | 6 | const checkTriangleType = (a, b, c) => { 7 | if (a === b && b === c) return "equilateral"; 8 | if (a === b || b === c || a === c) return "isosceles"; 9 | return "scalene"; 10 | }; 11 | 12 | console.log(checkTriangleType(3, 3, 5)); // Output: "equilateral" 13 | console.log(checkTriangleType(3, 4, 3)); // Output: "isosceles" 14 | console.log(checkTriangleType(5, 8, 6)); // Output: "scalene" 15 | 16 | //todo The function should adhere to the following rules: 17 | //? If all three sides are of equal length, return "equilateral". 18 | //? If only two sides are of equal length, return "isosceles". 19 | //? If all three sides have different lengths, return "scalene". 20 | -------------------------------------------------------------------------------- /day1-10/Day5/index.js: -------------------------------------------------------------------------------- 1 | //*------------------------------------------- 2 | //* Programming Question: Sort an Array 3 | //*------------------------------------------- 4 | 5 | // ? Write a function to sort an array of numbers in an ascending order. 6 | 7 | const sortAscending = (arr) => { 8 | return arr.sort((a, b) => b - a); 9 | }; 10 | 11 | // Example usage: 12 | // console.log(sortAscending([5, 3, 1, 8])); // Output: [1, 3, 5, 8] 13 | console.log(sortAscending([5, 3, 10, 8])); // Output: [3, 5, 8,10] 14 | 15 | //todo Requirements: 16 | //? The function should take an array of numbers as input. 17 | //? It should return a new array with the numbers sorted in ascending order. 18 | //? The original array should remain unchanged. 19 | //? You are not allowed to use the built-in sort() method. 20 | 21 | // Note 22 | //// Without a comparator function, the sort method sorts the array elements as strings by default, which might not always yield the correct numeric sorting, especially for numbers with more than one digit 23 | -------------------------------------------------------------------------------- /day11-20/day15/index.js: -------------------------------------------------------------------------------- 1 | //*--------------------------------------------------------- 2 | //* Interview Question: 3 | //*--------------------------------------------------------- 4 | 5 | //? 15: Write a function to calculate the sum of squares of all elements in an array. For example, given the array [1, 2, 3], the function should return 14 because 1*1 + 2*2 + 3*3 = 1 + 4 + 9 = 14. 6 | 7 | const sumOfSquares = (arr) => { 8 | // return arr.reduce((accum, curElem) => (accum = accum + curElem * curElem), 0); 9 | 10 | let sum = 0; 11 | for (let elem of arr) { 12 | sum = sum + elem * elem; 13 | } 14 | return sum; 15 | }; 16 | 17 | // Example usage: 18 | console.log(sumOfSquares([1, 2, 3])); // Output: 14 19 | -------------------------------------------------------------------------------- /day11-20/day16/index.js: -------------------------------------------------------------------------------- 1 | //*--------------------------------------------------------- 2 | //* Coding Challenge: Find the Minimum Value in an Array 3 | //*--------------------------------------------------------- 4 | //? 16: Write a function findMin that takes an array of numbers as input and returns the minimum value found in the array. 5 | 6 | //* Constraints: 7 | //? The input array may contain both positive and negative integers. 8 | //? The input array may be empty. 9 | //? The input array may contain duplicate values. 10 | 11 | const findMin = (arr) => { 12 | // arr = arr.sort((a, b) => { 13 | // if (b > a) return -1; 14 | // }); 15 | 16 | // return arr[0]; 17 | if (arr.length === 0) return "Array is empty"; 18 | return Math.min(...arr); 19 | }; 20 | 21 | // // Example usage: 22 | console.log(findMin([5, 10, 2, 8])); // Output: 2 23 | console.log(findMin([5, -3, 0, 12, -7])); // Output: -7 24 | console.log(findMin([])); // Output: undefined (or any suitable message for empty array) 25 | 26 | //* Note: 27 | //? Ensure the function handles edge cases gracefully, such as an empty input array. 28 | //? Consider using ES6 features like the spread syntax (...) for a concise implementation. 29 | 30 | //todo In JavaScript, the spread syntax (...) is used to expand an array into individual elements. In this function, ...arr is used to spread the elements of the input array arr. 31 | //? For example, if arr is [5, 10, 2, 8], then ...arr expands to 5, 10, 2, 8. 32 | -------------------------------------------------------------------------------- /day11-20/day17/index.js: -------------------------------------------------------------------------------- 1 | //*-------------------------------- 2 | //* Coding Challenge 3 | //*-------------------------------- 4 | //? 17: Write a function to check if a character is uppercase or lowercase. 5 | 6 | const isUpperCase = (char) => { 7 | // if (char.charCodeAt(0) >= 65 && char.charCodeAt(0) <= 90) { 8 | // return true; 9 | // } 10 | // return false; 11 | return char === char.toUpperCase(); 12 | }; 13 | 14 | // I am just testing is all right 15 | 16 | //* Constraints: 17 | //? The input char will be a single character. 18 | //? The character can be any printable ASCII character. 19 | //? You can assume that the input will always be a string of length 1. 20 | // Example usage: 21 | console.log(isUpperCase("S")); // Output: true 22 | // console.log(isLowerCase("b")); // Output: true 23 | 24 | //* Notes: 25 | //? Ensure that the function correctly identifies uppercase characters based on their ASCII values. 26 | //? Optimize the function to handle edge cases efficiently. 27 | -------------------------------------------------------------------------------- /day11-20/day18/index.js: -------------------------------------------------------------------------------- 1 | //*-------------------------------- 2 | //* Coding Challenge 3 | //*-------------------------------- 4 | //? 18: Write a function to convert a string to camelCase & snake_case. 5 | 6 | const toCamelCase = (str) => { 7 | return str 8 | .trim() 9 | .split(" ") 10 | .map((curElem, index) => { 11 | if (index === 0) { 12 | return curElem.toLowerCase(); 13 | } else { 14 | return curElem.charAt(0).toUpperCase() + curElem.slice(1).toLowerCase(); 15 | } 16 | }) 17 | .join(""); 18 | }; 19 | 20 | // Example usage: 21 | console.log(toCamelCase("hello world thApa")); // Output: helloWorld 22 | 23 | //todo HomeWork: 24 | // console.log(toSnakeCase("helloWorld")); // Output: hello_world 25 | -------------------------------------------------------------------------------- /day11-20/day19/index.js: -------------------------------------------------------------------------------- 1 | //*-------------------------------- 2 | //* Coding Challenge 3 | //*-------------------------------- 4 | //?19: Write a function to check if a given string starts with a specific substring. 5 | 6 | // Input: 7 | 8 | //? str: A string (e.g., "Hello world"). 9 | //? subStr: A substring to check if it starts the given string (e.g., "Hello"). 10 | //? Output: true if the given string starts with the specified substring, otherwise false. 11 | 12 | const startsWith = (str, substr) => { 13 | // return str.toLowerCase().startsWith(substr.toLowerCase()); 14 | return str.toLowerCase().slice(0, substr.length) === substr.toLowerCase(); 15 | }; 16 | 17 | // Example usage: 18 | console.log(startsWith("Hello world", "hello")); // Output: true 19 | console.log(startsWith("Hello world", "World")); // Output: false 20 | -------------------------------------------------------------------------------- /day11-20/day20/index.js: -------------------------------------------------------------------------------- 1 | //*-------------------------------- 2 | //* Coding Challenge 3 | //*-------------------------------- 4 | 5 | //?20. Write a function to reverse a string without using any built-in methods or libraries. The function should take a string as input and return the reversed string. 6 | 7 | const reverseString = (str) => { 8 | let r_str = ""; 9 | for (let i = str.length - 1; i >= 0; i--) { 10 | r_str = r_str + str[i]; 11 | } 12 | return r_str; 13 | }; 14 | 15 | // Example usage: 16 | console.log(reverseString("hello")); // Output: olleH 17 | -------------------------------------------------------------------------------- /day21-30/day21/index.js: -------------------------------------------------------------------------------- 1 | //*-------------------------------- 2 | //* Coding Challenge 3 | //*-------------------------------- 4 | 5 | //? Write a function called calculateMean that takes an array of numbers as input and returns the mean (average) of those numbers. 6 | 7 | //todo In math, the mean is the average of a set of numbers, or the numeric value that represents the center of a collection of numbers. 8 | 9 | //? Constraints: 10 | //? The input array may contain positive and negative integers. 11 | //? The input array may be empty. If it is empty, the function should return 0. 12 | 13 | const calculateMean = (arr) => { 14 | if (arr.length === 0) { 15 | return 0; 16 | } 17 | let sum = arr.reduce((accum, curElem) => accum + curElem, 0); 18 | // console.log(sum); 19 | return sum / arr.length; 20 | }; 21 | 22 | console.log(calculateMean([1, 2, 3, 4, 5])); // Output: 3 23 | console.log(calculateMean([10, 20, 30])); // Output: 20 24 | console.log(calculateMean([-1, 0, 1])); // Output: 0 25 | console.log(calculateMean([])); // Output: 0 26 | -------------------------------------------------------------------------------- /day21-30/day22/index.js: -------------------------------------------------------------------------------- 1 | //*--------------------------- 2 | //* Coding Challenge 3 | //*--------------------------- 4 | 5 | //? Write a JavaScript function findMedian(arr) that takes an array of numbers as input and returns the median value. If the array has an even number of elements, return the average of the two middle values. 6 | 7 | //? For example, the median of 3, 3, 5, 9, 15 is 5. If there is an even number of observations, then there is no single middle value; the median is then usually defined to be the mean of the two middle values: so the median of 3, 5, 7, 9 is (5+7)/2 = 6. 8 | 9 | //todo Tips 10 | //? Sort the array in ascending order. 11 | //? If the array has an odd number of elements, the median is the middle element. 12 | //? If the array has an even number of elements, the median is the average of the two middle elements. 13 | 14 | const findMedian = (arr) => { 15 | // Step 1: Sort the array 16 | arr.sort((a, b) => a - b); 17 | // Step 2: Check if the array length is odd or even 18 | let length = arr.length; 19 | let mid = Math.floor(length / 2); 20 | // console.log(mid); 21 | if (length % 2 === 0) { 22 | // Step 3 for even length array 23 | return (arr[mid] + arr[mid - 1]) / 2; 24 | } else { 25 | // Step 4 for odd length array 26 | return arr[mid]; 27 | } 28 | }; 29 | 30 | console.log(findMedian([5, 3, 9, 1, 7])); // Output: 5 31 | console.log(findMedian([2, 4, 6, 8])); // Output: 5 32 | console.log(findMedian([1, 3, 5, 7, 9, 11])); // Output: 6 33 | -------------------------------------------------------------------------------- /day21-30/day24/index.js: -------------------------------------------------------------------------------- 1 | //*--------------------------- 2 | //* Coding Challenge: Find the Mode in an Array 3 | //*--------------------------- 4 | 5 | //? Write a function called findMode that takes an array of numbers as input and returns the mode of the array (the number that appears most frequently). 6 | 7 | function findMode(arr) { 8 | // Your code here 9 | let counts = {}; 10 | let maxNum = 0; 11 | let mode; 12 | 13 | for (let element of arr) { 14 | counts[element] = (counts[element] || 0) + 1; 15 | if (counts[element] > maxNum) { 16 | maxNum = counts[element]; 17 | mode = element; 18 | } 19 | } 20 | console.log(counts); 21 | return mode; 22 | } 23 | 24 | // Example usage: 25 | console.log(findMode([1, 2, 2, 3, 1, 4, 2])); // Output: 2 26 | 27 | //* Constraints: 28 | //? The input array will always contain at least one element. 29 | //? The mode will always be unique (i.e., there won't be multiple numbers with the same highest frequency). 30 | -------------------------------------------------------------------------------- /day21-30/day25/index.js: -------------------------------------------------------------------------------- 1 | //*--------------------------- 2 | //* Coding Challenge 3 | //*--------------------------- 4 | 5 | //* Write a function to calculate the factorial of a number.(using Recursion) 6 | 7 | //* Recursion: 8 | //? Recursion is a programming technique where a function calls itself in order to solve a problem. In essence, it's a function that calls itself with smaller or simpler input until it reaches a base case. 9 | 10 | //* Base Case: 11 | //? The base case is the condition in a recursive function that stops the recursion. It's the point at which the function stops calling itself and returns a value without further recursion. Without a base case, the recursive function would continue calling itself indefinitely, leading to what's known as infinite recursion. 12 | 13 | //* Recursive Case: 14 | //? The recursive case is the condition in a recursive function that determines when the function should call itself again. It's typically an expression or condition that evaluates to true for certain inputs, indicating that further recursion is necessary to solve the problem. Each recursive call should move closer to the base case, eventually leading to termination of the recursion. 15 | 16 | const factorial = (num) => { 17 | if (num === 1) { 18 | return 1; 19 | } else { 20 | return num * factorial(num - 1); 21 | } 22 | }; 23 | 24 | // 5 => 5 * (4 * (3 * (2 * (factorial(1))))) 25 | 26 | // 5 => 5*4*3*2*1 27 | // num => num * num -1 * num-2 * num-3 * num - 4 28 | 29 | // Example usage: 30 | console.log(factorial(5)); // Output: 120 31 | 32 | // // Base Case: 33 | // // The base case is if (n === 1), where the function returns 1. 34 | // // This condition stops the recursion when n becomes 1, preventing further recursive calls. 35 | // // Recursive Case: 36 | // // The recursive case is return n * factorial(n - 1). 37 | // // This part of the function calls itself with a smaller input (n - 1), moving closer to the base case with each recursive call. 38 | // // It calculates the factorial of n by multiplying n with the factorial of n - 1. 39 | -------------------------------------------------------------------------------- /day21-30/day26/index.js: -------------------------------------------------------------------------------- 1 | //*--------------------------- 2 | //* Coding Challenge 3 | //*--------------------------- 4 | 5 | //* Write a function to find the nth Fibonacci number. 6 | 7 | //? The Fibonacci series is a sequence of numbers in which each number (Fibonacci number) is the sum of the two preceding ones. It starts with 0 and 1, and the subsequent numbers are calculated by adding the last two numbers. So, the Fibonacci series looks like this: 0, 1, 1, 2, 3, 5, 8, 13, 21, ... 8 | 9 | //todo Fibonacci number is calculated using the following formula: 10 | //todo syntax: F(n) = F(n-1) + F(n-2), Where, F(1) = F(2) = 1. 11 | 12 | const fibonacci = (num) => { 13 | if (num <= 1) { 14 | return num; 15 | } else { 16 | return fibonacci(num - 1) + fibonacci(num - 2); 17 | } 18 | }; 19 | 20 | // 3 => 1 + 1 => 2 21 | 22 | // Example usage: 23 | console.log(fibonacci(0)); // Output: 0 24 | console.log(fibonacci(1)); // Output: 1 25 | console.log(fibonacci(2)); // Output: 1 26 | console.log(fibonacci(3)); // Output: 2 27 | console.log(fibonacci(4)); // Output: 3 28 | console.log(fibonacci(5)); // Output: 5 29 | -------------------------------------------------------------------------------- /day21-30/day27/index.js: -------------------------------------------------------------------------------- 1 | //*-------------------------------------- 2 | //* Coding Challenge: Repeat a String 3 | //*-------------------------------------- 4 | 5 | //* Write a function called repeatString that takes two parameters: 6 | 7 | //? str: A string that needs to be repeated. 8 | //? num: An integer representing the number of times the string should be repeated. 9 | //? The function should repeat the input string str the specified number of times num and return the resulting string. 10 | 11 | const repeatString = (str, num) => { 12 | return num > 0 ? str.repeat(num) : str; 13 | }; 14 | // Example usage: 15 | console.log(repeatString("abc", 3)); // Output: "abcabcabcabcabc" 16 | 17 | //* Constraints: 18 | //? The input string str will contain only alphanumeric characters and punctuation marks. 19 | //? The input number num will be a non-negative integer. 20 | //? The output string length should not exceed the length of str multiplied by num. 21 | -------------------------------------------------------------------------------- /day21-30/day28/index.js: -------------------------------------------------------------------------------- 1 | //*-------------------------------------- 2 | //* Coding Challenge: Truncate a String 3 | //*-------------------------------------- 4 | 5 | //* Write a function called truncateString that takes two parameters: 6 | 7 | //? str: A string that needs to be truncated. 8 | //? maxLength: An integer representing the maximum length of the string allowed. 9 | //? The function should truncate the input string str if its length exceeds the specified maxLength. If truncation occurs, the function should add '...' to the end of the truncated string. 10 | 11 | const truncateString = (str, count) => { 12 | // if (count <= 0) { 13 | // return str; 14 | // } else if (str.length > count) { 15 | // return str.slice(0, count).concat("..."); 16 | // } 17 | 18 | return count <= 0 ? str : str.slice(0, count).concat("..."); 19 | }; 20 | 21 | // Example usage: 22 | console.log(truncateString("A-tisket a-tasket A green and yellow basket", 8)); 23 | // Output: "A-tisket..." 24 | 25 | //* Constraints: 26 | //? The input string str will contain only alphanumeric characters and punctuation marks. 27 | //? The maximum length maxLength will be a positive integer. 28 | //? The output string length should not exceed maxLength + 3 characters due to the addition of '...'. 29 | -------------------------------------------------------------------------------- /day21-30/day29/index.js: -------------------------------------------------------------------------------- 1 | //*----------------------------------------------- 2 | //* Coding Challenge: Simple Password Validator 3 | //*----------------------------------------------- 4 | 5 | //* Write a function called simplePasswordValidator that takes a single parameter: 6 | 7 | //? password: A string representing the password to be validated. 8 | //? The function should validate the password based on the following criteria: 9 | 10 | //? The password must contain at least one lowercase letter, one uppercase letter, and one digit. 11 | //? The length of the password must be at least 8 characters. 12 | //? The function should return true if the password meets all the criteria, otherwise, it should return false. 13 | 14 | //* Input: 15 | //? password: A non-empty string representing the password to be validated. 16 | 17 | //* Output: 18 | //? true if the password meets all the criteria. 19 | //? false otherwise. 20 | 21 | //* Constraints: 22 | //? The input string password will contain only alphanumeric characters and punctuation marks. 23 | 24 | const simplePasswordValidator = (password) => { 25 | let hasLowerCase = false; 26 | let hasUpperCase = false; 27 | let hasNumber = false; 28 | for (let char of password) { 29 | if (char.charCodeAt(0) >= 65 && char.charCodeAt(0) <= 90) { 30 | hasUpperCase = true; 31 | } else if (char.charCodeAt(0) >= 97 && char.charCodeAt(0) <= 122) { 32 | hasLowerCase = true; 33 | } else if (!isNaN(Number(char))) { 34 | hasNumber = true; 35 | } 36 | } 37 | 38 | if (!hasLowerCase || !hasUpperCase || !hasNumber || password.length < 8) { 39 | return false; 40 | } 41 | 42 | return true; 43 | }; 44 | 45 | // console.log(!isNaN(5)); 46 | 47 | console.log(simplePasswordValidator("afkdsfadsf")); // Output: false 48 | console.log(simplePasswordValidator("afkdsfadsf1")); // Output: false 49 | console.log(simplePasswordValidator("afkdsfadsf1A")); // Output: true 50 | console.log(simplePasswordValidator("afkdsfadsf1Aa")); // Output: true 51 | -------------------------------------------------------------------------------- /day21-30/day30/index.js: -------------------------------------------------------------------------------- 1 | //*----------------------------------------------- 2 | //* Coding Challenge: Recursive Number Range Generator 3 | //*----------------------------------------------- 4 | 5 | //? Write a recursive function called numberRangeRecursive that generates an array containing consecutive numbers from a to b (inclusive). 6 | 7 | //* Input: 8 | //? a: An integer representing the starting number of the range. 9 | //? b: An integer representing the ending number of the range. 10 | //? arr: An optional parameter representing the array to store the numbers in the range. It defaults to an empty array. 11 | 12 | //* Output: 13 | //? An array containing consecutive numbers from a to b (inclusive). 14 | 15 | //* Constraints: 16 | //? a and b will be integers. 17 | //? a will be less than or equal to b. 18 | 19 | const numberRangeRecursive = (a, b, arr = []) => { 20 | if (a <= b) { 21 | arr.push(a); 22 | return numberRangeRecursive(a + 1, b, arr); 23 | } 24 | return arr; 25 | }; 26 | 27 | // [0,1,2,3,4,5] 28 | 29 | console.log(numberRangeRecursive(0, 5)); // Output: [0, 1, 2, 3, 4, 5] 30 | console.log(numberRangeRecursive(3, 7)); // Output: [3, 4, 5, 6, 7] 31 | console.log(numberRangeRecursive(-2, 2)); // Output: [-2, -1, 0, 1, 2] 32 | -------------------------------------------------------------------------------- /day31-40/day31/index.js: -------------------------------------------------------------------------------- 1 | //*---------------------------------------------- 2 | //* Coding Challenge: Number Range Generator 3 | //*---------------------------------------------- 4 | 5 | //? Write a function called numberRange that generates an array containing consecutive numbers from a to b (inclusive). 6 | 7 | //* Input: 8 | //? a: An integer representing the starting number of the range. 9 | //? b: An integer representing the ending number of the range. 10 | //? arr: An optional parameter representing the array to store the numbers in the range. It defaults to an empty array. 11 | 12 | //* Output: 13 | //? An array containing consecutive numbers from a to b (inclusive). 14 | 15 | //* Constraints: 16 | //? a and b will be integers. 17 | //? a will be less than or equal to b 18 | 19 | const numberRange = (a, b, arr = []) => { 20 | while (a <= b) { 21 | // console.log(a); 22 | arr.push(a); 23 | a++; 24 | } 25 | return arr; 26 | }; 27 | 28 | console.log(numberRange(0, 5)); // Output: [0, 1, 2, 3, 4, 5] 29 | console.log(numberRange(3, 7)); // Output: [3, 4, 5, 6, 7] 30 | console.log(numberRange(-2, 2)); // Output: [-2, -1, 0, 1, 2] 31 | -------------------------------------------------------------------------------- /day31-40/day33/index.js: -------------------------------------------------------------------------------- 1 | //*---------------------------------------------- 2 | //* Coding Challenge: Random Hex Color Generator 3 | //*---------------------------------------------- 4 | 5 | //? Write a function randomHexColor that generates a random hexadecimal color code each time it is called. The function should return a string representing the random color code in the format '#RRGGBB', where RR, GG, and BB are two-digit hexadecimal numbers representing the red, green, and blue components of the color, respectively. 6 | 7 | //? Your challenge is to implement the randomHexColor function using JavaScript and ensure that it produces a valid hexadecimal color code with a length of 7 characters (including the # symbol). 8 | 9 | //* Constraints: 10 | //? The output color code should always start with # followed by six hexadecimal characters (RRGGBB). 11 | //? The function should not take any parameters. 12 | //? The generated color codes should be unique and evenly distributed across the entire range of possible hexadecimal color codes. 13 | 14 | //* Hint 15 | // converts the random number into a hexadecimal string representation. 16 | 17 | const randomHexColor = () => 18 | `#${Math.random().toString(16).slice(2, 8).padEnd(6, 0)}`; 19 | 20 | console.log(randomHexColor()); 21 | -------------------------------------------------------------------------------- /day31-40/day34/index.js: -------------------------------------------------------------------------------- 1 | //*--------------------------------------------------------- 2 | //* Programming Challenge: Remove Duplicates from an Array 3 | //*--------------------------------------------------------- 4 | //? Write a function removeDuplicates that takes an array of elements as input and returns a new array with duplicate elements removed. 5 | 6 | //? Your task is to implement the removeDuplicates function using JavaScript and ensure that the returned array contains only unique elements from the input array. The order of elements in the output array should be the same as the original array, with the first occurrence of each unique element preserved. 7 | 8 | //* Constraints: 9 | //? The input array may contain elements of any data type. 10 | //? The function should return a new array with duplicate elements removed, while preserving the order of elements from the original array. 11 | //? You should use the provided removeDuplicates function signature without any additional parameters. 12 | 13 | const removeDuplicates = (arr) => [...new Set(arr)]; 14 | 15 | console.log(removeDuplicates([1, 2, 3, 3, 4, 4, 5])); // Output: [1, 2, 3, 4, 5] 16 | console.log(removeDuplicates(["a", "b", "c", "b", "a"])); // Output: ['a', 'b', 'c'] 17 | -------------------------------------------------------------------------------- /day31-40/day35/index.js: -------------------------------------------------------------------------------- 1 | //*-------------------------------------------------- 2 | //* Programming Challenge: Check Object Emptiness 3 | //*-------------------------------------------------- 4 | 5 | //? Write a function isEmptyObject that takes an object as input and determines whether it is empty or not. An empty object is defined as an object with no own properties. 6 | 7 | //? Your task is to implement the isEmptyObject function using JavaScript and return a message indicating whether the object is empty or not. 8 | 9 | //* Constraints: 10 | 11 | //? The input object may have any number of properties, including zero. 12 | //? The function should return a message indicating whether the object is empty or not. 13 | //? You should use the provided isEmptyObject function signature without any additional parameters. 14 | 15 | const isEmptyObject = (obj) => { 16 | // return obj.length === 0 ? `it's empty` : `it's not empty`; 17 | 18 | // for (let key in obj) { 19 | // if (obj.hasOwnProperty(key)) { 20 | // return `it's not empty`; 21 | // } 22 | // } 23 | // return `it's empty`; 24 | 25 | return Object.keys(obj).length === 0; 26 | }; 27 | 28 | console.log(isEmptyObject({ name: "vinod" })); // Output: "it's not empty" 29 | console.log(isEmptyObject({})); // Output: "it's empty" 30 | console.log(isEmptyObject({ keyWithNull: null })); // Output: "it's empty" 31 | console.log(isEmptyObject({ keyWithUndefined: undefined })); // Output: "it's empty" 32 | 33 | //* Hint 34 | //// Object.keys() returns an array of keys. 35 | //// Object.values() returns an array of values. 36 | -------------------------------------------------------------------------------- /day31-40/day36/index.js: -------------------------------------------------------------------------------- 1 | //*-------------------------------------------------------------------- 2 | //* Programming Challenge: Convert Object to Array and Vice Versa 3 | //*-------------------------------------------------------------------- 4 | 5 | //* Your task is to implement two functions: 6 | 7 | //? Convert Object to Array: Write a function objectToArray that takes an object as input and returns an array of key-value pairs, where each element in the array is an array with two elements: the key and the corresponding value from the object. 8 | 9 | //? Convert Array to Object: Write a function arrayToObject that takes an array of key-value pairs (as returned by the objectToArray function) and returns a new object with the keys and values from the array. 10 | 11 | //? Ensure that the conversion functions work correctly for objects with various data types as values, such as strings, numbers, and objects. 12 | 13 | //* Constraints: 14 | 15 | //? The input object may contain properties of any data type. 16 | //? The input array must contain arrays with exactly two elements (key-value pairs). 17 | //? The output object should have properties in the same order as the original object. 18 | //? You should use the provided function signatures (objectToArray and arrayToObject) without any additional parameters. 19 | 20 | const obj = { 21 | name: "Kodyfier Thapa", 22 | age: 30, 23 | city: "Pune", 24 | }; 25 | 26 | // Convert the object to an array of key-value pairs. 27 | let entries = Object.entries(obj); 28 | console.log(entries); 29 | console.log(entries.flat()); 30 | 31 | // Convert the array of key-value pairs back to an object. 32 | 33 | let newObj = Object.fromEntries(entries); 34 | console.log(newObj); 35 | -------------------------------------------------------------------------------- /day31-40/day37/index.js: -------------------------------------------------------------------------------- 1 | //*----------------------------------------------------------- 2 | //* Programming Challenge: Simple Interest Calculator 3 | //*----------------------------------------------------------- 4 | 5 | //? Write a function calculateSimpleInterest that calculates the simple interest given the principal amount, rate of interest per annum, and time in years. 6 | 7 | const calculateSimpleInterest = (p, r, t) => { 8 | return (p * r * t) / 100; 9 | }; 10 | 11 | console.log(calculateSimpleInterest(1000, 5, 3)); // Output: 150 12 | -------------------------------------------------------------------------------- /day31-40/day38/index.js: -------------------------------------------------------------------------------- 1 | //*------------------------------------------------------------------- 2 | //* Programming Challenge: Number of Days Between Two Dates 3 | //*------------------------------------------------------------------- 4 | 5 | //? Write a function calculateDaysBetweenDates that calculates the number of days between two dates. The dates will be provided in the format "YYYY-MM-DD". 6 | 7 | // Hint 8 | // Days = 24 * 60 * 60 * 1000; 9 | 10 | const calculateDaysBetweenDates = (d1, d2) => { 11 | let date1 = new Date(d1); 12 | let date2 = new Date(d2); 13 | 14 | let diff = Math.abs(date2 - date1); 15 | // console.log(diff); 16 | return diff / (24 * 60 * 60 * 1000); 17 | }; 18 | 19 | console.log(calculateDaysBetweenDates("2024-01-05", "2024-01-31")); // Output: 30 20 | -------------------------------------------------------------------------------- /day31-40/day39/index.js: -------------------------------------------------------------------------------- 1 | //*------------------------------------------------------------------- 2 | //* Programming Challenge: Calculate Age from birthDate 3 | //*------------------------------------------------------------------- 4 | 5 | //? Create a function calculateAge that takes a birthDate as input and returns the current age of the person. The birthDate will be provided in the format "YYYY-MM-DD". 6 | 7 | //* Requirements: 8 | //? The function must handle leap years and varying numbers of days in each month accurately. 9 | //? Consider the timezone difference and ensure the age is calculated based on the current date in your local time zone. 10 | //? The output should be the age in whole years. 11 | 12 | // 1: currentDate() ✅ 13 | // 2: currentDate.year & birthdate.year()✅ 14 | // 3: age = curYear - BirthYear => 34✅ 15 | // 4: month of each 16 | // 5: 2024 = 34 tab jan wo 2024-05-03✅ 17 | 18 | // june and june && 5 kab 15 19 | 20 | const calculateAge = (birthDate) => { 21 | let todayDate = new Date(); 22 | birthDate = new Date(birthDate); 23 | 24 | // step 2 25 | let age = todayDate.getFullYear() - birthDate.getFullYear(); 26 | // console.log(age); 27 | 28 | // step 3 29 | let monthDiff = todayDate.getMonth() - birthDate.getMonth(); 30 | 31 | if ( 32 | monthDiff < 0 || 33 | (monthDiff === 0 && todayDate.getDate() < birthDate.getDate()) 34 | ) { 35 | age--; 36 | } 37 | 38 | return age; 39 | }; 40 | 41 | console.log(calculateAge("1990-05-15")); // Output will vary depending on the current date 42 | 43 | //todo Hint 44 | //? Checks if the current month is less than the birth month or if it's the same month but today's date is before the birth date. If either condition is true, it subtracts one from the age because the birthday has not yet occurred this year 45 | -------------------------------------------------------------------------------- /day31-40/day40/index.js: -------------------------------------------------------------------------------- 1 | //*------------------------------------------------------------------- 2 | //* Programming Challenge: Simple Bar Chart from Array Data 3 | //*------------------------------------------------------------------- 4 | 5 | //? Create a function generateBarChart that takes an array of numbers and generates a simple text-based bar chart. 6 | 7 | // const generateBarChart = (arr) => { 8 | // const newArr = arr.map((curElem, index) => { 9 | // let star = ""; 10 | // let number = 0; 11 | // while (number < curElem) { 12 | // star = star + "*"; 13 | // number++; 14 | // } 15 | // return ` ${index + 1}: ${star}`; 16 | // }); 17 | // return newArr.join("\n"); 18 | // }; 19 | 20 | // 2nd alternate solution 21 | const generateBarChart = (arr) => { 22 | return arr 23 | .map((curElem, index) => { 24 | return ` ${index + 1}: ${"*".repeat(curElem)}`; 25 | }) 26 | .join("\n"); 27 | }; 28 | 29 | console.log(generateBarChart([5, 3, 9, 2])); 30 | 31 | // 1: ***** 32 | // 2: *** 33 | // 3: ********* 34 | // 4: ** 35 | -------------------------------------------------------------------------------- /day41/index.js: -------------------------------------------------------------------------------- 1 | //*--------------------------------------------------------- 2 | //* Programming Challenge: Simple Currency Converter 3 | //*--------------------------------------------------------- 4 | 5 | //? Write a function to convert an amount from one currency to another using static exchange rates. 6 | 7 | //* Requirements: 8 | //? Write a function named convertCurrency that takes three parameters: amount, fromCurrency, and toCurrency. 9 | //? Use a fixed object to store exchange rates relative to a base currency (e.g., USD). 10 | //? The function should return the converted amount in the target currency. 11 | //? Handle conversion through USD as a base, meaning if converting from GBP to EUR, first convert GBP to USD, then USD to EUR. 12 | 13 | const rates = { 14 | USD: 1, // Base currency 15 | EUR: 0.9, // 1 USD = 0.9 EUR 16 | GBP: 0.8, // 1 USD = 0.8 GBP 17 | INR: 82, // 1 USD = 82 INR 18 | }; 19 | 20 | // usd = 1 = 0.9 21 | // 100 = ? 22 | 23 | const convertCurrency = (amount, fC, tC) => { 24 | let amountInUSD = 0; 25 | if (fC !== "USD") { 26 | amountInUSD = amount / rates[fC]; 27 | } else { 28 | amountInUSD = amount; 29 | } 30 | 31 | let convertedAmount = 0; 32 | if (tC !== "USD") { 33 | convertedAmount = amountInUSD * rates[tC]; 34 | } else { 35 | convertedAmount = amountInUSD; 36 | } 37 | 38 | return convertedAmount; 39 | }; 40 | 41 | // Example usage: 42 | console.log(convertCurrency(100, "INR", "EUR")); // Output will depend on the rates provided 43 | -------------------------------------------------------------------------------- /day42/index.js: -------------------------------------------------------------------------------- 1 | //*------------------------------------------------------------------- 2 | //* Programming Challenge: Validate a Credit Card Number (Luhn Algorithm) 3 | //*------------------------------------------------------------------- 4 | 5 | //? Write a function to validate credit card numbers using the Luhn algorithm. 6 | 7 | //* Requirements: 8 | //? Write a function named validateCreditCard that takes a credit card number as a string. 9 | //? The function should return true if the number is valid according to the Luhn algorithm, and false otherwise. 10 | //? Ensure the function can handle numbers as strings, which may include spaces and dashes. 11 | 12 | //* Luhn Algorithm Steps: 13 | // Steps of the Luhn Algorithm 14 | // Prepare the Number: 15 | //? Start with the digits of the number. For example, if validating the number 79927398713. 16 | //? Reverse the Digits: 17 | //? Reverse the digits of the number. For the example, it becomes 31789379297. 18 | //todo Double Every Second Digit: 19 | // Starting from the first digit, double every second digit. 20 | //todo For our example: 3, 1*2, 7, 8*2, 9, 3*2, 7, 9*2, 2, 7*2, 9. 21 | //? Which translates to: 3, 2, 7, 16, 9, 6, 7, 18, 2, 14, 9. 22 | //? Subtract 9 from Numbers Higher Than 9: 23 | 24 | // 16 = 16 - 9 = 7 25 | // 16 = 1 + 6 =7 26 | 27 | // 14 = 14-9= 5 28 | // 14= 1+4=5 29 | 30 | // If doubling the number results in a number greater than 9, subtract 9 from it. 31 | //? Now our series is: 3, 2, 7, 7, 9, 6, 7, 9, 2, 5, 9. 32 | //todo Sum All Digits: 33 | //? Add all the digits together. 34 | //* 3 + 2 + 7 + 7 + 9 + 6 + 7 + 9 + 2 + 5 + 9 = 66. 35 | //todo Check Modulo 10: 36 | //? If the sum modulo 10 is 0, then the number is valid according to the Luhn formula. 37 | // 66 % 10 = 6, which is not 0, so 79927398713 is not a valid number according to Luhn. 38 | 39 | const validateCreditCard = (str) => { 40 | // initial step 41 | str = str.replace(/\D/g, ""); 42 | 43 | // step 1: Reverse the Digits: 44 | let revNum = ""; 45 | for (let i = str.length - 1; i >= 0; i--) { 46 | revNum = revNum + str[i]; 47 | } 48 | // console.log(revNum); 49 | 50 | // step 2: Double Every Second Digit 51 | let doubleNum = revNum 52 | .split("") 53 | .map((curDigit, index) => { 54 | if (index % 2 !== 0) { 55 | curDigit = curDigit * 2; 56 | 57 | if (curDigit > 9) { 58 | curDigit = curDigit - 9; 59 | } else { 60 | curDigit = curDigit; 61 | } 62 | } 63 | return curDigit; 64 | }) 65 | .reduce((accum, curElem) => accum + Number(curElem), 0); 66 | console.log(doubleNum); 67 | 68 | return doubleNum % 10 === 0; 69 | }; 70 | 71 | // Example usage: 0123 4567 891011 72 | console.log(validateCreditCard("4539 1488 0343 6467")); // Output: true 73 | console.log(validateCreditCard("8273 1232 7352 0569")); // Output: false 74 | -------------------------------------------------------------------------------- /day43/index.js: -------------------------------------------------------------------------------- 1 | //*------------------------------------------------------------------- 2 | //* Programming Challenge: FizzBuzz Challenge 3 | //*------------------------------------------------------------------- 4 | 5 | //? Write a function fizzbuzz that accepts two numbers, startNum and endNum, as input. The function should return an array containing numbers and specific strings based on the following rules: 6 | 7 | //? For each number i in the range from startNum to endNum (both inclusive): 8 | //? If i is divisible by both 3 and 5, include "FizzBuzz" in the result. 9 | //? If i is divisible by only 3, include "Fizz" in the result. 10 | //? If i is divisible by only 5, include "Buzz" in the result. 11 | //? Otherwise, include the number i itself. 12 | 13 | const fizzbuzz = (sNum, eNum) => { 14 | let arr = []; 15 | for (let i = sNum; i <= eNum; i++) { 16 | if (i % 3 === 0 && i % 5 === 0) { 17 | arr.push("fizzbuzz"); 18 | } else if (i % 3 === 0) { 19 | arr.push("fizz"); 20 | } else if (i % 5 === 0) { 21 | arr.push("buzz"); 22 | } else { 23 | arr.push(i); 24 | } 25 | } 26 | return arr; 27 | }; 28 | 29 | // Example 1 30 | console.log(fizzbuzz(1, 15)); 31 | //* Output: [1, 2, "Fizz", 4, "Buzz", "Fizz", 7, 8, "Fizz", "Buzz", 11, "Fizz", 13, 14, "FizzBuzz"] 32 | 33 | // Example 2 34 | console.log(fizzbuzz(33, 43)); 35 | // Output: ["Fizz", 13, 14, "FizzBuzz", 16, 17, "Fizz", 19, "Buzz"] 36 | -------------------------------------------------------------------------------- /day44/data.md: -------------------------------------------------------------------------------- 1 | # Introduction to Regular Expressions 2 | 3 | Regular expressions are sequences of characters that define a search pattern. these patterns are widely used for string searching and manipulation. in validation, regex helps ensure that strings such as email addresses and passwords conform to expected formats. 4 | 5 | ## Basic Syntax 6 | 7 | - **literals**: ordinary characters like 'a', '1', or '%'. 8 | 9 | - **metacharacters**: characters with special meanings, like `.` (any character), `^ (caret)` (start of string), `$` (end of string), etc. 10 | 11 | - **character classes**: sets of characters, like `[a-z]` for any lowercase letter. 12 | - **character classes & shorthand**: In addition to specific character sets, regex includes several shorthand character classes that help match common character types: 13 | 14 | ### digit characters 15 | 16 | - `\d`: matches any digit (0-9). 17 | - `\D`: matches any non-digit. 18 | 19 | ### whitespace characters 20 | 21 | - `\s`: matches any whitespace character (including spaces, tabs, and line breaks). 22 | - `\S`: matches any non-whitespace character. 23 | 24 | - **quantifiers**: specify how many times a character can occur, like `+` (one or more) or `*` (Zero or more times) or `{1,3}` (between one and three times). 25 | 26 | - **escape characters**: use a backslash (`\`) to escape special characters and treat them like ordinary characters. 27 | **examples**: 28 | - `\.`: matches a literal dot. 29 | - `\$`: matches a dollar sign `$`. 30 | - `\^`: matches a caret `^`. 31 | 32 | ## Practice - Email Validation 33 | 34 | to validate an email, we want to check three main things: 35 | 36 | 1. **local part**: the part before the `@` symbol. 37 | 2. **domain**: the part after the `@` but before the top-level domain. 38 | 3. **top-level domain (tld)**: the last part following the last dot. 39 | -------------------------------------------------------------------------------- /day44/index.js: -------------------------------------------------------------------------------- 1 | //*------------------------------------------------------------------- 2 | //* Programming Challenge: mail Address Validation 3 | //*------------------------------------------------------------------- 4 | 5 | //? You're tasked with implementing a function to validate email addresses using a regular expression. Write a function validateEmail(email) that takes a string email as input and returns true if the email address is valid according to the following rules: 6 | 7 | //todo 1: The local part of the email address (before the "@") can contain: 8 | //? Alphanumeric characters (A-Z, a-z, 0-9) 9 | //? Special characters: period ".", underscore "_", percent "%", plus "+", or hyphen "-" 10 | //? Consecutive periods are not allowed 11 | //? Special characters cannot appear at the beginning or end of the local part 12 | 13 | //todo 2: The domain part of the email address (after the "@") can contain: 14 | //? Alphanumeric characters (A-Z, a-z, 0-9) 15 | //? Hyphen "-" 16 | //? Period "." 17 | //? Must contain at least one period 18 | //? The top-level domain (TLD) must consist of at least two alphabetic characters (e.g., "com", "org", "net", etc.) 19 | 20 | const validateEmail = (email) => { 21 | return /^[A-Za-z0-9]+(?:[.%_+][A-Za-z0-9]+)*@[A-Za-z0-9]+\.[A-Za-z]{2,}$/.test( 22 | email 23 | ); 24 | }; 25 | 26 | console.log(validateEmail("john.doe@example.com")); // true 27 | console.log(validateEmail("invalid..dot@domain.com")); // false 28 | console.log(validateEmail("missing@dotcom")); // false 29 | console.log(validateEmail("no@domain")); // false 30 | -------------------------------------------------------------------------------- /day45/index.js: -------------------------------------------------------------------------------- 1 | //*------------------------------------------------------------------- 2 | //* Programming Challenge: Password Validation Coding Problem 3 | //*------------------------------------------------------------------- 4 | 5 | //? Create a function validatePassword that checks if a given password string meets the following criteria: 6 | 7 | //?todo Minimum Length: The password must be at least 8 characters long. 8 | //?todo Case Requirements: The password must include at least one uppercase letter and at least one lowercase letter. 9 | //?todo Numerical Requirement: The password must contain at least one digit. 10 | //?todo Special Character Requirement: The password must have at least one special character from the set !@#$%^&*()-_+=. 11 | 12 | //* Requirements 13 | //? The function should return true if the password meets all the criteria, and false otherwise. 14 | //? You are to implement this function using JavaScript. 15 | 16 | function validatePassword(password) { 17 | const regex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[\d])(?=.*[\W_]).{8,}$/; 18 | return regex.test(password); 19 | } 20 | 21 | // Example 1 22 | console.log(validatePassword("Pass123!")); // Output: true 23 | 24 | // Example 2 25 | console.log(validatePassword("password")); // Output: false (fails due to lack of uppercase, digits, and special characters) 26 | 27 | // Example 3 28 | console.log(validatePassword("12345678")); // Output: false (fails due to lack of uppercase, lowercase, and special characters) 29 | 30 | // Example 4 31 | console.log(validatePassword("P@ssw0rd")); // Output: true 32 | -------------------------------------------------------------------------------- /day46/index.js: -------------------------------------------------------------------------------- 1 | //*------------------------------------------------------------------- 2 | //* Programming Challenge: Mobile Number Validation 3 | //*------------------------------------------------------------------- 4 | //? Write a function that takes a string as input and returns true if the string represents a valid Indian mobile number, and false otherwise. 5 | 6 | //* Validation Requirements: 7 | //? Length: An Indian mobile number should have exactly 10 digits. 8 | //? Starting Digit: The number must start with 6, 7, 8, or 9, which are valid starting digits for Indian mobile numbers. 9 | 10 | const validateIndianMobileNumber = (number) => { 11 | return /^[6-9][\d]{9}$/.test(number); 12 | }; 13 | 14 | // Test Cases 15 | console.log(validateIndianMobileNumber("9876543210")); // Expected output: true 16 | console.log(validateIndianMobileNumber("0123456789")); // Expected output: false 17 | console.log(validateIndianMobileNumber("897654321")); // Expected output: false 18 | console.log(validateIndianMobileNumber("78965432107")); // Expected output: false 19 | 20 | //* Constraints: 21 | //? The input string may contain numeric characters only. 22 | //? Assume input strings will not include any country codes. 23 | -------------------------------------------------------------------------------- /day47/index.js: -------------------------------------------------------------------------------- 1 | //*--------------------------------------------------------- 2 | //* Programming Challenge: Extract Numbers from a String 3 | //*------------------------------------------------------------ 4 | 5 | //? Write a regular expression to extract all numbers from a given string. 6 | 7 | //* Requirements 8 | //? Extract all numbers from a string. 9 | //? Return the numbers as an array. 10 | 11 | //* Use Cases 12 | //? Parsing numerical data from text. 13 | //? Extracting numeric values for calculations. 14 | //? Filtering numbers from mixed content. 15 | 16 | const extractNumbers = (str) => { 17 | let regex = /\d+/g; 18 | return str.match(regex); 19 | }; 20 | 21 | console.log(extractNumbers("abc123def456")); // Expected output: ["123", "456"] 22 | console.log(extractNumbers("no numbers here")); // Expected output: null 23 | console.log(extractNumbers("1a2b3c4d")); // Expected output: ["1", "2", "3", "4"] 24 | console.log(extractNumbers("100, 200 and 300")); // Expected output: ["100", "200", "300"] 25 | console.log(extractNumbers("")); // Expected output: null 26 | 27 | //* Constraints 28 | //? Extract all numeric values. 29 | //? Return as an array. 30 | 31 | //// Regex Explanation: /\d+/g 32 | 33 | //todo \d: Matches any digit (0-9). 34 | //todo +: Matches one or more of the preceding token (i.e., digits). 35 | //todo g: Global flag, to find all matches in the string. 36 | -------------------------------------------------------------------------------- /day48/index.js: -------------------------------------------------------------------------------- 1 | //*--------------------------------------------------------- 2 | //* Programming Challenge: Validate Hex Color Code 3 | //*------------------------------------------------------------ 4 | 5 | //? Write a regular expression to validate a hex color code (e.g., #a3c113). 6 | 7 | //* Requirements 8 | //? The hex color code should start with "#". 9 | //? It should be followed by either 3 or 6 hexadecimal characters. 10 | 11 | //* Use Cases 12 | //? Validating color codes in design tools. 13 | //? Ensuring consistent color code format in CSS. 14 | //? Filtering valid hex color codes in data processing. 15 | 16 | const validateHexColor = (hexColor) => { 17 | return /^#([A-Fa-f\d]{3}|[A-Fa-f\d]{6})$/.test(hexColor); 18 | }; 19 | 20 | //* Test Cases 21 | console.log(validateHexColor("#a3c113")); // Expected output: true 22 | console.log(validateHexColor("#fff")); // Expected output: true 23 | console.log(validateHexColor("#1234567")); // Expected output: false 24 | console.log(validateHexColor("a3c113")); // Expected output: false 25 | console.log(validateHexColor("#g3c113")); // Expected output: false 26 | -------------------------------------------------------------------------------- /day49/index.js: -------------------------------------------------------------------------------- 1 | //*--------------------------------------------------------- 2 | //* Programming Challenge: Date Validation 3 | //*------------------------------------------------------------ 4 | 5 | //? Write a function named isValidDate that takes a single string input representing a date and determines if it is a valid date in the format MM/DD/YYYY. The valid date range should be from January 1, 1900, to December 31, 2099. 6 | 7 | //todo Requirements: 8 | //* Format Check: The date must strictly follow the MM/DD/YYYY format. Ensure that slashes (/) are used as separators. 9 | //? Month Validation: Valid months are from 01 (January) to 12 (December). 10 | //? Day Validation: Days should be valid according to the month: 11 | //? 01-31 for January, March, May, July, August, October, December 12 | //? 01-30 for April, June, September, November 13 | //? 01-28 for February in common years, and 01-29 for February in leap years 14 | //? Year Validation: Years should be within the range from 1900 to 2099. 15 | 16 | const isValidDate = (dateFormat) => { 17 | return /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[0-1])\/((19|20)[0-9]{2})$/.test( 18 | dateFormat 19 | ); 20 | }; 21 | 22 | console.log(isValidDate("12/15/2021")); 23 | console.log(isValidDate("02/29/2021")); 24 | console.log(isValidDate("04/31/2020")); 25 | console.log(isValidDate("01/01/1800")); 26 | console.log(isValidDate("13/01/2000")); 27 | console.log(isValidDate("12/31/2099")); 28 | 29 | //* Constraints: 30 | //? Do not use date parsing libraries; the objective is to validate using regular expressions and conditional logic. 31 | 32 | //* Why we need improvement 33 | //? General Date Validity: This regular expression only checks if the date string is in a specific format and within plausible numerical ranges (e.g., 01-12 for months, 01-31 for days). It does not account for the varying number of days in different months. For example, it would consider "02/31/2020" as valid, though February never has 31 days. 34 | 35 | //? Leap Year Consideration: The expression does not handle leap years. February can have 29 days in a leap year, but the regex would incorrectly validate "02/29" as a possible date for any year, regardless of leap year rules. 36 | 37 | //? Logical Month and Day Combination: The regex doesn't account for months that have less than 31 days (e.g., it considers "04/31/2021" as valid, but April only has 30 days). 38 | -------------------------------------------------------------------------------- /day50/css/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Muli-Regular"; 3 | src: url("../fonts/muli/Muli-Regular.ttf"); } 4 | @font-face { 5 | font-family: "Muli-SemiBold"; 6 | src: url("../fonts/muli/Muli-SemiBold.ttf"); } 7 | * { 8 | -webkit-box-sizing: border-box; 9 | -moz-box-sizing: border-box; 10 | box-sizing: border-box; } 11 | 12 | body { 13 | font-family: "Muli-Regular"; 14 | font-size: 14px; 15 | margin: 0; 16 | color: #999; } 17 | 18 | input, textarea, select, button { 19 | font-family: "Urbanist", sans-serif; 20 | } 21 | 22 | p, h1, h2, h3, h4, h5, h6, ul { 23 | margin: 0; } 24 | 25 | img { 26 | max-width: 100%; } 27 | 28 | ul { 29 | padding-left: 0; 30 | margin-bottom: 0; } 31 | 32 | a { 33 | text-decoration: none; } 34 | 35 | 36 | :focus { 37 | outline: none; } 38 | 39 | .wrapper { 40 | min-height: 100vh; 41 | display: flex; 42 | align-items: center; 43 | justify-content: center; 44 | background: #accffe; } 45 | 46 | .inner { 47 | position: relative; 48 | width: 500px; } 49 | 50 | .image-1 { 51 | position: absolute; 52 | bottom: -12px; 53 | left: -191px; 54 | z-index: 99; } 55 | 56 | .image-2 { 57 | position: absolute; 58 | bottom: 0; 59 | right: -129px; } 60 | 61 | form { 62 | width: 100%; 63 | position: relative; 64 | z-index: 9; 65 | padding: 77px 61px 66px; 66 | background: #fff; 67 | box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); 68 | -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); 69 | -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); 70 | -ms-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); 71 | -o-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); } 72 | 73 | h3 { 74 | text-transform: uppercase; 75 | font-size: 25px; 76 | font-family: "Muli-SemiBold"; 77 | color: #333; 78 | letter-spacing: 3px; 79 | text-align: center; 80 | margin-bottom: 33px; } 81 | 82 | /* .form-holder { 83 | position: relative; 84 | margin-bottom: 21px; } 85 | .form-holder input { 86 | position: absolute; 87 | left: 0; 88 | top: 50%; 89 | transform: translateY(-50%); 90 | font-size: 15px; 91 | color: #333; } 92 | .form-holder span.lnr-lock { 93 | left: 2px; } */ 94 | 95 | .form-data{ 96 | display: flex; 97 | align-items: center; 98 | gap: 1rem; 99 | margin-bottom: .2rem; 100 | } 101 | 102 | .form-holder{ 103 | margin-bottom: 1.2rem; 104 | } 105 | 106 | .form-control { 107 | border: none; 108 | border-bottom: 1px solid #e6e6e6; 109 | display: block; 110 | width: 100%; 111 | height: 38px; 112 | background: none; 113 | color: #666; 114 | font-family: "Urbanist", sans-serif; 115 | letter-spacing: .1rem; 116 | font-size: 16px; } 117 | .form-control::-webkit-input-placeholder { 118 | font-size: 1rem; 119 | letter-spacing: .1rem; 120 | font-family: "Urbanist", sans-serif; 121 | color: #999; 122 | transform: translateY(1px); } 123 | .form-control::-moz-placeholder { 124 | font-size: 1rem; 125 | letter-spacing: .1rem; 126 | font-family: "Urbanist", sans-serif; 127 | color: #999; 128 | transform: translateY(1px); } 129 | .form-control:-ms-input-placeholder { 130 | font-size: 1rem; 131 | letter-spacing: .1rem; 132 | font-family: "Urbanist", sans-serif; 133 | color: #999; 134 | transform: translateY(1px); } 135 | .form-control:-moz-placeholder { 136 | font-size: 14px; 137 | font-family: "Muli-Regular"; 138 | color: #999; 139 | transform: translateY(1px); } 140 | .form-control:focus { 141 | border-bottom: 1px solid #accffe; } 142 | 143 | button { 144 | border: none; 145 | width: 100%; 146 | height: 49px; 147 | margin-top: 50px; 148 | cursor: pointer; 149 | display: flex; 150 | align-items: center; 151 | justify-content: center; 152 | padding: 0; 153 | background: #99ccff; 154 | color: #fff; 155 | text-transform: uppercase; 156 | font-family: "Muli-SemiBold"; 157 | font-size: 15px; 158 | letter-spacing: 2px; 159 | transition: all 0.5s; 160 | position: relative; 161 | overflow: hidden; } 162 | button span { 163 | position: relative; 164 | z-index: 2; } 165 | button:before, button:after { 166 | content: ''; 167 | position: absolute; 168 | top: 0; 169 | left: 0; 170 | width: 100%; 171 | height: 100%; 172 | z-index: 1; 173 | background-color: rgba(52, 152, 253, 0.25); 174 | -webkit-transition: all 0.3s; 175 | -moz-transition: all 0.3s; 176 | -o-transition: all 0.3s; 177 | transition: all 0.3s; 178 | -webkit-transform: translate(-100%, 0); 179 | transform: translate(-100%, 0); 180 | -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 181 | transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } 182 | button:after { 183 | -webkit-transition-delay: 0.2s; 184 | transition-delay: 0.2s; } 185 | button:hover:before, button:hover:after { 186 | -webkit-transform: translate(0, 0); 187 | transform: translate(0, 0); } 188 | 189 | 190 | 191 | @media (max-width: 991px) { 192 | .inner { 193 | width: 400px; 194 | left: 4%; } } 195 | @media (max-width: 767px) { 196 | .inner { 197 | width: 100%; 198 | left: 0; } 199 | 200 | .image-1, .image-2 { 201 | display: none; } 202 | 203 | form { 204 | padding: 35px; 205 | box-shadow: none; 206 | -webkit-box-shadow: none; 207 | -moz-box-shadow: none; 208 | -ms-box-shadow: none; 209 | -o-box-shadow: none; } 210 | 211 | .wrapper { 212 | background: none; } } 213 | 214 | 215 | .error{ 216 | font-family: 'Urbanist'; 217 | color:red; 218 | font-size: 1rem; 219 | letter-spacing: .1rem; 220 | padding-left: 1.6rem; 221 | /* padding-top: .6rem; */ 222 | } 223 | 224 | /*# sourceMappingURL=style.css.map */ 225 | -------------------------------------------------------------------------------- /day50/css/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,UAGC;EAFA,WAAW,EAAE,cAAc;EAC3B,GAAG,EAAE,qCAAqC;AAE3C,UAGC;EAFA,WAAW,EAAE,eAAe;EAC5B,GAAG,EAAE,sCAAsC;AAE5C,CAAE;EACE,kBAAkB,EAAE,UAAU;EAC9B,eAAe,EAAE,UAAU;EAC3B,UAAU,EAAE,UAAU;;AAE1B,IAAK;EACJ,WAAW,EAAE,cAAc;EAC3B,SAAS,EAAE,IAAI;EACf,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,IAAI;;AAEZ,+BAAgC;EAC/B,WAAW,EAAE,cAAc;;AAE5B,6BAA8B;EAC7B,MAAM,EAAE,CAAC;;AAEV,GAAI;EACH,SAAS,EAAE,IAAI;;AAEhB,EAAG;EACF,YAAY,EAAE,CAAC;EACf,aAAa,EAAE,CAAC;;AAEjB,CAAE;EACD,eAAe,EAAE,IAAI;;AAEtB,MAAO;EACH,OAAO,EAAE,IAAI;;AAEjB,QAAS;EACR,UAAU,EAAE,KAAK;EACjB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;EACvB,UAAU,EAAE,OAAO;;AAEpB,MAAO;EACN,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,KAAK;;AAEb,QAAS;EACR,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,KAAK;EACb,IAAI,EAAE,MAAM;EACZ,OAAO,EAAE,EAAE;;AAEZ,QAAS;EACR,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,MAAM;;AAEd,IAAK;EACJ,KAAK,EAAE,IAAI;EACX,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,CAAC;EACV,OAAO,EAAE,cAAc;EACvB,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,mCAAmC;EAC/C,kBAAkB,EAAE,mCAAmC;EACpD,eAAe,EAAE,mCAAmC;EACpD,cAAc,EAAE,mCAAmC;EACnD,aAAa,EAAE,mCAAmC;;AAEtD,EAAG;EACF,cAAc,EAAE,SAAS;EACzB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,eAAe;EAC5B,KAAK,EAAE,IAAI;EACX,cAAc,EAAE,GAAG;EACnB,UAAU,EAAE,MAAM;EAClB,aAAa,EAAE,IAAI;;AAEpB,YAAa;EACZ,QAAQ,EAAE,QAAQ;EAClB,aAAa,EAAE,IAAI;EACnB,iBAAK;IACJ,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,GAAG;IACR,SAAS,EAAE,gBAAgB;IAC3B,SAAS,EAAE,IAAI;IACf,KAAK,EAAE,IAAI;IACX,0BAAW;MACV,IAAI,EAAE,GAAG;;AAIZ,aAAc;EACb,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,iBAAiB;EAChC,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,IAAI;EAChB,OAAO,EAAE,YAAY;EACrB,KAAK,EAAE,IAAI;EACX,WAAW,EAAE,eAAe;EAC5B,SAAS,EAAE,IAAI;EACf,wCAA6B;IAC5B,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,cAAc;IAC3B,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,eAAe;EAE3B,+BAAoB;IACnB,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,cAAc;IAC3B,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,eAAe;EAE3B,mCAAwB;IACvB,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,cAAc;IAC3B,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,eAAe;EAE3B,8BAAmB;IAClB,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,cAAc;IAC3B,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,eAAe;EAE3B,mBAAQ;IACP,aAAa,EAAE,iBAAiB;;AAGlC,MAAO;EACN,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,OAAO;EACf,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;EACvB,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,IAAI;EACX,cAAc,EAAE,SAAS;EACzB,WAAW,EAAE,eAAe;EAC5B,SAAS,EAAE,IAAI;EACf,cAAc,EAAE,GAAG;EACnB,UAAU,EAAE,QAAQ;EACjB,QAAQ,EAAE,QAAQ;EAClB,QAAQ,EAAE,MAAM;EAChB,WAAK;IACJ,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,CAAC;EAEX,2BAAkB;IACjB,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;IACZ,OAAO,EAAE,CAAC;IACV,gBAAgB,EAAE,wBAAqB;IACvC,kBAAkB,EAAE,QAAQ;IAC5B,eAAe,EAAE,QAAQ;IACzB,aAAa,EAAE,QAAQ;IACvB,UAAU,EAAE,QAAQ;IACpB,iBAAiB,EAAE,mBAAkB;IACrC,SAAS,EAAE,mBAAkB;IAC7B,kCAAkC,EAAE,+BAA+B;IACnE,0BAA0B,EAAE,+BAA+B;EAE5D,YAAQ;IACP,wBAAwB,EAAE,IAAI;IAC9B,gBAAgB,EAAE,IAAI;EAGtB,uCAAkB;IACjB,iBAAiB,EAAE,eAAc;IACjC,SAAS,EAAE,eAAc;;AAI/B,yBAA0B;EACzB,MAAO;IACN,KAAK,EAAE,KAAK;IACZ,IAAI,EAAE,EAAE;AAGV,yBAA0B;EACzB,MAAO;IACN,KAAK,EAAE,IAAI;IACX,IAAI,EAAE,CAAC;;EAER,kBAAmB;IAClB,OAAO,EAAE,IAAI;;EAEd,IAAK;IACJ,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,IAAI;IACb,kBAAkB,EAAE,IAAI;IACxB,eAAe,EAAE,IAAI;IACrB,cAAc,EAAE,IAAI;IACpB,aAAa,EAAE,IAAI;;EAEvB,QAAS;IACR,UAAU,EAAE,IAAI", 4 | "sources": ["style.scss"], 5 | "names": [], 6 | "file": "style.css" 7 | } 8 | -------------------------------------------------------------------------------- /day50/css/style.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Muli-Regular"; 3 | src: url('../fonts/muli/Muli-Regular.ttf'); 4 | } 5 | @font-face { 6 | font-family: "Muli-SemiBold"; 7 | src: url('../fonts/muli/Muli-SemiBold.ttf'); 8 | } 9 | * { 10 | -webkit-box-sizing: border-box; 11 | -moz-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | body { 15 | font-family: "Muli-Regular"; 16 | font-size: 14px; 17 | margin: 0; 18 | color: #999; 19 | } 20 | input, textarea, select, button { 21 | font-family: "Muli-Regular"; 22 | } 23 | p, h1, h2, h3, h4, h5, h6, ul { 24 | margin: 0; 25 | } 26 | img { 27 | max-width: 100%; 28 | } 29 | ul { 30 | padding-left: 0; 31 | margin-bottom: 0; 32 | } 33 | a { 34 | text-decoration: none; 35 | } 36 | :focus { 37 | outline: none; 38 | } 39 | .wrapper { 40 | min-height: 100vh; 41 | display: flex; 42 | align-items: center; 43 | justify-content: center; 44 | background: #accffe ; 45 | } 46 | .inner { 47 | position: relative; 48 | width: 435px; 49 | } 50 | .image-1 { 51 | position: absolute; 52 | bottom: -12px; 53 | left: -191px; 54 | z-index: 99; 55 | } 56 | .image-2 { 57 | position: absolute; 58 | bottom: 0; 59 | right: -129px; 60 | } 61 | form { 62 | width: 100%; 63 | position: relative; 64 | z-index: 9; 65 | padding: 77px 61px 66px; 66 | background: #fff; 67 | box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); 68 | -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); 69 | -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); 70 | -ms-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); 71 | -o-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); 72 | } 73 | h3 { 74 | text-transform: uppercase; 75 | font-size: 25px; 76 | font-family: "Muli-SemiBold"; 77 | color: #333; 78 | letter-spacing: 3px; 79 | text-align: center; 80 | margin-bottom: 33px; 81 | } 82 | .form-holder { 83 | position: relative; 84 | margin-bottom: 21px; 85 | span { 86 | position: absolute; 87 | left: 0; 88 | top: 50%; 89 | transform: translateY(-50%); 90 | font-size: 15px; 91 | color: #333; 92 | &.lnr-lock { 93 | left: 2px; 94 | } 95 | } 96 | } 97 | .form-control { 98 | border: none; 99 | border-bottom: 1px solid #e6e6e6; 100 | display: block; 101 | width: 100%; 102 | height: 38px; 103 | background: none; 104 | padding: 3px 42px 0px; 105 | color: #666; 106 | font-family: "Muli-SemiBold"; 107 | font-size: 16px; 108 | &::-webkit-input-placeholder { 109 | font-size: 14px; 110 | font-family: "Muli-Regular"; 111 | color: #999; 112 | transform: translateY(1px); 113 | } 114 | &::-moz-placeholder { 115 | font-size: 14px; 116 | font-family: "Muli-Regular"; 117 | color: #999; 118 | transform: translateY(1px); 119 | } 120 | &:-ms-input-placeholder { 121 | font-size: 14px; 122 | font-family: "Muli-Regular"; 123 | color: #999; 124 | transform: translateY(1px); 125 | } 126 | &:-moz-placeholder { 127 | font-size: 14px; 128 | font-family: "Muli-Regular"; 129 | color: #999; 130 | transform: translateY(1px); 131 | } 132 | &:focus { 133 | border-bottom: 1px solid #accffe; 134 | } 135 | } 136 | button { 137 | border: none; 138 | width: 100%; 139 | height: 49px; 140 | margin-top: 50px; 141 | cursor: pointer; 142 | display: flex; 143 | align-items: center; 144 | justify-content: center; 145 | padding: 0; 146 | background: #99ccff; 147 | color: #fff; 148 | text-transform: uppercase; 149 | font-family: "Muli-SemiBold"; 150 | font-size: 15px; 151 | letter-spacing: 2px; 152 | transition: all 0.5s; 153 | position: relative; 154 | overflow: hidden; 155 | span { 156 | position: relative; 157 | z-index: 2; 158 | } 159 | &:before, &:after { 160 | content: ''; 161 | position: absolute; 162 | top: 0; 163 | left: 0; 164 | width: 100%; 165 | height: 100%; 166 | z-index: 1; 167 | background-color: rgba(52,152,253,0.25); 168 | -webkit-transition: all 0.3s; 169 | -moz-transition: all 0.3s; 170 | -o-transition: all 0.3s; 171 | transition: all 0.3s; 172 | -webkit-transform: translate(-100%,0); 173 | transform: translate(-100%,0); 174 | -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 175 | transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 176 | } 177 | &:after { 178 | -webkit-transition-delay: 0.2s; 179 | transition-delay: 0.2s; 180 | } 181 | &:hover { 182 | &:before, &:after { 183 | -webkit-transform: translate(0,0); 184 | transform: translate(0,0); 185 | } 186 | } 187 | } 188 | @media (max-width: 991px) { 189 | .inner { 190 | width: 400px; 191 | left: 4%; 192 | } 193 | } 194 | @media (max-width: 767px) { 195 | .inner { 196 | width: 100%; 197 | left: 0; 198 | } 199 | .image-1, .image-2 { 200 | display: none; 201 | } 202 | form { 203 | padding: 35px; 204 | box-shadow: none; 205 | -webkit-box-shadow: none; 206 | -moz-box-shadow: none; 207 | -ms-box-shadow: none; 208 | -o-box-shadow: none; 209 | } 210 | .wrapper { 211 | background: none; 212 | } 213 | } 214 | -------------------------------------------------------------------------------- /day50/fonts/linearicons/Read Me.txt: -------------------------------------------------------------------------------- 1 | Open "demo.html" to see a list of all the glyphs in the Linearicons-Free font along with their codes. 2 | 3 | You won't need any of the files located under the "demo-files" directory when including the generated font in your own projects. 4 | 5 | You can import "selection.json" to the IcoMoon app (https://icomoon.io/app) using the "Import Icons" button (or via Main Menu > Manage Projects) to modify or subset this font for further optimization. 6 | -------------------------------------------------------------------------------- /day50/fonts/linearicons/fonts/Linearicons-Free.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/javascript_interview_question_answers/21afd45bb0478733d9f38f9670969fb907d4af02/day50/fonts/linearicons/fonts/Linearicons-Free.eot -------------------------------------------------------------------------------- /day50/fonts/linearicons/fonts/Linearicons-Free.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/javascript_interview_question_answers/21afd45bb0478733d9f38f9670969fb907d4af02/day50/fonts/linearicons/fonts/Linearicons-Free.ttf -------------------------------------------------------------------------------- /day50/fonts/linearicons/fonts/Linearicons-Free.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/javascript_interview_question_answers/21afd45bb0478733d9f38f9670969fb907d4af02/day50/fonts/linearicons/fonts/Linearicons-Free.woff -------------------------------------------------------------------------------- /day50/fonts/linearicons/fonts/Linearicons-Free.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/javascript_interview_question_answers/21afd45bb0478733d9f38f9670969fb907d4af02/day50/fonts/linearicons/fonts/Linearicons-Free.woff2 -------------------------------------------------------------------------------- /day50/fonts/linearicons/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Linearicons-Free'; 3 | src:url('fonts/Linearicons-Free.eot?w118d'); 4 | src:url('fonts/Linearicons-Free.eot?#iefixw118d') format('embedded-opentype'), 5 | url('fonts/Linearicons-Free.woff2?w118d') format('woff2'), 6 | url('fonts/Linearicons-Free.woff?w118d') format('woff'), 7 | url('fonts/Linearicons-Free.ttf?w118d') format('truetype'), 8 | url('fonts/Linearicons-Free.svg?w118d#Linearicons-Free') format('svg'); 9 | font-weight: normal; 10 | font-style: normal; 11 | } 12 | 13 | .lnr { 14 | font-family: 'Linearicons-Free'; 15 | speak: none; 16 | font-style: normal; 17 | font-weight: normal; 18 | font-variant: normal; 19 | text-transform: none; 20 | line-height: 1; 21 | 22 | /* Better Font Rendering =========== */ 23 | -webkit-font-smoothing: antialiased; 24 | -moz-osx-font-smoothing: grayscale; 25 | } 26 | 27 | .lnr-home:before { 28 | content: "\e800"; 29 | } 30 | .lnr-apartment:before { 31 | content: "\e801"; 32 | } 33 | .lnr-pencil:before { 34 | content: "\e802"; 35 | } 36 | .lnr-magic-wand:before { 37 | content: "\e803"; 38 | } 39 | .lnr-drop:before { 40 | content: "\e804"; 41 | } 42 | .lnr-lighter:before { 43 | content: "\e805"; 44 | } 45 | .lnr-poop:before { 46 | content: "\e806"; 47 | } 48 | .lnr-sun:before { 49 | content: "\e807"; 50 | } 51 | .lnr-moon:before { 52 | content: "\e808"; 53 | } 54 | .lnr-cloud:before { 55 | content: "\e809"; 56 | } 57 | .lnr-cloud-upload:before { 58 | content: "\e80a"; 59 | } 60 | .lnr-cloud-download:before { 61 | content: "\e80b"; 62 | } 63 | .lnr-cloud-sync:before { 64 | content: "\e80c"; 65 | } 66 | .lnr-cloud-check:before { 67 | content: "\e80d"; 68 | } 69 | .lnr-database:before { 70 | content: "\e80e"; 71 | } 72 | .lnr-lock:before { 73 | content: "\e80f"; 74 | } 75 | .lnr-cog:before { 76 | content: "\e810"; 77 | } 78 | .lnr-trash:before { 79 | content: "\e811"; 80 | } 81 | .lnr-dice:before { 82 | content: "\e812"; 83 | } 84 | .lnr-heart:before { 85 | content: "\e813"; 86 | } 87 | .lnr-star:before { 88 | content: "\e814"; 89 | } 90 | .lnr-star-half:before { 91 | content: "\e815"; 92 | } 93 | .lnr-star-empty:before { 94 | content: "\e816"; 95 | } 96 | .lnr-flag:before { 97 | content: "\e817"; 98 | } 99 | .lnr-envelope:before { 100 | content: "\e818"; 101 | } 102 | .lnr-paperclip:before { 103 | content: "\e819"; 104 | } 105 | .lnr-inbox:before { 106 | content: "\e81a"; 107 | } 108 | .lnr-eye:before { 109 | content: "\e81b"; 110 | } 111 | .lnr-printer:before { 112 | content: "\e81c"; 113 | } 114 | .lnr-file-empty:before { 115 | content: "\e81d"; 116 | } 117 | .lnr-file-add:before { 118 | content: "\e81e"; 119 | } 120 | .lnr-enter:before { 121 | content: "\e81f"; 122 | } 123 | .lnr-exit:before { 124 | content: "\e820"; 125 | } 126 | .lnr-graduation-hat:before { 127 | content: "\e821"; 128 | } 129 | .lnr-license:before { 130 | content: "\e822"; 131 | } 132 | .lnr-music-note:before { 133 | content: "\e823"; 134 | } 135 | .lnr-film-play:before { 136 | content: "\e824"; 137 | } 138 | .lnr-camera-video:before { 139 | content: "\e825"; 140 | } 141 | .lnr-camera:before { 142 | content: "\e826"; 143 | } 144 | .lnr-picture:before { 145 | content: "\e827"; 146 | } 147 | .lnr-book:before { 148 | content: "\e828"; 149 | } 150 | .lnr-bookmark:before { 151 | content: "\e829"; 152 | } 153 | .lnr-user:before { 154 | content: "\e82a"; 155 | } 156 | .lnr-users:before { 157 | content: "\e82b"; 158 | } 159 | .lnr-shirt:before { 160 | content: "\e82c"; 161 | } 162 | .lnr-store:before { 163 | content: "\e82d"; 164 | } 165 | .lnr-cart:before { 166 | content: "\e82e"; 167 | } 168 | .lnr-tag:before { 169 | content: "\e82f"; 170 | } 171 | .lnr-phone-handset:before { 172 | content: "\e830"; 173 | } 174 | .lnr-phone:before { 175 | content: "\e831"; 176 | } 177 | .lnr-pushpin:before { 178 | content: "\e832"; 179 | } 180 | .lnr-map-marker:before { 181 | content: "\e833"; 182 | } 183 | .lnr-map:before { 184 | content: "\e834"; 185 | } 186 | .lnr-location:before { 187 | content: "\e835"; 188 | } 189 | .lnr-calendar-full:before { 190 | content: "\e836"; 191 | } 192 | .lnr-keyboard:before { 193 | content: "\e837"; 194 | } 195 | .lnr-spell-check:before { 196 | content: "\e838"; 197 | } 198 | .lnr-screen:before { 199 | content: "\e839"; 200 | } 201 | .lnr-smartphone:before { 202 | content: "\e83a"; 203 | } 204 | .lnr-tablet:before { 205 | content: "\e83b"; 206 | } 207 | .lnr-laptop:before { 208 | content: "\e83c"; 209 | } 210 | .lnr-laptop-phone:before { 211 | content: "\e83d"; 212 | } 213 | .lnr-power-switch:before { 214 | content: "\e83e"; 215 | } 216 | .lnr-bubble:before { 217 | content: "\e83f"; 218 | } 219 | .lnr-heart-pulse:before { 220 | content: "\e840"; 221 | } 222 | .lnr-construction:before { 223 | content: "\e841"; 224 | } 225 | .lnr-pie-chart:before { 226 | content: "\e842"; 227 | } 228 | .lnr-chart-bars:before { 229 | content: "\e843"; 230 | } 231 | .lnr-gift:before { 232 | content: "\e844"; 233 | } 234 | .lnr-diamond:before { 235 | content: "\e845"; 236 | } 237 | .lnr-linearicons:before { 238 | content: "\e846"; 239 | } 240 | .lnr-dinner:before { 241 | content: "\e847"; 242 | } 243 | .lnr-coffee-cup:before { 244 | content: "\e848"; 245 | } 246 | .lnr-leaf:before { 247 | content: "\e849"; 248 | } 249 | .lnr-paw:before { 250 | content: "\e84a"; 251 | } 252 | .lnr-rocket:before { 253 | content: "\e84b"; 254 | } 255 | .lnr-briefcase:before { 256 | content: "\e84c"; 257 | } 258 | .lnr-bus:before { 259 | content: "\e84d"; 260 | } 261 | .lnr-car:before { 262 | content: "\e84e"; 263 | } 264 | .lnr-train:before { 265 | content: "\e84f"; 266 | } 267 | .lnr-bicycle:before { 268 | content: "\e850"; 269 | } 270 | .lnr-wheelchair:before { 271 | content: "\e851"; 272 | } 273 | .lnr-select:before { 274 | content: "\e852"; 275 | } 276 | .lnr-earth:before { 277 | content: "\e853"; 278 | } 279 | .lnr-smile:before { 280 | content: "\e854"; 281 | } 282 | .lnr-sad:before { 283 | content: "\e855"; 284 | } 285 | .lnr-neutral:before { 286 | content: "\e856"; 287 | } 288 | .lnr-mustache:before { 289 | content: "\e857"; 290 | } 291 | .lnr-alarm:before { 292 | content: "\e858"; 293 | } 294 | .lnr-bullhorn:before { 295 | content: "\e859"; 296 | } 297 | .lnr-volume-high:before { 298 | content: "\e85a"; 299 | } 300 | .lnr-volume-medium:before { 301 | content: "\e85b"; 302 | } 303 | .lnr-volume-low:before { 304 | content: "\e85c"; 305 | } 306 | .lnr-volume:before { 307 | content: "\e85d"; 308 | } 309 | .lnr-mic:before { 310 | content: "\e85e"; 311 | } 312 | .lnr-hourglass:before { 313 | content: "\e85f"; 314 | } 315 | .lnr-undo:before { 316 | content: "\e860"; 317 | } 318 | .lnr-redo:before { 319 | content: "\e861"; 320 | } 321 | .lnr-sync:before { 322 | content: "\e862"; 323 | } 324 | .lnr-history:before { 325 | content: "\e863"; 326 | } 327 | .lnr-clock:before { 328 | content: "\e864"; 329 | } 330 | .lnr-download:before { 331 | content: "\e865"; 332 | } 333 | .lnr-upload:before { 334 | content: "\e866"; 335 | } 336 | .lnr-enter-down:before { 337 | content: "\e867"; 338 | } 339 | .lnr-exit-up:before { 340 | content: "\e868"; 341 | } 342 | .lnr-bug:before { 343 | content: "\e869"; 344 | } 345 | .lnr-code:before { 346 | content: "\e86a"; 347 | } 348 | .lnr-link:before { 349 | content: "\e86b"; 350 | } 351 | .lnr-unlink:before { 352 | content: "\e86c"; 353 | } 354 | .lnr-thumbs-up:before { 355 | content: "\e86d"; 356 | } 357 | .lnr-thumbs-down:before { 358 | content: "\e86e"; 359 | } 360 | .lnr-magnifier:before { 361 | content: "\e86f"; 362 | } 363 | .lnr-cross:before { 364 | content: "\e870"; 365 | } 366 | .lnr-menu:before { 367 | content: "\e871"; 368 | } 369 | .lnr-list:before { 370 | content: "\e872"; 371 | } 372 | .lnr-chevron-up:before { 373 | content: "\e873"; 374 | } 375 | .lnr-chevron-down:before { 376 | content: "\e874"; 377 | } 378 | .lnr-chevron-left:before { 379 | content: "\e875"; 380 | } 381 | .lnr-chevron-right:before { 382 | content: "\e876"; 383 | } 384 | .lnr-arrow-up:before { 385 | content: "\e877"; 386 | } 387 | .lnr-arrow-down:before { 388 | content: "\e878"; 389 | } 390 | .lnr-arrow-left:before { 391 | content: "\e879"; 392 | } 393 | .lnr-arrow-right:before { 394 | content: "\e87a"; 395 | } 396 | .lnr-move:before { 397 | content: "\e87b"; 398 | } 399 | .lnr-warning:before { 400 | content: "\e87c"; 401 | } 402 | .lnr-question-circle:before { 403 | content: "\e87d"; 404 | } 405 | .lnr-menu-circle:before { 406 | content: "\e87e"; 407 | } 408 | .lnr-checkmark-circle:before { 409 | content: "\e87f"; 410 | } 411 | .lnr-cross-circle:before { 412 | content: "\e880"; 413 | } 414 | .lnr-plus-circle:before { 415 | content: "\e881"; 416 | } 417 | .lnr-circle-minus:before { 418 | content: "\e882"; 419 | } 420 | .lnr-arrow-up-circle:before { 421 | content: "\e883"; 422 | } 423 | .lnr-arrow-down-circle:before { 424 | content: "\e884"; 425 | } 426 | .lnr-arrow-left-circle:before { 427 | content: "\e885"; 428 | } 429 | .lnr-arrow-right-circle:before { 430 | content: "\e886"; 431 | } 432 | .lnr-chevron-up-circle:before { 433 | content: "\e887"; 434 | } 435 | .lnr-chevron-down-circle:before { 436 | content: "\e888"; 437 | } 438 | .lnr-chevron-left-circle:before { 439 | content: "\e889"; 440 | } 441 | .lnr-chevron-right-circle:before { 442 | content: "\e88a"; 443 | } 444 | .lnr-crop:before { 445 | content: "\e88b"; 446 | } 447 | .lnr-frame-expand:before { 448 | content: "\e88c"; 449 | } 450 | .lnr-frame-contract:before { 451 | content: "\e88d"; 452 | } 453 | .lnr-layers:before { 454 | content: "\e88e"; 455 | } 456 | .lnr-funnel:before { 457 | content: "\e88f"; 458 | } 459 | .lnr-text-format:before { 460 | content: "\e890"; 461 | } 462 | .lnr-text-format-remove:before { 463 | content: "\e891"; 464 | } 465 | .lnr-text-size:before { 466 | content: "\e892"; 467 | } 468 | .lnr-bold:before { 469 | content: "\e893"; 470 | } 471 | .lnr-italic:before { 472 | content: "\e894"; 473 | } 474 | .lnr-underline:before { 475 | content: "\e895"; 476 | } 477 | .lnr-strikethrough:before { 478 | content: "\e896"; 479 | } 480 | .lnr-highlight:before { 481 | content: "\e897"; 482 | } 483 | .lnr-text-align-left:before { 484 | content: "\e898"; 485 | } 486 | .lnr-text-align-center:before { 487 | content: "\e899"; 488 | } 489 | .lnr-text-align-right:before { 490 | content: "\e89a"; 491 | } 492 | .lnr-text-align-justify:before { 493 | content: "\e89b"; 494 | } 495 | .lnr-line-spacing:before { 496 | content: "\e89c"; 497 | } 498 | .lnr-indent-increase:before { 499 | content: "\e89d"; 500 | } 501 | .lnr-indent-decrease:before { 502 | content: "\e89e"; 503 | } 504 | .lnr-pilcrow:before { 505 | content: "\e89f"; 506 | } 507 | .lnr-direction-ltr:before { 508 | content: "\e8a0"; 509 | } 510 | .lnr-direction-rtl:before { 511 | content: "\e8a1"; 512 | } 513 | .lnr-page-break:before { 514 | content: "\e8a2"; 515 | } 516 | .lnr-sort-alpha-asc:before { 517 | content: "\e8a3"; 518 | } 519 | .lnr-sort-amount-asc:before { 520 | content: "\e8a4"; 521 | } 522 | .lnr-hand:before { 523 | content: "\e8a5"; 524 | } 525 | .lnr-pointer-up:before { 526 | content: "\e8a6"; 527 | } 528 | .lnr-pointer-right:before { 529 | content: "\e8a7"; 530 | } 531 | .lnr-pointer-down:before { 532 | content: "\e8a8"; 533 | } 534 | .lnr-pointer-left:before { 535 | content: "\e8a9"; 536 | } 537 | -------------------------------------------------------------------------------- /day50/fonts/muli/Muli-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/javascript_interview_question_answers/21afd45bb0478733d9f38f9670969fb907d4af02/day50/fonts/muli/Muli-Bold.ttf -------------------------------------------------------------------------------- /day50/fonts/muli/Muli-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/javascript_interview_question_answers/21afd45bb0478733d9f38f9670969fb907d4af02/day50/fonts/muli/Muli-Regular.ttf -------------------------------------------------------------------------------- /day50/fonts/muli/Muli-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/javascript_interview_question_answers/21afd45bb0478733d9f38f9670969fb907d4af02/day50/fonts/muli/Muli-SemiBold.ttf -------------------------------------------------------------------------------- /day50/images/image-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/javascript_interview_question_answers/21afd45bb0478733d9f38f9670969fb907d4af02/day50/images/image-1.png -------------------------------------------------------------------------------- /day50/images/image-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/javascript_interview_question_answers/21afd45bb0478733d9f38f9670969fb907d4af02/day50/images/image-2.png -------------------------------------------------------------------------------- /day50/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | RegistrationForm 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 | 19 |
20 |

Registration Form

21 |
22 |
23 | 24 | 32 |
33 |
34 |
35 | 36 |
37 |
38 | 39 | 47 |
48 |
49 |
50 | 51 |
52 |
53 | 54 | 62 |
63 |
64 |
65 | 66 |
67 |
68 | 69 | 77 |
78 |
79 |
80 | 81 |
82 |
83 | 84 | 92 |
93 |
94 |
95 | 98 |
99 | 100 |
101 |
102 | 103 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /day50/js/main.js: -------------------------------------------------------------------------------- 1 | document.querySelector(".formSubmit").addEventListener("click", (e) => { 2 | e.preventDefault(); 3 | 4 | const username = document.getElementById("username").value; 5 | const email = document.getElementById("email").value; 6 | const phone = document.getElementById("phone").value; 7 | const password = document.getElementById("password").value; 8 | const c_password = document.getElementById("conformPassword").value; 9 | 10 | // Regular Expressions 11 | const usernameRegex = /^[A-za-z0-9 ]{3,20}$/; 12 | const passwordRegex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[\d])(?=.*[\W_]).{8,}$/; 13 | const emailRegex = 14 | /^[A-Za-z0-9]+(?:[.%_+][A-Za-z0-9]+)*@[A-Za-z0-9]+\.[A-Za-z]{2,}$/; 15 | const phoneRegex = /^[6-9][\d]{9}$/; 16 | 17 | // Clear previous errors 18 | document 19 | .querySelectorAll(".error") 20 | .forEach((curElem) => (curElem.textContent = "")); 21 | 22 | let isValid = true; 23 | 24 | // Validate Username 25 | if (!usernameRegex.test(username)) { 26 | document.getElementById("usernameError").textContent = 27 | "username is not valid"; 28 | isValid = false; 29 | } 30 | 31 | // Validate Password 32 | if (!passwordRegex.test(password)) { 33 | document.getElementById("passwordError").textContent = 34 | "Password must be at least 8 characters and include at least one uppercase letter, one lowercase letter, one number, and one special character."; 35 | isValid = false; 36 | } 37 | 38 | // Validate Email 39 | if (!emailRegex.test(email)) { 40 | document.getElementById("emailError").textContent = 41 | "Please enter a valid email address."; 42 | isValid = false; 43 | } 44 | 45 | // Validate Phone Number 46 | if (!phoneRegex.test(phone)) { 47 | document.getElementById("phoneError").textContent = 48 | "Phone number must be 10 digits long and start with 6, 7, 8, or 9."; 49 | isValid = false; 50 | } 51 | 52 | //Validate Conform Password 53 | if (c_password !== password) { 54 | document.getElementById("conformPasswordError").textContent = 55 | "Password is not matching."; 56 | isValid = false; 57 | } 58 | 59 | let userData = []; 60 | 61 | if (isValid) { 62 | let formClass = document.getElementsByClassName("form-control"); 63 | Array.from(formClass).forEach((curElem) => userData.push(curElem.value)); 64 | Array.from(formClass).forEach((curElem) => (curElem.value = "")); 65 | console.log(userData); 66 | alert("Registration Successful"); 67 | } 68 | }); 69 | -------------------------------------------------------------------------------- /jsproject/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Image Filter 7 | 8 | 9 | 10 |
11 | 17 |
18 | 19 |
20 |
21 | 26 |
27 | 28 |
29 | 34 |
35 | 36 |
37 | 42 |
43 | 44 |
45 | 50 |
51 | 52 |
53 | 58 |
59 |
60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /jsproject/index.js: -------------------------------------------------------------------------------- 1 | const tabs = document.querySelector(".tabs"); 2 | const gallery = document.querySelectorAll(".images"); 3 | 4 | tabs.addEventListener("click", (event) => { 5 | console.log(event.target.dataset.category); 6 | if (event.target.dataset.category !== undefined) { 7 | filterSearch(event.target.dataset.category); 8 | } 9 | }); 10 | 11 | const filterSearch = (value) => { 12 | gallery.forEach((curElem) => { 13 | console.log(curElem.dataset.category); 14 | if (curElem.dataset.category === value || value === "all") { 15 | curElem.style.display = "block"; 16 | } else { 17 | curElem.style.display = "none"; 18 | } 19 | }); 20 | }; 21 | -------------------------------------------------------------------------------- /jsproject/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: grid; 3 | place-items: center; 4 | max-width: 100%; 5 | background-color: #ecf0f1; 6 | height: auto; 7 | font-family: Urbanist; 8 | font-weight: bold; 9 | letter-spacing: 0.1rem; 10 | } 11 | 12 | .tabs { 13 | display: flex; 14 | gap: 3.2rem; 15 | text-transform: uppercase; 16 | cursor: pointer; 17 | list-style: none; 18 | margin-bottom: 3.2rem; 19 | } 20 | 21 | .menu_images { 22 | display: flex; 23 | gap: 3.2rem; 24 | flex-wrap: wrap; 25 | justify-content: center; 26 | } 27 | /* Add a transition property to the images */ 28 | img { 29 | width: 32rem; 30 | height: 100%; 31 | border-radius: 0.6rem; 32 | -webkit-border-radius: 0.6rem; 33 | -moz-border-radius: 0.6rem; 34 | -ms-border-radius: 0.6rem; 35 | -o-border-radius: 0.6rem; 36 | box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; 37 | } 38 | --------------------------------------------------------------------------------