├── Ara-Roman ├── css │ └── style.css ├── icon │ └── button-close.svg ├── index.html └── js │ ├── app.js │ └── pop.js ├── BMI-Calculator-main ├── README.md ├── css │ └── style.css ├── favicon.png ├── index.html └── js │ └── bmi_converter.js ├── Binary-Tree-Visualizer ├── index.html ├── js │ ├── binaryTree.js │ ├── d3js.js │ ├── draw.js │ └── index.js └── style.css ├── Calc-JS-main ├── README.md ├── css │ └── main.css ├── index.html └── js │ ├── jquery-3.2.1.min.js │ └── main.js ├── Calendar ├── README.md ├── cal.css ├── calendar.js ├── index.html └── style.css ├── Countdown timer ├── Readme.MD ├── countdown.js ├── index.html └── style.css ├── Custom Icecream Generator ├── index.html ├── script.js └── style.css ├── DD-Animalia ├── assets │ ├── css │ │ └── styles.css │ ├── img │ │ ├── img1.jpg │ │ ├── img2.jpg │ │ ├── img3.jpg │ │ ├── img4.jpg │ │ ├── img5.jpg │ │ ├── img6.jpg │ │ └── img7.jpg │ ├── js │ │ └── main.js │ └── scss │ │ └── styles.scss └── index.html ├── Expense-Tracker-main ├── README.md ├── index.html ├── script.js └── style.css ├── GameOfLife ├── gol.js ├── index.html └── style.css ├── Go-Save-It ├── LICENSE ├── README.md ├── css │ ├── bootstrap.min.css │ └── style.css ├── fonts │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff │ └── glyphicons-halflings-regular.woff2 ├── index.html ├── js │ ├── bootstrap.min.js │ └── main.js └── logo.png ├── Hangman ├── index.html ├── script.js └── style.css ├── IP-Talashi ├── css │ ├── _fonts.scss │ ├── _global.scss │ ├── _header.scss │ ├── _map.scss │ ├── _mixins.scss │ ├── _variables.scss │ ├── styles.css │ ├── styles.css.map │ └── styles.scss ├── images │ ├── favicon-32x32.png │ ├── icon-arrow.svg │ ├── icon-location.svg │ └── pattern-bg.png ├── index.html └── js │ └── mapbox.js ├── Image ASCII ├── index.html ├── logo.gif └── resources │ ├── css │ └── style.css │ └── js │ └── script.js ├── Image Editor ├── favicon.ico ├── index.html ├── script.js └── style.css ├── Img2Pdf ├── index.css ├── index.html └── index.js ├── Interest-Calculator-main ├── README.md ├── index.css ├── index.html └── index.js ├── JS CRUD ├── index.html ├── script.js └── styles.css ├── JS-drum ├── Readme.MD ├── img │ └── back.jpg ├── index.html ├── sounds │ ├── boom.wav │ ├── clap.wav │ ├── hihat.wav │ ├── kick.wav │ ├── openhat.wav │ ├── ride.wav │ ├── snare.wav │ ├── tink.wav │ └── tom.wav └── style.css ├── JavaScript QUiz ├── dist │ ├── css │ │ └── style.css │ └── js │ │ ├── site.js │ │ ├── start.js │ │ ├── timer.js │ │ └── userInfo.js ├── end.html ├── index.html └── quiz.html ├── KeyPress ├── index.html └── style.css ├── M_Box ├── README.md ├── index.html ├── s1.png ├── script.js └── style.css ├── Master-Piece ├── README.md ├── favicon.ico ├── index.html ├── jscolor.js ├── script.js └── style.css ├── MausamDoot ├── Readme.MD ├── index.html ├── script.js └── style.css ├── Maze Game ├── README.md ├── index.html ├── script.js └── style.css ├── Meme Generator ├── index.html ├── script.js └── style.css ├── Memory Game ├── Assets │ ├── Audio │ │ ├── creepy.mp3 │ │ ├── flip.wav │ │ ├── gameOver.wav │ │ ├── match.wav │ │ └── victory.wav │ ├── Cursors │ │ ├── Ghost.cur │ │ └── GhostHover.cur │ ├── Fonts │ │ ├── Creepy.woff │ │ ├── Creepy.woff2 │ │ ├── Lunacy.woff │ │ └── Lunacy.woff2 │ └── Images │ │ ├── Bat.png │ │ ├── Bones.png │ │ ├── CardBack.png │ │ ├── Cauldron.png │ │ ├── Cobweb.png │ │ ├── CobwebGrey.png │ │ ├── Dracula.png │ │ ├── Eye.png │ │ ├── Ghost.png │ │ ├── Pumpkin.png │ │ ├── Skull.png │ │ └── Spider.png ├── index.html ├── script.js └── styles.css ├── Number Converter ├── index.html ├── script.js └── styles.css ├── Pacman ├── images │ ├── ghost.png │ ├── pac0.png │ ├── pac1.png │ ├── pac2.png │ ├── pinkDot.png │ ├── scaredGhost.png │ ├── scaredGhost2.png │ ├── wall.png │ └── yellowDot.png ├── index.html ├── sounds │ ├── eat_ghost.wav │ ├── gameOver.wav │ ├── gameWin.wav │ ├── power_dot.wav │ └── waka.wav └── src │ ├── Enemy.js │ ├── Game.js │ ├── MovingDirection.js │ ├── Pacman.js │ └── TileMap.js ├── PollIt ├── index.html ├── script.js └── style.css ├── PoolGame ├── Ball.js ├── Game.js ├── GameLoop.js ├── KeyHandler.js ├── Light.js ├── Main.js ├── MeshAnimationMaterial.js ├── ObjMesh.js ├── Player.js ├── Scene.js ├── SkyBox.js ├── Sound.js ├── gh-img │ └── pool.png ├── img │ ├── favicon.png │ ├── skybox │ │ ├── bridge │ │ │ ├── negx.jpg │ │ │ ├── negy.jpg │ │ │ ├── negz.jpg │ │ │ ├── posx.jpg │ │ │ ├── posy.jpg │ │ │ ├── posz.jpg │ │ │ ├── skybox.png │ │ │ └── skyboxsun5deg2.png │ │ ├── clouds │ │ │ ├── negx.jpg │ │ │ ├── negy.jpg │ │ │ ├── negz.jpg │ │ │ ├── posx.jpg │ │ │ ├── posy.jpg │ │ │ └── posz.jpg │ │ ├── space │ │ │ ├── negx.jpg │ │ │ ├── negy.jpg │ │ │ ├── negz.jpg │ │ │ ├── posx.jpg │ │ │ ├── posy.jpg │ │ │ └── posz.jpg │ │ └── sunset │ │ │ ├── negx.jpg │ │ │ ├── negy.jpg │ │ │ ├── negz.jpg │ │ │ ├── posx.jpg │ │ │ ├── posy.jpg │ │ │ └── posz.jpg │ └── textures │ │ ├── balls │ │ ├── 1.png │ │ ├── 10.png │ │ ├── 11.png │ │ ├── 12.png │ │ ├── 13.png │ │ ├── 14.png │ │ ├── 15.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ ├── 6.png │ │ ├── 7.png │ │ ├── 8.png │ │ ├── 9.png │ │ └── a │ │ │ ├── 1.jpg │ │ │ ├── 10.jpg │ │ │ ├── 11.jpg │ │ │ ├── 13.jpg │ │ │ ├── 14.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ ├── 5.jpg │ │ │ ├── 6.jpg │ │ │ └── 9.jpg │ │ ├── camera.png │ │ ├── cloth©.jpg │ │ ├── floorwood©.jpg │ │ ├── gold.jpg │ │ ├── kat │ │ ├── frame_0_delay-0.04s.png │ │ ├── frame_10_delay-0.04s.png │ │ ├── frame_11_delay-0.04s.png │ │ ├── frame_12_delay-0.04s.png │ │ ├── frame_13_delay-0.04s.png │ │ ├── frame_14_delay-0.04s.png │ │ ├── frame_15_delay-0.04s.png │ │ ├── frame_16_delay-0.04s.png │ │ ├── frame_17_delay-0.04s.png │ │ ├── frame_18_delay-0.04s.png │ │ ├── frame_19_delay-0.04s.png │ │ ├── frame_1_delay-0.04s.png │ │ ├── frame_20_delay-0.04s.png │ │ ├── frame_21_delay-0.04s.png │ │ ├── frame_22_delay-0.04s.png │ │ ├── frame_23_delay-0.04s.png │ │ ├── frame_24_delay-0.04s.png │ │ ├── frame_25_delay-0.04s.png │ │ ├── frame_26_delay-0.04s.png │ │ ├── frame_27_delay-0.04s.png │ │ ├── frame_28_delay-0.04s.png │ │ ├── frame_29_delay-0.04s.png │ │ ├── frame_2_delay-0.04s.png │ │ ├── frame_30_delay-0.04s.png │ │ ├── frame_31_delay-0.04s.png │ │ ├── frame_32_delay-0.04s.png │ │ ├── frame_33_delay-0.04s.png │ │ ├── frame_34_delay-0.04s.png │ │ ├── frame_35_delay-0.04s.png │ │ ├── frame_36_delay-0.04s.png │ │ ├── frame_37_delay-0.04s.png │ │ ├── frame_38_delay-0.04s.png │ │ ├── frame_39_delay-0.04s.png │ │ ├── frame_3_delay-0.04s.png │ │ ├── frame_4_delay-0.04s.png │ │ ├── frame_5_delay-0.04s.png │ │ ├── frame_6_delay-0.04s.png │ │ ├── frame_7_delay-0.04s.png │ │ ├── frame_8_delay-0.04s.png │ │ └── frame_9_delay-0.04s.png │ │ ├── wood©.jpg │ │ └── yourewinner.png ├── index.html ├── main.css ├── obj │ ├── table │ │ ├── floor.c4d │ │ ├── floor.mtl │ │ ├── floor.obj │ │ ├── legs.c4d │ │ ├── legs.mtl │ │ ├── legs.obj │ │ ├── poolfloor.c4d │ │ ├── poolpoints.mtl │ │ ├── poolpoints.obj │ │ ├── woodwalls.c4d │ │ ├── woodwalls.mtl │ │ └── woodwalls.obj │ ├── trophy.mtl │ └── trophy.obj ├── script.js ├── sound │ ├── hit.mp3 │ └── pocket.mp3 └── three │ ├── OBJLoader.js │ ├── OrbitControls.js │ ├── Stats.js │ ├── Tween.js │ ├── dat.gui.min.js │ ├── three.js │ └── three.min.js ├── Quiz App ├── index.html ├── script.js └── style.css ├── Quotetalks ├── README.md ├── favicon.png ├── index.html ├── script.js └── style.css ├── README.md ├── Seat Booking ├── index.html ├── script.js └── style.css ├── Sorting-Visualization ├── index.html ├── js_files │ ├── bubble.js │ ├── insertion.js │ ├── merge.js │ ├── quick.js │ ├── selection.js │ └── sorting.js └── style.css ├── Stone-Paper-Scissors-Game ├── Readme.MD ├── app.js ├── assets │ ├── paper.png │ ├── rock.png │ └── scissors.png ├── index.html └── style.css ├── Sudoku-JS ├── app.css ├── index.html └── static │ ├── images │ └── icon.png │ └── js │ ├── app.js │ ├── constant.js │ └── sudoku.js ├── T2S ├── index.html ├── script.js └── style.css ├── TasvirOP ├── README.md ├── index.html ├── photo.png ├── script.js └── style.css ├── Theme Changer ├── css │ └── style.css ├── images │ ├── about-img.jpg │ ├── g-1.jpg │ ├── g-2.jpg │ ├── g-3.jpg │ ├── g-4.jpg │ ├── g-5.jpg │ ├── g-6.jpg │ ├── g-7.jpg │ ├── g-8.jpg │ ├── g-9.jpg │ ├── pic-1.png │ ├── pic-2.png │ ├── pic-3.png │ ├── pic-4.png │ ├── slide-1.jpg │ ├── slide-2.jpg │ ├── slide-3.jpg │ ├── slide-4.jpg │ ├── slide-5.jpg │ └── slide-6.jpg ├── index.html └── js │ └── script.js ├── Timeliner ├── README.md ├── index.html ├── script.js └── style.css ├── Todo-List ├── bars-icon.svg ├── index.html ├── script.js └── style.css ├── Virtual Piano ├── Readme.MD ├── app.js ├── assets │ ├── background.jpg │ └── background1.jpg ├── index.html ├── sounds │ ├── key1.mp3 │ ├── key10.mp3 │ ├── key11.mp3 │ ├── key12.mp3 │ ├── key13.mp3 │ ├── key14.mp3 │ ├── key15.mp3 │ ├── key16.mp3 │ ├── key17.mp3 │ ├── key18.mp3 │ ├── key19.mp3 │ ├── key2.mp3 │ ├── key20.mp3 │ ├── key21.mp3 │ ├── key22.mp3 │ ├── key23.mp3 │ ├── key24.mp3 │ ├── key3.mp3 │ ├── key4.mp3 │ ├── key5.mp3 │ ├── key6.mp3 │ ├── key7.mp3 │ ├── key8.mp3 │ └── key9.mp3 └── style.css ├── Voice Visualizer ├── index.html ├── script.js └── style.css ├── Waqt ├── README.md ├── clock.js ├── clock.png ├── index.html ├── s3.jpg └── style.css ├── Word-count └── index.html ├── chitchat ├── bot-mini.png ├── bot.png ├── constants.js ├── index.html ├── index.js ├── speech.js ├── style.css └── user.png ├── dictionary ji ├── app.js ├── index.html └── style.css ├── node-graphs-master ├── bootstrap.min.css ├── img │ ├── add-line.png │ ├── add-node.pdn │ ├── add-node.png │ ├── bg.png │ ├── delete-line.pdn │ ├── delete-line.png │ ├── delete-node.pdn │ ├── delete-node.png │ ├── favicon.PNG │ ├── favicon.ico │ ├── move-node.pdn │ └── move-node.png ├── index.html ├── js │ ├── algorithms.js │ ├── jquery-3.4.1.slim.min.js │ └── scripts.js └── styles.css ├── pie-chart-maker ├── index.html ├── script.js └── style.css ├── space-explorer animation ├── css │ ├── large.css │ ├── main.css │ └── medium.css ├── fonts │ ├── logo.ttf │ └── nagasaki.ttf ├── img │ ├── 01.png │ ├── 02.png │ ├── Globe.svg │ ├── Launch.svg │ ├── astronaut.png │ ├── falcon9-render_same_size_file-hover.png │ ├── falcon9-render_same_size_file.png │ ├── launch-background.png │ ├── reusable-rocket.png │ ├── section3-bg--large.jpg │ ├── section3-bg.jpg │ ├── ship-launching.jpg │ ├── space-bg-2.png │ ├── space-bg.png │ ├── space-station.png │ ├── star.png │ ├── starry-night.jpg │ ├── starry.jpg │ ├── wave-white.png │ └── wave.png ├── index.html └── js │ ├── app.js │ ├── header.js │ ├── star.png │ └── three.min.js └── tic-tac-toe-js-multiplayer ├── css └── master.css ├── index.html └── js └── main.js /Ara-Roman/icon/button-close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /Ara-Roman/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Roman Numeral Conversion 14 | 15 | 16 | 17 |
18 |
19 | 20 |

Instructions

21 |

