├── .vscode └── settings.json ├── index.js ├── LICENSE ├── README.md └── style.css /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | function searchPlaylist() { 2 | 3 | var filter_text = document.getElementById("search_bar").value.toUpperCase(); 4 | var card = document.getElementsByClassName("card"); 5 | 6 | for (var i = 0; i < card.length; i++) { 7 | 8 | var title = card[i].getElementsByClassName("title")[0]; 9 | var str = title.innerText || title.textContent; 10 | 11 | if (str.toUpperCase().indexOf(filter_text) > -1) { 12 | 13 | card[i].style.display = ""; 14 | } else { 15 | 16 | card[i].style.display = "none"; 17 | } 18 | } 19 | } 20 | 21 | 22 | // gotopbutton 23 | const gotopbtn = document.querySelector(".gotopbtn"); 24 | 25 | window.addEventListener("scroll", () => { 26 | if (window.pageYOffset > 100) { 27 | gotopbtn.classList.add("active"); 28 | } else { 29 | gotopbtn.classList.remove("active") 30 | } 31 | }); 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Apoorv Maheshwari 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # BRL Playlist 2 | A fun project for BRL team Members through which everyone can share their music playlists. 3 | # Hacktoberfest-2022🔥 4 | ![image](https://user-images.githubusercontent.com/70385488/192114009-0830321a-d227-4a4d-8411-6c03b54d7ce6.png) 5 | 6 |
7 | 8 | [![Open Source Love](https://firstcontributions.github.io/open-source-badges/badges/open-source-v1/open-source.svg)](https://github.com/VG-1/PlaylistAdda) 9 | Hacktober Badge 10 | Star Badge 11 | Contributions 12 | 13 |
14 | 15 | 16 | ### This repository aims to help code beginners with their first successful pull request and open-source contribution. :partying_face: 17 | 18 | :star: Feel free to use this project to make your first contribution to an open-source project on GitHub. Practice making your first pull request to a public repository before doing the real thing! 19 | 20 | :star: Make sure to grab some cool swags during Hacktoberfest by getting involved in the open-source community. 21 | 22 | ### This repository is open to all members of the GitHub community. Any member can contribute to this project! The only thing which you need to keep in mind is that it should be genuine PR :grin: 23 | 24 | ## What is Hacktoberfest? :thinking: 25 | A month-long celebration from October 1st to October 31st presented by [Digital Ocean](https://hacktoberfest.digitalocean.com/) and [DEV Community](https://dev.to/) collaborated with [GitHub](https://github.com/blog/2433-celebrate-open-source-this-october-with-hacktoberfest) to get people involved in [Open Source](https://github.com/open-source). Create your very first pull request to any public repository on GitHub and contribute to the open-source developer community. 26 | 27 | [https://hacktoberfest.digitalocean.com/](https://hacktoberfest.digitalocean.com/) 28 | 29 | ## Rules :fire: 30 | To qualify for the __official limited edition Hacktoberfest shirt__, you must register [here](https://hacktoberfest.digitalocean.com/) and make four Pull Requests (PRs) between October 1-31, 2022 (in any time zone). PRs can be made to any public repo on GitHub, not only the ones with issues labeled Hacktoberfest. This year, the __first 40,000__ participants who complete the challenge will earn a T-shirt. 31 | 32 | ## Steps to follow :scroll: 33 | 34 | ### Tip: Complete this process in GitHub (in your browser) 35 | 36 | ```mermaid 37 | flowchart LR 38 | Fork[Fork the project]-->branch[Create a New Branch] 39 | branch-->Edit[Edit file] 40 | Edit-->commit[Commit the changes] 41 | commit -->|Finally|creatpr((Create a Pull Request)) 42 | 43 | ``` 44 | 45 | ### 0. Star The Repo :star2: 46 | 47 | Star the repo by pressing the topmost-right button to start your wonderful journey. 48 | 49 | ### 1. Fork it :fork_and_knife: 50 | 51 | You can get your own fork/copy of [1_Hacktoberfest-22](https://github.com/Apoorv-cloud/1_Hacktoberfest-22) by using the Fork button. 52 | 53 | 54 | ### 2. Clone it :busts_in_silhouette: 55 | 56 | `NOTE: commands are to be executed on Linux, Mac, and Windows(using Powershell)` 57 | 58 | You need to clone or (download) it to a local machine using 59 | 60 | ```sh 61 | $ git clone https://github.com/{Your_Username}/1_Hacktoberfest-22.git 62 | ``` 63 | 64 | > This makes a local copy of the repository in your machine. 65 | Once you have cloned the `1_Hacktoberfest-22` repository in Github, move to that folder first using the change directory command on Linux, Mac, and Windows(PowerShell to be used). 66 | 67 | ```sh 68 | # This will change the directory to a folder Random-Joke-Generator 69 | $ cd 1_Hacktoberfest-22 70 | ``` 71 | 72 | Move to this folder for all other commands. 73 | 74 | ### 3. Set it up :arrow_up: 75 | 76 | Run the following commands to see that *your local copy* has a reference to *your forked remote repository* in Github :octocat: 77 | 78 | ```sh 79 | $ git remote -v 80 | origin https://github.com/Your_Username/1_Hacktoberfest-22.git (fetch) 81 | origin https://github.com/Your_Username/1_Hacktoberfest-22.git (push) 82 | ``` 83 | 84 | Now, let's add a reference to the original [1_Hacktoberfest-22](https://github.com/Apoorv-cloud/1_Hacktoberfest-22) repository using 85 | 86 | ```sh 87 | $ git remote add upstream https://github.com/Apoorv-cloud/1_Hacktoberfest-22 88 | ``` 89 | 90 | > This adds a new remote named ***upstream***. 91 | See the changes using 92 | 93 | ```sh 94 | $ git remote -v 95 | origin https://github.com/Your_Username/1_Hacktoberfest-22.git (fetch) 96 | origin https://github.com/Your_Username/1_Hacktoberfest-22.git(push) 97 | upstream https://github.com/Your_Username/1_Hacktoberfest-22.git (fetch) 98 | upstream https://github.com/Your_Username/1_Hacktoberfest-22.git (push) 99 | ``` 100 | In your case, you will see 101 | ```sh 102 | $ git remote -V 103 | origin https://github.com/Your_Username/1_Hacktoberfest-22.git(fetch) 104 | origin https://github.com/Your_Username/1_Hacktoberfest-22.git (push) 105 | upstream https://github.com/Your_Username/1_Hacktoberfest-22.git (fetch) 106 | upstream https://github.com/Your_Username/1_Hacktoberfest-22.git(push) 107 | ``` 108 | 109 | ### 4. Sync it :recycle: 110 | 111 | Always keep your local copy of the repository updated with the original repository. 112 | Before making any changes and/or in an appropriate interval, run the following commands *carefully* to update your local repository. 113 | 114 | ```sh 115 | # Fetch all remote repositories and delete any deleted remote branches 116 | $ git fetch --all --prune 117 | # Switch to the `main` branch 118 | $ git checkout main 119 | # Reset the local `main` branch to match the `upstream` repository's `main` branch 120 | $ git reset --hard upstream/main 121 | # Push changes to your forked `Random-Joke-Generator` repo 122 | $ git push origin main 123 | ``` 124 | 125 | ### 5. Ready Steady Go... :turtle: :rabbit2: 126 | 127 | Once you have completed these steps, you are ready to start contributing by checking our `Good First Issue` Issues and creating [pull requests](https://github.com/Apoorv-cloud/1_Hacktoberfest-22/pulls). 128 | 129 | ### How to add your playlist to the website? 130 | Follow this steps do add your playlist to the website: 131 | ```sh 132 | #Step-1 Go to index.html 133 | #Step-2 Write your playlist name in the code 134 | #Step-3 Embed your playlist. 135 | #Step-4 Write a sweet message. 136 | #Step-5 You are done go aheaed and make your pull request. 137 | ``` 138 | 139 | ### 6. Create a new branch :bangbang: 140 | 141 | Whenever you are going to contribute. Please create a separate branch using command and keep your `main` branch clean (i.e. synced with remote branch). 142 | 143 | ```sh 144 | # It will create a new branch with the name Branch_Name and switch to branch Folder_Name 145 | $ git checkout -b BranchName 146 | ``` 147 | 148 | Create a separate branch for contribution and try to use the same name of the branch as of folder. 149 | 150 | To switch to the desired branch 151 | 152 | ```sh 153 | # To switch from one folder to another 154 | $ git checkout branchname 155 | ``` 156 | 157 | To add the changes to the branch. Use 158 | 159 | ```sh 160 | # To add all files to branch Folder_Name 161 | $ git add. 162 | ``` 163 | 164 | Type in a message relevant to the code reviewer using 165 | 166 | ```sh 167 | # This message gets associated with all files you have changed 168 | $ git commit -m 'relevant message' 169 | ``` 170 | 171 | Now, Push your awesome work to your remote repository using 172 | 173 | ```sh 174 | # To push your work to your remote repository 175 | $ git push -u origin BranchName 176 | ``` 177 | 178 | Finally, go to your repository in the browser and click on `compare and pull requests. 179 | Then add a title and description to your pull request that explains your precious effort. 180 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0px; 3 | padding: 0px; 4 | } 5 | .stickheader { 6 | padding: 10px 30px; 7 | background: black; 8 | color: #f1f1f1; 9 | position: fixed; 10 | top: 0; 11 | width: 100%; 12 | z-index: 999; 13 | display: flex; 14 | align-items: center; 15 | justify-content: space-between; 16 | box-sizing: border-box; 17 | } 18 | #head:hover { 19 | color: black; 20 | background-color: greenyellow; 21 | } 22 | 23 | .stickheader input { 24 | outline: none; 25 | border-radius: 10px; 26 | font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", 27 | "Lucida Sans", Arial, sans-serif; 28 | } 29 | 30 | body { 31 | background-color: black; 32 | color: white; 33 | font-family: arial; 34 | } 35 | 36 | .subtitle { 37 | padding: 100px; 38 | margin: 35px; 39 | text-align: center; 40 | font-family: cursive; 41 | } 42 | 43 | #search_bar { 44 | float: right; 45 | display: block; 46 | text-align: center; 47 | margin-right: 1%; 48 | padding: 10px; 49 | } 50 | 51 | .main { 52 | display: flex; 53 | justify-content: space-evenly; 54 | flex-wrap: wrap; 55 | margin: 2%; 56 | } 57 | 58 | .card { 59 | width: 20.01%; 60 | display: inline-block; 61 | box-shadow: 2px 2px 10px silver; 62 | border-radius: 5px; 63 | margin: 2% auto; 64 | background-color: #000; 65 | } 66 | 67 | @media (max-width:1368px){ 68 | .card{ 69 | width: 25.01%; 70 | } 71 | } 72 | @media (max-width:1070px){ 73 | .card{ 74 | width: 40%; 75 | margin: 2.5% auto; 76 | } 77 | } 78 | @media (max-width:700px){ 79 | .card{ 80 | width: 70%; 81 | margin: 4% auto; 82 | } 83 | } 84 | .card:hover { 85 | box-shadow: 2px 2px 20px grey; 86 | } 87 | 88 | .image img { 89 | width: 100%; 90 | border-top-right-radius: 5px; 91 | border-top-left-radius: 5px; 92 | } 93 | 94 | .title { 95 | text-align: center; 96 | padding: 10px; 97 | } 98 | 99 | h1 { 100 | font-size: 20px; 101 | } 102 | 103 | .des { 104 | padding: 3px; 105 | text-align: center; 106 | 107 | padding-top: 10px; 108 | border-bottom-right-radius: 5px; 109 | border-bottom-left-radius: 5px; 110 | } 111 | 112 | button { 113 | font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; 114 | color: white; 115 | margin-top: 40px; 116 | margin-bottom: 10px; 117 | background-color: gray; 118 | border: 1px solid black; 119 | border-radius: 5px; 120 | padding: 10px; 121 | opacity: 0.7; 122 | } 123 | 124 | button:hover { 125 | background-color: greenyellow; 126 | color: black; 127 | transition: 0.3s; 128 | cursor: pointer; 129 | opacity: 1; 130 | } 131 | 132 | .yt--player { 133 | color: white; 134 | text-align: center; 135 | font-family: serif; 136 | font-weight: bolder; 137 | text-decoration: overline; 138 | padding-top: 80px; 139 | height: 50px; 140 | } 141 | .card--y--list { 142 | display: flex; 143 | 144 | flex-wrap: wrap; 145 | justify-content: space-evenly; 146 | padding-top: 80px; 147 | 148 | flex-wrap: nowrap; 149 | gap: 20px; 150 | overflow-x: auto; 151 | padding: 20px; 152 | 153 | } 154 | 155 | .card--y { 156 | flex: 0 0 auto; 157 | display: flex; 158 | flex-direction: column; 159 | background-color: antiquewhite; 160 | max-width: 500px; 161 | border-radius: 15px; 162 | overflow: hidden; 163 | margin-bottom: 10px; 164 | box-shadow: 5px 10px 8px #888888; 165 | filter: grayscale(80%); 166 | } 167 | .card--y:hover { 168 | box-shadow: 5px 12px 12px #888888; 169 | filter: grayscale(0); 170 | transform: scale(1.05) rotate(2deg); 171 | } 172 | .card--y--text { 173 | padding: 10px; 174 | justify-content: center; 175 | align-items: center; 176 | color: rgb(46, 13, 13); 177 | text-align: center; 178 | letter-spacing: -1px; 179 | } 180 | 181 | .card--y--des { 182 | padding: 5px 22px; 183 | overflow: hidden; 184 | justify-content: center; 185 | align-items: center; 186 | } 187 | 188 | .footer-heart { 189 | font-size: larger; 190 | text-align: center; 191 | margin-top: 200px; 192 | } 193 | 194 | 195 | /* Hero */ 196 | 197 | .left { 198 | left: 15px; 199 | position: absolute; 200 | } 201 | 202 | .right { 203 | right: 15px; 204 | position: absolute; 205 | } 206 | 207 | /* top section */ 208 | 209 | .top-section { 210 | background-image: url("https://images.unsplash.com/photo-1594623930572-300a3011d9ae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"); 211 | background-position: center; 212 | background-size: cover; 213 | border-radius: 0 0 15px 15px; 214 | position: static; 215 | } 216 | 217 | .hero-display { 218 | max-width: 1600px; 219 | margin: 0 auto 0; 220 | height: 900px; 221 | position: relative; 222 | } 223 | 224 | /* Navbar */ 225 | .navbar { 226 | padding-top: 35px; 227 | padding-left: 35px; 228 | position: relative; 229 | } 230 | 231 | .collapse { 232 | position: absolute; 233 | left: 25%; 234 | } 235 | 236 | .navbar-brand { 237 | color: #f7f7f7; 238 | font-family: "Inconsolata"; 239 | font-size: 2em; 240 | font-weight: 700; 241 | margin-left: 0; 242 | padding-left: 0; 243 | } 244 | 245 | .nav-link { 246 | color: #f7f7f7; 247 | font-family: "Inconsolata"; 248 | font-size: 1.5em; 249 | font-weight: 700; 250 | text-align: center; 251 | text-decoration: none; 252 | display: inline-block; 253 | margin: 0 25px 0; 254 | position: relative; 255 | } 256 | 257 | .nav-link:after { 258 | bottom: 0; 259 | content: ""; 260 | display: block; 261 | height: 2px; 262 | left: 50%; 263 | position: absolute; 264 | background: #f7f7f7; 265 | transition: width 0.3s ease 0s, left 0.3s ease 0s; 266 | width: 0; 267 | } 268 | 269 | .nav-link:hover:after { 270 | width: 100%; 271 | left: 0; 272 | } 273 | 274 | .search-bar{ 275 | border-radius: 50px; 276 | } 277 | 278 | /* Hero Text style */ 279 | 280 | .hero-h1 { 281 | color: #f7f7f7; 282 | font-family: "Inconsolata"; 283 | font-weight: 700; 284 | font-size: 4.2em; 285 | line-height: 1; 286 | margin-bottom: 0; 287 | padding-bottom: 45px; 288 | } 289 | 290 | .hero-h2 { 291 | color: #f7f7f7; 292 | font-family: "Inconsolata"; 293 | font-size: 1.2em; 294 | font-weight: 700; 295 | margin-bottom: 0; 296 | } 297 | 298 | .hero-text { 299 | bottom: 60px; 300 | left: 35px; 301 | padding-right: 25px; 302 | position: absolute; 303 | } 304 | 305 | .read-more-button { 306 | background-color: #fff; 307 | border: 0; 308 | border-radius: 30px; 309 | bottom: -30px; 310 | box-shadow: 2px 5px 10px 0 rgba(69, 50, 42, 0.2); 311 | cursor: pointer; 312 | height: 60px; 313 | left: calc(50% - 30px); 314 | position: absolute; 315 | transform: scale(0.98); 316 | width: 60px; 317 | color: black; 318 | } 319 | 320 | /* #e6e6e6 */ 321 | 322 | /* Media controls */ 323 | /* width is greater than 1200px */ 324 | @media (min-width: 1200px) { 325 | .hero-h1 { 326 | font-size: 9em; 327 | } 328 | } 329 | 330 | /* width is less than 1400px */ 331 | @media (max-width: 1400px) { 332 | .less-imp { 333 | display: none; 334 | } 335 | 336 | .cards-vol-wrapper { 337 | max-width: 1000px; 338 | } 339 | 340 | .cards-vol-wrapper-header { 341 | max-width: 1000px; 342 | } 343 | } 344 | 345 | /* width is less than 1200px */ 346 | @media (max-width: 1200px) { 347 | .hero-h1 { 348 | font-size: 6em; 349 | } 350 | } 351 | 352 | /* Width is less than 900px */ 353 | @media (max-width: 900px) { 354 | .navbar { 355 | padding-top: 15px; 356 | padding-left: 20px; 357 | } 358 | 359 | .collapse { 360 | position: static; 361 | } 362 | 363 | .hero-display { 364 | height: 600px; 365 | } 366 | 367 | .hero-text { 368 | left: 20px; 369 | } 370 | 371 | .hero-h1 { 372 | font-size: 4.2em; 373 | } 374 | 375 | .read-more-button { 376 | display: none; 377 | } 378 | } 379 | 380 | .gotopbtn { 381 | background: #fff; 382 | position: fixed; 383 | bottom: 16px; 384 | right: 32px; 385 | width: 50px; 386 | height: 50px; 387 | border-radius: 50%; 388 | display: flex; 389 | align-items: center; 390 | justify-content: center; 391 | font-size: 32px; 392 | color: #f1f1f1; 393 | text-decoration: none; 394 | opacity: 0; 395 | pointer-events: none; 396 | transition: all .4s; 397 | } 398 | 399 | .gotopbtn.active { 400 | bottom: 32px; 401 | pointer-events: auto; 402 | opacity: 1; 403 | background-color: purple; 404 | } 405 | 406 | 407 | --------------------------------------------------------------------------------