├── Caesar's Cipher ├── index.html ├── script.js └── style.css ├── Mobile_Number_validator ├── script.js ├── style.css └── validator.html ├── Palindrome_Checker ├── palindrome.html ├── script.js └── style.css ├── README.md └── Roman_Numeral_Converter ├── converter.html ├── script.js └── style.css /Caesar's Cipher/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Caesar Cipher 5 | 6 | 7 | 8 | 9 | 10 |
11 |

CAESAR'S CIPHER

12 |
13 |
14 |

Caesar's Cipher was named after Julius Caesar, who used this cipher to encrypt his private messages. The cipher takes each letter in a word and rotates it by a number.

For example, if the cipher was a ROT1 (rotate by 1 letter), then every a in the message would show up as a b.

This is a ROT13 cipher. It will encrypt your messages by rotating the letters by 13 characters.

15 |

16 |
17 | 18 |
19 | 20 |

21 |
22 |
23 |
24 |
25 |

Made with ❤️ by Adishi Sood

26 |
27 |
Connect with me:
28 |
29 | 40 |
41 |
42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /Caesar's Cipher/script.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | $("#encrypt").click(function(e){ 3 | e.preventDefault() 4 | function rot13(form) { // LBH QVQ VG! 5 | var newstr = ""; // establishes a new variable in scope 6 | for (var i = 0; i < form.length; i++){ //iterates through characters in str 7 | var charCode = form.charCodeAt(i); // sets new var charCode to each character in str 8 | if (charCode > 64 && charCode < 78) { // if the character is in first 13 of alpha 9 | newstr += String.fromCharCode(charCode+13); // set newstr equal to the character + 13 10 | } 11 | else if (charCode > 77 && charCode < 91){ // if the character is in last 13 of alpha 12 | newstr += String.fromCharCode(charCode-13); 13 | } 14 | else { 15 | newstr += form[i]; 16 | } 17 | } 18 | return newstr; 19 | } 20 | var text = $("#text").val(); 21 | var upCase = text.toUpperCase(); 22 | var encrypted = rot13(upCase); 23 | $("#output").html(encrypted); 24 | }) 25 | }) 26 | -------------------------------------------------------------------------------- /Caesar's Cipher/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | background-color: #8A2BE2; 3 | font-family: cursive; 4 | 5 | } 6 | .change 7 | { 8 | width:70vw; 9 | padding-left:30%; 10 | } 11 | #encrypt 12 | { 13 | color:#8A2BE2; 14 | } 15 | h1{ 16 | font-size: 2rem; 17 | color: #fff; 18 | } 19 | p{ 20 | color: #fff; 21 | } 22 | .main{ 23 | display: flex; 24 | flex-direction: column; 25 | align-items: center; 26 | /*justify-content: center;*/ 27 | padding: 10px; 28 | color:#fff; 29 | 30 | } 31 | button{ 32 | color:black; 33 | background-color: white; 34 | } 35 | div 36 | { 37 | background-color: #8A2BE2; 38 | } 39 | input{ 40 | outline: 0; 41 | width: 40vw; 42 | margin: 10px 0; 43 | height: 50px; 44 | padding: 5px; 45 | padding-left: 20px; 46 | border-color: white; 47 | border-radius: 5px; 48 | background-color: #8A2BE2; 49 | font-size: 1.5rem; 50 | text-decoration-color:white; 51 | text-align: center; 52 | font-family: cursive; 53 | } 54 | ::placeholder{ 55 | color: white; 56 | } 57 | @media(max-width: 500px) { 58 | body{ 59 | padding-top: 20px; 60 | } 61 | h1{ 62 | font-size: 2rem; 63 | } 64 | input{ 65 | width: 40vw; 66 | font-size: 2rem; 67 | } 68 | 69 | } 70 | -------------------------------------------------------------------------------- /Mobile_Number_validator/script.js: -------------------------------------------------------------------------------- 1 | function mobileCheck(str) { 2 | let bracketCheck = /[(]\d{3}[)]/; 3 | let checkBeginning = /^([(]\d{3}[)])/; 4 | let otherCharsCheck = /^[-]|[^\s-\d)(]/; 5 | let space = /[\s-]/g; 6 | let countryCodeCheck = /^1/; 7 | let simple = str.replace(space, ''); 8 | if (otherCharsCheck.test(str)) { 9 | return false; 10 | } else { 11 | if (simple.length === 13 12 | && countryCodeCheck.test(simple) 13 | && bracketCheck.test(simple)) { 14 | return true; 15 | } else if (simple.length === 12 16 | && checkBeginning.test(simple)) { 17 | return true; 18 | } else if (simple.length === 11 19 | && countryCodeCheck.test(simple)) { 20 | return true; 21 | } else if (simple.length === 10) { 22 | return true; 23 | } 24 | } return false; 25 | } 26 | //*************// 27 | // DOM 28 | const input = document.getElementById('input'); 29 | const buttons = document.querySelectorAll('#num-btn'); 30 | const resultsDiv = document.getElementById('results'); 31 | const phoneBtn = document.getElementById('phone-button'); 32 | 33 | // add functionality to each number button 34 | buttons.forEach((button) => { 35 | button.addEventListener('click', (e) => { 36 | let number; 37 | // get info from parent div if span or p tag clicked on 38 | if (e.target.tagName == 'SPAN' || e.target.tagName == 'P') { 39 | number = e.target.parentElement.attributes.number.value; 40 | } else { 41 | number = e.target.attributes.number.value; 42 | } 43 | input.value += number; 44 | }); 45 | }); 46 | 47 | function displayResults(input) { 48 | let answer = mobileCheck(input); 49 | if (answer) { 50 | resultsDiv.innerHTML = 'Valid phone number! 😃';} 51 | else { 52 | resultsDiv.innerHTML = 'Invalid phone number! 😕';} 53 | } 54 | 55 | // press enter to submit 56 | input.addEventListener('keydown', (e) => { 57 | if (e.keyCode === 13) { 58 | displayResults(e.target.value); 59 | } 60 | }); 61 | 62 | // click phone icon to submit 63 | phoneBtn.addEventListener('click', () => { 64 | displayResults(input.value); 65 | }); 66 | -------------------------------------------------------------------------------- /Mobile_Number_validator/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 100vh; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | font-family: cursive; 7 | color: #fff; 8 | } 9 | * { 10 | padding: 0; 11 | margin: 0; 12 | } 13 | 14 | html { 15 | box-sizing: border-box; 16 | } 17 | .container { 18 | height: 500px; 19 | width: 290px; 20 | background-color: black; 21 | border: 5px solid silver; 22 | border-radius: 20px; 23 | display: grid; 24 | grid-template-rows: 5% 25% 1fr 10%; 25 | } 26 | .top { 27 | grid-row: 1 / 2; 28 | display: flex; 29 | justify-content: space-between; 30 | align-items: center; 31 | padding: 0 10px; 32 | font-size: 13px; 33 | font-weight: 400; 34 | position: relative; 35 | } 36 | 37 | .top i { 38 | font-size: 10px; 39 | } 40 | 41 | .speaker { 42 | width: 50px; 43 | height: 7px; 44 | background-color: #333; 45 | border-radius: 10000px; 46 | position: absolute; 47 | left: 50%; 48 | transform: translateX(-50%); 49 | } 50 | 51 | .camera { 52 | width: 7px; 53 | height: 7px; 54 | background-color: #333; 55 | border-radius: 50%; 56 | position: absolute; 57 | left: 62%; 58 | } 59 | 60 | .top .fa-battery-three-quarters { 61 | font-size: 14px; 62 | } 63 | 64 | .top .fa-location-arrow { 65 | transform: translateY(-1px); 66 | } 67 | 68 | /*************************/ 69 | .input-results { 70 | grid-row: 2 / 3; 71 | display: flex; 72 | flex-direction: column; 73 | justify-content: center; 74 | align-items: center; 75 | } 76 | 77 | #input { 78 | width: 75%; 79 | height: 40px; 80 | text-align: center; 81 | font-size: 22px; 82 | background-color: #000; 83 | color: #fff; 84 | border: 1px solid white; 85 | outline: none; 86 | } 87 | 88 | #input::placeholder { 89 | font-size: 12px; 90 | } 91 | 92 | #results { 93 | margin-top: 5px; 94 | text-align: center; 95 | font-size: 12px; 96 | color: royalblue; 97 | display: flex; 98 | flex-direction: column; 99 | } 100 | 101 | /*************************/ 102 | .buttons { 103 | grid-row: 3 / 4; 104 | display: grid; 105 | grid-template-columns: repeat(3, 1fr); 106 | justify-items: center; 107 | align-items: center; 108 | padding: 0 10%; 109 | margin-bottom: 10px; 110 | } 111 | 112 | .button { 113 | height: 52px; 114 | width: 52px; 115 | border-radius: 50%; 116 | display: flex; 117 | flex-direction: column; 118 | justify-content: center; 119 | align-items: center; 120 | background-color: #444; 121 | font-size: 22px; 122 | font-weight: 300; 123 | transition: all 0.2s; 124 | } 125 | 126 | .button:hover, 127 | .button:active { 128 | cursor: pointer; 129 | background-color: rgba(255, 255, 255, 0.8); 130 | } 131 | 132 | .button.phone-button:hover, 133 | .button.phone-button:active { 134 | background: rgba(50, 205, 50, 0.8); 135 | } 136 | 137 | .button span { 138 | font-size: 8px; 139 | letter-spacing: 2px; 140 | padding-left: 2px; 141 | } 142 | 143 | .button .fa-asterisk { 144 | font-size: 16px; 145 | } 146 | 147 | .button.phone-button { 148 | grid-column: 2 / 3; 149 | background-color: limegreen; 150 | } 151 | 152 | /*************************/ 153 | .bottom { 154 | grid-row: 4 / 5; 155 | display: flex; 156 | justify-content: space-evenly; 157 | margin-top: 10px; 158 | color: #aaa; 159 | } 160 | 161 | .item { 162 | display: flex; 163 | flex-direction: column; 164 | justify-content: space-evenly; 165 | align-items: center; 166 | } 167 | 168 | .item i { 169 | font-size: 20px; 170 | } 171 | 172 | .item span { 173 | font-size: 10px; 174 | } 175 | 176 | .buttons { 177 | display: grid; 178 | grid-template-columns: repeat(3, 1fr); 179 | } 180 | 181 | .c { 182 | height: 5px; 183 | width: 5px; 184 | margin: 1px; 185 | background-color: royalblue; 186 | border-radius: 50%; 187 | } 188 | 189 | .keypad span { 190 | color: royalblue; 191 | } 192 | -------------------------------------------------------------------------------- /Mobile_Number_validator/validator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Mobile Number Validator 9 | 10 |
11 |
12 | 5:00PM  13 |
14 |
15 |  LTE  16 |
17 |
18 | 19 |