To convert Roman numerals, type a number from 1 to 9999.
To convert to Arabic numerals, type a valid alphabets.

22 |
23 |
24 | 25 |
26 |

Roman Numeral Converter

27 | 28 |
29 | 30 | 31 |
32 | 34 | 35 | 37 | 38 | -------------------------------------------------------------------------------- /Ara-Roman/js/app.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 > 9999) 17 | return "Enter a number between 1 and 9999"; 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 | } -------------------------------------------------------------------------------- /Ara-Roman/js/pop.js: -------------------------------------------------------------------------------- 1 | const callButton = document.querySelector('.popup-button'); 2 | const popup = document.querySelector('.popup'); 3 | const closeButton = popup.querySelector('.close-button'); 4 | 5 | popupToggle = () => { 6 | popup.classList.toggle('popup_opened'); 7 | } 8 | 9 | closeOnBlack = (event) => { 10 | if (event.target === event.currentTarget) popupToggle(); 11 | } 12 | 13 | callButton.addEventListener('click', popupToggle); 14 | closeButton.addEventListener('click', popupToggle); 15 | popup.addEventListener('click', closeOnBlack); -------------------------------------------------------------------------------- /BMI-Calculator-main/README.md: -------------------------------------------------------------------------------- 1 | # BMI-Calculator 2 | 3 | ![ss](https://user-images.githubusercontent.com/64016811/137612659-e840b51e-6cbb-4ce9-9ac1-b96b26ee4d47.png) 4 | ![ss2](https://user-images.githubusercontent.com/64016811/137612661-c2c4a9e7-7821-479b-a195-a8c1ec79d1d5.png) 5 | -------------------------------------------------------------------------------- /BMI-Calculator-main/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/BMI-Calculator-main/favicon.png -------------------------------------------------------------------------------- /Binary-Tree-Visualizer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Binary Tree 10 | 11 | 12 | 13 | 14 |
15 |

Binary Tree Visualization

16 | 18 | 19 |
20 |

Made by : Mainak

