├── Book Keeper ├── index.html ├── script.js └── style.css ├── Custom Countdown ├── index.html ├── script.js ├── style.css └── time.mp4 ├── Expanding Cards ├── index.html ├── script.js └── style.css ├── Expense Tracker ├── index.html ├── script.js └── style.css ├── Lyrics Search ├── index.html ├── script.js └── style.css ├── Meal Finder ├── index.html ├── script.js └── style.css ├── Memory Cards ├── .prettierrc ├── index.html ├── script.js └── style.css ├── Music Player ├── Music │ ├── Cartoon.mp3 │ ├── Free.mp3 │ └── Jarico.mp3 ├── img │ ├── Cartoon.jpg │ ├── Free.jpg │ └── Jarico.jpg ├── index.html ├── index.js └── style.css ├── Navigation Nation ├── index.html ├── script.js └── style.css ├── Slide Over Design ├── demo,html ├── demo.html ├── img │ ├── image1.jpg │ ├── image2.jpg │ ├── image3.jpg │ └── image4.jpg ├── index.html ├── script.js └── style.css ├── Text To Speech ├── img │ ├── DS_Store │ ├── angry.jpg │ ├── drink.jpg │ ├── food.jpg │ ├── grandma.jpg │ ├── happy.jpg │ ├── home.jpg │ ├── hurt.jpg │ ├── outside.jpg │ ├── sad.jpg │ ├── scared.jpg │ ├── school.jpg │ └── tired.jpg ├── index.html ├── script.js └── style.css ├── Type Game ├── index.html ├── script.js └── style.css └── Video Player ├── cars.mp4 ├── index.html ├── script.js └── style.css /Book Keeper/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bookmark Keeper 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

16 |

17 | 18 | 19 |

20 |

21 | Tkinter 22 |

23 |

24 |

25 | 26 |

27 |

28 | Tkinter 29 |

30 |

31 |

32 | 33 |

34 |

35 | Tkinter 36 |

37 |

38 |

39 | 40 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /Book Keeper/script.js: -------------------------------------------------------------------------------- 1 | const modal = document.getElementById('modal'); 2 | const modalShow = document.getElementById('show-modal'); 3 | const modalClose = document.getElementById('close-modal'); 4 | const bookmarkForm = document.getElementById('bookmark-form'); 5 | const websiteNameEl = document.getElementById('website-name'); 6 | const websiteUrlEl = document.getElementById('website-url'); 7 | const bookmarksContainer = document.getElementById('bookmarks-container'); 8 | 9 | let bookmarks = []; 10 | 11 | // Show Modal, Focus on Input 12 | function showModal() { 13 | modal.classList.add('show-modal'); 14 | websiteNameEl.focus(); 15 | } 16 | 17 | // Modal Event Listeners 18 | modalShow.addEventListener('click', showModal); 19 | modalClose.addEventListener('click', () => modal.classList.remove('show-modal')); 20 | window.addEventListener('click', (e) => (e.target === modal ? modal.classList.remove('show-modal') : false)); 21 | 22 | // Validate Form 23 | function validate(nameValue, urlValue) { 24 | const expression = /(https)?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/g; 25 | const regex = new RegExp(expression); 26 | if (!nameValue || !urlValue) { 27 | alert('Please submit values for both fields.'); 28 | return false; 29 | } 30 | if (!urlValue.match(regex)) { 31 | alert('Please provide a valid web address.'); 32 | return false; 33 | } 34 | // Valid 35 | return true; 36 | } 37 | 38 | // Build Bookmarks 39 | function buildBookmarks() { 40 | // Remove all bookmark elements 41 | bookmarksContainer.textContent = ''; 42 | // Build items 43 | bookmarks.forEach((bookmark) => { 44 | const { name, url } = bookmark; 45 | // Item 46 | const item = document.createElement('div'); 47 | item.classList.add('items'); 48 | // Close Icon 49 | const closeIcon = document.createElement('i'); 50 | closeIcon.classList.add('fas', 'fa-times'); 51 | closeIcon.setAttribute('title', 'Delete Bookmark'); 52 | closeIcon.setAttribute('onclick', `deleteBookmark('${url}')`); 53 | // Favicon / Link Container 54 | const linkInfo = document.createElement('div'); 55 | linkInfo.classList.add('name'); 56 | // Favicon 57 | const favicon = document.createElement('img'); 58 | favicon.setAttribute('src', `https://s2.googleusercontent.com/s2/favicons?domain=${url}`); 59 | favicon.setAttribute('alt', 'Favicon'); 60 | // Link 61 | const link = document.createElement('a'); 62 | link.setAttribute('href', `${url}`); 63 | link.setAttribute('target', '_blank'); 64 | link.textContent = name; 65 | // Append to bookmarks container 66 | linkInfo.append(favicon, link); 67 | item.append(closeIcon, linkInfo); 68 | bookmarksContainer.appendChild(item); 69 | }); 70 | } 71 | 72 | // Fetch bookmarks 73 | function fetchBookmarks() { 74 | // Get bookmarks from localStorage if available 75 | if (localStorage.getItem('bookmarks')) { 76 | bookmarks = JSON.parse(localStorage.getItem('bookmarks')); 77 | } else { 78 | // Create bookmarks array in localStorage 79 | bookmarks = [ 80 | { 81 | name: 'Jacinto Design', 82 | url: 'http://jacinto.design', 83 | }, 84 | ]; 85 | localStorage.setItem('bookmarks', JSON.stringify(bookmarks)); 86 | } 87 | buildBookmarks(); 88 | } 89 | 90 | // Delete Bookmark 91 | function deleteBookmark(url) { 92 | // Loop through the bookmarks array 93 | bookmarks.forEach((bookmark, i) => { 94 | if (bookmark.url === url) { 95 | bookmarks.splice(i, 1); 96 | } 97 | }); 98 | // Update bookmarks array in localStorage, re-populate DOM 99 | localStorage.setItem('bookmarks', JSON.stringify(bookmarks)); 100 | fetchBookmarks(); 101 | } 102 | 103 | function storeBookmark(e) { 104 | e.preventDefault(); 105 | const nameValue = websiteNameEl.value; 106 | let urlValue = websiteUrlEl.value; 107 | if (!urlValue.includes('http://', 'https://')) { 108 | urlValue = `https://${urlValue}`; 109 | } 110 | // Validate 111 | if (!validate(nameValue, urlValue)) { 112 | return false; 113 | } 114 | // Set bookmark object, add to array 115 | const bookmark = { 116 | name: nameValue, 117 | url: urlValue, 118 | }; 119 | bookmarks.push(bookmark); 120 | // Set bookmarks in localStorage, fetch, reset input fields 121 | localStorage.setItem('bookmarks', JSON.stringify(bookmarks)); 122 | fetchBookmarks(); 123 | bookmarkForm.reset(); 124 | websiteNameEl.focus(); 125 | } 126 | 127 | // Event Listener 128 | bookmarkForm.addEventListener('submit', storeBookmark); 129 | 130 | // On Load, Fetch Bookmarks 131 | fetchBookmarks(); -------------------------------------------------------------------------------- /Book Keeper/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Karla:wght@300&display=swap"); 2 | 3 | :root { 4 | --primary-color: #7c59b0; 5 | --border-radius: 5px; 6 | } 7 | 8 | html { 9 | box-sizing: border-box; 10 | } 11 | 12 | body { 13 | margin: 0; 14 | font-family: Karla, sans-serif; 15 | background-color: var(--primary-color); 16 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%23e5ddf1' fill-opacity='0.4'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); 17 | } 18 | 19 | h1 { 20 | color: white; 21 | padding: 20px; 22 | background: rgba(0, 0, 0, 0.5); 23 | border-radius: var(--border-radius); 24 | cursor: pointer; 25 | text-align: center; 26 | 27 | text-transform: uppercase; 28 | width: 275px; 29 | margin: 20px auto 10px; 30 | user-select: none; 31 | } 32 | 33 | h1:hover { 34 | background: rgba(0, 0, 0, 0.75); 35 | } 36 | 37 | /* BookMarks */ 38 | .container { 39 | display: flex; 40 | flex-direction: row; 41 | flex-wrap: wrap; 42 | } 43 | 44 | .items { 45 | background: rgba(0, 0, 0, 0.5); 46 | color: white; 47 | border-radius: var(--border-radius); 48 | padding: 20px; 49 | margin: 10px; 50 | } 51 | 52 | .items:hover { 53 | background: rgba(0, 0, 0, 0.6); 54 | } 55 | 56 | a { 57 | font-size: 20px; 58 | font-weight: bold; 59 | text-transform: uppercase; 60 | } 61 | 62 | a:link, 63 | a:visited { 64 | color: white; 65 | text-decoration: none; 66 | } 67 | 68 | a:hover, 69 | a:active { 70 | text-decoration: underline; 71 | } 72 | 73 | .fa-times { 74 | float: right; 75 | cursor: pointer; 76 | z-index: 2; 77 | } 78 | 79 | .name { 80 | margin-top: 20px; 81 | margin-right: 20px; 82 | } 83 | 84 | .name img { 85 | height: 20px; 86 | width: 20px; 87 | vertical-align: sub; 88 | margin-right: 5px; 89 | } 90 | 91 | /* Modal */ 92 | .modal-container { 93 | background: rgba(0, 0, 0, 0.6); 94 | display: none; 95 | position: fixed; 96 | top: 0; 97 | left: 0; 98 | right: 0; 99 | bottom: 0; 100 | } 101 | 102 | .show-modal { 103 | display: flex; 104 | justify-content: center; 105 | align-items: center; 106 | } 107 | 108 | .modal { 109 | background: white; 110 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); 111 | max-width: 95%; 112 | width: 500px; 113 | animation: modalopen 1s; 114 | } 115 | 116 | @keyframes modalopen { 117 | from { 118 | opacity: 0; 119 | } 120 | to { 121 | opacity: 1; 122 | } 123 | } 124 | 125 | .close-icon { 126 | float: right; 127 | color: white; 128 | font-size: 24px; 129 | position: relative; 130 | top: 13px; 131 | right: 13px; 132 | cursor: pointer; 133 | } 134 | 135 | .modal-header { 136 | background: var(--primary-color); 137 | color: white; 138 | padding: 15px; 139 | } 140 | 141 | h3 { 142 | margin: 0; 143 | } 144 | 145 | .modal-content { 146 | padding: 20px; 147 | background: whitesmoke; 148 | } 149 | 150 | /* Form Specific */ 151 | .form-group { 152 | height: 55px; 153 | } 154 | 155 | .form-input { 156 | width: 97%; 157 | padding: 5px; 158 | border: 2px solid var(--primary-color); 159 | border-radius: var(--border-radius); 160 | display: block; 161 | outline: none; 162 | } 163 | 164 | .form-label { 165 | color: var(--primary-color); 166 | display: block; 167 | } 168 | 169 | button { 170 | cursor: pointer; 171 | color: white; 172 | background: var(--primary-color); 173 | height: 30px; 174 | width: 100px; 175 | border: none; 176 | border-radius: var(--border-radius); 177 | margin-top: 10px; 178 | } 179 | 180 | button:hover { 181 | filter: brightness(110%); 182 | } 183 | 184 | button:focus { 185 | outline: none; 186 | } 187 | 188 | /* Media query */ 189 | @media screen and (max-width: 600px) { 190 | .container { 191 | flex-direction: column; 192 | } 193 | } 194 | -------------------------------------------------------------------------------- /Custom Countdown/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Custom Countdown 7 | 8 | 9 | 10 | 11 |

14 |

15 | 16 |

17 | 18 | 28 | 29 | 39 | 40 |

41 |

Countdown Complete!

42 |

Countdown Finished on 05-05-2020

43 | 44 |

45 |