20 | Use your keyboard or the keypad belowThen press enter or call 21 |

22 |
23 |
24 |

1

25 |
26 |

2

27 | ABC 28 |
29 |
30 |

3

31 | DEF 32 |
33 |
34 |

4

35 | GHI 36 |
37 |
38 |

5

39 | JKL 40 |
41 |
42 |

6

43 | MNO 44 |
45 |
46 |

7

47 | PQRS 48 |
49 |
50 |

8

51 | TUV 52 |
53 |
54 |

9

55 | WXYZ 56 |
57 |
58 |
59 |

0

60 | 61 |
62 |
#
63 |
64 | 65 |
66 |
67 |
68 |
69 | Contacts 70 |
71 |
72 | Recents 73 |
74 | 75 | 76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 | Keypad 89 |
90 |
91 | Favorites 92 |
93 | 94 |
95 | Voicemail 96 |
97 |
98 |
99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /Palindrome_Checker/palindrome.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Palindrome Checker 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 |

PALINDROME CHECKER

16 |
17 |

A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring 18 | punctuation, case, and spacing.

19 |
20 | 21 |

22 |
23 |
24 |
25 |
26 |

Made with ❤️ by Adishi Sood

27 |
28 |
Connect with me:
29 |
30 |
31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
41 |
42 | 43 | 44 | -------------------------------------------------------------------------------- /Palindrome_Checker/script.js: -------------------------------------------------------------------------------- 1 | function palindrome(){ 2 | var num = document.querySelector(".inputbox").value.toUpperCase(); 3 | // The code that organises and checks if it is a palindrome 4 | var alpha = num 5 | .split('') 6 | .reverse() 7 | .join(''); 8 | // This is an if statement for when the letters are less than or equal to 2 and an else if statement for when the letters are greater than or equal to 3 and whether or not num is strictly equal to alpha 9 | if(num.length<=2){ 10 | document.querySelector(".list").innerHTML = "TYPE MORE VALUES" 11 | }else if(num.length>=3 && num===alpha){ 12 | document.querySelector(".list").innerHTML =`"${num}" is a palindrome!` 13 | }else{ 14 | document.querySelector(".list").innerHTML =`"${num}" is not a palindrome!` 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Palindrome_Checker/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding:0; 3 | margin:0; 4 | } 5 | body{ 6 | background-color: #202020; 7 | margin: 60px auto; 8 | text-align:center; 9 | } 10 | h1{ 11 | font-family: cursive; 12 | padding-top:100px; 13 | color:#f6f8fa; 14 | font-weight:100; 15 | } 16 | h3{ 17 | font-weight:lighter; 18 | font-family: cursive; 19 | padding-top:10px; 20 | color:#f6f8fa; 21 | font-weight:100; 22 | word-spacing:1; 23 | } 24 | .inputbox{ 25 | border:1px solid #f6f8fa; 26 | padding:10px; 27 | text-indent:5px; 28 | width:450px; 29 | background-color:#202020; 30 | margin:10px; 31 | text-transform:uppercase; 32 | color:#f6f8fa; 33 | font-weight:lighter; 34 | } 35 | .list{ 36 | color:#f6f8fa; 37 | font-size:20px; 38 | padding-top:50px; 39 | } 40 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript Projects 🚧 2 | While going through the JavaScript Algorithms and Data Structures Certification curriculum I had to write various functions. 3 | So, I decided to take this challenge a bit further and implement a UI for it and dive more into testing. 4 | 5 | ## Palindrome_Checker 6 | A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing (e.g. mom, dad, racecar, madam). A palindrome checker checks if a string is a palindrome or not. 7 | 8 | ## Mobile_Number_Validator 📱 9 | Mobile number validation is the process of checking if a mobile number is accurate. It lets you find out if the mobile number you have for a business contact is active and able to receive calls or not. 10 | 11 | ## Caesar_Cipher 🔑 12 | The Caesar Cipher technique is one of the earliest and simplest method of encryption technique. It’s simply a type of substitution cipher, i.e., each letter of a given text is replaced by a letter some fixed number of positions down the alphabet. For example, if the Cipher was a ROT1 (rotate by 1 letter), then every a in the message would show up as a b. I have made a ROT13 cipher, it will encrypt your messages by rotating the letters by 13 characters. 13 | 14 | ## Roman_Numeral_Converter 🔢 15 | Roman numerals are a number system developed in ancient Rome where letters represent numbers. The modern use of Roman numerals involves the letters I, V, X, L, C, D, and M. I made a converter which can convert numbers from 1 to 3999 into Roman numerals or viceversa. 16 | 17 | ## DrumKit 🥁 18 | The point of this project is to have each key, when pressed, make a corresponding drum noise. It also uses CSS transitions and animations to make the project more interactive to the user. 19 | 20 | 21 | # Live demo 22 | [PalindromeChecker](https://codepen.io/adishisood/full/JjbJOda) 23 | 24 | [MobileNumberValidator](https://codepen.io/adishisood/full/wvoeZYX) 25 | 26 | [CaesarCipher](https://codepen.io/adishisood/full/VwmWRWO) 27 | 28 | [RomanNumeralConverter](https://codepen.io/adishisood/full/xxRrWgy) 29 | 30 | [DrumKit](https://codepen.io/adishisood/full/GRrORzr) 31 | -------------------------------------------------------------------------------- /Roman_Numeral_Converter/converter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Roman Numeral Conversion 10 | 11 | 12 |
13 |

ROMAN NUMERAL CONVERTER

14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 |

Made with ❤️ by Adishi Sood

22 |
23 |
Connect with me:
24 |
25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
36 |
37 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Roman_Numeral_Converter/script.js: -------------------------------------------------------------------------------- 1 | const arabicInput = document.getElementById("arabicInput"); 2 | const romanInput = document.getElementById("romanInput"); 3 | 4 | arabicInput.addEventListener("input",(e)=>{ 5 | romanInput.value = arabicToRoman(e.target.value); 6 | }); 7 | romanInput.addEventListener("input",(e)=>{ 8 | arabicInput.value = romanToArabic(e.target.value); 9 | 10 | }); 11 | 12 | function arabicToRoman(number){ 13 | let roman = ""; 14 | const romanNumList = {M:1000,CM:900, D:500,CD:400, C:100, XC:90,L:50, XV: 40, X:10, IX:9, V:5, IV:4, I:1}; 15 | let a; 16 | if(number > 3999) 17 | return "Enter a number between 1 and 3999"; 18 | else{ 19 | for(let key in romanNumList){ 20 | a = Math.floor(number / romanNumList[key]); 21 | if(a >= 0){ 22 | for(let i = 0; i < a; i++){ 23 | roman += key; 24 | } 25 | } 26 | number = number % romanNumList[key]; 27 | } 28 | } 29 | 30 | return roman; 31 | } 32 | function romanToArabic(romanNumber){ 33 | romanNumber = romanNumber.toUpperCase(); 34 | const romanNumList = ["CM","M","CD","D","XC","C","XL","L","IX","X","IV","V","I"]; 35 | const corresp = [900,1000,400,500,90,100,40,50,9,10,4,5,1]; 36 | let index = 0, num = 0; 37 | for(let rn in romanNumList){ 38 | index = romanNumber.indexOf(romanNumList[rn]); 39 | while(index != -1){ 40 | num += parseInt(corresp[rn]); 41 | romanNumber = romanNumber.replace(romanNumList[rn],"-"); 42 | index = romanNumber.indexOf(romanNumList[rn]); 43 | } 44 | } 45 | return num; 46 | } 47 | -------------------------------------------------------------------------------- /Roman_Numeral_Converter/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0px auto; 3 | padding: 0px auto; 4 | box-sizing: border-box; 5 | font-size: 10px; 6 | font-family: cursive; 7 | background-color: #202020; 8 | } 9 | .main{ 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | /*justify-content: center;*/ 14 | padding: 10px; 15 | } 16 | h1{ 17 | font-size: 2rem; 18 | color: #fff; 19 | } 20 | input{ 21 | outline: 0; 22 | width: 50vw; 23 | margin: 10px 0; 24 | height: 50px; 25 | padding: 5px; 26 | padding-left: 20px; 27 | border-style: none; 28 | border-radius: 5px; 29 | background: rgba(138,138,138,.4); 30 | font-size: 1.5rem; 31 | color:ghostwhite; 32 | text-align: center; 33 | font-family: cursive; 34 | } 35 | ::placeholder{ 36 | color: #fff; 37 | } 38 | @media(max-width: 500px) { 39 | body{ 40 | padding-top: 20px; 41 | } 42 | h1{ 43 | font-size: 2rem; 44 | } 45 | input{ 46 | width: 70vw; 47 | font-size: 2rem; 48 | } 49 | } 50 | --------------------------------------------------------------------------------