21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Binary-Tree-Visualizer/js/binaryTree.js: -------------------------------------------------------------------------------- 1 | function Node(value,right,left,parent = "",children = []){ 2 | this.value = value; 3 | this.right = right; 4 | this.left = left; 5 | this.parent = parent; 6 | this.children = children; 7 | this.isRight = null; 8 | this.isLeft = null; 9 | 10 | } 11 | 12 | function createTree(arr){ 13 | 14 | 15 | for(var i = 1;i b){ 47 | if(root.left == null){ 48 | root.left = node; 49 | node.isLeft = true 50 | } else{ 51 | recursive(root.left,node); 52 | } 53 | } 54 | 55 | } 56 | 57 | function createData(node){ 58 | 59 | if(node == null){return} 60 | 61 | if(node.right){ 62 | node.children.push(node.right); 63 | node.right.parent = node; 64 | } 65 | 66 | if(node.left){ 67 | node.children.push(node.left); 68 | node.left.parent = node; 69 | 70 | } 71 | 72 | 73 | createData(node.left); 74 | createData(node.right); 75 | 76 | } 77 | 78 | function createNodes(list){ 79 | new_list = []; 80 | 81 | for(var i = 0;i MouseDown(e)); 24 | tree.addEventListener('mouseup',e => mouseUp(e)) 25 | tree.addEventListener('mouseleave',e=>mouseLeave(e)); 26 | tree.addEventListener('mousemove',e=>mouseMove(e)); 27 | 28 | function MouseDown(e){ 29 | isdown = true; 30 | startx = e.pageX - tree.offsetLeft; 31 | starty = e.pageY - tree.offsetTop; 32 | scrleft = tree.scrollLeft; 33 | scrtop = tree.scrollTop; 34 | } 35 | 36 | function mouseUp(e){ 37 | isdown = false; 38 | } 39 | 40 | function mouseLeave(e){ 41 | isdown = false; 42 | } 43 | 44 | function mouseMove(e){ 45 | if(isdown){ 46 | e.preventDefault(); 47 | 48 | var y = e.pageY - tree.offsetTop; 49 | var goY = y - starty; 50 | tree.scrollTop = scrtop - goY; 51 | 52 | var x = e.pageX - tree.offsetLeft; 53 | var goX = x - startx; 54 | tree.scrollLeft = scrleft - goX; 55 | } 56 | } 57 | let scale = 1; 58 | 59 | 60 | function zoom(event) { 61 | const el = document.querySelector('svg'); 62 | 63 | event.preventDefault(); 64 | 65 | scale += event.deltaY * -0.001; 66 | 67 | // Restrict scale 68 | scale = Math.min(Math.max(.250, scale), 1); 69 | 70 | // Apply scale transform 71 | el.style.transform = `scale(${scale})`; 72 | } -------------------------------------------------------------------------------- /Binary-Tree-Visualizer/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body{ 7 | background-color: lightgray; 8 | } 9 | h3{ 10 | text-align: center; 11 | font-size: 2rem; 12 | font-weight: bold; 13 | } 14 | 15 | #tree::-webkit-scrollbar,#inp::-webkit-scrollbar{ 16 | width: 5px; 17 | background-color: lightgray; 18 | } 19 | 20 | #tree::-webkit-scrollbar-thumb,#inp::-webkit-scrollbar-thumb{ 21 | background-color: gray; 22 | border-radius: 5px; 23 | } 24 | 25 | #tree::-webkit-scrollbar:horizontal,#inp::-webkit-scrollbar:horizontal{ 26 | height: 7px; 27 | } 28 | 29 | #tree::-webkit-scrollbar-thumb:hover,#inp::-webkit-scrollbar-thumb:hover{ 30 | background-color: rgb(83, 82, 82); 31 | } 32 | 33 | .container{ 34 | position: absolute; 35 | width: 80%; 36 | left: 10%; 37 | height: 80%; 38 | top: 10%; 39 | } 40 | 41 | .container #inp{ 42 | position: relative; 43 | width: 80%; 44 | left: 10%; 45 | height: 10%; 46 | resize: none; 47 | font-size: x-large; 48 | text-align: center; 49 | border: 2px solid black; 50 | 51 | } 52 | 53 | .container #tree{ 54 | position: relative; 55 | width: 80%; 56 | margin-top: 1%; 57 | left: 10%; 58 | height: 85%; 59 | background-color: white; 60 | border: 2px solid black; 61 | overflow: auto; 62 | 63 | } 64 | 65 | .container h1{ 66 | position: relative; 67 | top: -10px; 68 | text-align: center; 69 | } 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /Calc-JS-main/README.md: -------------------------------------------------------------------------------- 1 | # Calc-JS 2 | A responsive javascript calculator 3 | 4 | ### AIM: 5 | To build and run a fully working, responsive simple calculator web-application. 6 | 7 | ### Approach: 8 | Building the application was done in 3 different segments following the standard DOM structure. 9 | The UI comprises of a header, a calculator section and a footer with the builder's copyrights. 10 | The Calculator section is further subdivided into two parts. 11 | 1. The display area, where the user inputs and the results will be displayed. 12 | 2. The keypad from where keypress events will be generated by the user. 13 | 14 | 15 | ### Techs Used: 16 | 1. HTML5. 17 | 2. CSS3. 18 | 3. Bootstrap 4.0. 19 | 4. Vanilla Javascript. 20 | 5. JQuery. 21 | 22 | 23 | -------------------------------------------------------------------------------- /Calendar/README.md: -------------------------------------------------------------------------------- 1 | # Calendar 2 | A simple javascript calendar with a glassmorphic UI 3 | 4 | ### Techs Used: 5 | 6 | 11 | 12 | ### Purpose: 13 | 14 | The javascript file contains the logic of a calendar. It will fetch the system date from browser/device and then set that as today's date. The days and months are stored as arrays and successive increments are carried out. An additional feature is, one can check what day a date falls on any month or year because the pointer remains on the same date as of the present day's date. 15 | 16 | ### Screenshot: 17 | 18 |
19 | 20 | ![ss1](https://user-images.githubusercontent.com/64016811/118710304-b984c700-b83b-11eb-9011-081cda3371ab.jpg) 21 | 22 | ### The web application is hosted at : https://calendar-mc.netlify.app/ 23 | -------------------------------------------------------------------------------- /Calendar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | CALENDAR-UI 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 | 18 |
19 | 20 |
21 |

Made by Mainak

22 |
23 | 24 |
25 | 26 | 27 | 38 | 39 | -------------------------------------------------------------------------------- /Countdown timer/Readme.MD: -------------------------------------------------------------------------------- 1 | # Countdown Timer using JS 2 | 3 | ![image](https://user-images.githubusercontent.com/64016811/137897635-2a284f99-ed40-48df-bd81-4079a2a1b69f.png) 4 | -------------------------------------------------------------------------------- /Countdown timer/countdown.js: -------------------------------------------------------------------------------- 1 | var deadline = new Date("Jul 6, 2022 07:15:00").getTime(); 2 | 3 | var x = setInterval(function() { 4 | 5 | var now = new Date().getTime(); 6 | var t = deadline - now; 7 | var days = Math.floor(t / (1000 * 60 * 60 * 24)); 8 | var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 9 | var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60)); 10 | var seconds = Math.floor((t % (1000 * 60)) / 1000); 11 | document.getElementById("day").innerHTML =days ; 12 | document.getElementById("hour").innerHTML =hours; 13 | document.getElementById("minute").innerHTML = minutes; 14 | document.getElementById("second").innerHTML =seconds; 15 | if (t < 0) { 16 | clearInterval(x); 17 | document.getElementById("demo").innerHTML = "TIME UP"; 18 | document.getElementById("day").innerHTML ='0'; 19 | document.getElementById("hour").innerHTML ='0'; 20 | document.getElementById("minute").innerHTML ='0' ; 21 | document.getElementById("second").innerHTML = '0'; } 22 | }, 1000); -------------------------------------------------------------------------------- /Countdown timer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Countdown Timer 5 | 6 | 7 | 8 |

Countdown Clock

9 |
10 |
11 | 12 |
Days
13 |
14 |
15 | 16 |
Hours
17 |
18 |
19 | 20 |
Minutes
21 |
22 |
23 | 24 |
Seconds
25 |
26 |
27 | 28 |

29 |

Made by : Mainak

30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /Countdown timer/style.css: -------------------------------------------------------------------------------- 1 | 2 | body{ 3 | text-align: center; 4 | background: hsl(0, 0%, 99%); 5 | font-family: sans-serif; 6 | font-weight: 100; 7 | } 8 | h1{ 9 | color: #396; 10 | font-weight: 100; 11 | font-size: 40px; 12 | margin: 40px 0px 20px; 13 | } 14 | #clockdiv{ 15 | font-family: sans-serif; 16 | color: #fff; 17 | display: inline-block; 18 | font-weight: 100; 19 | text-align: center; 20 | font-size: 30px; 21 | } 22 | #clockdiv > div{ 23 | padding: 10px; 24 | border-radius: 3px; 25 | background: #00a2bf; 26 | display: inline-block; 27 | } 28 | #clockdiv div > span{ 29 | padding: 15px; 30 | border-radius: 3px; 31 | background: #352e74; 32 | display: inline-block; 33 | } 34 | smalltext{ 35 | padding-top: 5px; 36 | font-size: 26px; 37 | } 38 | -------------------------------------------------------------------------------- /Custom Icecream Generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Customize Icecrean 6 | 7 | 8 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | 28 | 29 | 30 | 31 | 32 |
33 |
34 | 35 |

ICECREAM CUSTOMIZER : Made by Mainak

36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /Custom Icecream Generator/script.js: -------------------------------------------------------------------------------- 1 | let scoop1 = document.querySelector(".scoop1"); 2 | let scoop2 = document.querySelector(".scoop2"); 3 | let scoop3 = document.querySelector(".scoop3"); 4 | 5 | let btnScoop1 = document.getElementById("btn-scoop1"); 6 | let btnScoop2 = document.getElementById("btn-scoop2"); 7 | let btnScoop3 = document.getElementById("btn-scoop3"); 8 | let btnTopping1 = document.getElementById("btn-topping1"); 9 | let btnTopping2 = document.getElementById("btn-topping2"); 10 | 11 | let colors = ["#f45c96", "#f8bd3d", "#badc58", "#5c0003", "#f58619", "#ebab70"]; 12 | 13 | let counter1 = 0; 14 | let counter2 = 0; 15 | let counter3 = 0; 16 | let counter4 = 0; 17 | let counter5 = 0; 18 | 19 | function setCounterValue(counter) { 20 | return counter < colors.length - 1 ? counter + 1 : 0; 21 | } 22 | 23 | btnScoop1.addEventListener("click", () => { 24 | scoop1.style.backgroundColor = colors[counter1]; 25 | counter1 = setCounterValue(counter1); 26 | }); 27 | btnScoop2.addEventListener("click", () => { 28 | scoop2.style.backgroundColor = colors[counter2]; 29 | counter2 = setCounterValue(counter2); 30 | }); 31 | btnScoop3.addEventListener("click", () => { 32 | scoop3.style.backgroundColor = colors[counter3]; 33 | counter3 = setCounterValue(counter3); 34 | }); 35 | btnTopping1.addEventListener("click", () => { 36 | scoop1.style.backgroundImage = `radial-gradient(circle at 20px 18px, ${colors[counter4]} 25px, transparent 25px)`; 37 | counter4 = setCounterValue(counter4); 38 | }); 39 | btnTopping2.addEventListener("click", () => { 40 | scoop3.style.backgroundImage = `radial-gradient(circle at 12.5px 17px, ${colors[counter5]} 20px, transparent 21px)`; 41 | counter5 = setCounterValue(counter5); 42 | }); -------------------------------------------------------------------------------- /DD-Animalia/assets/img/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/DD-Animalia/assets/img/img1.jpg -------------------------------------------------------------------------------- /DD-Animalia/assets/img/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/DD-Animalia/assets/img/img2.jpg -------------------------------------------------------------------------------- /DD-Animalia/assets/img/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/DD-Animalia/assets/img/img3.jpg -------------------------------------------------------------------------------- /DD-Animalia/assets/img/img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/DD-Animalia/assets/img/img4.jpg -------------------------------------------------------------------------------- /DD-Animalia/assets/img/img5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/DD-Animalia/assets/img/img5.jpg -------------------------------------------------------------------------------- /DD-Animalia/assets/img/img6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/DD-Animalia/assets/img/img6.jpg -------------------------------------------------------------------------------- /DD-Animalia/assets/img/img7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/DD-Animalia/assets/img/img7.jpg -------------------------------------------------------------------------------- /DD-Animalia/assets/js/main.js: -------------------------------------------------------------------------------- 1 | /*===== DRAG and DROP =====*/ 2 | const dropItems = document.getElementById('drop-items') 3 | 4 | new Sortable(dropItems, { 5 | animation: 350, 6 | chosenClass: "sortable-chosen", 7 | dragClass: "sortable-drag", 8 | store: { 9 | // We keep the order of the list 10 | set: (sortable) =>{ 11 | const order = sortable.toArray() 12 | localStorage.setItem(sortable.options.group.name, order.join('|')) 13 | }, 14 | 15 | // We get the order of the list 16 | get: (sortable) =>{ 17 | const order = localStorage.getItem(sortable.options.group.name) 18 | return order ? order.split('|') : [] 19 | } 20 | } 21 | }); 22 | -------------------------------------------------------------------------------- /Expense-Tracker-main/README.md: -------------------------------------------------------------------------------- 1 | # Expense-Tracker -------------------------------------------------------------------------------- /Expense-Tracker-main/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | Expense Tracker 10 | 11 | 12 | 13 |

Expense Tracker

14 |
15 |

Your Balance

16 |

$0.00

17 |
18 |
19 |

Income

20 |

21 | +$0.00 22 |

23 |
24 |
25 |

Expense

26 |

27 | -$0.00 28 |

29 |
30 |
31 | 32 |

History

33 |
    34 | 35 |
36 | 37 |
38 |
39 | 40 | 41 |
42 |
43 | 44 | 45 |
46 | 47 |
48 |
49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /GameOfLife/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Game of Life 7 | 8 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 |
18 | 19 | 20 | 21 | 22 | 25 | 26 | 27 |

28 |

GAME

29 |

OF

30 |

LIFE

31 | 32 |
33 |
34 | 35 | 36 |
37 | 38 |
39 | 40 | 41 |
42 |
43 | 44 |
45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /Go-Save-It/README.md: -------------------------------------------------------------------------------- 1 | # Go Save It 2 | 3 | A simple bookmark storing web app that stores your preferences in a local storage. 4 | 5 | ### A small demo (turn on sounds) 6 | 7 | 8 | 9 | https://user-images.githubusercontent.com/64016811/128611203-7c4c0e83-fe95-4313-9e6e-9a579fa177ca.mp4 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Go-Save-It/css/style.css: -------------------------------------------------------------------------------- 1 | /* Space out content a bit */ 2 | body { 3 | padding-top: 20px; 4 | padding-bottom: 20px; 5 | } 6 | 7 | /* Everything but the jumbotron gets side spacing for mobile first views */ 8 | .header, 9 | .marketing, 10 | .footer { 11 | padding-right: 15px; 12 | padding-left: 10px; 13 | } 14 | 15 | /* Custom page header */ 16 | .header { 17 | padding-bottom: 20px; 18 | border-bottom: 1px solid #e5e5e5; 19 | } 20 | /* Make the masthead heading the same height as the navigation */ 21 | .header h3 { 22 | margin-top: 0; 23 | margin-bottom: 0; 24 | line-height: 40px; 25 | } 26 | .text-muted 27 | { 28 | color:rgb(6, 153, 252); 29 | font-size: 32px; 30 | text-align: center; 31 | } 32 | /* Custom page footer */ 33 | .footer,a { 34 | padding-top: 19px; 35 | color: rgb(25, 129, 5); 36 | border-top: 1px solid #e5e5e5; 37 | font-size: 18px; 38 | text-align: center; 39 | } 40 | 41 | /* Customize container */ 42 | @media (min-width: 768px) { 43 | .container { 44 | max-width: 730px; 45 | } 46 | } 47 | .container-narrow > hr { 48 | margin: 30px 0; 49 | } 50 | 51 | /* Main marketing message and sign up button */ 52 | .jumbotron { 53 | text-align: center; 54 | border-bottom: 1px solid #e5e5e5; 55 | 56 | } 57 | 58 | .jumbotron .btn { 59 | padding: 10px 20px; 60 | font-size: 23px; 61 | border-radius: 20px; 62 | background-color: blueviolet; 63 | border-color: blueviolet; 64 | } 65 | 66 | /* Supporting marketing content */ 67 | .marketing h3{ 68 | margin: 2px 0; 69 | font-size: 20px; 70 | 71 | } 72 | .well 73 | { 74 | margin:6px; 75 | padding:10px; 76 | border-radius: 10px; 77 | border-color: rgb(255, 94, 0); 78 | border-width: 3px; 79 | } 80 | 81 | 82 | /* Responsive: Portrait tablets and up */ 83 | @media screen and (min-width: 768px) { 84 | /* Remove the padding we set earlier */ 85 | .header, 86 | .marketing, 87 | .footer { 88 | padding-right: 0; 89 | padding-left: 0; 90 | } 91 | /* Space out the masthead */ 92 | .header { 93 | margin-bottom: 20px; 94 | } 95 | /* Remove the bottom border on the jumbotron for visual effect */ 96 | .jumbotron { 97 | border-bottom: 0; 98 | } 99 | } 100 | 101 | -------------------------------------------------------------------------------- /Go-Save-It/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Go-Save-It/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /Go-Save-It/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Go-Save-It/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /Go-Save-It/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Go-Save-It/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /Go-Save-It/fonts/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Go-Save-It/fonts/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /Go-Save-It/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Go Save It 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 | 21 |

Go Save It

22 |
23 | 24 |
25 |

Save links to important websites

26 |
27 |
28 | 29 | 30 |
31 |
32 | 33 | 34 |
35 | 36 |
37 |
38 | 39 |
40 |
41 |
42 |
43 |
44 | 45 | 48 | 49 |
50 | 51 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /Go-Save-It/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Go-Save-It/logo.png -------------------------------------------------------------------------------- /Hangman/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 03 Hangman 9 | 10 | 11 | 14 | 15 | 16 | 17 |
18 |
19 | 20 |
21 |

22 |

23 |
24 |
25 |
26 |
27 | (your hint here !!) 28 |
29 |
30 |
31 | * YOUR---TEXT---HERE 32 |
33 |
Guessed Words
34 |
35 | 36 |
37 |
38 | 39 |
40 |
41 | × 42 | 43 | 44 |
45 |

Result

46 | 47 | 48 |
49 |
50 | 51 |
52 | 53 |
54 |

Made By : Mainak

55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /IP-Talashi/css/_global.scss: -------------------------------------------------------------------------------- 1 | *, *::before, *::after { 2 | 3 | box-sizing: inherit; 4 | 5 | } 6 | 7 | html { 8 | 9 | font-size: 100%; 10 | 11 | } 12 | 13 | body { 14 | 15 | margin: 0; 16 | padding: 0; 17 | line-height: 1.2; 18 | font-family: 'Rubik'; 19 | font-size: 1.125rem; 20 | background-color: $darkGray; 21 | overflow-x: hidden; 22 | 23 | } 24 | 25 | a, a:visited, a:active, a:hover { 26 | 27 | color: inherit; 28 | text-decoration: none; 29 | 30 | } 31 | 32 | .container { 33 | 34 | padding-right: 1.5rem; 35 | padding-left: 1.5rem; 36 | margin: 0 auto; 37 | max-width: 69.3125rem; 38 | 39 | } 40 | 41 | h2, h5, p { 42 | 43 | margin: 0; 44 | 45 | } -------------------------------------------------------------------------------- /IP-Talashi/css/_map.scss: -------------------------------------------------------------------------------- 1 | .map { 2 | position: relative; 3 | height: 100vh; 4 | z-index: 0; 5 | } 6 | 7 | .marker { 8 | background-image: url('../images/icon-location.svg'); 9 | background-size: cover; 10 | width: 1.4375rem; 11 | height: 1.75rem; 12 | cursor: pointer; 13 | top: -0.875rem !important; 14 | } 15 | 16 | .attribution{ 17 | position: absolute; 18 | display: grid; 19 | grid-template-rows: repeat(4, auto); 20 | row-gap: 0.25rem; 21 | background-color: rgba($color: white, $alpha: 0.5); 22 | font-family: "Rubik" !important; 23 | font-size: 0.5rem !important; 24 | line-height: 1.2 !important; 25 | text-align: center; 26 | text-transform: uppercase; 27 | margin: 0 auto; 28 | padding: 0.5rem; 29 | width: calc(100% / 3); 30 | max-width: 12rem; 31 | right: 0; 32 | bottom: 0; 33 | left: 0; 34 | z-index: 1; 35 | 36 | a{ 37 | color: $veryDarkGray !important; 38 | text-decoration: none !important; 39 | font-weight: 700; 40 | 41 | &:hover{ 42 | text-decoration: none !important; 43 | } 44 | 45 | } 46 | 47 | } -------------------------------------------------------------------------------- /IP-Talashi/css/_mixins.scss: -------------------------------------------------------------------------------- 1 | //640px = medium 2 | //1024px = large 3 | //1400px = xlarge 4 | 5 | $breakpoints-up: ("medium": "40em", "large": "64em", "xlarge": "87.5em"); 6 | 7 | //639px = medium 8 | //1023px = large 9 | //1399px = xlarge 10 | 11 | $breakpoints-down: ("medium": "39.9375em", "large": "63.9375em", "xlarge": "87.4375em");//640px = medium 12 | 13 | @mixin breakpoint-up($size) { 14 | 15 | @media (min-width: map-get($breakpoints-up, $size)){ 16 | 17 | @content; 18 | 19 | } 20 | 21 | } 22 | 23 | @mixin breakpoint-down($size) { 24 | 25 | @media (max-width: map-get($breakpoints-down, $size)){ 26 | 27 | @content; 28 | 29 | } 30 | 31 | } 32 | 33 | @mixin max-min($size1, $size2) { 34 | 35 | @media (max-width: map-get($breakpoints-down, $size1)) and (min-width: map-get($breakpoints-up, $size2)){ 36 | 37 | @content; 38 | 39 | } 40 | 41 | } -------------------------------------------------------------------------------- /IP-Talashi/css/_variables.scss: -------------------------------------------------------------------------------- 1 | $veryDarkGray: hsl(0, 0%, 17%); 2 | $darkGray: hsl(0, 0%, 59%); -------------------------------------------------------------------------------- /IP-Talashi/css/styles.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | @import "fonts"; 4 | @import "global"; 5 | @import "header"; 6 | @import "map"; -------------------------------------------------------------------------------- /IP-Talashi/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/IP-Talashi/images/favicon-32x32.png -------------------------------------------------------------------------------- /IP-Talashi/images/icon-arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /IP-Talashi/images/icon-location.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /IP-Talashi/images/pattern-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/IP-Talashi/images/pattern-bg.png -------------------------------------------------------------------------------- /Image ASCII/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Image to ASCII 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

Image to ASCII

18 |
19 | 20 |
21 | 22 | 23 |
24 | 26 | 27 |
28 |
29 | 30 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /Image ASCII/logo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Image ASCII/logo.gif -------------------------------------------------------------------------------- /Image ASCII/resources/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: monospace, Arial, Helvetica, sans-serif; 3 | } 4 | 5 | html, 6 | body { 7 | height: 100%; 8 | background: #000; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | height: 100%; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | } 18 | 19 | footer { 20 | padding: 10px; 21 | box-sizing: border-box; 22 | } 23 | 24 | .container { 25 | flex: 1; 26 | box-sizing: border-box; 27 | width: 100%; 28 | display: flex; 29 | flex-direction: column; 30 | align-items: center; 31 | justify-content: center; 32 | } 33 | 34 | canvas { 35 | flex: 1; 36 | border: 10px solid rgb(243, 6, 6); 37 | margin-bottom: 10px; 38 | border-radius: 20px; 39 | background: #fff; 40 | } 41 | 42 | .controls { 43 | box-sizing: border-box; 44 | padding: 15px; 45 | } 46 | 47 | input[type="file"] { 48 | display: none; 49 | } 50 | 51 | .input-button { 52 | box-sizing: border-box; 53 | font-size: 1em; 54 | width: 125px; 55 | height: 100%; 56 | padding: 5px; 57 | background-color: #ebebeb; 58 | border: 1px solid #053cf3; 59 | border-radius: 5px; 60 | -webkit-transition: 0.3s; 61 | -ms-transition: 0.3s; 62 | transition: 0.3s; 63 | } 64 | 65 | .input-button:hover { 66 | background-color: #d1d1d1; 67 | } 68 | 69 | a, a:hover, a:focus, a:active { 70 | padding-top: 20px; 71 | text-decoration: none; 72 | color: rgb(250, 249, 249); 73 | font-size: 25px; 74 | } 75 | h1 76 | { 77 | font-size: 30px; 78 | color: rgb(255, 238, 0); 79 | } 80 | label 81 | { 82 | color:rgb(21, 76, 226); 83 | } -------------------------------------------------------------------------------- /Image Editor/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Image Editor/favicon.ico -------------------------------------------------------------------------------- /Image Editor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | PicStar Image Editor 7 | 8 | 9 | 10 | 11 | 12 |

🎇Welcome to PicStar📸

13 |
Made by Mainak
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 |
Brightness
GreyScale
Contrast
Invert
Black and White
46 |
47 | 48 |

How to use :

49 |

  1. Upload an image of .jpg or .png format
    2. 50 |
  2. Click on the toggle buttons to apply the features
    3. 51 |
  3. Drag the slider until you get a statisfying image
    4. 52 |
  4. Right click on the image and select Save Image As
    5. 53 |

54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /Interest-Calculator-main/README.md: -------------------------------------------------------------------------------- 1 | # js-interest-calculator 2 | JavaScript interest calculator 3 | 4 | ![s1](https://user-images.githubusercontent.com/64016811/137612640-b964c847-5251-46c4-9d9a-22c7fea9a28e.png) 5 | -------------------------------------------------------------------------------- /Interest-Calculator-main/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: sans-serif; 3 | } 4 | 5 | #interest { 6 | margin: auto; 7 | width: 50%; 8 | } 9 | 10 | input { 11 | margin: 5px; 12 | width: 50%; 13 | } 14 | 15 | input[type=text]:focus { 16 | background-color: lightblue; 17 | } 18 | 19 | label { 20 | display: inline-block; 21 | width: 40%; 22 | } 23 | 24 | p, h1 { 25 | text-align: center; 26 | } 27 | 28 | #monthly-contribution { 29 | margin: auto; 30 | display: block; 31 | width: 50%; 32 | } 33 | -------------------------------------------------------------------------------- /JS CRUD/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CRUD JS 7 | 8 | 9 | 10 | 11 | 12 | 13 |

CRUD JS

14 | 15 | 16 | 39 | 55 | 56 |
17 |
18 |
19 | 20 | 21 |
22 |
23 | 24 | 25 |
26 |
27 | 28 | 29 |
30 |
31 | 32 | 33 |
34 |
35 | 36 |
37 |
38 | 		40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 |
Full NameEMP CodeSalaryCity
54 |
57 |

© Mainak 2021

58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /JS CRUD/styles.css: -------------------------------------------------------------------------------- 1 | body > table{ 2 | width: 100%; 3 | } 4 | 5 | table{ 6 | border-collapse: collapse; 7 | } 8 | table.list{ 9 | width:100%; 10 | } 11 | 12 | td, th { 13 | border: 1px solid #dddddd; 14 | text-align: left; 15 | padding: 8px; 16 | } 17 | tr:nth-child(even),table.list thead>tr { 18 | background-color: #dddddd; 19 | } 20 | 21 | input[type=text], input[type=number] { 22 | width: 100%; 23 | padding: 12px 20px; 24 | margin: 8px 0; 25 | display: inline-block; 26 | border: 1px solid #ccc; 27 | border-radius: 4px; 28 | box-sizing: border-box; 29 | } 30 | 31 | input[type=submit]{ 32 | width: 30%; 33 | background-color: #ddd; 34 | color: #000; 35 | padding: 14px 20px; 36 | margin: 8px 0; 37 | border: none; 38 | border-radius: 4px; 39 | cursor: pointer; 40 | } 41 | 42 | form div.form-action-buttons{ 43 | text-align: right; 44 | } 45 | 46 | a{ 47 | cursor: pointer; 48 | text-decoration: underline; 49 | color: #0000ee; 50 | margin-right: 4px; 51 | } 52 | h1,h3{ 53 | text-align: center; 54 | } 55 | label.validation-error{ 56 | color: red; 57 | margin-left: 5px; 58 | } 59 | 60 | .hide{ 61 | display:none; 62 | } -------------------------------------------------------------------------------- /JS-drum/Readme.MD: -------------------------------------------------------------------------------- 1 | 2 | # Drum-kit Application, made using Vanilla JS 3 | 4 | ![ss1](https://user-images.githubusercontent.com/64016811/137901244-54b4f230-c700-43f3-b9dd-0e1084a56f1c.png) 5 | -------------------------------------------------------------------------------- /JS-drum/img/back.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/JS-drum/img/back.jpg -------------------------------------------------------------------------------- /JS-drum/sounds/boom.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/JS-drum/sounds/boom.wav -------------------------------------------------------------------------------- /JS-drum/sounds/clap.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/JS-drum/sounds/clap.wav -------------------------------------------------------------------------------- /JS-drum/sounds/hihat.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/JS-drum/sounds/hihat.wav -------------------------------------------------------------------------------- /JS-drum/sounds/kick.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/JS-drum/sounds/kick.wav -------------------------------------------------------------------------------- /JS-drum/sounds/openhat.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/JS-drum/sounds/openhat.wav -------------------------------------------------------------------------------- /JS-drum/sounds/ride.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/JS-drum/sounds/ride.wav -------------------------------------------------------------------------------- /JS-drum/sounds/snare.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/JS-drum/sounds/snare.wav -------------------------------------------------------------------------------- /JS-drum/sounds/tink.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/JS-drum/sounds/tink.wav -------------------------------------------------------------------------------- /JS-drum/sounds/tom.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/JS-drum/sounds/tom.wav -------------------------------------------------------------------------------- /JS-drum/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 10px; 3 | background: url(img\back.jpg) bottom center; 4 | 5 | background-size: cover; 6 | } 7 | 8 | body,html { 9 | margin: 0; 10 | padding: 0; 11 | font-family: sans-serif; 12 | } 13 | h2{ 14 | align-items: center; 15 | text-align: center; 16 | display: flex; 17 | flex-direction: column; 18 | margin-top:-100px; 19 | font-size: 2.5rem; 20 | } 21 | 22 | .keys { 23 | display: flex; 24 | flex: 1; 25 | min-height: 100vh; 26 | align-items: center; 27 | justify-content: center; 28 | } 29 | 30 | .key { 31 | border: .4rem solid black; 32 | border-radius: .5rem; 33 | margin: 1rem; 34 | font-size: 1.5rem; 35 | padding: 1rem .5rem; 36 | transition: all .07s ease; 37 | width: 10rem; 38 | text-align: center; 39 | color: white; 40 | background: rgba(0,0,0,0.4); 41 | text-shadow: 0 0 .5rem black; 42 | } 43 | 44 | .playing { 45 | transform: scale(1.1); 46 | border-color: #ffc600; 47 | box-shadow: 0 0 1rem #ffc600; 48 | } 49 | 50 | kbd { 51 | display: block; 52 | font-size: 4rem; 53 | } 54 | 55 | .sound { 56 | font-size: 1.2rem; 57 | text-transform: uppercase; 58 | letter-spacing: .1rem; 59 | color: #ffc600; 60 | } 61 | -------------------------------------------------------------------------------- /JavaScript QUiz/dist/js/start.js: -------------------------------------------------------------------------------- 1 | function submitForm(e) { 2 | e.preventDefault(); 3 | let name = document.forms["welcome_form"]["name"].value; 4 | 5 | sessionStorage.setItem("name", name); 6 | 7 | location.href = "quiz.html"; 8 | } -------------------------------------------------------------------------------- /JavaScript QUiz/dist/js/timer.js: -------------------------------------------------------------------------------- 1 | let dt = new Date(new Date().setTime(0)); 2 | let ctime = dt.getTime(); 3 | let seconds = Math.floor((ctime % (1000 * 60))/ 1000); 4 | let minutes = Math.floor((ctime % (1000 * 60 * 60))/( 1000 * 60)); 5 | console.log(seconds, minutes); 6 | let time = 0; 7 | let mytime = setInterval(function(){ 8 | time++; 9 | 10 | if(seconds < 59) { 11 | seconds++; 12 | } else { 13 | seconds = 0; 14 | minutes++; 15 | } 16 | let formatted_sec = seconds < 10 ? `0${seconds}`: `${seconds}`; 17 | let formatted_min = minutes < 10 ? `0${minutes}`: `${minutes}` 18 | document.querySelector("span.time").innerHTML = `${formatted_min} : ${formatted_sec}`; 19 | }, 1000); 20 | -------------------------------------------------------------------------------- /JavaScript QUiz/dist/js/userInfo.js: -------------------------------------------------------------------------------- 1 | let user_name = sessionStorage.getItem("name"); 2 | let user_points = sessionStorage.getItem("points"); 3 | let user_time = sessionStorage.getItem("time"); 4 | document.querySelector("span.name").innerHTML = user_name; 5 | document.querySelector("span.points").innerHTML = user_points; 6 | document.querySelector("span.time_taken").innerHTML = user_time; 7 | 8 | -------------------------------------------------------------------------------- /JavaScript QUiz/end.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript Quiz 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 |

well done!

17 |

Your Points

18 |

Time taken

19 |
20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /JavaScript QUiz/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript Quiz 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 | 18 |
19 |
20 |
21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /JavaScript QUiz/quiz.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Quiz Page 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |

Welcome!

18 |
19 |
20 | 00:00 21 |
22 |
23 |
24 |
25 | 26 | 27 | 33 |
34 | 35 | 36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /KeyPress/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Keypress Detector 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Know Your Type

14 |

Press any key

15 |
16 |
17 |
18 |
19 |

Key:

20 |

Code:

21 |
22 |
23 |

Made by Mainak

24 |

This web application is used to detect your key-strokes and display the corresponding ASCII codes of the pressed key. Now, ASCII is No risky as you know what you type. 😎

25 |
26 | 27 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /KeyPress/style.css: -------------------------------------------------------------------------------- 1 | /* Import Google Font - Poppins */ 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Poppins', sans-serif; 8 | } 9 | body{ 10 | display: flex; 11 | min-height: 100vh; 12 | align-items: center; 13 | justify-content: center; 14 | background: #7817b8; 15 | } 16 | .box{ 17 | padding: 25px; 18 | width: 490px; 19 | height: 500px; 20 | border-radius: 15px; 21 | background: #fff; 22 | box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05); 23 | } 24 | .text, .key-code, .key-name{ 25 | font-size: 35px; 26 | color: #7817b8; 27 | font-weight: 500; 28 | } 29 | .text{ 30 | font-size: 30px; 31 | text-align: center; 32 | pointer-events: none; 33 | } 34 | .box.active .text{ 35 | display: none; 36 | } 37 | .content, .key-code, .details{ 38 | display: flex; 39 | align-items: center; 40 | justify-content: center; 41 | } 42 | .content{ 43 | display: none; 44 | flex-direction: column; 45 | } 46 | .box.active .content{ 47 | display: flex; 48 | } 49 | .content .key-code{ 50 | height: 110px; 51 | width: 110px; 52 | background: #fff; 53 | border-radius: 50%; 54 | margin-bottom: 15px; 55 | pointer-events: none; 56 | border: 5px solid #17A2B8; 57 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 58 | } 59 | .content .details{ 60 | width: 100%; 61 | margin-top: 15px; 62 | justify-content: space-evenly; 63 | } 64 | .details p{ 65 | width: 100%; 66 | font-size: 18px; 67 | text-align: center; 68 | } 69 | .details p:last-child{ 70 | border-left: 1px solid #bfbfbf; 71 | } 72 | h1 73 | { 74 | text-align: center; 75 | font-size: 30px; 76 | padding-bottom: 10px; 77 | } 78 | 79 | h3 80 | { 81 | text-align: center; 82 | font-size: 25px; 83 | padding-top: 40px; 84 | 85 | } 86 | h4 87 | { 88 | text-align: center; 89 | font-size: 17px; 90 | padding-top: 15px; 91 | } -------------------------------------------------------------------------------- /M_Box/README.md: -------------------------------------------------------------------------------- 1 | # M_Box 2 | A responsive real-time movie search application that fetches movie data, banners and descriptions using the IMDb API. 3 | 4 | ![s1](https://user-images.githubusercontent.com/64016811/137609983-574f6f48-af6d-4580-bf4e-34a02d85f35c.png) 5 | -------------------------------------------------------------------------------- /M_Box/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | MBox-Movies 7 | 8 | 9 | 12 | 13 | 14 |
15 | 16 |
17 | 23 |
24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /M_Box/s1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/M_Box/s1.png -------------------------------------------------------------------------------- /M_Box/script.js: -------------------------------------------------------------------------------- 1 | const APIURL = 2 | "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1"; 3 | const IMGPATH = "https://image.tmdb.org/t/p/w1280"; 4 | const SEARCHAPI = 5 | "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query="; 6 | 7 | const main = document.getElementById("main"); 8 | const form = document.getElementById("form"); 9 | const search = document.getElementById("search"); 10 | 11 | // initially get fav movies 12 | getMovies(APIURL); 13 | 14 | async function getMovies(url) { 15 | const resp = await fetch(url); 16 | const respData = await resp.json(); 17 | 18 | console.log(respData); 19 | 20 | showMovies(respData.results); 21 | } 22 | 23 | function showMovies(movies) { 24 | // clear main 25 | main.innerHTML = ""; 26 | 27 | movies.forEach((movie) => { 28 | const { poster_path, title, vote_average, overview } = movie; 29 | 30 | const movieEl = document.createElement("div"); 31 | movieEl.classList.add("movie"); 32 | 33 | movieEl.innerHTML = ` 34 | ${title} 38 |
39 |

${title}

40 | ${vote_average} 43 |
44 |
45 |

Overview:

46 | ${overview} 47 |
48 | `; 49 | 50 | main.appendChild(movieEl); 51 | }); 52 | } 53 | 54 | function getClassByRate(vote) { 55 | if (vote >= 8) { 56 | return "green"; 57 | } else if (vote >= 5) { 58 | return "orange"; 59 | } else { 60 | return "red"; 61 | } 62 | } 63 | 64 | form.addEventListener("submit", (e) => { 65 | e.preventDefault(); 66 | 67 | const searchTerm = search.value; 68 | 69 | if (searchTerm) { 70 | getMovies(SEARCHAPI + searchTerm); 71 | 72 | search.value = ""; 73 | } 74 | }); -------------------------------------------------------------------------------- /Master-Piece/README.md: -------------------------------------------------------------------------------- 1 | # Master Piece 2 | 3 | ### Your personal painting website 4 | 5 | ## Demo 6 | 7 | ![paint](https://user-images.githubusercontent.com/64016811/118350771-2cf5b280-b576-11eb-9781-ba2989d542f4.gif) 8 | 9 | -------------------------------------------------------------------------------- /Master-Piece/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Master-Piece/favicon.ico -------------------------------------------------------------------------------- /MausamDoot/Readme.MD: -------------------------------------------------------------------------------- 1 | # Mausam-Doot Weather App 2 | 3 | ## Techs Used: 4 | - HTML 5 | - CSS 6 | - Javascript 7 | - OpenWeatherAPI 8 | 9 | ## Screenshot 10 | ![image](https://user-images.githubusercontent.com/64016811/137611577-bb38bb97-ed3b-40dd-85da-813cf2f2ae5e.png) 11 | -------------------------------------------------------------------------------- /MausamDoot/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Weather App 8 | 9 | 10 | 11 | 12 | 13 |

🌞 MAUSAM DOOT ☔

14 |

Your personal weather app

15 |
16 |
17 | 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 |

Made by Mainak

27 | 28 | 29 | -------------------------------------------------------------------------------- /MausamDoot/script.js: -------------------------------------------------------------------------------- 1 | const apikey = "3265874a2c77ae4a04bb96236a642d2f"; 2 | 3 | const main = document.getElementById("main"); 4 | const form = document.getElementById("form"); 5 | const search = document.getElementById("search"); 6 | 7 | const url = (city) => 8 | `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apikey}`; 9 | 10 | async function getWeatherByLocation(city) { 11 | const resp = await fetch(url(city), { origin: "cors" }); 12 | const respData = await resp.json(); 13 | 14 | console.log(respData); 15 | 16 | addWeatherToPage(respData); 17 | } 18 | 19 | function addWeatherToPage(data) { 20 | const temp = KtoC(data.main.temp); 21 | 22 | const weather = document.createElement("div"); 23 | weather.classList.add("weather"); 24 | 25 | weather.innerHTML = ` 26 |

${temp}°C

27 | ${data.weather[0].main} 28 | `; 29 | 30 | // cleanup 31 | main.innerHTML = ""; 32 | 33 | main.appendChild(weather); 34 | } 35 | 36 | function KtoC(K) { 37 | return Math.floor(K - 273.15); 38 | } 39 | 40 | form.addEventListener("submit", (e) => { 41 | e.preventDefault(); 42 | 43 | const city = search.value; 44 | 45 | if (city) { 46 | getWeatherByLocation(city); 47 | } 48 | }); -------------------------------------------------------------------------------- /MausamDoot/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap"); 2 | * { 3 | box-sizing: border-box; 4 | } 5 | 6 | body { 7 | background: linear-gradient(300deg, #5b078b, #bfc0c0); 8 | font-family: "Poppins", sans-serif; 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | justify-content: center; 13 | margin: 0; 14 | min-height: 100vh; 15 | } 16 | 17 | input { 18 | background-color: #fff; 19 | border: none; 20 | border-radius: 25px; 21 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 22 | font-family: inherit; 23 | font-size: 1rem; 24 | padding: 1rem; 25 | min-width: 300px; 26 | } 27 | 28 | input:focus { 29 | outline: none; 30 | } 31 | 32 | .weather { 33 | font-size: 2rem; 34 | text-align: center; 35 | } 36 | 37 | .weather h2 { 38 | display: flex; 39 | align-items: center; 40 | margin-bottom: 0; 41 | } 42 | 43 | h1 { 44 | color: wheat; 45 | } 46 | 47 | h3 { 48 | color: skyblue; 49 | } 50 | 51 | p { 52 | color: lightgreen; 53 | } -------------------------------------------------------------------------------- /Maze Game/README.md: -------------------------------------------------------------------------------- 1 | # TBM 2 | Tumbling Balls Maze Game. Watch out in the hard mode! 3 | 4 | ![image](https://user-images.githubusercontent.com/64016811/137734086-3a633db9-adb6-4fb2-ad77-47d96da524e1.png) 5 | -------------------------------------------------------------------------------- /Maze Game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 3D Maze 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | Click the joystick to start! 25 |

Move every ball to the center. Ready for hard mode? Press H

26 |
27 |
28 |
29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /Meme Generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Meme Generator 10 | 11 | 12 |
13 |

MEMEISTAN

14 |
15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
29 |

© Mainak 2021

30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /Meme Generator/script.js: -------------------------------------------------------------------------------- 1 | const imageFileInput = document.querySelector("#imageFileInput"); 2 | const canvas = document.querySelector("#meme"); 3 | const topTextInput = document.querySelector("#topTextInput"); 4 | const bottomTextInput = document.querySelector("#bottomTextInput"); 5 | 6 | let image; 7 | 8 | imageFileInput.addEventListener("change", (e) => { 9 | const imageDataUrl = URL.createObjectURL(e.target.files[0]); 10 | 11 | image = new Image(); 12 | image.src = imageDataUrl; 13 | 14 | image.addEventListener( 15 | "load", 16 | () => { 17 | updateMemeCanvas( 18 | canvas, 19 | image, 20 | topTextInput.value, 21 | bottomTextInput.value 22 | ); 23 | }, 24 | { once: true } 25 | ); 26 | }); 27 | 28 | topTextInput.addEventListener("change", () => { 29 | updateMemeCanvas(canvas, image, topTextInput.value, bottomTextInput.value); 30 | }); 31 | 32 | bottomTextInput.addEventListener("change", () => { 33 | updateMemeCanvas(canvas, image, topTextInput.value, bottomTextInput.value); 34 | }); 35 | 36 | function updateMemeCanvas(canvas, image, topText, bottomText) { 37 | const ctx = canvas.getContext("2d"); 38 | const width = image.width; 39 | const height = image.height; 40 | const fontSize = Math.floor(width / 10); 41 | const yOffset = height / 25; 42 | 43 | // Update canvas background 44 | canvas.width = width; 45 | canvas.height = height; 46 | ctx.drawImage(image, 0, 0); 47 | 48 | // Prepare text 49 | ctx.strokeStyle = "black"; 50 | ctx.lineWidth = Math.floor(fontSize / 4); 51 | ctx.fillStyle = "white"; 52 | ctx.textAlign = "center"; 53 | ctx.lineJoin = "round"; 54 | ctx.font = `${fontSize}px sans-serif`; 55 | 56 | // Add top text 57 | ctx.textBaseline = "top"; 58 | ctx.strokeText(topText, width / 2, yOffset); 59 | ctx.fillText(topText, width / 2, yOffset); 60 | 61 | // Add bottom text 62 | ctx.textBaseline = "bottom"; 63 | ctx.strokeText(bottomText, width / 2, height - yOffset); 64 | ctx.fillText(bottomText, width / 2, height - yOffset); 65 | } 66 | -------------------------------------------------------------------------------- /Meme Generator/style.css: -------------------------------------------------------------------------------- 1 | .title 2 | { 3 | font-size: 3rem; 4 | font-weight: bold; 5 | color: #000; 6 | font-family: Georgia, 'Times New Roman', Times, serif; 7 | text-align: center; 8 | margin-bottom: -10px; 9 | margin-top: -10px; 10 | background-color: azure; 11 | color: rgb(55, 4, 136); 12 | } 13 | .footer 14 | { 15 | font-size: 1.5rem; 16 | font-weight: bold; 17 | color: #000; 18 | font-family: Georgia, 'Times New Roman', Times, serif; 19 | text-align: center; 20 | 21 | background-color: azure; 22 | color: rgb(55, 4, 136); 23 | } 24 | 25 | .meme-generator { 26 | margin: 20px auto; 27 | width: 500px; 28 | padding:10px; 29 | border-radius: 20px; 30 | background-color: rgb(80, 255, 255); 31 | font-family: sans-serif; 32 | } 33 | 34 | .meme-generator label { 35 | display: block; 36 | font-weight: bold; 37 | border-radius: 10px; 38 | margin-bottom: 10px; 39 | } 40 | 41 | .meme-generator input { 42 | width: 100%; 43 | box-sizing: border-box; 44 | border: 2px solid rgb(34, 32, 32); 45 | border-radius: 20px; 46 | font-size: 22px; 47 | margin-bottom: 20px; 48 | padding-left: 20px; 49 | } 50 | 51 | #meme { 52 | width: 100%; 53 | border-radius: 10px; 54 | } 55 | 56 | label 57 | { 58 | align-items: center; 59 | } -------------------------------------------------------------------------------- /Memory Game/Assets/Audio/creepy.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Memory Game/Assets/Audio/creepy.mp3 -------------------------------------------------------------------------------- /Memory Game/Assets/Audio/flip.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Memory Game/Assets/Audio/flip.wav -------------------------------------------------------------------------------- /Memory Game/Assets/Audio/gameOver.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Memory Game/Assets/Audio/gameOver.wav -------------------------------------------------------------------------------- /Memory Game/Assets/Audio/match.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Memory Game/Assets/Audio/match.wav -------------------------------------------------------------------------------- /Memory Game/Assets/Audio/victory.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Memory Game/Assets/Audio/victory.wav -------------------------------------------------------------------------------- /Memory Game/Assets/Cursors/Ghost.cur: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Memory Game/Assets/Cursors/Ghost.cur -------------------------------------------------------------------------------- /Memory Game/Assets/Cursors/GhostHover.cur: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Memory Game/Assets/Cursors/GhostHover.cur -------------------------------------------------------------------------------- /Memory Game/Assets/Fonts/Creepy.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Memory Game/Assets/Fonts/Creepy.woff -------------------------------------------------------------------------------- /Memory Game/Assets/Fonts/Creepy.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Memory Game/Assets/Fonts/Creepy.woff2 -------------------------------------------------------------------------------- /Memory Game/Assets/Fonts/Lunacy.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Memory Game/Assets/Fonts/Lunacy.woff -------------------------------------------------------------------------------- /Memory Game/Assets/Fonts/Lunacy.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Memory Game/Assets/Fonts/Lunacy.woff2 -------------------------------------------------------------------------------- /Memory Game/Assets/Images/Bat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Memory Game/Assets/Images/Bat.png -------------------------------------------------------------------------------- /Memory Game/Assets/Images/Bones.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Memory Game/Assets/Images/Bones.png -------------------------------------------------------------------------------- /Memory Game/Assets/Images/CardBack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Memory Game/Assets/Images/CardBack.png -------------------------------------------------------------------------------- /Memory Game/Assets/Images/Cauldron.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Memory Game/Assets/Images/Cauldron.png -------------------------------------------------------------------------------- /Memory Game/Assets/Images/Cobweb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Memory Game/Assets/Images/Cobweb.png -------------------------------------------------------------------------------- /Memory Game/Assets/Images/CobwebGrey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Memory Game/Assets/Images/CobwebGrey.png -------------------------------------------------------------------------------- /Memory Game/Assets/Images/Dracula.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Memory Game/Assets/Images/Dracula.png -------------------------------------------------------------------------------- /Memory Game/Assets/Images/Eye.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Memory Game/Assets/Images/Eye.png -------------------------------------------------------------------------------- /Memory Game/Assets/Images/Ghost.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Memory Game/Assets/Images/Ghost.png -------------------------------------------------------------------------------- /Memory Game/Assets/Images/Pumpkin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Memory Game/Assets/Images/Pumpkin.png -------------------------------------------------------------------------------- /Memory Game/Assets/Images/Skull.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Memory Game/Assets/Images/Skull.png -------------------------------------------------------------------------------- /Memory Game/Assets/Images/Spider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Memory Game/Assets/Images/Spider.png -------------------------------------------------------------------------------- /Number Converter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Number System Converter 9 | 10 | 11 | 12 | 13 | 14 |
15 |

16 | Number System Converter 17 |

18 | 19 | 20 | 25 | 26 | 27 |
28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Number Converter/script.js: -------------------------------------------------------------------------------- 1 | function getResult() { 2 | const decimalNum = parseInt(document.getElementById("Decimal").value); 3 | let convertedNum = undefined; 4 | let indexValue = document.getElementById('options').selectedIndex; 5 | let options = document.getElementById('options').options; 6 | let selectedConversionSystem = options[indexValue].text; 7 | if (selectedConversionSystem === 'Binary') 8 | convertedNum = decimalNum.toString(2); 9 | else if (selectedConversionSystem === 'Octal') 10 | convertedNum = decimalNum.toString(8); 11 | else if (selectedConversionSystem === 'Hexadecimal') 12 | convertedNum = decimalNum.toString(16); 13 | if (document.getElementById('result')) { 14 | let element = document.getElementById('result') 15 | element.parentNode.removeChild(element); 16 | } 17 | addElement('flex-container', 'p', 'result', decimalNum, 18 | convertedNum, selectedConversionSystem); 19 | } 20 | 21 | function addElement(parentId, elementTag, elementId, 22 | decimalNum, number, selectedConversionSystem) { 23 | let html = `Decimal number ${decimalNum} to 24 | ${selectedConversionSystem} is ${number}`; 25 | let p = document.getElementById(parentId); 26 | let newElement = document.createElement(elementTag); 27 | newElement.setAttribute('id', elementId); 28 | newElement.style.color = 'black'; 29 | newElement.style.marginTop = '520px'; 30 | newElement.style.textAlign = 'center'; 31 | newElement.style.display = 'flex'; 32 | newElement.style.whiteSpace = 'nowrap'; 33 | newElement.style.overFlow = 'hidden'; 34 | newElement.style.fontSize = '1rem'; 35 | newElement.innerHTML = html; 36 | p.appendChild(newElement); 37 | } 38 | 39 | -------------------------------------------------------------------------------- /Pacman/images/ghost.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Pacman/images/ghost.png -------------------------------------------------------------------------------- /Pacman/images/pac0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Pacman/images/pac0.png -------------------------------------------------------------------------------- /Pacman/images/pac1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Pacman/images/pac1.png -------------------------------------------------------------------------------- /Pacman/images/pac2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Pacman/images/pac2.png -------------------------------------------------------------------------------- /Pacman/images/pinkDot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Pacman/images/pinkDot.png -------------------------------------------------------------------------------- /Pacman/images/scaredGhost.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Pacman/images/scaredGhost.png -------------------------------------------------------------------------------- /Pacman/images/scaredGhost2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Pacman/images/scaredGhost2.png -------------------------------------------------------------------------------- /Pacman/images/wall.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Pacman/images/wall.png -------------------------------------------------------------------------------- /Pacman/images/yellowDot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Pacman/images/yellowDot.png -------------------------------------------------------------------------------- /Pacman/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pac-Man 8 | 29 | 30 | 31 |
32 |

Pac-Man

33 | 34 |
35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /Pacman/sounds/eat_ghost.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Pacman/sounds/eat_ghost.wav -------------------------------------------------------------------------------- /Pacman/sounds/gameOver.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Pacman/sounds/gameOver.wav -------------------------------------------------------------------------------- /Pacman/sounds/gameWin.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Pacman/sounds/gameWin.wav -------------------------------------------------------------------------------- /Pacman/sounds/power_dot.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Pacman/sounds/power_dot.wav -------------------------------------------------------------------------------- /Pacman/sounds/waka.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Pacman/sounds/waka.wav -------------------------------------------------------------------------------- /Pacman/src/Game.js: -------------------------------------------------------------------------------- 1 | import TileMap from "./TileMap.js"; 2 | 3 | const tileSize = 32; 4 | const velocity = 2; 5 | 6 | const canvas = document.getElementById("gameCanvas"); 7 | const ctx = canvas.getContext("2d"); 8 | const tileMap = new TileMap(tileSize); 9 | const pacman = tileMap.getPacman(velocity); 10 | const enemies = tileMap.getEnemies(velocity); 11 | 12 | let gameOver = false; 13 | let gameWin = false; 14 | const gameOverSound = new Audio("sounds/gameOver.wav"); 15 | const gameWinSound = new Audio("sounds/gameWin.wav"); 16 | 17 | function gameLoop() { 18 | tileMap.draw(ctx); 19 | drawGameEnd(); 20 | pacman.draw(ctx, pause(), enemies); 21 | enemies.forEach((enemy) => enemy.draw(ctx, pause(), pacman)); 22 | checkGameOver(); 23 | checkGameWin(); 24 | } 25 | 26 | function checkGameWin() { 27 | if (!gameWin) { 28 | gameWin = tileMap.didWin(); 29 | if (gameWin) { 30 | gameWinSound.play(); 31 | } 32 | } 33 | } 34 | 35 | function checkGameOver() { 36 | if (!gameOver) { 37 | gameOver = isGameOver(); 38 | if (gameOver) { 39 | gameOverSound.play(); 40 | } 41 | } 42 | } 43 | 44 | function isGameOver() { 45 | return enemies.some( 46 | (enemy) => !pacman.powerDotActive && enemy.collideWith(pacman) 47 | ); 48 | } 49 | 50 | function pause() { 51 | return !pacman.madeFirstMove || gameOver || gameWin; 52 | } 53 | 54 | function drawGameEnd() { 55 | if (gameOver || gameWin) { 56 | let text = " You Win!"; 57 | if (gameOver) { 58 | text = "Game Over"; 59 | } 60 | 61 | ctx.fillStyle = "black"; 62 | ctx.fillRect(0, canvas.height / 3.2, canvas.width, 80); 63 | 64 | ctx.font = "75px comic sans"; 65 | const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0); 66 | gradient.addColorStop("0", "magenta"); 67 | gradient.addColorStop("0.5", "blue"); 68 | gradient.addColorStop("1.0", "red"); 69 | 70 | ctx.fillStyle = gradient; 71 | ctx.fillText(text, 10, canvas.height / 2); 72 | } 73 | } 74 | 75 | tileMap.setCanvasSize(canvas); 76 | setInterval(gameLoop, 1000 / 75); 77 | -------------------------------------------------------------------------------- /Pacman/src/MovingDirection.js: -------------------------------------------------------------------------------- 1 | const MovingDirection = { 2 | up: 0, 3 | down: 1, 4 | left: 2, 5 | right: 3, 6 | }; 7 | 8 | export default MovingDirection; 9 | -------------------------------------------------------------------------------- /PollIt/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Poll It 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /PollIt/script.js: -------------------------------------------------------------------------------- 1 | let poll = { 2 | question:"Poll for your favourite programming language", 3 | answers:[ 4 | "C", "Java", "PHP", "JavaScript","Python" 5 | ], 6 | pollCount:20, 7 | answersWeight:[4, 4, 2, 5,6], 8 | selectedAnswer:-1 9 | }; 10 | 11 | let pollDOM = { 12 | question:document.querySelector(".poll .question"), 13 | answers:document.querySelector(".poll .answers") 14 | }; 15 | 16 | pollDOM.question.innerText = poll.question; 17 | pollDOM.answers.innerHTML = poll.answers.map(function(answer,i){ 18 | return ( 19 | ` 20 |
21 | ${answer} 22 | 23 | 24 |
25 | ` 26 | ); 27 | }).join(""); 28 | 29 | function markAnswer(i){ 30 | poll.selectedAnswer = +i; 31 | try { 32 | document.querySelector(".poll .answers .answer.selected").classList.remove("selected"); 33 | } catch(msg){} 34 | document.querySelectorAll(".poll .answers .answer")[+i].classList.add("selected"); 35 | showResults(); 36 | } 37 | 38 | function showResults(){ 39 | let answers = document.querySelectorAll(".poll .answers .answer"); 40 | for(let i=0;i 2 | 3 | 4 | 5 | 6 | Quiz App 7 | 8 | 9 | 10 | 11 |
12 |
13 |

Question text

14 |
    15 |
  • 16 | 22 | 23 |
    • 24 |
  • 25 | 31 | 32 |
    • 33 |
  • 34 | 40 | 41 |
    • 42 |
  • 43 | 49 | 50 |
    • 51 |
52 |
53 | 54 |
55 | 56 | -------------------------------------------------------------------------------- /Quiz App/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #b8c6db; 9 | background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 100%); 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | font-family: "Poppins", sans-serif; 14 | margin: 0; 15 | min-height: 100vh; 16 | } 17 | 18 | .quiz-container { 19 | background-color: #fff; 20 | border-radius: 10px; 21 | box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1); 22 | overflow: hidden; 23 | width: 600px; 24 | max-width: 100%; 25 | } 26 | 27 | .quiz-header { 28 | padding: 4rem; 29 | } 30 | 31 | h2 { 32 | padding: 1rem; 33 | text-align: center; 34 | margin: 0; 35 | } 36 | 37 | ul { 38 | list-style-type: none; 39 | padding: 0; 40 | } 41 | 42 | ul li { 43 | font-size: 1.2rem; 44 | margin: 1rem 0; 45 | } 46 | 47 | ul li label { 48 | cursor: pointer; 49 | } 50 | 51 | button { 52 | background-color: #8e44ad; 53 | border: none; 54 | color: white; 55 | cursor: pointer; 56 | display: block; 57 | font-family: inherit; 58 | font-size: 1.1rem; 59 | width: 100%; 60 | padding: 1.3rem; 61 | } 62 | 63 | button:hover { 64 | background-color: #732d91; 65 | } 66 | 67 | button:focus { 68 | background-color: #5e3370; 69 | outline: none; 70 | } -------------------------------------------------------------------------------- /Quotetalks/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Quotetalks 3 | 4 | ![ss1](https://user-images.githubusercontent.com/64016811/119038267-8889cb00-b9d0-11eb-9e8d-f682373a27d5.jpg) 5 | -------------------------------------------------------------------------------- /Quotetalks/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Quotetalks/favicon.png -------------------------------------------------------------------------------- /Quotetalks/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | QuoteTalks 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |
Woops! There was an error!
15 |
16 | 17 |
18 | 19 | What you are is what you have been. What you'll be is what you do now. 20 | 21 | 24 | 25 |
26 | 27 |
28 | Buddha 29 |
30 |
31 | New Quote 32 |






33 |

Made by Mainak

34 |
35 | 36 | 37 |
38 | 39 |
40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Seat Booking/script.js: -------------------------------------------------------------------------------- 1 | const container = document.querySelector('.container'); 2 | const seats = document.querySelectorAll('.row .seat:not(.occupied'); 3 | const count = document.getElementById('count'); 4 | const total = document.getElementById('total'); 5 | const movieSelect = document.getElementById('movie'); 6 | 7 | populateUI(); 8 | let ticketPrice = +movieSelect.value; 9 | 10 | // Save selected movie index and price 11 | function setMovieData(movieIndex, moviePrice) { 12 | localStorage.setItem('selectedMovieIndex', movieIndex); 13 | localStorage.setItem('selectedMoviePrice', moviePrice); 14 | } 15 | 16 | // update total and count 17 | function updateSelectedCount() { 18 | const selectedSeats = document.querySelectorAll('.row .seat.selected'); 19 | 20 | const seatsIndex = [...selectedSeats].map((seat) => [...seats].indexOf(seat)); 21 | 22 | localStorage.setItem('selectedSeats', JSON.stringify(seatsIndex)); 23 | 24 | //copy selected seats into arr 25 | // map through array 26 | //return new array of indexes 27 | 28 | const selectedSeatsCount = selectedSeats.length; 29 | 30 | count.innerText = selectedSeatsCount; 31 | total.innerText = selectedSeatsCount * ticketPrice; 32 | } 33 | 34 | // get data from localstorage and populate ui 35 | function populateUI() { 36 | const selectedSeats = JSON.parse(localStorage.getItem('selectedSeats')); 37 | if (selectedSeats !== null && selectedSeats.length > 0) { 38 | seats.forEach((seat, index) => { 39 | if (selectedSeats.indexOf(index) > -1) { 40 | seat.classList.add('selected'); 41 | } 42 | }); 43 | } 44 | 45 | const selectedMovieIndex = localStorage.getItem('selectedMovieIndex'); 46 | 47 | if (selectedMovieIndex !== null) { 48 | movieSelect.selectedIndex = selectedMovieIndex; 49 | } 50 | } 51 | 52 | // Movie select event 53 | movieSelect.addEventListener('change', (e) => { 54 | ticketPrice = +e.target.value; 55 | setMovieData(e.target.selectedIndex, e.target.value); 56 | updateSelectedCount(); 57 | }); 58 | 59 | // Seat click event 60 | container.addEventListener('click', (e) => { 61 | if (e.target.classList.contains('seat') && !e.target.classList.contains('occupied')) { 62 | e.target.classList.toggle('selected'); 63 | 64 | updateSelectedCount(); 65 | } 66 | }); 67 | 68 | // intial count and total 69 | updateSelectedCount(); -------------------------------------------------------------------------------- /Sorting-Visualization/js_files/bubble.js: -------------------------------------------------------------------------------- 1 | async function bubble() { 2 | console.log('In bubbe()'); 3 | const ele = document.querySelectorAll(".bar"); 4 | for(let i = 0; i < ele.length-1; i++){ 5 | console.log('In ith loop'); 6 | for(let j = 0; j < ele.length-i-1; j++){ 7 | console.log('In jth loop'); 8 | ele[j].style.background = 'blue'; 9 | ele[j+1].style.background = 'blue'; 10 | if(parseInt(ele[j].style.height) > parseInt(ele[j+1].style.height)){ 11 | console.log('In if condition'); 12 | await waitforme(delay); 13 | swap(ele[j], ele[j+1]); 14 | } 15 | ele[j].style.background = 'cyan'; 16 | ele[j+1].style.background = 'cyan'; 17 | } 18 | ele[ele.length-1-i].style.background = 'green'; 19 | } 20 | ele[0].style.background = 'green'; 21 | } 22 | 23 | const bubSortbtn = document.querySelector(".bubbleSort"); 24 | bubSortbtn.addEventListener('click', async function(){ 25 | disableSortingBtn(); 26 | disableSizeSlider(); 27 | disableNewArrayBtn(); 28 | await bubble(); 29 | enableSortingBtn(); 30 | enableSizeSlider(); 31 | enableNewArrayBtn(); 32 | }); 33 | -------------------------------------------------------------------------------- /Sorting-Visualization/js_files/insertion.js: -------------------------------------------------------------------------------- 1 | async function insertion(){ 2 | console.log('In insertion()'); 3 | const ele = document.querySelectorAll(".bar"); 4 | // color 5 | ele[0].style.background = 'green'; 6 | for(let i = 1; i < ele.length; i++){ 7 | console.log('In ith loop'); 8 | let j = i - 1; 9 | let key = ele[i].style.height; 10 | // color 11 | ele[i].style.background = 'blue'; 12 | 13 | await waitforme(delay); 14 | 15 | while(j >= 0 && (parseInt(ele[j].style.height) > parseInt(key))){ 16 | console.log('In while loop'); 17 | // color 18 | ele[j].style.background = 'blue'; 19 | ele[j + 1].style.height = ele[j].style.height; 20 | j--; 21 | 22 | await waitforme(delay); 23 | 24 | // color 25 | for(let k = i; k >= 0; k--){ 26 | ele[k].style.background = 'green'; 27 | } 28 | } 29 | ele[j + 1].style.height = key; 30 | // color 31 | ele[i].style.background = 'green'; 32 | } 33 | } 34 | 35 | const inSortbtn = document.querySelector(".insertionSort"); 36 | inSortbtn.addEventListener('click', async function(){ 37 | disableSortingBtn(); 38 | disableSizeSlider(); 39 | disableNewArrayBtn(); 40 | await insertion(); 41 | enableSortingBtn(); 42 | enableSizeSlider(); 43 | enableNewArrayBtn(); 44 | }); 45 | 46 | 47 | -------------------------------------------------------------------------------- /Sorting-Visualization/js_files/selection.js: -------------------------------------------------------------------------------- 1 | async function selection(){ 2 | console.log('In selection()'); 3 | const ele = document.querySelectorAll(".bar"); 4 | for(let i = 0; i < ele.length; i++){ 5 | console.log('In ith loop'); 6 | let min_index = i; 7 | // Change color of the position to swap with the next min 8 | ele[i].style.background = 'blue'; 9 | for(let j = i+1; j < ele.length; j++){ 10 | console.log('In jth loop'); 11 | // Change color for the current comparision (in consideration for min_index) 12 | ele[j].style.background = 'red'; 13 | 14 | await waitforme(delay); 15 | if(parseInt(ele[j].style.height) < parseInt(ele[min_index].style.height)){ 16 | console.log('In if condition height comparision'); 17 | if(min_index !== i){ 18 | // new min_index is found so change prev min_index color back to normal 19 | ele[min_index].style.background = 'cyan'; 20 | } 21 | min_index = j; 22 | } 23 | else{ 24 | // if the currnent comparision is more than min_index change is back to normal 25 | ele[j].style.background = 'cyan'; 26 | } 27 | } 28 | await waitforme(delay); 29 | swap(ele[min_index], ele[i]); 30 | // change the min element index back to normal as it is swapped 31 | ele[min_index].style.background = 'cyan'; 32 | // change the sorted elements color to green 33 | ele[i].style.background = 'green'; 34 | } 35 | } 36 | 37 | const selectionSortbtn = document.querySelector(".selectionSort"); 38 | selectionSortbtn.addEventListener('click', async function(){ 39 | disableSortingBtn(); 40 | disableSizeSlider(); 41 | disableNewArrayBtn(); 42 | await selection(); 43 | enableSortingBtn(); 44 | enableSizeSlider(); 45 | enableNewArrayBtn(); 46 | }); -------------------------------------------------------------------------------- /Sorting-Visualization/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | font-size: 20px; 4 | padding: 0 20px 30px 0; 5 | line-height: 1.4; 6 | } 7 | .flex-container{ 8 | margin-top: 20px; 9 | display: flex; 10 | flex-wrap: nowrap; 11 | width: 100%; 12 | height: 500px; 13 | justify-content: center; 14 | transition: 2s all ease; 15 | } 16 | 17 | .flex-item{ 18 | background: cyan; 19 | border: 1pt solid black; 20 | width: 10px; 21 | transition: 0.1s all ease; 22 | } 23 | 24 | .row{ 25 | display: grid; 26 | grid-template-columns: 1fr 1fr 2fr; 27 | } 28 | 29 | #input{ 30 | display: flex; 31 | padding: 10px; 32 | justify-content: space-around; 33 | } 34 | h3 35 | { 36 | text-align: center; 37 | } 38 | 39 | -------------------------------------------------------------------------------- /Stone-Paper-Scissors-Game/Readme.MD: -------------------------------------------------------------------------------- 1 | # Stone Paper Scissor Game with JS 2 | 3 | ## Techs used: 4 | 5 | - HTML5. 6 | - CSS 3. 7 | - Vanilla Javascript. 8 | - Some custom images. 9 | 10 | ## Screenshot 11 | ![image](https://user-images.githubusercontent.com/64016811/137610102-5deb3767-3d77-47af-aac9-1d2fa6c5838d.png) 12 | -------------------------------------------------------------------------------- /Stone-Paper-Scissors-Game/assets/paper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Stone-Paper-Scissors-Game/assets/paper.png -------------------------------------------------------------------------------- /Stone-Paper-Scissors-Game/assets/rock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Stone-Paper-Scissors-Game/assets/rock.png -------------------------------------------------------------------------------- /Stone-Paper-Scissors-Game/assets/scissors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Stone-Paper-Scissors-Game/assets/scissors.png -------------------------------------------------------------------------------- /Stone-Paper-Scissors-Game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Stone Paper Scissor Game 9 | 12 | 13 | 14 |
15 |
16 |
17 |

Player

18 |

0

19 |
20 |
21 |

Device

22 |

0

23 |
24 |
25 | 26 |
27 |

Stone Paper Scissor

28 | 29 |
30 | 31 |
32 |

Choose an option

33 |
34 | 35 | 36 |
37 |
38 | 39 | 40 | 41 |
42 |
43 |

Made by Mainak

44 |
45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /Sudoku-JS/static/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Sudoku-JS/static/images/icon.png -------------------------------------------------------------------------------- /Sudoku-JS/static/js/constant.js: -------------------------------------------------------------------------------- 1 | const CONSTANT = { 2 | UNASSIGNED: 0, 3 | GRID_SIZE: 9, 4 | BOX_SIZE: 3, 5 | NUMBERS: [1,2,3,4,5,6,7,8,9], 6 | LEVEL_NAME: [ 7 | 'Easy', 8 | 'Medium', 9 | 'Hard', 10 | 'Very hard', 11 | 'Insane', 12 | 'Inhuman' 13 | ], 14 | LEVEL: [29, 38, 47, 56, 65, 74] 15 | } -------------------------------------------------------------------------------- /T2S/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Text2Speech 8 | 9 | 10 | 11 | 12 |

Text 2 Speech



13 | 14 |

15 | 16 | 17 |

Made By : Mainak

18 | 19 | 20 | -------------------------------------------------------------------------------- /T2S/script.js: -------------------------------------------------------------------------------- 1 | var txtInput = document.querySelector('#txtInput'); 2 | var voiceList = document.querySelector('#voiceList'); 3 | var btnSpeak = document.querySelector('#btnSpeak'); 4 | var synth = window.speechSynthesis; 5 | var voices = []; 6 | 7 | PopulateVoices(); 8 | if(speechSynthesis !== undefined){ 9 | speechSynthesis.onvoiceschanged = PopulateVoices; 10 | } 11 | 12 | btnSpeak.addEventListener('click', ()=> { 13 | var toSpeak = new SpeechSynthesisUtterance(txtInput.value); 14 | var selectedVoiceName = voiceList.selectedOptions[0].getAttribute('data-name'); 15 | voices.forEach((voice)=>{ 16 | if(voice.name === selectedVoiceName){ 17 | toSpeak.voice = voice; 18 | } 19 | }); 20 | synth.speak(toSpeak); 21 | }); 22 | 23 | function PopulateVoices(){ 24 | voices = synth.getVoices(); 25 | var selectedIndex = voiceList.selectedIndex < 0 ? 0 : voiceList.selectedIndex; 26 | voiceList.innerHTML = ''; 27 | voices.forEach((voice)=>{ 28 | var listItem = document.createElement('option'); 29 | listItem.textContent = voice.name; 30 | listItem.setAttribute('data-lang', voice.lang); 31 | listItem.setAttribute('data-name', voice.name); 32 | voiceList.appendChild(listItem); 33 | }); 34 | 35 | voiceList.selectedIndex = selectedIndex; 36 | } -------------------------------------------------------------------------------- /T2S/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding:0; 4 | box-sizing:border-box; 5 | } 6 | 7 | body 8 | { 9 | font-family: 'Roboto', sans-serif; 10 | font-size: 14px; 11 | background-color: #f5f5f5; 12 | display: block; 13 | justify-content: center; 14 | align-items: center; 15 | text-align: center; 16 | } 17 | #voiceList 18 | { 19 | margin-top:20px; 20 | width: 50%; 21 | height: 50px; 22 | display:block; 23 | margin-left:25%; 24 | justify-content: center; 25 | align-items: center; 26 | text-align: center; 27 | } 28 | #txtInput 29 | { 30 | width: 50%; 31 | height: 100px; 32 | border: 1px solid #ccc; 33 | border-radius: 5px; 34 | padding: 10px; 35 | 36 | font-size: 16px; 37 | margin-bottom: 10px; 38 | 39 | } 40 | #btnSpeak 41 | { 42 | width: 50%; 43 | height: 50px; 44 | border: 3px solid rgb(6, 45, 175); 45 | border-radius: 5px; 46 | 47 | font-size: 16px; 48 | margin-bottom: 10px; 49 | background-color: rgb(6, 141, 175); 50 | color:rgb(255, 255, 255); 51 | font-size: 2rem; 52 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif 53 | 54 | } 55 | h2{ 56 | font-size: 50px; 57 | margin: 10px; 58 | 59 | } 60 | h4{ 61 | font-size:20px; 62 | margin: 10px; 63 | color:blue; 64 | 65 | } -------------------------------------------------------------------------------- /TasvirOP/README.md: -------------------------------------------------------------------------------- 1 | # TasvirOP 🔥 2 | A responsive image search application that searches images based on user search tokens and fetch results from Unsplash API. 3 | 4 | ### Tech used: 5 | 1. HTML5. 6 | 2. CSS3. 7 | 3. JavaScript (Vanilla JS). 8 | 9 | ### Construct: 10 | Comprises of 2 main sections. The header and the body. The header comprises of the logo, some text and the search box. The body comprises of a blank area where the images will be displayed after being fetched. 11 | 12 | ![image](https://user-images.githubusercontent.com/64016811/137611208-7d5475fa-9ac5-4b27-84b4-fb8fff68f3f9.png) 13 | -------------------------------------------------------------------------------- /TasvirOP/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | TasvirOP🔥 10 | 11 | 12 | 13 |
14 | 15 |
16 |
17 | 26 |
27 |
28 |
Welcome to Tasvir Open Pictures. This is an open source image search application. The application will display relevant images based on your search keywords.
29 |
30 |
31 |
32 |
33 |
34 | 35 |
36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /TasvirOP/photo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/TasvirOP/photo.png -------------------------------------------------------------------------------- /TasvirOP/script.js: -------------------------------------------------------------------------------- 1 | dayNightTheme = () => { 2 | let date = new Date(); // Get the current date 3 | let hour = date.getHours(); // Get the current hour 4 | 5 | if(hour >= 7 && hour < 19){ // If the current hour is between 7am and 7pm 6 | document.body.style.backgroundColor = 'white';// Set the background color to white 7 | document.body.style.color = 'black';// Set the text color to black 8 | } 9 | else{// Else, if the current hour is between 7pm and 7am 10 | document.body.style.backgroundColor = 'black'; // Set the background color to black 11 | document.body.style.color = 'white'; // Set the text color to white 12 | } 13 | } 14 | 15 | window.addEventListener('load', dayNightTheme); // Get the input element 16 | 17 | document.querySelector("#input").addEventListener("keydown", (event) => { // Get the input element 18 | if (event.key == "Enter") 19 | apiRequest(); 20 | }); 21 | 22 | document.querySelector("#search").addEventListener("click", () => { 23 | apiRequest(); 24 | }); 25 | 26 | apiRequest = () => { 27 | 28 | document.querySelector("#grid").textContent = ""; 29 | 30 | const url = 'https://api.unsplash.com/search/photos?query='+input.value+'&per_page=30&client_id=SouHY7Uul-OxoMl3LL3c0NkxUtjIrKwf3tsGk1JaiVo'; 31 | 32 | fetch(url) 33 | 34 | .then(response => { 35 | if (!response.ok) throw Error(response.statusText); 36 | return response.json(); 37 | }) 38 | 39 | .then(data => { 40 | loadImages(data); 41 | }) 42 | 43 | .catch(error => console.log(error)); 44 | } 45 | 46 | loadImages = (data) => { 47 | for(let i = 0;i < data.results.length;i++){ 48 | let image = document.createElement("div"); 49 | image.className = "img"; 50 | image.style.backgroundImage = "url("+data.results[i].urls.raw + "&w=1366&h=768" +")"; 51 | image.addEventListener("dblclick", function(){ 52 | window.open(data.results[i].links.download, '_blank'); 53 | }) 54 | document.querySelector("#grid").appendChild(image); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /Theme Changer/images/about-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Theme Changer/images/about-img.jpg -------------------------------------------------------------------------------- /Theme Changer/images/g-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Theme Changer/images/g-1.jpg -------------------------------------------------------------------------------- /Theme Changer/images/g-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Theme Changer/images/g-2.jpg -------------------------------------------------------------------------------- /Theme Changer/images/g-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Theme Changer/images/g-3.jpg -------------------------------------------------------------------------------- /Theme Changer/images/g-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Theme Changer/images/g-4.jpg -------------------------------------------------------------------------------- /Theme Changer/images/g-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Theme Changer/images/g-5.jpg -------------------------------------------------------------------------------- /Theme Changer/images/g-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Theme Changer/images/g-6.jpg -------------------------------------------------------------------------------- /Theme Changer/images/g-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Theme Changer/images/g-7.jpg -------------------------------------------------------------------------------- /Theme Changer/images/g-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Theme Changer/images/g-8.jpg -------------------------------------------------------------------------------- /Theme Changer/images/g-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Theme Changer/images/g-9.jpg -------------------------------------------------------------------------------- /Theme Changer/images/pic-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Theme Changer/images/pic-1.png -------------------------------------------------------------------------------- /Theme Changer/images/pic-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Theme Changer/images/pic-2.png -------------------------------------------------------------------------------- /Theme Changer/images/pic-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Theme Changer/images/pic-3.png -------------------------------------------------------------------------------- /Theme Changer/images/pic-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Theme Changer/images/pic-4.png -------------------------------------------------------------------------------- /Theme Changer/images/slide-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Theme Changer/images/slide-1.jpg -------------------------------------------------------------------------------- /Theme Changer/images/slide-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Theme Changer/images/slide-2.jpg -------------------------------------------------------------------------------- /Theme Changer/images/slide-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Theme Changer/images/slide-3.jpg -------------------------------------------------------------------------------- /Theme Changer/images/slide-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Theme Changer/images/slide-4.jpg -------------------------------------------------------------------------------- /Theme Changer/images/slide-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Theme Changer/images/slide-5.jpg -------------------------------------------------------------------------------- /Theme Changer/images/slide-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Theme Changer/images/slide-6.jpg -------------------------------------------------------------------------------- /Theme Changer/js/script.js: -------------------------------------------------------------------------------- 1 | let menu = document.querySelector('#menu-bars'); 2 | let navbar = document.querySelector('.navbar'); 3 | 4 | menu.onclick = () =>{ 5 | menu.classList.toggle('fa-times'); 6 | navbar.classList.toggle('active'); 7 | } 8 | 9 | let themeToggler = document.querySelector('.theme-toggler'); 10 | let toggleBtn = document.querySelector('.toggle-btn'); 11 | 12 | toggleBtn.onclick = () =>{ 13 | themeToggler.classList.toggle('active'); 14 | } 15 | 16 | window.onscroll = () =>{ 17 | menu.classList.remove('fa-times'); 18 | navbar.classList.remove('active'); 19 | themeToggler.classList.remove('active'); 20 | } 21 | 22 | document.querySelectorAll('.theme-toggler .theme-btn').forEach(btn =>{ 23 | 24 | btn.onclick = () =>{ 25 | let color = btn.style.background; 26 | document.querySelector(':root').style.setProperty('--main-color', color); 27 | } 28 | 29 | }); 30 | 31 | var swiper = new Swiper(".home-slider", { 32 | effect: "coverflow", 33 | grabCursor: true, 34 | centeredSlides: true, 35 | slidesPerView: "auto", 36 | coverflowEffect: { 37 | rotate: 0, 38 | stretch: 0, 39 | depth: 100, 40 | modifier: 2, 41 | slideShadows: true, 42 | }, 43 | loop:true, 44 | autoplay:{ 45 | delay: 3000, 46 | disableOnInteraction:false, 47 | } 48 | }); 49 | 50 | var swiper = new Swiper(".review-slider", { 51 | slidesPerView: 1, 52 | grabCursor: true, 53 | loop:true, 54 | spaceBetween: 10, 55 | breakpoints: { 56 | 0: { 57 | slidesPerView: 1, 58 | }, 59 | 700: { 60 | slidesPerView: 2, 61 | }, 62 | 1050: { 63 | slidesPerView: 3, 64 | }, 65 | }, 66 | autoplay:{ 67 | delay: 5000, 68 | disableOnInteraction:false, 69 | } 70 | }); -------------------------------------------------------------------------------- /Timeliner/README.md: -------------------------------------------------------------------------------- 1 | # Timeliner 2 | Simple animated timeline 3 | 4 | ![image](https://user-images.githubusercontent.com/64016811/137611256-2f861770-6205-4bb0-94d0-5c922086397c.png) 5 | -------------------------------------------------------------------------------- /Timeliner/script.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | // define variables 5 | var items = document.querySelectorAll(".timeline li"); 6 | 7 | function isElementInViewport(el) { 8 | var rect = el.getBoundingClientRect(); 9 | return ( 10 | rect.top >= 0 && 11 | rect.left >= 0 && 12 | rect.bottom <= 13 | (window.innerHeight || document.documentElement.clientHeight) && 14 | rect.right <= (window.innerWidth || document.documentElement.clientWidth) 15 | ); 16 | } 17 | 18 | function callbackFunc() { 19 | for (var i = 0; i < items.length; i++) { 20 | if (isElementInViewport(items[i])) { 21 | items[i].classList.add("in-view"); 22 | } 23 | } 24 | } 25 | 26 | // listen for events 27 | window.addEventListener("load", callbackFunc); 28 | window.addEventListener("resize", callbackFunc); 29 | window.addEventListener("scroll", callbackFunc); 30 | })(); 31 | -------------------------------------------------------------------------------- /Todo-List/bars-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Todo-List/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Todo List App in JavaScript | CodingNepal 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | icon 16 | 17 |
18 |
19 |
20 | All 21 | Pending 22 | Completed 23 |
24 | 25 |
26 |
    27 |
    28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Virtual Piano/Readme.MD: -------------------------------------------------------------------------------- 1 | # Virtual Piano 2 | 3 | ![image](https://user-images.githubusercontent.com/64016811/137734855-f9d7da7d-8663-4829-8789-3f77053439b6.png) 4 | -------------------------------------------------------------------------------- /Virtual Piano/assets/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/assets/background.jpg -------------------------------------------------------------------------------- /Virtual Piano/assets/background1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/assets/background1.jpg -------------------------------------------------------------------------------- /Virtual Piano/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Piano 9 | 10 | 11 | 12 | 13 | 14 | 15 |
    16 |
    17 |
    18 | 19 | 2 20 |
    21 |
    22 | 23 |
    24 |
    25 |
    26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Virtual Piano/sounds/key1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/sounds/key1.mp3 -------------------------------------------------------------------------------- /Virtual Piano/sounds/key10.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/sounds/key10.mp3 -------------------------------------------------------------------------------- /Virtual Piano/sounds/key11.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/sounds/key11.mp3 -------------------------------------------------------------------------------- /Virtual Piano/sounds/key12.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/sounds/key12.mp3 -------------------------------------------------------------------------------- /Virtual Piano/sounds/key13.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/sounds/key13.mp3 -------------------------------------------------------------------------------- /Virtual Piano/sounds/key14.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/sounds/key14.mp3 -------------------------------------------------------------------------------- /Virtual Piano/sounds/key15.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/sounds/key15.mp3 -------------------------------------------------------------------------------- /Virtual Piano/sounds/key16.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/sounds/key16.mp3 -------------------------------------------------------------------------------- /Virtual Piano/sounds/key17.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/sounds/key17.mp3 -------------------------------------------------------------------------------- /Virtual Piano/sounds/key18.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/sounds/key18.mp3 -------------------------------------------------------------------------------- /Virtual Piano/sounds/key19.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/sounds/key19.mp3 -------------------------------------------------------------------------------- /Virtual Piano/sounds/key2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/sounds/key2.mp3 -------------------------------------------------------------------------------- /Virtual Piano/sounds/key20.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/sounds/key20.mp3 -------------------------------------------------------------------------------- /Virtual Piano/sounds/key21.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/sounds/key21.mp3 -------------------------------------------------------------------------------- /Virtual Piano/sounds/key22.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/sounds/key22.mp3 -------------------------------------------------------------------------------- /Virtual Piano/sounds/key23.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/sounds/key23.mp3 -------------------------------------------------------------------------------- /Virtual Piano/sounds/key24.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/sounds/key24.mp3 -------------------------------------------------------------------------------- /Virtual Piano/sounds/key3.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/sounds/key3.mp3 -------------------------------------------------------------------------------- /Virtual Piano/sounds/key4.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/sounds/key4.mp3 -------------------------------------------------------------------------------- /Virtual Piano/sounds/key5.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/sounds/key5.mp3 -------------------------------------------------------------------------------- /Virtual Piano/sounds/key6.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/sounds/key6.mp3 -------------------------------------------------------------------------------- /Virtual Piano/sounds/key7.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/sounds/key7.mp3 -------------------------------------------------------------------------------- /Virtual Piano/sounds/key8.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/sounds/key8.mp3 -------------------------------------------------------------------------------- /Virtual Piano/sounds/key9.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Virtual Piano/sounds/key9.mp3 -------------------------------------------------------------------------------- /Virtual Piano/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | max-height: 100vh; 3 | background-color: #19172e; 4 | } 5 | 6 | #piano { 7 | margin: auto; 8 | margin-top: 30vh; 9 | width: 70%; 10 | max-width: 800px; 11 | height: 300px; 12 | background: rgba( 255, 255, 255, 0.25); 13 | box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37); 14 | backdrop-filter: blur( 4px); 15 | -webkit-backdrop-filter: blur( 4px); 16 | border-radius: 10px; 17 | border: 1px solid rgba( 255, 255, 255, 0.18); 18 | position: relative; 19 | } 20 | 21 | #keys { 22 | width: 90%; 23 | position: absolute; 24 | bottom: 5px; 25 | height: 60%; 26 | margin: 5%; 27 | } 28 | 29 | .whiteKeys { 30 | width: 7%; 31 | height: 100%; 32 | background-color: white; 33 | position: absolute; 34 | border: 2px solid black; 35 | cursor: pointer; 36 | } 37 | 38 | .whiteKeys:active { 39 | background: linear-gradient(to bottom, rgb(248, 248, 248), rgb(238, 238, 238), grey); 40 | box-shadow: 2px -2px black inset, -4px -2px black inset; 41 | } 42 | 43 | .whiteKeys:hover { 44 | background-color: rgb(228, 228, 228); 45 | } 46 | 47 | .blackKeys { 48 | width: 3.5%; 49 | height: 50%; 50 | background-color: rgb(71, 71, 71); 51 | position: absolute; 52 | cursor: pointer; 53 | } 54 | 55 | .blackKeys:hover { 56 | background-color: rgb(36, 36, 36); 57 | } 58 | 59 | .blackKeys:active { 60 | background-color: black; 61 | } 62 | 63 | #volumeBar { 64 | position: absolute; 65 | right: 50px; 66 | top: 50px; 67 | } 68 | 69 | .fa-volume-up { 70 | color: yellow; 71 | font-size: 36px; 72 | } 73 | 74 | .fa-plus { 75 | color: green; 76 | cursor: pointer; 77 | } 78 | 79 | .fa-minus { 80 | color: red; 81 | cursor: pointer; 82 | } 83 | 84 | #volume { 85 | font-weight: 800; 86 | font-size: 1.5rem; 87 | user-select: none; 88 | color: white; 89 | } -------------------------------------------------------------------------------- /Voice Visualizer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Voice Visualizer 8 | 9 | 10 | 11 |

    12 | VOICE VISUALIZER 13 |

    14 |

    Made by : Mainak

    15 | 16 | 17 |

    Click to start audio render. 18 |
    19 | Make sure your browser gives permission to access the microphone.

    20 | 21 |
    22 | 23 | 24 | -------------------------------------------------------------------------------- /Voice Visualizer/script.js: -------------------------------------------------------------------------------- 1 | console.clear(); 2 | 3 | const audioCtx = new AudioContext(); 4 | const numberOfNodes = 16; 5 | const data = new Uint8Array(numberOfNodes * 4); 6 | 7 | const elVisualizer = document.querySelector('.visualizer'); 8 | 9 | const elNodes = Array.from({ length: numberOfNodes }, (n,i)=> { 10 | let node = document.createElement('div'); 11 | node.className = 'node'; 12 | node.style.setProperty('--i',i); 13 | elVisualizer.appendChild(node); 14 | return node; 15 | }); 16 | 17 | const analyserNode = new AnalyserNode(audioCtx, { 18 | fftSize: Math.max(numberOfNodes * 4, 32), 19 | maxDecibels: -20, 20 | minDecibels: -80, 21 | smoothingTimeConstant: 0.8 22 | }); 23 | 24 | function updateVisualizer(){ 25 | requestAnimationFrame(updateVisualizer); 26 | 27 | analyserNode.getByteFrequencyData(data); 28 | 29 | elNodes.forEach( (node,i) => { 30 | node.style.setProperty('--c', data[i]); 31 | node.style.setProperty( 32 | '--level', 33 | (data[i] / 255) 34 | // Attempt a log-ish scale for sensitivity in higher registers 35 | * (1 + (i / numberOfNodes)) 36 | ); 37 | }); 38 | 39 | //window.volume.textContent = Math.round( (data[0] / 255) * 10) / 10; 40 | 41 | } 42 | 43 | function startStream(){ 44 | window.volume.innerHTML = '   '; 45 | 46 | return navigator.mediaDevices 47 | .getUserMedia({ audio: true, video: false }) 48 | .then( stream => audioCtx.createMediaStreamSource(stream) ) 49 | .then( source => { 50 | source.connect(analyserNode); 51 | }).then(updateVisualizer); 52 | 53 | } 54 | 55 | // Have to initialize via a user event 56 | document.addEventListener('click', ()=>{ 57 | audioCtx.resume(); 58 | startStream(); 59 | }); -------------------------------------------------------------------------------- /Voice Visualizer/style.css: -------------------------------------------------------------------------------- 1 | html { height: 100%; display: flex; background: #1D1E22; color: white; } 2 | body { margin: auto; text-align: center; } 3 | 4 | .visualizer { 5 | display: flex; 6 | width: 100vw; 7 | height: 50vmin; 8 | padding: 5px; 9 | box-sizing: border-box; 10 | overflow: hidden; 11 | transform-style: preserve-3d; 12 | perspective: 700px; 13 | } 14 | 15 | .node { 16 | display: block; 17 | width: 5em; 18 | height: 100%; 19 | flex: 1 1 auto; 20 | background: blue; 21 | background: rgb(var(--c, 0), 155, 50); 22 | transform-origin: bottom center; 23 | margin: 5px; 24 | 25 | transform: scaleY( var(--level, 0.1) ); 26 | 27 | transform: 28 | translateZ( calc( 29 | (1 - var(--level, 0)) * -200px 30 | ) ) 31 | 32 | scaleY( calc( 33 | (var(--level,0) * 0.75) + 0.25) 34 | ); 35 | 36 | animation: eq-in .6s ease-out backwards; 37 | animation-timing-function: cubic-bezier(.6,0,.2,1.3); 38 | animation-duration: calc( .8s + ( var(--i) * .05s ) ); 39 | @keyframes eq-in { 40 | from { 41 | transform: 42 | translateZ( calc( 43 | (1 - var(--level, 0)) * -200px 44 | ) ) 45 | 46 | scaleY(1); 47 | } 48 | } 49 | } -------------------------------------------------------------------------------- /Waqt/README.md: -------------------------------------------------------------------------------- 1 | # Waqt 2 | An analog clock made with idea and watermark 3 | 4 | 5 | 6 | Made with HTML, CSS and JS 7 | -------------------------------------------------------------------------------- /Waqt/clock.js: -------------------------------------------------------------------------------- 1 | const deg = 6; 2 | const hr = document.querySelector('#hr'); 3 | const mn = document.querySelector('#mn'); 4 | const sc = document.querySelector('#sc'); 5 | 6 | setInterval(() => { 7 | let day = new Date(); 8 | let hh = day.getHours() * 30; 9 | let mm = day.getMinutes() * deg; 10 | let ss = day.getSeconds() * deg; 11 | hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`; 12 | mn.style.transform = `rotateZ(${mm}deg)`; 13 | sc.style.transform = `rotateZ(${ss}deg)`; 14 | }); -------------------------------------------------------------------------------- /Waqt/clock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Waqt/clock.png -------------------------------------------------------------------------------- /Waqt/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Waqt:The Analog Clock 8 | 9 | 10 | 11 | 12 |
    13 |

    WAQT

    14 |
    15 |
    16 |
    17 |
    18 |
    19 |
    20 |
    21 |
    22 |
    23 |
    24 | 25 | 26 | -------------------------------------------------------------------------------- /Waqt/s3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/Waqt/s3.jpg -------------------------------------------------------------------------------- /Word-count/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Word-View 8 | 11 | 41 | 42 | 43 | 44 |

    Word & Character Counter

    45 | 46 |

    47 | 0 Words & 48 | 0 Characters 49 |

    50 | 70 | 71 | -------------------------------------------------------------------------------- /chitchat/bot-mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/chitchat/bot-mini.png -------------------------------------------------------------------------------- /chitchat/bot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/chitchat/bot.png -------------------------------------------------------------------------------- /chitchat/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chatbot 6 | 7 | 8 | 9 | 10 | 11 |

    Welcome to ChitChat

    12 |
    13 | 14 |
    15 |

    Your chats

    16 |
    17 | 18 |
    19 | Robot cartoon 20 |
    21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /chitchat/speech.js: -------------------------------------------------------------------------------- 1 | // Text to Speech 2 | 3 | const synth = window.speechSynthesis; 4 | 5 | const textToSpeech = (string) => { 6 | let voice = new SpeechSynthesisUtterance(string); 7 | voice.text = string; 8 | voice.lang = "en-IND"; 9 | voice.volume = 1; 10 | voice.rate = 1; 11 | voice.pitch = 2; // Can be 0, 1, or 2 12 | synth.speak(voice); 13 | } -------------------------------------------------------------------------------- /chitchat/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html { 6 | height: 100%; 7 | 8 | } 9 | h2{ 10 | text-align: center; 11 | font-size: 3rem; 12 | margin-bottom: -100px; 13 | 14 | } 15 | 16 | body { 17 | font-family: 'Roboto', 'Oxygen', 18 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, Helvetica, 19 | sans-serif; 20 | -webkit-font-smoothing: antialiased; 21 | -moz-osx-font-smoothing: grayscale; 22 | background-color: rgba(41, 198, 241, 0.849); 23 | height: 100%; 24 | margin: 0; 25 | overflow: hidden; 26 | } 27 | 28 | span { 29 | padding-right: 15px; 30 | padding-left: 15px; 31 | } 32 | 33 | .container { 34 | display: flex; 35 | justify-content: center; 36 | align-items: center; 37 | width: 100%; 38 | height: 100%; 39 | } 40 | 41 | .chat { 42 | height: 300px; 43 | width: 50vw; 44 | display: flex; 45 | flex-direction: column; 46 | justify-content: center; 47 | align-items: center; 48 | } 49 | 50 | ::-webkit-input-placeholder { 51 | color: .711 52 | } 53 | 54 | input { 55 | border: 0; 56 | padding: 15px; 57 | margin-left: auto; 58 | border-radius: 10px; 59 | } 60 | 61 | .messages { 62 | display: flex; 63 | flex-direction: column; 64 | overflow: scroll; 65 | 66 | width: 100%; 67 | background-color: rgb(255, 200, 200); 68 | padding: 15px; 69 | margin: 15px; 70 | border-radius: 10px; 71 | } 72 | 73 | #bot { 74 | margin-left: auto; 75 | } 76 | 77 | .bot { 78 | font-family: Consolas, 'Courier New', Menlo, source-code-pro, Monaco, 79 | monospace; 80 | } 81 | 82 | .avatar { 83 | height: 25px; 84 | } 85 | 86 | .response { 87 | display: flex; 88 | align-items: center; 89 | margin: 1%; 90 | } 91 | 92 | 93 | /* Mobile */ 94 | 95 | @media only screen and (max-width: 980px) { 96 | .container { 97 | flex-direction: column; 98 | justify-content: flex-start; 99 | } 100 | .chat { 101 | width: 75vw; 102 | margin: 10vw; 103 | } 104 | } -------------------------------------------------------------------------------- /chitchat/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/chitchat/user.png -------------------------------------------------------------------------------- /dictionary ji/app.js: -------------------------------------------------------------------------------- 1 | const resultDiv = document.querySelector(".result"); 2 | const wordEle = document.querySelector("#word"); 3 | const phonetics = document.querySelector(".phonetics"); 4 | const audio = document.querySelector("audio"); 5 | const wordMeaning = document.querySelector(".word-definition"); 6 | const handle = async (e) => { 7 | if (e.keyCode === 13) { 8 | const word = e.target.value; 9 | const result = await fetch( 10 | `https://api.dictionaryapi.dev/api/v2/entries/en/${word}` 11 | ); 12 | const data = await result.json(); 13 | resultDiv.style.display = "block"; 14 | if (result.ok) { 15 | wordEle.innerText = data[0].word; 16 | phonetics.innerText = data[0].phonetics[0].text; 17 | audio.src = data[0].phonetics[0].audio; 18 | wordMeaning.innerText = data[0].meanings[0].definitions[0].definition; 19 | const synonyms = data[0].meanings[0].definitions[0].synonyms; 20 | let synonymsData = ""; 21 | for (let i = 0; i < synonyms.length; i++) { 22 | synonymsData += `

    ${synonyms[i]}

    `; 23 | } 24 | document.querySelector(".synonyms").innerHTML = synonymsData; 25 | return; 26 | } else { 27 | audio.style.display = "none"; 28 | document.querySelectorAll(".meaningheading")[0].style.display = "none"; 29 | document.querySelectorAll(".meaningheading")[1].style.display = "none"; 30 | wordEle.innerText = data.title; 31 | wordMeaning.innerText = data.message; 32 | } 33 | } 34 | }; 35 | -------------------------------------------------------------------------------- /dictionary ji/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | DictionaryJI 7 | 8 | 9 | 10 | 11 |

    12 | 13 |

    DICTIONARY JI

    14 |
    15 | 21 |
    22 |
    23 |

    24 |

    25 | 26 |

    Meaning

    27 |

    28 |

    Synonyms

    29 |
    30 |
    31 |

    © Mainak 2021

    32 |
    33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /node-graphs-master/img/add-line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/node-graphs-master/img/add-line.png -------------------------------------------------------------------------------- /node-graphs-master/img/add-node.pdn: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/node-graphs-master/img/add-node.pdn -------------------------------------------------------------------------------- /node-graphs-master/img/add-node.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/node-graphs-master/img/add-node.png -------------------------------------------------------------------------------- /node-graphs-master/img/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/node-graphs-master/img/bg.png -------------------------------------------------------------------------------- /node-graphs-master/img/delete-line.pdn: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/node-graphs-master/img/delete-line.pdn -------------------------------------------------------------------------------- /node-graphs-master/img/delete-line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/node-graphs-master/img/delete-line.png -------------------------------------------------------------------------------- /node-graphs-master/img/delete-node.pdn: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/node-graphs-master/img/delete-node.pdn -------------------------------------------------------------------------------- /node-graphs-master/img/delete-node.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/node-graphs-master/img/delete-node.png -------------------------------------------------------------------------------- /node-graphs-master/img/favicon.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/node-graphs-master/img/favicon.PNG -------------------------------------------------------------------------------- /node-graphs-master/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/node-graphs-master/img/favicon.ico -------------------------------------------------------------------------------- /node-graphs-master/img/move-node.pdn: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/node-graphs-master/img/move-node.pdn -------------------------------------------------------------------------------- /node-graphs-master/img/move-node.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/node-graphs-master/img/move-node.png -------------------------------------------------------------------------------- /pie-chart-maker/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
    12 |
    13 | 14 |
    15 | 16 | 17 |
    18 |
    19 |
    20 |

    Names

    21 |

    Data

    22 |
    23 |
    24 | 25 |
    26 |
    27 |

    28 |
    29 |
    30 | 31 | -------------------------------------------------------------------------------- /space-explorer animation/fonts/logo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/space-explorer animation/fonts/logo.ttf -------------------------------------------------------------------------------- /space-explorer animation/fonts/nagasaki.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/space-explorer animation/fonts/nagasaki.ttf -------------------------------------------------------------------------------- /space-explorer animation/img/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/space-explorer animation/img/01.png -------------------------------------------------------------------------------- /space-explorer animation/img/02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/space-explorer animation/img/02.png -------------------------------------------------------------------------------- /space-explorer animation/img/astronaut.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/space-explorer animation/img/astronaut.png -------------------------------------------------------------------------------- /space-explorer animation/img/falcon9-render_same_size_file-hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/space-explorer animation/img/falcon9-render_same_size_file-hover.png -------------------------------------------------------------------------------- /space-explorer animation/img/falcon9-render_same_size_file.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/space-explorer animation/img/falcon9-render_same_size_file.png -------------------------------------------------------------------------------- /space-explorer animation/img/launch-background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/space-explorer animation/img/launch-background.png -------------------------------------------------------------------------------- /space-explorer animation/img/reusable-rocket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/space-explorer animation/img/reusable-rocket.png -------------------------------------------------------------------------------- /space-explorer animation/img/section3-bg--large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/space-explorer animation/img/section3-bg--large.jpg -------------------------------------------------------------------------------- /space-explorer animation/img/section3-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/space-explorer animation/img/section3-bg.jpg -------------------------------------------------------------------------------- /space-explorer animation/img/ship-launching.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/space-explorer animation/img/ship-launching.jpg -------------------------------------------------------------------------------- /space-explorer animation/img/space-bg-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/space-explorer animation/img/space-bg-2.png -------------------------------------------------------------------------------- /space-explorer animation/img/space-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/space-explorer animation/img/space-bg.png -------------------------------------------------------------------------------- /space-explorer animation/img/space-station.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/space-explorer animation/img/space-station.png -------------------------------------------------------------------------------- /space-explorer animation/img/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/space-explorer animation/img/star.png -------------------------------------------------------------------------------- /space-explorer animation/img/starry-night.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/space-explorer animation/img/starry-night.jpg -------------------------------------------------------------------------------- /space-explorer animation/img/starry.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/space-explorer animation/img/starry.jpg -------------------------------------------------------------------------------- /space-explorer animation/img/wave-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/space-explorer animation/img/wave-white.png -------------------------------------------------------------------------------- /space-explorer animation/img/wave.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/space-explorer animation/img/wave.png -------------------------------------------------------------------------------- /space-explorer animation/js/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/JS-Projects/cf00adb0cc5601a5520cd6ef57fd0b3937c93fd4/space-explorer animation/js/star.png --------------------------------------------------------------------------------