46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /Custom Countdown/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Custom Countdown/script.js -------------------------------------------------------------------------------- /Custom Countdown/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); 2 | html { 3 | box-sizing: border-box; 4 | } 5 | 6 | body { 7 | margin: 0; 8 | min-height: 100vh; 9 | overflow-y: hidden; 10 | display: flex; 11 | align-items: center; 12 | font-family: Roboto; 13 | } 14 | 15 | /* Video Background */ 16 | .video-background { 17 | position: fixed; 18 | right: 0; 19 | bottom: 0; 20 | width: 100vw; 21 | height: auto; 22 | } 23 | 24 | video { 25 | position: absolute; 26 | top: 50%; 27 | left: 50%; 28 | transform: translate(-50%, -50%); 29 | } 30 | 31 | .video-overlay { 32 | position: fixed; 33 | left: 0; 34 | top: 0; 35 | height: 100vh; 36 | width: 100vw; 37 | background: rgba(255, 255, 255, 0.35); 38 | } 39 | 40 | /* Container */ 41 | .container { 42 | min-width: 580px; 43 | min-height: 304px; 44 | color: black; 45 | margin: 0 auto; 46 | padding: 25px 50px; 47 | border-radius: 5px; 48 | z-index: 2; 49 | display: flex; 50 | justify-content: center; 51 | background: rgba(255, 255, 255, 0.85); 52 | } 53 | 54 | .input-container { 55 | position: relative; 56 | top: 20px; 57 | } 58 | 59 | h1 { 60 | font-size: 35px; 61 | text-align: center; 62 | margin-top: 0; 63 | margin-bottom: 10px; 64 | } 65 | 66 | /* Form */ 67 | .form { 68 | width: 480px; 69 | } 70 | 71 | label { 72 | font-weight: bold; 73 | margin-left: 10px; 74 | } 75 | 76 | input { 77 | width: 95%; 78 | margin-bottom: 10px; 79 | padding: 10px; 80 | border: 1px solid #ccc; 81 | border-radius: 20px; 82 | background: #fff; 83 | outline: none; 84 | font-family: Roboto; 85 | } 86 | 87 | /* Button */ 88 | button { 89 | width: 100%; 90 | height: 40px; 91 | border-radius: 20px; 92 | margin-top: 15px; 93 | border: none; 94 | text-transform: uppercase; 95 | background: #006959; 96 | color: white; 97 | cursor: pointer; 98 | outline: none; 99 | } 100 | 101 | /* Countdown */ 102 | ul { 103 | margin-left: -45px; 104 | } 105 | 106 | li { 107 | display: inline-block; 108 | font-size: 30px; 109 | list-style-type: none; 110 | padding: 10px; 111 | text-transform: uppercase; 112 | } 113 | 114 | li span { 115 | display: block; 116 | font-size: 80px; 117 | text-align: center; 118 | } 119 | 120 | /* Complete */ 121 | .complete { 122 | position: relative; 123 | top: 60px; 124 | } 125 | 126 | .complete-title { 127 | animation: complete 4s infinite; 128 | } 129 | 130 | @keyframes complete { 131 | 0% { 132 | color: rgb(233, 13, 13); 133 | } 134 | 25% { 135 | color: rgb(233, 211, 13); 136 | } 137 | 50% { 138 | color: rgb(64, 233, 13); 139 | transform: scale(1.5); 140 | } 141 | 75% { 142 | color: rgb(0, 38, 253); 143 | } 144 | 100% { 145 | color: rgb(181, 16, 231); 146 | } 147 | } 148 | 149 | /* Media Query: Large Smartphone (Vertical) */ 150 | @media screen and (max-width: 600px) { 151 | .video-background { 152 | height: 100vh; 153 | width: 100vw; 154 | } 155 | 156 | video { 157 | object-fit: cover; 158 | object-position: 70%; 159 | margin-top: -1px; 160 | } 161 | 162 | .container { 163 | min-width: unset; 164 | width: 95vw; 165 | min-height: 245px; 166 | padding: 20px; 167 | margin: 10px; 168 | } 169 | 170 | .input-container { 171 | top: unset; 172 | } 173 | 174 | .countdown { 175 | position: relative; 176 | top: 10px; 177 | } 178 | 179 | .form { 180 | width: unset; 181 | } 182 | 183 | input { 184 | width: 93%; 185 | } 186 | 187 | h1 { 188 | font-size: 20px; 189 | } 190 | 191 | li { 192 | font-size: 15px; 193 | } 194 | 195 | li span { 196 | font-size: 40px; 197 | } 198 | } 199 | -------------------------------------------------------------------------------- /Custom Countdown/time.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Custom Countdown/time.mp4 -------------------------------------------------------------------------------- /Expanding Cards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Expanding Cards 7 | 8 | 9 | 10 |

11 |

12 |

Explore The World

13 |

14 | 15 |

16 |

The Ice Mountain

17 |

18 |

19 |

Flower Tree

20 |

21 |

22 |

The Deers

23 |

24 |

25 |

Cool Nature

26 |

27 |

28 | 29 | 30 | -------------------------------------------------------------------------------- /Expanding Cards/script.js: -------------------------------------------------------------------------------- 1 | const panels = document.querySelectorAll('.panel'); 2 | 3 | panels.forEach((panel) => { 4 | panel.addEventListener('click',()=> { 5 | removeActiveClasses(); 6 | panel.classList.add('active'); 7 | }) 8 | }) 9 | 10 | function removeActiveClasses(){ 11 | panels.forEach(panel => { 12 | panel.classList.remove('active'); 13 | }) 14 | } -------------------------------------------------------------------------------- /Expanding Cards/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300&display=swap'); 2 | 3 | 4 | *{ 5 | box-sizing: border-box; 6 | } 7 | 8 | body{ 9 | font-family: 'Mulish',sans-serif; 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | justify-content: center; 14 | height: 100vh; 15 | overflow: hidden; 16 | margin: 0; 17 | } 18 | 19 | .container{ 20 | display: flex; 21 | width: 90vw; 22 | } 23 | 24 | .panel{ 25 | background-size: cover; 26 | background-position: center; 27 | background-repeat: no-repeat; 28 | height: 80vh; 29 | border-radius: 50px; 30 | color: white; 31 | cursor: pointer; 32 | flex: 0.5; 33 | margin: 10px; 34 | position: relative; 35 | transition: flex 0.7s ease-in; 36 | } 37 | 38 | .panel h3{ 39 | font-size: 24px; 40 | position: absolute; 41 | bottom: 20px; 42 | left: 20px; 43 | margin: 0; 44 | opacity: 0; 45 | } 46 | 47 | .panel.active{ 48 | flex: 5; 49 | } 50 | 51 | .panel.active h3{ 52 | opacity: 1; 53 | transition: opacity 0.3s ease-in 0.4s; 54 | } 55 | 56 | @media(max-width: 480px){ 57 | .container{ 58 | width: 100vw; 59 | } 60 | 61 | .panel:nth-of-type(4),.panel:nth-of-type(5){ 62 | display: none; 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /Expense Tracker/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 | 38 | 39 |

Add New Transition

40 | 51 |

52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /Expense Tracker/script.js: -------------------------------------------------------------------------------- 1 | //1 2 | const balance = document.getElementById( 3 | "balance" 4 | ); 5 | const money_plus = document.getElementById( 6 | "money-plus" 7 | ); 8 | const money_minus = document.getElementById( 9 | "money-minus" 10 | ); 11 | const list = document.getElementById("list"); 12 | const form = document.getElementById("form"); 13 | const text = document.getElementById("text"); 14 | const amount = document.getElementById("amount"); 15 | // const dummyTransactions = [ 16 | // { id: 1, text: "Flower", amount: -20 }, 17 | // { id: 2, text: "Salary", amount: 300 }, 18 | // { id: 3, text: "Book", amount: -10 }, 19 | // { id: 4, text: "Camera", amount: 150 }, 20 | // ]; 21 | 22 | // let transactions = dummyTransactions; 23 | 24 | //last 25 | const localStorageTransactions = JSON.parse(localStorage.getItem('transactions')); 26 | 27 | let transactions = localStorage.getItem('transactions') !== null ? localStorageTransactions : []; 28 | 29 | //5 30 | //Add Transaction 31 | function addTransaction(e){ 32 | e.preventDefault(); 33 | if(text.value.trim() === '' || amount.value.trim() === ''){ 34 | alert('please add text and amount') 35 | }else{ 36 | const transaction = { 37 | id:generateID(), 38 | text:text.value, 39 | amount:+amount.value 40 | } 41 | 42 | transactions.push(transaction); 43 | 44 | addTransactionDOM(transaction); 45 | updateValues(); 46 | updateLocalStorage(); 47 | text.value=''; 48 | amount.value=''; 49 | } 50 | } 51 | 52 | 53 | //5.5 54 | //Generate Random ID 55 | function generateID(){ 56 | return Math.floor(Math.random()*1000000000); 57 | } 58 | 59 | //2 60 | 61 | //Add Trasactions to DOM list 62 | function addTransactionDOM(transaction) { 63 | //GET sign 64 | const sign = transaction.amount < 0 ? "-" : "+"; 65 | const item = document.createElement("li"); 66 | 67 | //Add Class Based on Value 68 | item.classList.add( 69 | transaction.amount < 0 ? "minus" : "plus" 70 | ); 71 | 72 | item.innerHTML = ` 73 | ${transaction.text} ${sign}${Math.abs( 74 | transaction.amount 75 | )} 76 | 77 | `; 78 | list.appendChild(item); 79 | } 80 | 81 | //4 82 | 83 | //Update the balance income and expence 84 | function updateValues() { 85 | const amounts = transactions.map( 86 | (transaction) => transaction.amount 87 | ); 88 | const total = amounts 89 | .reduce((acc, item) => (acc += item), 0) 90 | .toFixed(2); 91 | const income = amounts 92 | .filter((item) => item > 0) 93 | .reduce((acc, item) => (acc += item), 0) 94 | .toFixed(2); 95 | const expense = 96 | (amounts 97 | .filter((item) => item < 0) 98 | .reduce((acc, item) => (acc += item), 0) * 99 | -1).toFixed(2); 100 | 101 | balance.innerText=`$${total}`; 102 | money_plus.innerText = `$${income}`; 103 | money_minus.innerText = `$${expense}`; 104 | } 105 | 106 | 107 | //6 108 | 109 | //Remove Transaction by ID 110 | function removeTransaction(id){ 111 | transactions = transactions.filter(transaction => transaction.id !== id); 112 | updateLocalStorage(); 113 | Init(); 114 | } 115 | //last 116 | //update Local Storage Transaction 117 | function updateLocalStorage(){ 118 | localStorage.setItem('transactions',JSON.stringify(transactions)); 119 | } 120 | 121 | //3 122 | 123 | //Init App 124 | function Init() { 125 | list.innerHTML = ""; 126 | transactions.forEach(addTransactionDOM); 127 | updateValues(); 128 | } 129 | 130 | Init(); 131 | 132 | form.addEventListener('submit',addTransaction); -------------------------------------------------------------------------------- /Expense Tracker/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 3 | 0 1px 2px rgba(0, 0, 0, 0.24); 4 | } 5 | 6 | * { 7 | box-sizing: border-box; 8 | } 9 | 10 | body { 11 | background-color: #f7f7f7; 12 | display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | justify-content: center; 16 | min-height: 100vh; 17 | margin: 0; 18 | font-family: -apple-system, BlinkMacSystemFont, 19 | "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, 20 | "Open Sans", "Helvetica Neue", sans-serif; 21 | } 22 | 23 | .container { 24 | margin: 30px auto; 25 | width: 350px; 26 | } 27 | 28 | h1 { 29 | letter-spacing: 1px; 30 | margin: 0; 31 | } 32 | 33 | h3 { 34 | border-bottom: 1px solid #bbb; 35 | padding-bottom: 10px; 36 | margin: 40px 0 10px; 37 | } 38 | 39 | h4 { 40 | margin: 0; 41 | text-transform: uppercase; 42 | } 43 | 44 | .inc-exp-container { 45 | background-color: #fff; 46 | box-shadow: var(--box--shadow); 47 | padding: 20px; 48 | display: flex; 49 | justify-content: center; 50 | margin: 20px 0; 51 | } 52 | 53 | .inc-exp-container > div { 54 | flex: 1; 55 | text-align: center; 56 | } 57 | 58 | .inc-exp-container > div:first-of-type { 59 | border-right: 1px solid #dedede; 60 | } 61 | 62 | .money { 63 | font-size: 2; 64 | letter-spacing: 1px; 65 | margin: 5px 0; 66 | } 67 | .money-plus { 68 | color: #2ecc71; 69 | } 70 | 71 | .money-minus { 72 | color: #c0392b; 73 | } 74 | 75 | label { 76 | display: inline-block; 77 | margin: 10px 0; 78 | } 79 | 80 | input[type="text"], 81 | input[type="number"] { 82 | border: 1px solid #dedede; 83 | border-radius: 2px; 84 | display: block; 85 | font-size: 16px; 86 | padding: 10px; 87 | width: 100%; 88 | } 89 | 90 | .btn { 91 | cursor: pointer; 92 | background-color: #9c88ff; 93 | box-shadow: var(--box-shadow); 94 | color: #fff; 95 | border: 0; 96 | display: block; 97 | font-size: 16px; 98 | margin: 10px 0 30px; 99 | padding: 10px; 100 | width: 100%; 101 | } 102 | 103 | .btn:focus, 104 | .delete-btn:focus { 105 | outline: 0; 106 | } 107 | 108 | .list { 109 | list-style-type: none; 110 | padding: 0; 111 | margin-bottom: 40px; 112 | } 113 | 114 | .list li { 115 | background-color: #fff; 116 | box-shadow: var(--box--shadow); 117 | color: #333; 118 | display: flex; 119 | justify-content: space-between; 120 | position: relative; 121 | padding: 10px; 122 | margin: 10px 0; 123 | } 124 | 125 | .list li.plus { 126 | border-right: 5px solid #2ecc71; 127 | } 128 | 129 | .list li.minus { 130 | border-right: 5px solid #c0392b; 131 | } 132 | 133 | .delete-btn { 134 | cursor: pointer; 135 | background-color: #e74c3c; 136 | border: 0; 137 | color: #fff; 138 | font-size: 20px; 139 | line-height: 20px; 140 | padding: 2px 5px; 141 | position: absolute; 142 | top: 50%; 143 | left: 0; 144 | transform: translate(-100%, -50%); 145 | opacity: 0; 146 | transition: opacity 0.3s ease; 147 | } 148 | 149 | .list li:hover .delete-btn { 150 | opacity: 1; 151 | } 152 | -------------------------------------------------------------------------------- /Lyrics Search/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Lyric Search 7 | 8 | 9 | 10 |

11 |

LyricSearch

12 | 13 | 17 |

18 | 19 |

20 |

Results will be displayed here

21 |

22 | 23 |

24 | 25 | 26 | -------------------------------------------------------------------------------- /Lyrics Search/script.js: -------------------------------------------------------------------------------- 1 | const form = document.getElementById("form"); 2 | const search = document.getElementById("search"); 3 | const result = document.getElementById("result"); 4 | const more = document.getElementById("more"); 5 | const apiURL = "https://api.lyrics.ovh"; 6 | 7 | //function searchSong 8 | async function searchSongs(term) { 9 | const res = await fetch(`${apiURL}/suggest/${term}`); 10 | const data = await res.json(); 11 | showData(data); 12 | } 13 | 14 | 15 | 16 | // show data function 17 | function showData(data) { 18 | //let output = ''; 19 | // data.data.forEach(song => { 20 | // output+= ` 21 | //

22 | // 23 | // ${song.artist.name} 24 | // - ${song.title} 25 | // 27 | //

28 | // `; 29 | // }); 30 | 31 | // result.innerHTML = ` 32 | //

33 | // ${output} 34 | // 35 | // `; 36 | 37 | result.innerHTML = ` 38 |

42 | ${song.artist.name} 43 | - ${song.title} 44 | 45 | 46 |

50 | `; 51 | 52 | if(data.prev || data.next){ 53 | more.innerHTML = ` 54 | ${data.prev ? `` : ''} 55 | ${data.next ? `` : ''} 56 | `; 57 | } 58 | } 59 | 60 | //GEt prev and next Result 61 | 62 | async function getMoreSongs(url){ 63 | const res = await fetch(`https://cors-anywhere.herokuapp.com/${url}`); 64 | const data = await res.json(); 65 | showData(data); 66 | } 67 | 68 | //Get Lyrics for song 69 | async function getLyrics(artist,songTitle){ 70 | const demo = `${apiURL}/v1/${artist}/${songTitle}`; 71 | console.log(demo); 72 | 73 | const res = await fetch(`${apiURL}/v1/${artist}/${songTitle}`); 74 | const data = await res.json(); 75 | console.log(data); 76 | const lyrics = data.lyrics.replace(/(\r\n|\r|\n)/g,'
'); 77 | result.innerHTML = `

${artist} 78 | - ${songTitle}

${lyrics}`; 79 | more.innerHTML =''; 80 | 81 | } 82 | 83 | 84 | //Event Listerners 85 | form.addEventListener("submit", (e) => { 86 | e.preventDefault(); 87 | 88 | const searchTerm = search.value.trim(); 89 | 90 | if (!searchTerm) { 91 | alert("Please type in a search term"); 92 | } else { 93 | searchSongs(searchTerm); 94 | } 95 | }); 96 | 97 | //Get lyrics button click 98 | 99 | result.addEventListener('click', e => { 100 | const clickEl = e.target; 101 | console.log(); 102 | if(clickEl.tagName === 'BUTTON'){ 103 | const artist = clickEl.getAttribute('data-artist'); 104 | const songTitle = clickEl.getAttribute('data-songtit'); 105 | 106 | getLyrics(artist,songTitle); 107 | } 108 | }); 109 | 110 | -------------------------------------------------------------------------------- /Lyrics Search/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | 5 | body{ 6 | background-color:white; 7 | font-family: Arial, Helvetica, sans-serif; 8 | margin: 0; 9 | } 10 | 11 | button{ 12 | cursor: pointer; 13 | } 14 | 15 | button:active{ 16 | transform: scale(0.95); 17 | } 18 | 19 | input:focus,button:focus{ 20 | outline: none; 21 | } 22 | 23 | header{ 24 | background-image: url('https://wallpaperaccess.com/full/1713248.jpg'); 25 | background-repeat: no-repeat; 26 | background-size: cover; 27 | background-position: center center; 28 | color: #fff; 29 | display: flex; 30 | flex-direction: column; 31 | align-items: center; 32 | justify-content: center; 33 | padding: 100px 0; 34 | position: relative; 35 | } 36 | 37 | header::after{ 38 | content: ''; 39 | position: absolute; 40 | top: 0; 41 | left: 0; 42 | height: 100%; 43 | width: 100%; 44 | background-color: rgba(0, 0, 0, 0.4); 45 | } 46 | 47 | header *{ 48 | z-index: 1; 49 | } 50 | 51 | header h1{ 52 | margin: 0 0 30px; 53 | } 54 | 55 | form{ 56 | position: relative; 57 | width: 500px; 58 | max-width: 100%; 59 | } 60 | 61 | form input{ 62 | border: 0; 63 | border-radius:50px; 64 | font-size: 16px; 65 | padding: 15px 30px; 66 | width: 100%; 67 | } 68 | 69 | form button{ 70 | position: absolute; 71 | top: 2px; 72 | right: 2px; 73 | background-color: #e056fd; 74 | border: 0; 75 | border-radius: 50px; 76 | color: #fff; 77 | font-size: 16px; 78 | padding: 13px 30px; 79 | } 80 | 81 | .btn { 82 | background-color: #8d56fd; 83 | border: 0; 84 | border-radius: 10px; 85 | color: #fff; 86 | padding: 4px 10px; 87 | } 88 | 89 | ul.songs { 90 | list-style-type: none; 91 | padding: 0; 92 | } 93 | 94 | ul.songs li { 95 | display: flex; 96 | align-items: center; 97 | justify-content: space-between; 98 | margin: 10px 0; 99 | } 100 | 101 | .container { 102 | margin: 30px auto; 103 | max-width: 100%; 104 | width: 500px; 105 | } 106 | 107 | .container h2 { 108 | font-weight: 300; 109 | } 110 | 111 | .container p { 112 | text-align: center; 113 | } 114 | 115 | .centered { 116 | display: flex; 117 | justify-content: center; 118 | } 119 | 120 | .centered button { 121 | transform: scale(1.3); 122 | margin: 15px; 123 | } 124 | -------------------------------------------------------------------------------- /Meal Finder/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | Meal Finder 10 | 14 | 15 | 16 | 17 |

18 |

Meal Finder

19 |

20 | 26 | 29 |

30 |

31 |

32 |

33 |

34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /Meal Finder/script.js: -------------------------------------------------------------------------------- 1 | const search = document.getElementById("search"); 2 | const submit = document.getElementById("submit"); 3 | const random = document.getElementById("random"); 4 | const mealsEl = document.getElementById("meals"); 5 | const resultHeading = document.getElementsByClassName( 6 | "result-heading" 7 | ); 8 | const single_mealEl = document.getElementById( 9 | "single-meal" 10 | ); 11 | 12 | //SearchMeal from API 13 | function searchMeal(e) { 14 | e.preventDefault(); 15 | 16 | // Clear single Meal 17 | single_mealEl.innerHTML = ""; 18 | 19 | //get search Term 20 | const term = search.value; 21 | 22 | //Check for empty 23 | if (term.trim()) { 24 | fetch( 25 | `https://www.themealdb.com/api/json/v1/1/search.php?s=${term}` 26 | ) 27 | .then((res) => res.json()) 28 | .then((data) => { 29 | resultHeading.innerHTML = `

Search Result For ${term} :

`; 30 | 31 | if (data.meals === null) { 32 | resultHeading.innerHTML = `

There are No Search results for ${term}

`; 33 | } else { 34 | mealsEl.innerHTML = data.meals 35 | .map( 36 | (meal) => ` 37 |

38 |

39 |

40 |

${meal.strMeal}

41 |

42 |

43 | ` 44 | ) 45 | .join(""); 46 | } 47 | }); 48 | 49 | //Clear Search Term 50 | search.value = ""; 51 | } else { 52 | alert("please enter a search value"); 53 | } 54 | } 55 | 56 | //Fetch Meal By Id 57 | 58 | function getMealById(mealID) { 59 | fetch( 60 | `https://www.themealdb.com/api/json/v1/1/lookup.php?i=${mealID}` 61 | ) 62 | .then((res) => res.json()) 63 | .then((data) => { 64 | const meal = data.meals[0]; 65 | addMealToDOM(meal); 66 | }); 67 | } 68 | 69 | //fetch Meal 70 | function randomMeal(){ 71 | //Clear Meals and Heading 72 | mealsEl.innerHTML=''; 73 | resultHeading.innerHTML=''; 74 | 75 | fetch(`https://www.themealdb.com/api/json/v1/1/random.php`) 76 | .then(res => res.json()) 77 | .then(data => { 78 | const meal = data.meals[0]; 79 | addMealToDOM(meal); 80 | }) 81 | 82 | } 83 | 84 | //Add meal to DOM 85 | 86 | function addMealToDOM(meal) { 87 | const ingredients = []; 88 | for (let i = 1; i <= 20; i++) { 89 | if (meal[`strIngredient${i}`]) { 90 | ingredients.push( 91 | `${meal[`strIngredient${i}`]} - ${ 92 | meal[`strMeasure${i}`] 93 | }` 94 | ); 95 | }else{ 96 | break; 97 | } 98 | } 99 | 100 | single_mealEl.innerHTML = ` 101 |

102 |

${meal.strMeal}

103 |

104 |

105 | ${meal.strCategory ? `

${meal.strCategory}

` : ''} 106 | ${meal.strArea ? `

${meal.strArea}

` : ''} 107 |

108 |

109 |

${meal.strInstructions}

110 |

Ingredients

111 |

${ing}

114 |

115 |

116 | 117 | ` 118 | } 119 | 120 | //Event Listerner 121 | submit.addEventListener("submit", searchMeal); 122 | random.addEventListener('click',randomMeal); 123 | mealsEl.addEventListener("click", (e) => { 124 | const mealInfo = e.path.find((item) => { 125 | if (item.classList) { 126 | return item.classList.contains("meal-info"); 127 | } else { 128 | return false; 129 | } 130 | }); 131 | if (mealInfo) { 132 | const mealID = mealInfo.getAttribute( 133 | "data-mealid" 134 | ); 135 | getMealById(mealID); 136 | } 137 | }); 138 | -------------------------------------------------------------------------------- /Meal Finder/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | 5 | body{ 6 | background: #2d2013; 7 | color: #fff; 8 | font-family: Verdana, Geneva, Tahoma, sans-serif; 9 | margin: 0; 10 | } 11 | 12 | .container{ 13 | margin: auto; 14 | max-width: 800px; 15 | display: flex; 16 | flex-direction: column; 17 | align-items: center; 18 | justify-content: center; 19 | text-align: center; 20 | } 21 | 22 | .flex{ 23 | display: flex; 24 | } 25 | 26 | input,button{ 27 | border: 1px; 28 | border-top-left-radius: 4px; 29 | border-bottom-left-radius: 4px; 30 | font-size: 14px; 31 | padding: 8px 10px; 32 | margin: 0; 33 | } 34 | 35 | input[type="text"]{ 36 | width: 300px; 37 | } 38 | 39 | .search-btn{ 40 | cursor: pointer; 41 | border-left: 0; 42 | border-radius: 0; 43 | border-top-right-radius: 4px; 44 | border-bottom-right-radius: 4px; 45 | } 46 | 47 | .random-btn{ 48 | cursor: pointer; 49 | margin-left: 10px; 50 | border-top-right-radius: 4px; 51 | border-bottom-right-radius: 4px; 52 | } 53 | 54 | .meals{ 55 | display: grid; 56 | grid-template-columns: repeat(4,1fr); 57 | grid-gap: 20px; 58 | margin-top: 20px; 59 | } 60 | 61 | .meal{ 62 | cursor: pointer; 63 | position: relative; 64 | height: 180px; 65 | width: 180px; 66 | text-align: center; 67 | } 68 | 69 | .meal img{ 70 | width:100% ; 71 | height: 100%; 72 | border: 4px #fff solid; 73 | border-radius: 2px; 74 | } 75 | 76 | .meal-info{ 77 | position: absolute; 78 | top: 0; 79 | left: 0; 80 | height: 100%; 81 | width: 100%; 82 | background: rgba(0,0,0,.7); 83 | display: flex; 84 | align-items: center; 85 | justify-content: center; 86 | transition: opacity 0.2s ease-in; 87 | opacity: 0; 88 | } 89 | 90 | .meal:hover .meal-info{ 91 | opacity: 1; 92 | } 93 | 94 | .single-meal{ 95 | margin: 30px auto; 96 | width: 70%; 97 | 98 | } 99 | 100 | .single-meal img{ 101 | width: 300px; 102 | margin: 15px; 103 | border: 4px #fff solid; 104 | border-radius: 2px; 105 | } 106 | 107 | .single-meal-info{ 108 | margin: 20px; 109 | padding: 10px; 110 | border: 2px #e09850 dashed; 111 | border-radius: 5px; 112 | 113 | } 114 | 115 | .single-meal p{ 116 | margin: 0; 117 | letter-spacing: 0.5px; 118 | line-height: 1.5; 119 | } 120 | 121 | .single-meal ul{ 122 | padding-left: 0; 123 | list-style-type:none; 124 | } 125 | 126 | .single-meal ul li { 127 | border:1px solid #ededed; 128 | border-radius:5px; 129 | background-color: #fff; 130 | display: inline-block; 131 | color: #2d2013; 132 | font-size: 12px; 133 | font-weight: bold; 134 | padding: 5px; 135 | margin: 0 5px 5px 0; 136 | } 137 | 138 | @media(max-width: 800px){ 139 | .meals{ 140 | grid-template-columns: repeat(3,1fr); 141 | } 142 | } 143 | @media(max-width: 700px){ 144 | .meals{ 145 | grid-template-columns: repeat(2,1fr); 146 | } 147 | .meal{ 148 | height: 200px; 149 | width: 200px; 150 | } 151 | } 152 | @media(max-width: 500px){ 153 | input[type='text']{ 154 | width: 100%; 155 | } 156 | 157 | .meals{ 158 | grid-template-columns: 1fr; 159 | } 160 | .meal{ 161 | height: 300px; 162 | width: 300px; 163 | } 164 | } -------------------------------------------------------------------------------- /Memory Cards/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 40 3 | } -------------------------------------------------------------------------------- /Memory Cards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Memory Cards 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 |

Memory Cards 18 | 21 |

22 |

23 | 43 |

44 | 45 | 54 | 55 |

56 |

Add New Card 57 | 60 |

61 | 62 |

63 | Question 64 | 65 |

66 |

67 | Answer 68 | 69 |

70 | 71 | 74 | 75 |

76 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /Memory Cards/script.js: -------------------------------------------------------------------------------- 1 | //variable Declaration 2 | 3 | const cardsContainer = document.getElementById( 4 | "card-container" 5 | ); 6 | const prevBtn = document.getElementById( 7 | "prev" 8 | ); 9 | const nextBtn = document.getElementById( 10 | "next" 11 | ); 12 | const currentEl = document.getElementById( 13 | "current" 14 | ); 15 | const showBtn = document.getElementById( 16 | "show" 17 | ); 18 | const hideBtn = document.getElementById( 19 | "hide" 20 | ); 21 | const questionEl = document.getElementById( 22 | "question" 23 | ); 24 | const answerEl = document.getElementById( 25 | "answer" 26 | ); 27 | const addCardBtn = document.getElementById( 28 | "add-card" 29 | ); 30 | const clearBtn = document.getElementById( 31 | "clear" 32 | ); 33 | const addContainer = document.getElementById( 34 | "add-container" 35 | ); 36 | 37 | // keep track of current card 38 | let currentActiveCard = 0; 39 | 40 | //Store DOM cards 41 | const cardsEl = []; 42 | 43 | // Store card data 44 | //Local Storage 45 | const cardData = getCardsData(); 46 | // const cardData = [ 47 | // { 48 | // question: "What is JavaScript?", 49 | // answer: "a programming language", 50 | // }, 51 | // { 52 | // question: " Android Platforms", 53 | // answer: "flutter,react native", 54 | // }, 55 | // { 56 | // question: 57 | // "Machine Learning Langauge?", 58 | // answer: "python and R", 59 | // }, 60 | // ]; 61 | 62 | // create card function 63 | function CreateAllCards() { 64 | cardData.forEach((data, index) => 65 | createcard(data, index) 66 | ); 67 | } 68 | 69 | //create single card function 70 | function createcard(data, index) { 71 | const card = document.createElement( 72 | "div" 73 | ); 74 | card.classList.add("card"); 75 | if (index === 0) { 76 | card.classList.add("active"); 77 | } 78 | 79 | card.innerHTML = ` 80 |

81 |

82 |

${data.question}

83 |

84 |

85 |

${data.answer}

86 |

87 |

88 | `; 89 | 90 | card.addEventListener("click", () => 91 | card.classList.toggle("show-answer") 92 | ); 93 | 94 | //Add to DOM 95 | cardsEl.push(card); 96 | cardsContainer.appendChild(card); 97 | 98 | //update 99 | updateCurrentText(); 100 | } 101 | 102 | //show number cards 103 | function updateCurrentText(){ 104 | currentEl.innerText = `${currentActiveCard + 1}/${cardsEl.length}`; 105 | } 106 | 107 | //Local Storage 108 | function getCardsData(){ 109 | const cards = JSON.parse(localStorage.getItem('cards')); 110 | return cards === null ? [] : cards; 111 | } 112 | 113 | // Add Card to local storeage 114 | function setCardsData(cards){ 115 | localStorage.setItem('cards',JSON.stringify(cards)); 116 | window.location.reload(); 117 | } 118 | 119 | 120 | CreateAllCards(); 121 | 122 | 123 | //event Listners 124 | 125 | nextBtn.addEventListener('click',() => { 126 | cardsEl[currentActiveCard].className = 'card left'; 127 | currentActiveCard = currentActiveCard + 1; 128 | if(currentActiveCard > cardsEl.length -1){ 129 | currentActiveCard = cardsEl.length - 1; 130 | } 131 | 132 | cardsEl[currentActiveCard].className = 'card active'; 133 | updateCurrentText(); 134 | }) 135 | 136 | prevBtn.addEventListener('click',() => { 137 | cardsEl[currentActiveCard].className = 'card left'; 138 | currentActiveCard = currentActiveCard - 1; 139 | if(currentActiveCard < 0){ 140 | currentActiveCard = 0; 141 | } 142 | 143 | cardsEl[currentActiveCard].className = 'card active'; 144 | updateCurrentText(); 145 | }); 146 | 147 | //Show Add Card 148 | showBtn.addEventListener('click',() => addContainer.classList.add('show')); 149 | 150 | //hide add container 151 | hideBtn.addEventListener('click', () => addContainer.classList.remove('show')); 152 | 153 | //add Card button 154 | addCardBtn.addEventListener('click', () => { 155 | const question = questionEl.value; 156 | const answer = answerEl.value; 157 | if(question.trim() && answer.trim()){ 158 | const newCard = { question : question,answer : answer}; 159 | createcard(newCard); 160 | questionEl.value =''; 161 | answerEl.value=''; 162 | addContainer.classList.remove('show'); 163 | cardData.push(newCard); 164 | setCardsData(cardData); 165 | } 166 | }) 167 | 168 | clearBtn.addEventListener('click', () => { 169 | localStorage.clear(); 170 | cardsContainer.innerHTML= ''; 171 | window.location.reload(); 172 | }) -------------------------------------------------------------------------------- /Memory Cards/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Lato&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #fff; 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | justify-content: center; 13 | height: 100vh; 14 | margin: 0; 15 | overflow: hidden; 16 | font-family: "Lato", sans-serif; 17 | } 18 | 19 | h1 { 20 | position: relative; 21 | } 22 | 23 | h1 button { 24 | position: absolute; 25 | right: 0; 26 | transform: translate(120%, -50%); 27 | z-index: 2; 28 | } 29 | 30 | .btn { 31 | background-color: #fff; 32 | border: 1px solid #aaa; 33 | border-radius: 3px; 34 | font-size: 14px; 35 | margin-top: 20px; 36 | padding: 10px 15px; 37 | } 38 | 39 | .btn-small { 40 | font-size: 12px; 41 | padding: 5px 10px; 42 | } 43 | 44 | .btn-ghost { 45 | border: 0; 46 | background-color: transparent; 47 | } 48 | 49 | .clear { 50 | position: absolute; 51 | bottom: 30px; 52 | left: 30px; 53 | } 54 | 55 | .cards { 56 | perspective: 1000px; 57 | position: relative; 58 | height: 300px; 59 | width: 500px; 60 | max-width: 100%; 61 | } 62 | 63 | .card { 64 | position: absolute; 65 | opacity: 0; 66 | font-size: 1.5em; 67 | top: 0; 68 | left: 0; 69 | height: 100%; 70 | width: 100%; 71 | transform: translateX(50%) rotateY(-10deg); 72 | transition: transform 0.4s ease,opacity 0.4s ease; 73 | } 74 | 75 | .card.active { 76 | cursor: pointer; 77 | opacity: 1; 78 | z-index: 10; 79 | transform: translateX(0) rotateY(0deg); 80 | } 81 | 82 | .card.left{ 83 | transform: translateX(-50%) rotateY(-10deg); 84 | } 85 | 86 | .inner-card { 87 | box-shadow: 0 1px 10px 88 | rgba(0, 0, 0, 0.3); 89 | border-radius: 4px; 90 | height: 100%; 91 | width: 100%; 92 | position: relative; 93 | transform-style:preserve-3d; 94 | transition: transform 0.4s ease; 95 | } 96 | 97 | .card.show-answer .inner-card { 98 | transform: rotateX(180deg); 99 | 100 | } 101 | 102 | .inner-card-front, 103 | .inner-card-back { 104 | backface-visibility: hidden; 105 | position: absolute; 106 | top: 0; 107 | left: 0; 108 | display: flex; 109 | align-items: center; 110 | justify-content: center; 111 | height: 100%; 112 | width: 100%; 113 | background: #fff; 114 | } 115 | 116 | .inner-card-front{ 117 | transform: rotateX(0deg); 118 | z-index: 2; 119 | } 120 | 121 | .inner-card-back { 122 | transform: rotateX(180deg); 123 | } 124 | 125 | .inner-card-front::after, 126 | .inner-card-back::after{ 127 | content: '\f021 Flip'; 128 | font-family: 'Font Awesome 5 Free',Lato; 129 | position: absolute; 130 | top: 10px; 131 | right: 10px; 132 | font-weight: bold; 133 | font-size: 16px; 134 | color: #ddd; 135 | } 136 | 137 | .navigation{ 138 | display: flex; 139 | margin: 20px 0; 140 | 141 | } 142 | 143 | .navigation .nav-button{ 144 | border: none; 145 | background-color: transparent; 146 | cursor: pointer; 147 | font-size: 16px; 148 | } 149 | 150 | .navigation p{ 151 | margin: 0 25px; 152 | } 153 | 154 | .add-container{ 155 | opacity: 0; 156 | z-index: -1; 157 | background-color: #f0f0f0; 158 | border-top: 2px solid #eee; 159 | display: flex; 160 | flex-direction: column; 161 | align-items: center; 162 | justify-content: center; 163 | padding: 10px 0; 164 | position: absolute; 165 | top: 0; 166 | bottom: 0; 167 | width: 100%; 168 | transition: 0.3s ease; 169 | } 170 | 171 | .add-container.show{ 172 | opacity: 1; 173 | z-index: 2; 174 | } 175 | 176 | .add-container h3{ 177 | margin: 10px 0; 178 | } 179 | 180 | 181 | .form-group label{ 182 | display: block; 183 | margin: 20px 0 10px; 184 | } 185 | 186 | .form-group textarea{ 187 | border: 1px solid #aaa; 188 | border-radius: 3px; 189 | font-size: 12px; 190 | padding: 12px; 191 | min-width: 500px; 192 | max-width: 100%; 193 | } 194 | -------------------------------------------------------------------------------- /Music Player/Music/Cartoon.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Music Player/Music/Cartoon.mp3 -------------------------------------------------------------------------------- /Music Player/Music/Free.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Music Player/Music/Free.mp3 -------------------------------------------------------------------------------- /Music Player/Music/Jarico.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Music Player/Music/Jarico.mp3 -------------------------------------------------------------------------------- /Music Player/img/Cartoon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Music Player/img/Cartoon.jpg -------------------------------------------------------------------------------- /Music Player/img/Free.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Music Player/img/Free.jpg -------------------------------------------------------------------------------- /Music Player/img/Jarico.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Music Player/img/Jarico.jpg -------------------------------------------------------------------------------- /Music Player/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | Music Player 10 | 11 | 15 | 16 | 17 |

Music Player

18 | 19 |

23 |

24 |

25 |

29 |

33 |

34 |

35 | 36 |

40 | 41 |

42 |

47 |

48 | 63 |

64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /Music Player/index.js: -------------------------------------------------------------------------------- 1 | //1 2 | const musicContainer = document.getElementById('music-container'); 3 | const playBtn = document.getElementById('play'); 4 | const prevBtn = document.getElementById('prev'); 5 | const nextBtn = document.getElementById('next'); 6 | const audio = document.getElementById('audio'); 7 | const progress = document.getElementById('progress'); 8 | const progressContainer = document.getElementById('progress-container'); 9 | const title = document.getElementById('title'); 10 | const cover = document.getElementById('cover'); 11 | 12 | //Song Titles 13 | const songs=['Cartoon','Free','Jarico']; 14 | 15 | //Keep Track of Song 16 | let songIndex = 2; 17 | 18 | //Initialy Load Song Detailes 19 | 20 | 21 | //2 22 | //update song details 23 | function loadSong(song){ 24 | title.innerText = song; 25 | audio.src=`Music/${song}.mp3`; 26 | cover.src= `img/${song}.jpg`; 27 | 28 | } 29 | 30 | loadSong(songs[songIndex]); 31 | 32 | //4 33 | function playSong(){ 34 | musicContainer.classList.add('play'); 35 | playBtn.querySelector('i.fas').classList.remove('fa-play'); 36 | playBtn.querySelector('i.fas').classList.add('fa-pause'); 37 | audio.play(); 38 | } 39 | function pauseSong(){ 40 | musicContainer.classList.remove('play'); 41 | playBtn.querySelector('i.fas').classList.add('fa-play'); 42 | playBtn.querySelector('i.fas').classList.remove('fa-pause'); 43 | audio.pause(); 44 | } 45 | 46 | //set Progress 47 | function setProgress(e){ 48 | const width = this.clientWidth; 49 | const clickX = e.offsetX; 50 | const duration = audio.duration; 51 | audio.currentTime = (clickX/width) * duration; 52 | } 53 | 54 | 55 | function updateProgress(e){ 56 | const { duration,currentTime } = e.srcElement; 57 | const progressPercent = (currentTime / duration) * 100; 58 | progress.style.width = `${progressPercent}%`; 59 | } 60 | 61 | //3 62 | //Event Listeners 63 | 64 | playBtn.addEventListener('click', ()=> { 65 | const isPlaying = musicContainer.classList.contains('play'); 66 | if(isPlaying){ 67 | pauseSong(); 68 | } 69 | else{ 70 | playSong(); 71 | } 72 | }) 73 | 74 | 75 | //5 76 | function prevSong(){ 77 | songIndex--; 78 | if(songIndex < 0){ 79 | songIndex = songs.length -1; 80 | } 81 | 82 | loadSong(songs[songIndex]); 83 | playSong(); 84 | } 85 | 86 | function nextSong(){ 87 | songIndex++; 88 | 89 | if(songIndex > songs.length - 1){ 90 | songIndex = 0; 91 | } 92 | loadSong(songs[songIndex]); 93 | playSong(); 94 | 95 | } 96 | 97 | 98 | 99 | //change Song 100 | prevBtn.addEventListener('click',prevSong); 101 | nextBtn.addEventListener('click',nextSong); 102 | 103 | 104 | //last 105 | //Time Song update 106 | audio.addEventListener('timeupdate',updateProgress); 107 | 108 | 109 | 110 | 111 | //all done 112 | //Click on Progress 113 | progressContainer.addEventListener('click',setProgress); 114 | 115 | 116 | //song End 117 | audio.addEventListener('ended',nextSong); 118 | -------------------------------------------------------------------------------- /Music Player/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | background-image: linear-gradient( 7 | 0deg, 8 | rgba(247, 247, 247, 1) 23.8%, 9 | rgba(252, 221, 221, 1) 92% 10 | ); 11 | height: 100vh; 12 | display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | justify-content: center; 16 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 17 | Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", 18 | "Helvetica Neue", sans-serif; 19 | margin: 0; 20 | } 21 | 22 | .music-container { 23 | background-color: #fff; 24 | border-radius: 15px; 25 | box-shadow: 0 20px 20px 0 rgba(252, 169, 169, 0.6); 26 | display: flex; 27 | padding: 20px 30px; 28 | position: relative; 29 | margin: 100px 0; 30 | z-index: 10; 31 | } 32 | 33 | .img-container { 34 | position: relative; 35 | width: 110px; 36 | } 37 | 38 | .img-container::after { 39 | content: ""; 40 | background-color: #fff; 41 | border-radius: 50%; 42 | position: absolute; 43 | bottom: 100%; 44 | left: 50%; 45 | width: 20px; 46 | height: 20px; 47 | transform: translate(-50%, -50%); 48 | } 49 | 50 | .img-container img { 51 | border-radius: 50%; 52 | object-fit: cover; 53 | height: 110px; 54 | width: inherit; 55 | position: absolute; 56 | bottom: 0; 57 | left: 0; 58 | animation: rotate 3s linear infinite; 59 | animation-play-state: paused; 60 | } 61 | 62 | .music-container.play .img-container img { 63 | animation-play-state: running; 64 | } 65 | 66 | @keyframes rotate { 67 | from { 68 | transform: rotate(0deg); 69 | } 70 | to { 71 | transform: rotate(360deg); 72 | } 73 | } 74 | 75 | .navigation { 76 | display: flex; 77 | align-items: center; 78 | justify-content: center; 79 | z-index: 1; 80 | } 81 | 82 | .action-btn { 83 | background-color: #fff; 84 | border: 0; 85 | color: #dfdbdf; 86 | font-size: 20px; 87 | cursor: pointer; 88 | padding: 10px; 89 | margin: 0 20px; 90 | } 91 | 92 | .action-btn.action-btn-big { 93 | color: #cdc2d0; 94 | font-size: 30px; 95 | } 96 | 97 | .action-btn:focus { 98 | outline: 0; 99 | } 100 | 101 | .music-info { 102 | background-color: rgba(255, 255, 255, 0.5); 103 | border-radius: 15px 15px 0 0; 104 | position: absolute; 105 | top: 0; 106 | left: 20px; 107 | width: calc(100% - 40px); 108 | padding: 10px 10px 10px 150px; 109 | opacity: 0; 110 | transform: translateY(0%); 111 | transition: transform 0.3s ease-in, opacity 0.3s ease-in; 112 | z-index: 0; 113 | } 114 | 115 | .music-info h4 { 116 | margin: 0; 117 | } 118 | 119 | .music-container.play .music-info { 120 | opacity: 1; 121 | transform: translateY(-100%); 122 | } 123 | 124 | .progress-container { 125 | background: #fff; 126 | border-radius: 5px; 127 | margin: 10px 0; 128 | height: 4px; 129 | width: 100%; 130 | } 131 | 132 | .progress { 133 | background-color: #fe8daa; 134 | border-radius: 5px; 135 | height: 100%; 136 | width: 0%; 137 | transition: width 0.1s linear; 138 | } 139 | -------------------------------------------------------------------------------- /Navigation Nation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Animated Navigation 7 | 8 | 9 | 10 | 11 |

12 | 13 | 22 |

23 | 24 | 29 | 30 |

Jacinto Design

31 |

Learn More About Me

32 |

These Are My Strengths

33 |

These Are My Results

34 |

Available Anytime

35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /Navigation Nation/script.js: -------------------------------------------------------------------------------- 1 | const menuBars = document.getElementById('menu-bars'); 2 | const overlay = document.getElementById('overlay'); 3 | const nav1 = document.getElementById('nav-1'); 4 | const nav2 = document.getElementById('nav-2'); 5 | const nav3 = document.getElementById('nav-3'); 6 | const nav4 = document.getElementById('nav-4'); 7 | const nav5 = document.getElementById('nav-5'); 8 | const navItems = [nav1,nav2,nav3,nav4,nav5]; 9 | //control nav animation 10 | function navAnimation(direction1,direction2){ 11 | navItems.forEach((nav,i) => { 12 | i = i+1; 13 | nav.classList.replace(`slide-${direction1}-${i}`,`slide-${direction2}-${i}`) 14 | }) 15 | } 16 | //toggle Nav 17 | function toggleNav(){ 18 | //Toggle Menu 19 | menuBars.classList.toggle('change'); 20 | //Toogle Menu active 21 | overlay.classList.toggle('overlay-active'); 22 | if(overlay.classList.contains('overlay-active')){ 23 | //Animate -Overlay 24 | overlay.classList.add('overlay-slide-left') 25 | overlay.classList.replace('overlay-slide-left','overlay-slide-right'); 26 | //Animate in nav Items 27 | navAnimation('out','in'); 28 | }else{ 29 | //Animate Out - Overlay 30 | overlay.classList.add('overlay-slide-right'); 31 | overlay.classList.replace('overlay-slide-right','overlay-slide-left'); 32 | //Animate in 33 | navAnimation('in','out'); 34 | } 35 | } 36 | //Event Listerners 37 | menuBars.addEventListener('click',toggleNav); 38 | navItems.forEach((nav) => { 39 | nav.addEventListener('click',toggleNav); 40 | }) 41 | -------------------------------------------------------------------------------- /Navigation Nation/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primaryColor: #fff; 3 | --navColor1: #21292c; 4 | --navColor2: #aa3e39; 5 | --navColor3: #aa6e39; 6 | --navColor4: #236267; 7 | --navColor5: #2c8437; 8 | } 9 | 10 | html { 11 | box-sizing: border-box; 12 | } 13 | 14 | body { 15 | margin: 0; 16 | background: #000; 17 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 18 | Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", 19 | "Helvetica Neue", sans-serif; 20 | } 21 | 22 | /* --- Navigation Menu ------------------------------ */ 23 | /* Overlay */ 24 | .overlay { 25 | position: fixed; 26 | z-index: 9; 27 | top: 0; 28 | left: 0; 29 | width: 100vw; 30 | height: 100vh; 31 | background-color: rgba(0, 0, 0, 0.7); 32 | transform: translateX(-100vw); 33 | } 34 | 35 | .overlay-slide-right { 36 | transition: all 0.4s ease-in-out; 37 | transform: translateX(0); 38 | } 39 | .overlay-slide-left { 40 | transition: all 0.8s ease-in-out; 41 | transform: translateX(-100vw); 42 | } 43 | /* Nav Menu Items */ 44 | nav, 45 | nav ul { 46 | height: 100vh; 47 | margin: 0; 48 | padding: 0; 49 | } 50 | 51 | nav ul { 52 | display: flex; 53 | flex-direction: column; 54 | justify-content: stretch; 55 | list-style: none; 56 | } 57 | 58 | nav ul li { 59 | height: 20%; 60 | overflow: hidden; 61 | } 62 | 63 | nav li a { 64 | position: relative; 65 | top: 45%; 66 | color: #fff; 67 | text-transform: uppercase; 68 | letter-spacing: 4px; 69 | text-decoration: none; 70 | display: block; 71 | text-align: center; 72 | } 73 | nav li a:hover { 74 | transform: scale(1.2); 75 | } 76 | 77 | nav li a::before { 78 | content: ""; 79 | width: 25vw; 80 | height: 3px; 81 | background-color: #fff; 82 | position: absolute; 83 | top: 47.5%; 84 | left: 0; 85 | opacity: 0; 86 | } 87 | 88 | nav li a:hover::before { 89 | opacity: 1; 90 | } 91 | nav li:nth-of-type(1) { 92 | background-color: var(--navColor1); 93 | } 94 | nav li:nth-of-type(2) { 95 | background-color: var(--navColor2); 96 | } 97 | nav li:nth-of-type(3) { 98 | background-color: var(--navColor3); 99 | } 100 | nav li:nth-of-type(4) { 101 | background-color: var(--navColor4); 102 | } 103 | nav li:nth-of-type(5) { 104 | background-color: var(--navColor5); 105 | } 106 | 107 | /* slider animation delay */ 108 | .slide-in-1 { 109 | animation: slide-in 0.4s linear 0.2s both; 110 | } 111 | .slide-in-2 { 112 | animation: slide-in 0.4s linear 0.4s both; 113 | } 114 | .slide-in-3 { 115 | animation: slide-in 0.4s linear 0.6s both; 116 | } 117 | .slide-in-4 { 118 | animation: slide-in 0.4s linear 0.8s both; 119 | } 120 | .slide-in-5 { 121 | animation: slide-in 0.4s linear 1s both; 122 | } 123 | 124 | @keyframes slide-in { 125 | from { 126 | transform: translateX(-100%); 127 | } 128 | to { 129 | transform: translateX(0); 130 | } 131 | } 132 | 133 | /* Slide out animation */ 134 | 135 | .slide-out-1 { 136 | animation: slide-out 0.3s linear 0.5s both; 137 | } 138 | .slide-out-2 { 139 | animation: slide-out 0.3s linear 0.4s both; 140 | } 141 | .slide-out-3 { 142 | animation: slide-out 0.3s linear 0.3s both; 143 | } 144 | .slide-out-4 { 145 | animation: slide-out 0.3s linear 0.2s both; 146 | } 147 | .slide-out-5 { 148 | animation: slide-out 0.3s linear 0.1s both; 149 | } 150 | 151 | @keyframes slide-out { 152 | from { 153 | transform: translateX(0); 154 | } 155 | to { 156 | transform: translateX(-100%); 157 | } 158 | } 159 | /* --- Menu Bars ------------------------------------ */ 160 | 161 | .menu-bars { 162 | position: fixed; 163 | top: 1rem; 164 | right: 2rem; 165 | z-index: 10; 166 | display: inline; 167 | cursor: pointer; 168 | } 169 | 170 | .bar1, 171 | .bar2, 172 | .bar3 { 173 | width: 35px; 174 | height: 2px; 175 | background-color: #fff; 176 | margin: 8px 0; 177 | transition: 0.4s; 178 | } 179 | 180 | /* Rotate first bar */ 181 | .change .bar1 { 182 | transform: rotate(-45deg) translate(-7px, 8px); 183 | } 184 | 185 | /* Fade out the second bar */ 186 | .change .bar2 { 187 | opacity: 0; 188 | } 189 | 190 | /* Rotate last bar */ 191 | .change .bar3 { 192 | transform: rotate(45deg) translate(-6px, -8px); 193 | } 194 | 195 | /* --- Sections ------------------------------------ */ 196 | 197 | section { 198 | width: 100%; 199 | height: 100vh; 200 | position: relative; 201 | display: flex; 202 | justify-content: center; 203 | align-items: center; 204 | text-transform: uppercase; 205 | letter-spacing: 2px; 206 | color: var(--primaryColor); 207 | } 208 | 209 | section#home { 210 | background-image: url("https://images.unsplash.com/photo-1581453904507-626ddb717f14?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80"); 211 | background-size: cover; 212 | background-position: center center; 213 | } 214 | 215 | section#home a { 216 | position: absolute; 217 | z-index: 2; 218 | top: 1.5rem; 219 | left: 1.5rem; 220 | text-decoration: none; 221 | font-size: 0.8rem; 222 | padding-bottom: 5px; 223 | color: var(--primaryColor); 224 | border-bottom: 1px solid var(--primaryColor); 225 | } 226 | 227 | section#about { 228 | background-color: var(--navColor2); 229 | } 230 | 231 | section#skills { 232 | background-color: var(--navColor3); 233 | } 234 | 235 | section#projects { 236 | background-color: var(--navColor4); 237 | } 238 | 239 | section#contact { 240 | background-color: var(--navColor5); 241 | } 242 | 243 | /* Media Query: Large Smartphone (Vertical) */ 244 | @media (max-width: 600px) { 245 | section#home a { 246 | top: 1rem; 247 | left: 1rem; 248 | } 249 | 250 | .menu-bars { 251 | top: 0.5rem; 252 | right: 1rem; 253 | } 254 | } 255 | -------------------------------------------------------------------------------- /Slide Over Design/demo,html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Slide Over Design/demo,html -------------------------------------------------------------------------------- /Slide Over Design/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | I/System.out: Download Facebook Videos Online 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 | 25 | 26 | 27 | 28 | I/System.out: 29 | 30 | 31 | 39 |

40 | 47 | 50 | 51 | 93 |

94 |

95 |

96 |

97 |

98 | Download Another Video 99 |

100 |

101 |

102 | 103 |

104 |

Facebook Video Downloader

105 |

Download Your Facebook Video

106 | 107 |

108 | 109 |

110 |

111 |

112 |

113 |

114 | I/System.out:

115 |

116 | 3 minutes, 13 seconds 117 |

118 |

119 |

120 |

121 | Your Facebook Video 122 |

123 |

124 |

125 | Your Facebook Video 126 |

127 |

128 |

129 |

130 |

131 |
132 |

133 |

134 | Download Video in Normal Quality 135 |

136 |

137 | Download Video in HD Quality 138 |

139 |

140 |
141 | I/System.out:

142 |

143 | 144 |

145 |

146 |

147 |

148 |

149 | Force Download SD 150 |

151 |

152 | Force Download HD 153 |

154 | 163 |

164 |

165 |

166 | I/System.out:

167 | 170 |

171 |

172 |

173 |
174 |

175 | I/System.out:

176 | 202 | 214 | 215 |

216 |

217 |
218 | I/System.out:

219 |

220 |
221 |
222 |

223 |

224 |

225 |

Frequently Asked Questions

226 |

227 |

228 |

229 |

230 |

231 |

Where are videos saved after being downloaded?

232 |

233 | I/System.out:

234 |

235 | It depends on the OS and Browser you are using, but usually all videos are saved under "Downloads" folder on Windows and Mac. You can also press CTRL+J in your Browser to view your download history. 236 |

237 |

238 |

239 |

240 |

241 |

Why the video is playing instead of downloading?

242 |

243 |

244 |

245 | That's something normal to happen, especially on browsers other than Chrome. To solve this issue, instead of left clicking the Download Video link, 246 | Right Click -> Save as... and choose the location you'd like to save the video to. 247 | I/System.out:

248 |

249 |

250 |

251 |

252 |

Does FBDOWN work on Mobile devices? ( / )

253 |

254 |

255 |

256 | Currently FBDOWN works just fine with 257 |

Android using Chrome browser. As for 258 |

iOS you should use a file manager, we suggest using FBDOWN.net with this app 259 | Turbo File Manager in order to save videos to your camera roll and view them offline. 260 |

261 |

262 |

263 |

264 |

265 |

Can I download Live Facebook videos?

266 |

267 |

268 |

269 | I/System.out: Yes, you can download Facebook Live videos but only after they finish streaming. 270 |

271 |

272 |

273 |

274 |

275 |

Video with no audio/only audio

276 |

277 |

278 |

279 | Videos that contain Copyrighted Music are the most affected. We've found a solution to this, just Click "Video with No Audio" on the download page of your video and you'll be able to convert the video with audio. 280 |

281 |

282 |

283 |

284 |

285 |

Does FBDOWN store downloaded videos or keep a copy of videos?

286 |

287 |

288 |

289 | FBDOWN doesn't store videos neither we keep copies of downloaded videos. 290 | All videos are hosted on Facebook's servers. Also, we don't keep track of download histories of our users, thus making using FBDOWN.net totally Anonymous. 291 |

292 | I/System.out:

293 |

294 |

295 |

296 |

Will there ever be a Firefox addon?

297 |

298 |

299 |

300 | Yes! We are currently working on a new 301 |

Firefox addon that works the same way as our Chrome extension. 302 |

303 |

304 |

305 |

306 |

307 |

308 |

309 |

310 |

311 |
312 |
313 |

314 |

315 | 316 | I/System.out: Facebook Video Downloader Online 317 |
318 | How to Download Facebook Videos | 319 | Terms of Use | 320 | Privacy Policy | 321 | Contact us | 322 | About 323 |
FBDOWN does not host any pirated or copyright content on its server, and all the videos that you download are downloaded to your system directly from their respective CDN servers. 324 |
embv_x4 325 | 326 |

327 |

328 | 329 | 330 | 331 | -------------------------------------------------------------------------------- /Slide Over Design/img/image1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Slide Over Design/img/image1.jpg -------------------------------------------------------------------------------- /Slide Over Design/img/image2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Slide Over Design/img/image2.jpg -------------------------------------------------------------------------------- /Slide Over Design/img/image3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Slide Over Design/img/image3.jpg -------------------------------------------------------------------------------- /Slide Over Design/img/image4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Slide Over Design/img/image4.jpg -------------------------------------------------------------------------------- /Slide Over Design/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JavaScript Image Slider 7 | 8 | 9 | 10 |

11 |

12 |

13 |

14 |

15 |

16 |

17 |

18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Slide Over Design/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Slide Over Design/script.js -------------------------------------------------------------------------------- /Slide Over Design/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0px; 3 | margin: 0px; 4 | box-sizing: border-box; 5 | } 6 | 7 | .carousel-container { 8 | width: 60%; 9 | margin: auto; 10 | overflow: hidden; 11 | } 12 | 13 | .carousel-slide { 14 | display: flex; 15 | width: 100%; 16 | width: 500px; 17 | } 18 | 19 | .carousel-container .carousel-slide img { 20 | width: auto; 21 | } 22 | -------------------------------------------------------------------------------- /Text To Speech/img/DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Text To Speech/img/DS_Store -------------------------------------------------------------------------------- /Text To Speech/img/angry.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Text To Speech/img/angry.jpg -------------------------------------------------------------------------------- /Text To Speech/img/drink.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Text To Speech/img/drink.jpg -------------------------------------------------------------------------------- /Text To Speech/img/food.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Text To Speech/img/food.jpg -------------------------------------------------------------------------------- /Text To Speech/img/grandma.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Text To Speech/img/grandma.jpg -------------------------------------------------------------------------------- /Text To Speech/img/happy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Text To Speech/img/happy.jpg -------------------------------------------------------------------------------- /Text To Speech/img/home.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Text To Speech/img/home.jpg -------------------------------------------------------------------------------- /Text To Speech/img/hurt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Text To Speech/img/hurt.jpg -------------------------------------------------------------------------------- /Text To Speech/img/outside.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Text To Speech/img/outside.jpg -------------------------------------------------------------------------------- /Text To Speech/img/sad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Text To Speech/img/sad.jpg -------------------------------------------------------------------------------- /Text To Speech/img/scared.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Text To Speech/img/scared.jpg -------------------------------------------------------------------------------- /Text To Speech/img/school.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Text To Speech/img/school.jpg -------------------------------------------------------------------------------- /Text To Speech/img/tired.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Text To Speech/img/tired.jpg -------------------------------------------------------------------------------- /Text To Speech/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Speech Text Reader 7 | 8 | 9 | 10 |

11 |

Speech Text Reader

12 | 15 |

16 |

17 |

Choose Voice

18 | 19 | 20 | 21 |

22 |

23 |

24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Text To Speech/script.js: -------------------------------------------------------------------------------- 1 | const main = document.querySelector('main'); 2 | const voiceSelect = document.getElementById('voices'); 3 | const textarea = document.getElementById('text'); 4 | const readBtn = document.getElementById('read'); 5 | const toggleBtn = document.getElementById('toggle'); 6 | const closeBtn = document.getElementById('close'); 7 | const data =[ 8 | { 9 | image:'./img/drink.jpg', 10 | text:"I'm Thirsty" 11 | }, 12 | { 13 | image: './img/food.jpg', 14 | text: "I'm Hungry" 15 | }, 16 | { 17 | image: './img/tired.jpg', 18 | text: "I'm Tired" 19 | }, 20 | { 21 | image: './img/hurt.jpg', 22 | text: "I'm Hurt" 23 | }, 24 | { 25 | image: './img/happy.jpg', 26 | text: "I'm Happy" 27 | }, 28 | { 29 | image: './img/angry.jpg', 30 | text: "I'm Angry" 31 | }, 32 | { 33 | image: './img/sad.jpg', 34 | text: "I'm Sad" 35 | }, 36 | { 37 | image: './img/scared.jpg', 38 | text: "I'm Scared" 39 | }, 40 | { 41 | image: './img/outside.jpg', 42 | text: 'I Want To Go Outside' 43 | }, 44 | { 45 | image: './img/home.jpg', 46 | text: 'I Want To Go Home' 47 | }, 48 | { 49 | image: './img/school.jpg', 50 | text: 'I Want To Go To School' 51 | }, 52 | { 53 | image: './img/grandma.jpg', 54 | text: 'I Want To Go To Grandmas' 55 | } 56 | ]; 57 | 58 | data.forEach(createBox); 59 | 60 | //create speech box 61 | function createBox(item){ 62 | const box = document.createElement('div'); 63 | const { image , text } = item; 64 | box.classList.add('box'); 65 | box.innerHTML = ` 66 | ${text}

67 |

${text}

68 | `; 69 | //@ todo speak event 70 | 71 | main.appendChild(box); 72 | } -------------------------------------------------------------------------------- /Text To Speech/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Text To Speech/style.css -------------------------------------------------------------------------------- /Type Game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | Speed Typer 10 | 11 | 15 | 16 | 17 | 20 |

21 | 31 |

32 |

33 |

⏱ Speed Typer ⌨

34 | Type The Following : 35 |

36 | 37 |

38 | Time left : 10s 39 |

40 |

41 | Score : 0 42 |

43 |

44 |

45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /Type Game/script.js: -------------------------------------------------------------------------------- 1 | //Steps 2 | //create variables 3 | //generate random word function 4 | //add word to dom function create and call 5 | //create event listerner 6 | //create updateScoreFunction 7 | //create start Count down variables 8 | //create update time function 9 | //create game over function 10 | //difficulty working start 11 | 12 | const word=document.getElementById('word'); 13 | const text = document.getElementById('text'); 14 | const scoreEl = document.getElementById('score'); 15 | const timeEl = document.getElementById('time'); 16 | const endgameEl = document.getElementById('end-game-container'); 17 | const settingsBtn = document.getElementById('setting-btn'); 18 | const settings = document.getElementById('settings'); 19 | const settingForm = document.getElementById('settings-form'); 20 | const difficultySelect = document.getElementById('difficulty'); 21 | //List of Words 22 | const words = ['sigh','tense','airplane','HeyYou','whatsUp','welcome','brother','shape','grandLeaks','masterHouse','LifeRules','GoNext','Brother']; 23 | 24 | 25 | //1 after added variables 26 | 27 | //Initialize word 28 | let randomWord; 29 | 30 | //Initialize score,time 31 | let score =0; 32 | let time= 10; 33 | 34 | //all Difficulty 35 | //set difficulty 36 | let difficulty = localStorage.getItem('difficulty') !== null ? localStorage.getItem('difficulty'): 'medium'; 37 | 38 | //set difficulty select value 39 | difficultySelect.value = localStorage.getItem('difficulty') !== null ? localStorage.getItem('difficulty'): 'medium'; 40 | 41 | //Focus on Input 42 | text.focus(); 43 | 44 | //start Counting down 45 | const timeInterval = setInterval(updateTime ,1000) 46 | 47 | //generate random word 48 | function getRandomWord(){ 49 | return words[Math.floor(Math.random() * words.length)]; 50 | } 51 | 52 | //add word to DOM 53 | function addWordToDOM(){ 54 | randomWord = getRandomWord(); 55 | word.innerHTML = randomWord; 56 | } 57 | 58 | addWordToDOM(); 59 | 60 | //after calling in Event Listerner 61 | function updateScore(){ 62 | score++; 63 | scoreEl.innerHTML = score; 64 | 65 | if(time === 0){ 66 | clearInterval(timeInterval); 67 | gameOver(); 68 | } 69 | } 70 | 71 | //game over function 72 | function gameOver(){ 73 | endgameEl.innerHTML = ` 74 |

Time Ran Out

75 |

Your final Score is ${score}

76 | 77 | `; 78 | endgameEl.style.display = 'flex'; 79 | } 80 | 81 | //update time 82 | function updateTime(){ 83 | time--; 84 | timeEl.innerHTML = time + 's'; 85 | if(time === 0){ 86 | clearInterval(timeInterval); 87 | // 88 | gameOver(); 89 | } 90 | } 91 | 92 | //Event Listerner 93 | text.addEventListener('input',e => { 94 | const insertedText = e.target.value; 95 | if(insertedText === randomWord){ 96 | addWordToDOM(); 97 | updateScore(); 98 | //clear 99 | e.target.value =''; 100 | // difficulty 101 | if(difficulty === 'hard'){ 102 | time+=2 103 | }else if(difficulty === 'medium'){ 104 | time +=3; 105 | }else{ 106 | time += 4; 107 | } 108 | updateTime(); 109 | } 110 | }) 111 | 112 | //Difficulty event listerners 113 | 114 | //settings btn 115 | settingsBtn.addEventListener('click',() => settings.classList.toggle('hide')); 116 | 117 | //settings select 118 | settingForm.addEventListener('change',e => { 119 | difficulty = e.target.value; 120 | localStorage.setItem('difficulty',difficulty); 121 | }) 122 | 123 | 124 | 125 | -------------------------------------------------------------------------------- /Type Game/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | body { 5 | background-color: #2c3e50; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | min-height: 100vh; 10 | margin: 0; 11 | font-family: Verdana, Geneva, Tahoma, sans-serif; 12 | } 13 | 14 | button { 15 | cursor: pointer; 16 | font-size: 14px; 17 | border-radius: 4px; 18 | padding: 5px 15px; 19 | } 20 | 21 | select { 22 | width: 200px; 23 | padding: 5px; 24 | appearance: none; 25 | -webkit-appearance: none; 26 | -moz-appearance: none; 27 | border-radius: 0; 28 | background-color: #a7c5e3; 29 | } 30 | 31 | select:focus, 32 | button:focus { 33 | outline: 0; 34 | } 35 | 36 | .setting-btn { 37 | position: absolute; 38 | bottom: 30px; 39 | left: 30px; 40 | } 41 | 42 | .settings { 43 | position: absolute; 44 | top: 0; 45 | left: 0; 46 | width: 100%; 47 | background-color: rgba(0, 0, 0, 0.3); 48 | height: 70px; 49 | color: #fff; 50 | display: flex; 51 | align-items: center; 52 | justify-content: center; 53 | transform: translateY(0); 54 | transition: transform 0.3s ease-in-out; 55 | } 56 | 57 | .settings.hide { 58 | transform: translateY(-100%); 59 | } 60 | 61 | .container { 62 | background-color: #34495e; 63 | padding: 20px; 64 | border-radius: 4px; 65 | box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); 66 | color: #fff; 67 | position: relative; 68 | text-align: center; 69 | width: 500px; 70 | } 71 | 72 | h2 { 73 | background-color: rgba(0, 0, 0, 0.3); 74 | padding: 8px; 75 | border-radius: 4px; 76 | margin: 0 0 40px; 77 | } 78 | 79 | h1 { 80 | margin: 0; 81 | } 82 | 83 | input { 84 | border: 0; 85 | border-radius: 4px; 86 | font-size: 14px; 87 | width: 300px; 88 | padding: 12px 20px; 89 | margin-top: 10px; 90 | } 91 | 92 | .score-container { 93 | position: absolute; 94 | top: 60px; 95 | right: 20px; 96 | } 97 | time-container { 98 | position: absolute; 99 | top: 60px; 100 | left: 20px; 101 | } 102 | 103 | .end-game-container { 104 | background-color: inherit; 105 | display: none; 106 | align-items: center; 107 | justify-content: center; 108 | flex-direction: column; 109 | position: absolute; 110 | top: 0; 111 | left: 0; 112 | width: 100%; 113 | height: 100%; 114 | z-index: 1; 115 | } 116 | -------------------------------------------------------------------------------- /Video Player/cars.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevSanket/JavaScript-Microprojects/df5494b57f57d1b680b619d8db63ad84abff7c31/Video Player/cars.mp4 -------------------------------------------------------------------------------- /Video Player/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Video Player 7 | 8 | 9 | 10 | 11 |

12 |

13 | 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 | 48 |

49 | 50 |

51 | 00:00 / 52 | 02:38 / 53 |

54 | 55 |

56 | 57 |

58 |

59 |

60 |

61 |

62 |

63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /Video Player/script.js: -------------------------------------------------------------------------------- 1 | const video = document.querySelector("video"); 2 | const progressRange = document.querySelector( 3 | ".progress-range" 4 | ); 5 | const progressBar = document.querySelector(".progress-bar"); 6 | const playBtn = document.getElementById("play-btn"); 7 | const volumeIcon = document.getElementById("volume-icon"); 8 | const volumeRange = document.querySelector(".volume-range"); 9 | const volumeBar = document.querySelector(".volume-bar"); 10 | const currentTime = document.querySelector(".time-elapsed"); 11 | const duration = document.querySelector(".time-duration"); 12 | const fullscreenBtn = document.querySelector(".fullscreen"); 13 | const speed = document.querySelector('.player-speed'); 14 | const player = document.querySelector('.player'); 15 | 16 | // Play & Pause ----------------------------------- // 17 | 18 | function showPlayIcon() { 19 | playBtn.classList.replace("fa-pause", "fa-play"); 20 | playBtn.setAttribute("title", "Play"); 21 | } 22 | 23 | function togglePlay() { 24 | if (video.paused) { 25 | video.play(); 26 | playBtn.classList.replace("fa-play", "fa-pause"); 27 | playBtn.setAttribute("title", "Pause"); 28 | } else { 29 | video.pause(); 30 | showPlayIcon(); 31 | } 32 | } 33 | 34 | //calculate display time formate 35 | function displayTime(time) { 36 | const minutes = Math.floor(time / 60); 37 | let seconds = Math.floor(time % 60); 38 | seconds = seconds > 9 ? seconds : `0${seconds}`; 39 | return `${minutes}:${seconds}`; 40 | } 41 | 42 | // Progress Bar ---------------------------------- // 43 | 44 | function updateProgress() { 45 | progressBar.style.width = `${ 46 | (video.currentTime / video.duration) * 100 47 | }%`; 48 | currentTime.textContent = `${displayTime( 49 | video.currentTime 50 | )} /`; 51 | duration.textContent = `${displayTime(video.duration)}`; 52 | } 53 | 54 | //click to seek within the video 55 | 56 | function setProgress(e) { 57 | const newTime = e.offsetX / progressRange.offsetWidth; 58 | progressBar.style.width = `${newTime * 100}%`; 59 | video.currentTime = newTime * video.duration; 60 | } 61 | 62 | // Volume Controls --------------------------- // 63 | 64 | let lastVolume = 1; 65 | 66 | //volumn bar 67 | function changeVolume(e) { 68 | let volume = e.offsetX / volumeRange.offsetWidth; 69 | // Rounding volume up and down 70 | if (volume < 0.1) { 71 | volume = 0; 72 | } 73 | if (volume > 0.9) { 74 | volume = 1; 75 | } 76 | volumeBar.style.width = `${volume * 100}%`; 77 | video.volume = volume; 78 | // change Icon depending on volumn 79 | volumeIcon.className = ""; 80 | if (volume > 0.7) { 81 | volumeIcon.classList.add("fas", "fa-volume-up"); 82 | } else if (volume < 0.7 && volume > 0) { 83 | volumeIcon.classList.add("fas", "fa-volume-down"); 84 | } else if (volume === 0) { 85 | volumeIcon.classList.add("fas", "fa-volume-off"); 86 | } 87 | lastVolume = volume; 88 | } 89 | 90 | // mute or Un mute 91 | function toggleMute() { 92 | volumeIcon.className = ""; 93 | if (video.volume) { 94 | lastVolume = video.volume; 95 | video.volume = 0; 96 | volumeBar.style.width = 0; 97 | volumeIcon.classList.add("fas", "fa-volume-off"); 98 | } else { 99 | video.volume = lastVolume; 100 | volumeBar.style.width = `${lastVolume * 100}%`; 101 | volumeIcon.classList.add("fas", "fa-volume-up"); 102 | } 103 | } 104 | 105 | // Change Playback Speed -------------------- // 106 | function playBackSpeed(){ 107 | video.playbackRate = speed.value; 108 | } 109 | 110 | 111 | // Fullscreen ------------------------------- // 112 | /* View in fullscreen */ 113 | function openFullscreen(elem) { 114 | if (elem.requestFullscreen) { 115 | elem.requestFullscreen(); 116 | } else if (elem.webkitRequestFullscreen) { /* Safari */ 117 | elem.webkitRequestFullscreen(); 118 | } else if (elem.msRequestFullscreen) { /* IE11 */ 119 | elem.msRequestFullscreen(); 120 | } 121 | video.classList.add('video-fullscreen'); 122 | } 123 | 124 | /* Close fullscreen */ 125 | function closeFullscreen() { 126 | if (document.exitFullscreen) { 127 | document.exitFullscreen(); 128 | } else if (document.webkitExitFullscreen) { /* Safari */ 129 | document.webkitExitFullscreen(); 130 | } else if (document.msExitFullscreen) { /* IE11 */ 131 | document.msExitFullscreen(); 132 | } 133 | video.classList.remove('video-fullscreen'); 134 | } 135 | 136 | let fullscreen = false; 137 | //Toggle Full Screen 138 | function toggleFullScreen(){ 139 | if(!fullscreen){ 140 | openFullscreen(player); 141 | }else{ 142 | closeFullscreen(player); 143 | } 144 | fullscreen = !fullscreen; 145 | } 146 | 147 | //Event Listeners 148 | playBtn.addEventListener("click", togglePlay); 149 | video.addEventListener("click", togglePlay); 150 | video.addEventListener("ended", showPlayIcon); 151 | video.addEventListener("timeupdate", updateProgress); 152 | video.addEventListener("canplay", updateProgress); 153 | progressRange.addEventListener("click", setProgress); 154 | volumeRange.addEventListener("click", changeVolume); 155 | volumeIcon.addEventListener("click", toggleMute); 156 | speed.addEventListener('change',playBackSpeed); 157 | fullscreenBtn.addEventListener('click',toggleFullScreen); -------------------------------------------------------------------------------- /Video Player/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: rgba(153, 245, 233, 0.89); 3 | --font-color: white; 4 | } 5 | 6 | html { 7 | box-sizing: border-box; 8 | } 9 | 10 | body { 11 | margin: 0; 12 | min-height: 100vh; 13 | background-color: #e3e3e3; 14 | background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%234f4f51' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E"); 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | font-family: Helvetica, sans-serif; 19 | } 20 | 21 | .fas { 22 | color: var(--font-color); 23 | font-size: 35px; 24 | } 25 | 26 | .player { 27 | max-width: 80vw; 28 | min-width: 800px; 29 | border: 5px solid black; 30 | border-radius: 10px; 31 | background: black; 32 | position: relative; 33 | cursor: pointer; 34 | } 35 | 36 | video { 37 | border-radius: 5px; 38 | width: 100%; 39 | height: auto; 40 | } 41 | 42 | /* Containers */ 43 | .show-controls { 44 | width: 100%; 45 | height: 30%; 46 | z-index: 2; 47 | position: absolute; 48 | bottom: 0; 49 | cursor: default; 50 | } 51 | 52 | .controls-container { 53 | position: absolute; 54 | bottom: -5px; 55 | width: 100%; 56 | height: 95px; 57 | margin-top: -95px; 58 | background: rgba(0, 0, 0, 0.5); 59 | box-sizing: border-box; 60 | z-index: 5; 61 | display: flex; 62 | justify-content: space-between; 63 | opacity: 0; 64 | } 65 | 66 | .show-controls:hover .controls-container { 67 | opacity: 1; 68 | transition: all 0.2s ease-out; 69 | } 70 | 71 | .control-group { 72 | width: 100%; 73 | height: 100%; 74 | display: flex; 75 | justify-content: space-between; 76 | } 77 | 78 | .controls-left, 79 | .controls-right { 80 | flex: 1; 81 | display: flex; 82 | overflow: hidden; 83 | position: relative; 84 | top: 40px; 85 | } 86 | 87 | /* Progress Bar */ 88 | .progress-range { 89 | height: 8px; 90 | width: calc(100% - 30px); 91 | background: rgba(202, 202, 202, 0.5); 92 | margin: auto; 93 | border-radius: 10px; 94 | position: absolute; 95 | left: 15px; 96 | top: 15px; 97 | cursor: pointer; 98 | transition: height 0.1s ease-in-out; 99 | } 100 | 101 | .progress-range:hover { 102 | height: 10px; 103 | } 104 | 105 | .progress-bar { 106 | background: var(--primary-color); 107 | width: 50%; 108 | height: 100%; 109 | border-radius: 10px; 110 | transition: all 0.5s ease; 111 | } 112 | 113 | /* Left Controls -------------------------- */ 114 | 115 | .controls-left { 116 | justify-content: flex-start; 117 | margin-left: 15px; 118 | } 119 | 120 | /* Play & Pause */ 121 | .play-controls { 122 | margin-right: 15px; 123 | } 124 | 125 | .fa-play:hover, 126 | .fa-pause:hover { 127 | color: var(--primary-color); 128 | cursor: pointer; 129 | } 130 | 131 | /* Volume */ 132 | .volume-icon { 133 | cursor: pointer; 134 | } 135 | 136 | .volume-range { 137 | height: 8px; 138 | width: 100px; 139 | background: rgba(70, 70, 70, 0.5); 140 | border-radius: 10px; 141 | position: relative; 142 | top: -21px; 143 | left: 50px; 144 | cursor: pointer; 145 | } 146 | 147 | .volume-bar { 148 | background: var(--font-color); 149 | width: 100%; 150 | height: 100%; 151 | border-radius: 10px; 152 | transition: width 0.2s ease-in; 153 | } 154 | 155 | .volume-bar:hover { 156 | background: var(--primary-color); 157 | } 158 | 159 | /* Right Controls ---------------------------- */ 160 | .controls-right { 161 | justify-content: flex-end; 162 | margin-right: 15px; 163 | } 164 | 165 | .speed, 166 | .time { 167 | position: relative; 168 | top: 10px; 169 | } 170 | 171 | /* Playback Speed */ 172 | .speed { 173 | margin-right: 15px; 174 | } 175 | select, 176 | option { 177 | cursor: pointer; 178 | } 179 | 180 | select { 181 | background: transparent; 182 | color: var(--font-color); 183 | border: none; 184 | font-size: 18px; 185 | position: relative; 186 | top: -2.5px; 187 | border-radius: 5px; 188 | } 189 | 190 | select:focus { 191 | outline: none; 192 | } 193 | 194 | select > option { 195 | background: rgba(0, 0, 0, 0.9); 196 | border: none; 197 | font-size: 14px; 198 | } 199 | 200 | /* Elapsed Time & Duration */ 201 | .time { 202 | margin-right: 15px; 203 | color: var(--font-color); 204 | font-weight: bold; 205 | user-select: none; 206 | } 207 | 208 | /* Fullscreen */ 209 | .fullscreen { 210 | cursor: pointer; 211 | } 212 | 213 | .video-fullscreen { 214 | position: relative; 215 | top: 50%; 216 | transform: translateY(-50%); 217 | } 218 | 219 | /* Media Query: Large Smartphone (Vertical) */ 220 | @media screen and (max-width: 600px) { 221 | .player { 222 | min-width: 0; 223 | max-width: 95vw; 224 | } 225 | .fas { 226 | font-size: 20px; 227 | } 228 | 229 | .controls-container { 230 | height: 50px; 231 | } 232 | 233 | .control-group { 234 | position: relative; 235 | top: -25px; 236 | } 237 | 238 | .progress-range { 239 | width: 100%; 240 | top: 0; 241 | left: 0; 242 | border-radius: 0; 243 | } 244 | 245 | .progress-bar { 246 | border-radius: 0; 247 | } 248 | 249 | .volume-range { 250 | width: 50px; 251 | left: 30px; 252 | top: -15px; 253 | } 254 | 255 | .speed, 256 | .time { 257 | top: 3px; 258 | } 259 | 260 | select { 261 | font-size: 12px; 262 | } 263 | 264 | .time { 265 | font-size: 12px; 266 | } 267 | } 268 | 269 | /* Media Query: Large Smartphone (Horizontal) */ 270 | @media screen and (max-width: 900px) and (max-height: 500px) { 271 | .player { 272 | max-height: 95vh; 273 | max-width: auto; 274 | } 275 | 276 | video { 277 | height: 95vh; 278 | object-fit: cover; 279 | } 280 | 281 | .video-fullscreen { 282 | height: 97.5vh; 283 | border-radius: 0; 284 | } 285 | } 286 | --------------------------------------------------------------------------------

Add Bookmark

Add Bookmark

Create a Custom Countdown!

Countdown Title Here

Countdown Complete!

Countdown Finished on 05-05-2020

Explore The World

The Ice Mountain

Flower Tree

The Deers

Cool Nature

Expense Tracker

Your Balance

$0.00

Income

Expense

History

Add New Transition

${artist} 78 | - ${songTitle}

Meal Finder

Search Result For ${term} :

There are No Search results for ${term}

${meal.strMeal}

${meal.strMeal}

Ingredients

Memory Cards 18 | 19 | Add New Card 20 | 21 |

Add New Card 57 | 58 | 59 | 60 |

Music Player

Learn More About Me

These Are My Strengths

These Are My Results

Available Anytime

Facebook Video Downloader

Download Your Facebook Video

Frequently Asked Questions

Where are videos saved after being downloaded?

Why the video is playing instead of downloading?

Does FBDOWN work on Mobile devices? ( / )

Can I download Live Facebook videos?

Video with no audio/only audio

Does FBDOWN store downloaded videos or keep a copy of videos?

Will there ever be a Firefox addon?

Speech Text Reader

Choose Voice

⏱ Speed Typer ⌨

Time Ran Out

Memory Cards 18 | 21 |

Add New Card 57 | 60 |