├── .gitignore ├── 1-reverse-a-string.js ├── 2-capitalize-word.js ├── 3-css-display.md ├── 4-longest-word-length.js ├── 5-remove-falsy-values-in-array.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | /draft 2 | .history/* 3 | 4 | # Created by https://www.gitignore.io/api/macos 5 | # Edit at https://www.gitignore.io/?templates=macos 6 | 7 | ### macOS ### 8 | # General 9 | .DS_Store 10 | .AppleDouble 11 | .LSOverride 12 | 13 | # Icon must end with two \r 14 | Icon 15 | 16 | # Thumbnails 17 | ._* 18 | 19 | # Files that might appear in the root of a volume 20 | .DocumentRevisions-V100 21 | .fseventsd 22 | .Spotlight-V100 23 | .TemporaryItems 24 | .Trashes 25 | .VolumeIcon.icns 26 | .com.apple.timemachine.donotpresent 27 | 28 | # Directories potentially created on remote AFP share 29 | .AppleDB 30 | .AppleDesktop 31 | Network Trash Folder 32 | Temporary Items 33 | .apdisk 34 | 35 | # End of https://www.gitignore.io/api/macos 36 | -------------------------------------------------------------------------------- /1-reverse-a-string.js: -------------------------------------------------------------------------------- 1 | /** Reverse a String 2 | * 3 | * Reverse the provided string. 4 | * Your result must be a string. 5 | * 6 | * reverseString("hello") 7 | * Output: "olleh" 8 | * 9 | * reverseString("HoWdy") 10 | * Output: "ydWoH" 11 | * 12 | */ 13 | 14 | // ✅ Solution: github.com/samanthaming/web-basics-challenge 15 | // ✅ Try this challenge on freeCodeCamp.org 16 | 17 | function reverseString(str) { 18 | return str 19 | .split('') // split the string into an array of individual letters 20 | .reverse() // reverse the order of the array 21 | .join(''); // convert the array back to a string 22 | } 23 | 24 | // ============================ 25 | // Using Reduce 26 | // ============================ 27 | 28 | function reverseString2(str) { 29 | return [...str].reduce((accumulator, current) => { 30 | return current + accumulator; 31 | }); 32 | 33 | // OR One-Liner 34 | // return [...str].reduce((accumulator, current) => current + accumulator) 35 | } 36 | 37 | // ============================ 38 | // Using for-loop 39 | // ============================ 40 | 41 | function reverseString3(str) { 42 | let result = ''; 43 | 44 | for (let i = str.length - 1; i >= 0; i--) { 45 | result += str[i]; 46 | } 47 | 48 | return result; 49 | } 50 | 51 | // ============================ 52 | // Using sort 53 | // ============================ 54 | 55 | function reverseString4(str) { 56 | return str.split('').sort(() => 1).join(''); 57 | } 58 | -------------------------------------------------------------------------------- /2-capitalize-word.js: -------------------------------------------------------------------------------- 1 | /** Capitalize a Word 2 | * 3 | * Implement a function that takes a word and 4 | * return the same word with the first letter capitalized 5 | * 6 | * capitalize('hello') 7 | * Output: 'Hello' 8 | * 9 | * capitalize('GREAT') 10 | * Output: 'Great' 11 | * 12 | * capitalize('aWESOME') 13 | * Output: 'Awesome' 14 | * 15 | */ 16 | 17 | // ✅ Solution: github.com/samanthaming/web-basics-challenge 18 | 19 | function capitalize(word) { 20 | return ( 21 | word.charAt(0).toUpperCase() // Uppercase the first letter 22 | + word.slice(1).toLowerCase() // Lowercase the rest of the letters 23 | ); 24 | } 25 | 26 | // ============================ 27 | // Using Bracket Notation 28 | // ============================ 29 | 30 | function capitalize2(word) { 31 | return word[0].toUpperCase() + word.slice(1).toLowerCase(); 32 | } 33 | 34 | // ============================ 35 | // Using Substring 36 | // ============================ 37 | 38 | function capitalize3(word) { 39 | return word[0].toUpperCase() + word.substring(1).toLowerCase(); 40 | } 41 | 42 | // ============================ 43 | // Using 2 steps 44 | // ============================ 45 | 46 | function capitalize4(word) { 47 | const loweredCase = word.toLowerCase(); 48 | return word[0].toUpperCase() + loweredCase.slice(1); 49 | } 50 | 51 | // ============================ 52 | // Using Rest parameter 53 | // ============================ 54 | 55 | function capitalize5([first, ...rest]) { 56 | return first.toUpperCase() + 57 | rest.join('').toLowerCase(); 58 | } 59 | 60 | // ============================ 61 | // Using Map 62 | // ============================ 63 | 64 | function capitalize6(word) { 65 | return word 66 | .split('') 67 | .map((letter, index) => index ? letter.toLowerCase() : letter.toUpperCase()) 68 | .join('') 69 | } 70 | -------------------------------------------------------------------------------- /3-css-display.md: -------------------------------------------------------------------------------- 1 | # What's the difference between inline vs inline-block vs block? 2 | 3 | ## Display: Inline 4 | 5 | Displays an element as an inline element. Any height and width properties will have no effect 6 | 7 | ## Display: Inline Block 8 | 9 | Displays an element as an inline-level block container. You CAN set height and width values. 10 | 11 | ## Display: block 12 | 13 | Displays an element as a block element. It starts on a new line and takes up the whole width. 14 | 15 | ## Solution 16 | 17 | `inline` 18 | 19 | The element doesn’t start on a new line and only occupy just the width it requires. You can’t set the width or height. 20 | 21 | `inline-block` 22 | 23 | It’s formatted just like the inline element, where it doesn’t start on a new line. BUT, you can set width and height values. 24 | 25 | `block` 26 | 27 | It’s formatted just like the inline element, where it doesn’t start on a new line. BUT, you can set width and height values. 28 | -------------------------------------------------------------------------------- /4-longest-word-length.js: -------------------------------------------------------------------------------- 1 | /** Find the Length of the Longest Word 2 | * 3 | * Return the length of the longest word in a String. 4 | * Your response should be a number. 5 | * 6 | * longestWordLength("Web Basics Challenge") 7 | * Output: 9 8 | * 9 | */ 10 | 11 | function longestWordLength(str) { 12 | const arrLength = str.split(' ').map(s => s.length); 13 | return Math.max(...arrLength); 14 | } 15 | 16 | // ============================ 17 | // Using Reduce 18 | // ============================ 19 | function longestWordLength2(str) { 20 | return str.split(' ').reduce((maxNumber, current) => { 21 | return current.length > maxNumber ? current.length : maxNumber; 22 | }, 0); 23 | } 24 | 25 | // ============================ 26 | // Using Reverse 27 | // ============================ 28 | function longestLength3(str) { 29 | return str 30 | .split(' ') 31 | .map(s => s.length) 32 | .reverse()[0]; 33 | } 34 | -------------------------------------------------------------------------------- /5-remove-falsy-values-in-array.js: -------------------------------------------------------------------------------- 1 | /** How to All Remove Falsy Values in an Array 2 | * 3 | * Remove all falsy values from an array. 4 | * Falsy values in JavaScript are: 5 | * false, null, 0, "", undefined, and NaN 6 | * 7 | * removeFalsy([7, "ate", "", false, 9]) 8 | * Output: [7, "ate", 9] 9 | * 10 | */ 11 | 12 | // ============================ 13 | // Using !! 14 | // ============================ 15 | function removeFalsy(arr) { 16 | return arr.filter(a => !!a); 17 | } 18 | 19 | // ============================ 20 | // Using Boolean 21 | // ============================ 22 | 23 | function removeFalsy2(arr) { 24 | return arr.filter(a => Boolean(a)); 25 | } 26 | 27 | // ============================ 28 | // Using Boolean directly 29 | // ============================ 30 | 31 | function removeFalsy3(arr) { 32 | return arr.filter(a => Boolean); 33 | } 34 | 35 | // ============================ 36 | // Using Filter's Auto Coercion 37 | // ============================ 38 | 39 | function removeFalsy3(arr) { 40 | return arr.filter(a => a); 41 | } 42 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Web Basics Challenge 2 | 3 | Welcome! In this repo, you will find the **solutions** to my web basics challenges. 4 | 5 | ## Web Basics Series 6 | 7 | Web Basics is a series on essential programming topics every web developer should absolutely know! The challenge is part of my Web Basics Series that I started on [my Instagram](https://www.instagram.com/SamanthaMing/). 8 | 9 | Every lesson, I'll introduce a few important web development methods and provide examples on how to use them. At the end, you'll learned how to apply this knowledge in solving a web basics challenge. Exciting, right! 😄 10 | 11 | ## Algorithm Challenges 12 | 13 | Many companies will test you on your algorithm and data type knowledge. So if you’re going for an interview, make sure you practice! 14 | 15 | ## Code Challenge Websites 16 | 17 | These are some awesome websites with code challenges you can try. 18 | 19 | - [freeCodeCamp](https://www.freecodecamp.org/) 20 | - [CodeWars](https://www.codewars.com) 21 | - [LeetCode](https://leetcode.com/) 22 | - [HackerRank](https://www.hackerrank.com/) 23 | 24 | 25 | ## Say Hello 👋 26 | 27 | Follow me on social media for weekly JS, HTML, CSS tidbits! 28 | 29 | - Twitter: [@samantha_ming](https://twitter.com/samantha_ming) 30 | - Instagram: [@samanthaming](https://www.instagram.com/SamanthaMing/) 31 | - Facebook: [@hi.samanthaming](https://www.facebook.com/hi.samanthaming/) 32 | - Medium: [@samanthaming](https://medium.com/@samanthaming) 33 | --------------------------------------------------------------------------------