Giter Club home page Giter Club logo

playlistadda's Introduction

PlaylistAdda

A fun project for friends through which everyone can share their music playlists.

Hacktoberfest-2022๐Ÿ”ฅ

image

Open Source Love Hacktober Badge Star Badge Contributions

This repository aims to help code beginners with their first successful pull request and open-source contribution. ๐Ÿฅณ

โญ 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!

โญ Make sure to grab some cool swags during Hacktoberfest by getting involved in the open-source community.

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 ๐Ÿ˜

What is Hacktoberfest? ๐Ÿค”

A month-long celebration from October 1st to October 31st presented by Digital Ocean and DEV Community collaborated with GitHub to get people involved in Open Source. Create your very first pull request to any public repository on GitHub and contribute to the open-source developer community.

https://hacktoberfest.digitalocean.com/

Rules ๐Ÿ”ฅ

To qualify for the official limited edition Hacktoberfest shirt, you must register here 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.

Steps to follow ๐Ÿ“œ

Tip: Complete this process in GitHub (in your browser)

flowchart LR
    Fork[Fork the project]-->branch[Create a New Branch]
    branch-->Edit[Edit file]
    Edit-->commit[Commit the changes]
    commit -->|Finally|creatpr((Create a Pull Request))
    

0. Star The Repo ๐ŸŒŸ

Star the repo by pressing the topmost-right button to start your wonderful journey.

1. Fork it ๐Ÿด

You can get your own fork/copy of PlaylistAdda by using the Fork button.

2. Clone it ๐Ÿ‘ฅ

NOTE: commands are to be executed on Linux, Mac, and Windows(using Powershell)

You need to clone or (download) it to a local machine using

$ git clone https://github.com/{Your_Username}/PlaylistAdda.git

This makes a local copy of the repository in your machine. Once you have cloned the PlaylistAdda repository in Github, move to that folder first using the change directory command on Linux, Mac, and Windows(PowerShell to be used).

# This will change the directory to a folder Random-Joke-Generator
$ cd PlaylistAdda

Move to this folder for all other commands.

3. Set it up โฌ†๏ธ

Run the following commands to see that your local copy has a reference to your forked remote repository in Github :octocat:

$ git remote -v
origin  https://github.com/Your_Username/PlaylistAdda.git (fetch)
origin  https://github.com/Your_Username/PlaylistAdda.git (push)

Now, let's add a reference to the original PlaylistAdda repository using

$ git remote add upstream https://github.com/VG-1/PlaylistAdda.git

This adds a new remote named upstream. See the changes using

$ git remote -v
origin    https://github.com/Your_Username/PlaylistAdda.git (fetch)
origin    https://github.com/Your_Username/PlaylistAdda.git(push)
upstream  https://github.com/Your_Username/PlaylistAdda.git (fetch)
upstream  https://github.com/Your_Username/PlaylistAdda.git (push)

In your case, you will see

$ git remote -V
origin    https://github.com/Your_Username/PlaylistAdda.git(fetch)
origin    https://github.com/Your_Username/PlaylistAdda.git (push)
upstream  https://github.com/Your_Username/PlaylistAdda.git (fetch)
upstream  https://github.com/Your_Username/PlaylistAdda.git(push)

4. Sync it โ™ป๏ธ

Always keep your local copy of the repository updated with the original repository. Before making any changes and/or in an appropriate interval, run the following commands carefully to update your local repository.

# Fetch all remote repositories and delete any deleted remote branches
$ git fetch --all --prune
# Switch to the `main` branch
$ git checkout main
# Reset the local `main` branch to match the `upstream` repository's `main` branch
$ git reset --hard upstream/main
# Push changes to your forked `Random-Joke-Generator` repo
$ git push origin main

5. Ready Steady Go... ๐Ÿข ๐Ÿ‡

Once you have completed these steps, you are ready to start contributing by checking our Good First Issue Issues and creating pull requests.

How to add your playlist to the website?

Follow this steps do add your playlist to the website:

#Step-1 Go to index.html
#Step-2 Write your playlist name in the code
#Step-3 Embed your playlist.
#Step-4 Write a sweet message.
#Step-5 You are done go ahead and make your pull request.

6. Create a new branch โ€ผ๏ธ

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).

# It will create a new branch with the name Branch_Name and switch to branch Folder_Name
$ git checkout -b BranchName

Create a separate branch for contribution and try to use the same name of the branch as of folder.

To switch to the desired branch

# To switch from one folder to another
$ git checkout branchname

To add the changes to the branch. Use

# To add all files to branch Folder_Name
$ git add.

Type in a message relevant to the code reviewer using

# This message gets associated with all files you have changed
$ git commit -m 'relevant message'

Now, Push your awesome work to your remote repository using

# To push your work to your remote repository
$ git push -u origin BranchName

Finally, go to your repository in the browser and click on `compare and pull requests. Then add a title and description to your pull request that explains your precious effort.

Help Contributing Guides ๐Ÿ‘‘

We love to have articles and codes in different languages and the betterment of existing ones. Please discuss it with us first by creating a new issue. :tada: :confetti_ball: :smiley: Happy Contributing ๐Ÿ˜ƒ ๐ŸŽŠ ๐ŸŽ‰

Shout-out to @kishanrajput23 for this readme.

playlistadda's People

Contributors

a2hishek avatar anmolwadhwaxx avatar ashuwinb avatar divya-nshi avatar gulshanjakhon avatar haspdecrypted avatar kmayank02 avatar kritikajoshi22 avatar lingeshwaran05 avatar milimade avatar mohit1288 avatar mohitgupta121 avatar nitishmalang avatar poojashinde07 avatar pooranjoyb avatar prashun07 avatar rachit-ranka avatar rancho-rachit avatar rishabhdhawad avatar santanujana2001 avatar shell-raiser avatar shubhamyadav7063 avatar silky-modi22 avatar sooraj-gk avatar tancl2022 avatar tancl88 avatar tanus786 avatar uddinarsalan avatar vinayakgavariya avatar yashdeshmukh25 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

playlistadda's Issues

Enhancing the heading/quote in the page

Reason/Context

Please try answering few of those questions

  • Why we need this improvement?
    In this current version of the page, the heading (quote) is static. This one static quote in the heading makes the first view of the page less dynamic as well as unappealing to the users.

  • How will this change help?
    It will enhance the UI of the webpage. It will ensure users to peek into the main slogans/quotes in the page hence making it more dynamic and giving a better user-experience.

Description

Please try answering few of those questions

  • What changes have to be introduced?
    The heading quote "A place to share your playlists with your friends" has to be made dynamic where each letters appear one by one and subsequently more quotes are displayed one after the other in an infinite loop.

  • Will this be a breaking change?
    No, it will just make the heading quote animated.

  • How could it be implemented/designed?
    This can be achieved by adding some transitions and animations to the heading (quote) of the page,
    i.e, by adding some more styles/css in the style.css file and a pinch of JavaScript in in index.js file.

Screenshot

pic

I would like to work on this issue under Hackteoberfest-2022, if this issue is accepted :)

Would be glad if you assign it to me @VG-1

Making cards responsive

The website looks a bit clustered on medium and small devices due to 4 cards being in the same row.
Make it responsive

I would like to change the color of Navbar as the background color and navbar color become same its not looking good.

    I would like to change the color of Navbar as the background color and navbar color become same its not looking good.

Along with that i would like make small changes in the css of search bar.

Why we need this improvement?
As its difficult to figure out the navbar.
How will this change help?
I will differentiate the navbar and the body.
What is the motivation?
To look website better.

What changes have to be introduced?
In the CSS only.
How could it be implemented/designed?
By changing some CSS properties.

Originally posted by @harsitagarwalla187 in #42 (comment)

Adding a new Playlist to the website

Reason/Context

Please try answering few of those questions

  • Why we need this improvement?
    New playlist
  • How will this change help?
    Improve the list
  • What is the motivation?
    Songs

Description

Please try answering a few of those questions

  • What changes have to be introduced?
    HTML file updated
  • Will this be a breaking change?
    No

Want to add a playlist

Post title

Post description

Guide

Here are a few steps you can follow to write an AsyncAPI blog post:

  1. After getting feedback on the issue, fork the website repository or open it in Gitpod. You can do that by prefixing the issue URL with gitpod.io/#.
  2. Run the command npm run write:blog.
  3. Run the website by using instructions from the README to test your changes.
  4. Open a PR with your blog post and test your changes with a preview of the site on Netlify. If you use Gitpod, it will create a fork of the website repo for you before you create a PR.
  5. Maintainers reviewing the article (e.g., language, images) may ask for improvements.
  6. Once it's merged, it will be available live in production. ๐Ÿš€

We encourage you to write a blog post and share it with the community. We can't wait to read it ๐Ÿ˜„!

Looking to add background color changer feature each different songs

Reason/Context

Please try answering few of those questions

  • Why we need this improvement?
  • How will this change help?
  • What is the motivation?
  • Hey there,
  • I think this feature will make the website more perfect and will attract user more
  • Main motivation is to make it look much cooler and perfect

Description

Please try answering few of those questions

  • What changes have to be introduced?

Generating colors with each different songs randomly automatic feature

Will this be a breaking change?
Yup, according to me

  • How could it be implemented/designed?
    It can be easily implement using Javascript, frontend frame-work just a bit of inbuilt functions and few lines of code, OR if you want we can add a button for changing themes

A visually better scroll bar

Reason/Context

Please try answering few of those questions

  • Why we need this improvement?
    ans: The UI of the project will be hugely affected in a positive way if we make this change.

  • How will this change help?
    ans: It will give the user a visually aesthetic experience.

  • What is the motivation?
    I am starting out in open Source and want to contribute and hone my skills and this particular feature is best- suited for that.

Description

Please try answering few of those questions

  • What changes have to be introduced?

  • ans: Scroll bar will be made visually attractive.

  • Will this be a breaking change?
    ans: No this is a fairly safe change that can be made.

  • How could it be implemented/designed?
    ans: I can make it using webkit-scrollbar properties in CSS

Add JSON file for adding playlists.

Reason/Context

Please try answering few of those questions

  • Why we need this improvement?

Currently, each playlist is added manually by users by directly editing the index.html file.
This can cause bugs as they can miss certain attributes for the html tags used to render the playlist.
Every playlist card has the same UI. The only things that are changing is the data specific to the user.

  • How will this change help?

If we have a json file in which users can add their personal data, then it will greatly reduce the chances for mistakes in the index.html file. It will also be easier to update and maintain user data. They can easily change their data without affecting the original webpage.

  • What is the motivation?

Currently the index.html file has a lot of duplicated code used to display the various playlists. This can be reduced by adding a json file to manage user data.

Description

Please try answering few of those questions

  • What changes have to be introduced?
    Addition of a JSON file to keep important info about the users.
    Changes to the index.js file to create the playlist card dynamically and add it to the index.html file.
  • Will this be a breaking change?
    No
  • How could it be implemented/designed?
    Add a JSON file and use document.innerHTML properties to dynamically generate playlist cards.

I would like to work on this if this issue is accepted. Please assign it to me.

Want to Add Bottom to Top button

Reason/Context

Please try answering few of those questions

  • Why we need this improvement?
  • for user friendly we can add bottom to top button
  • How will this change help?
  • User can easily go to top from bottom
  • What is the motivation?

Description

Please try answering few of those questions

  • What changes have to be introduced?

  • Its just an example how button looks like
    gg

  • Will this be a breaking change?

  • How could it be implemented/designed?

Add `invalid` label to PRs for adding playlist

Describe the bug

The repo itself is acceptable according to Hacktoberfest standards. But the PRs accepted for adding playlist to the website are not valid according to Hacktoberfest rules. This can get the repo itself excluded from Hacktoberfest.
These type of PRs should be given a label on invalid for Hacktoberfest so that the repo remains compliant with the rules and regulations of Hacktoberfest.

How to Reproduce

  • Go to any PR which is for adding playlist to the website.

Suggested Solution

We should add a label of invalid to the upcoming PRs for adding playlist to the website. Something similar to the Eddiehub Community LinkFree repo. Here is the link https://github.com/EddieHubCommunity/LinkFree/issues.
The LinkFree is similar to the PlaylistAdda repo. But they are adding invalid label to issues and PRs for adding profiles to the repo.

Proper Alignments of boxes

Reason/Context

Please try answering few of those questions

  • Why we need this improvement?
    Improper alignment not giving a better look to website
  • How will this change help?
    I can resolve this issue by adding css
  • What is the motivation?
    My motivation is to make website UI better

Description

Please try answering few of those questions

  • What changes have to be introduced?
    all boxes to have same alignment
  • Will this be a breaking change?
    No
  • How could it be implemented/designed?
    It can be simply done by adding css

Please assign me this issue under Hacktoberfest2022?

Fix a bug

Describe the bug

A clear and concise description of what the bug is.

How to Reproduce

Steps to reproduce the issue. Attach all resources that can help us understand the issue:

  • Screenshots
  • Link to GitHub repository with project that has issues
  • Files that can help reproduce the issue, like your AsyncAPI file, either paste inside the issue in a code block or in a sharable gist

Expected behavior

A clear and concise description of what you expected to happen.

Light and Dark mode button

Reason/Context

Please try answering few of those questions

  • Why we need this improvement?
    It will enhance the user experience.
  • How will this change help?
  • It will help in having a responsive website.
  • What is the motivation?
  • It is more attractive.

Description

Please try answering few of those questions

  • What changes have to be introduced?
  • Changes in the html, css, js files.
  • Will this be a breaking change?
  • no
  • How could it be implemented/designed?
  • By putting a button.

Hide scroll to top button when already on top of the page

Describe the bug

A clear and concise description of what the bug is.
The Scroll to top button doesn't make any sense when user is already on the top of the page. Even if it's clicked, it won't scroll to anywhere.

How to Reproduce

Steps to reproduce the issue. Attach all resources that can help us understand the issue:

  1. Go to https://vg-1.github.io/PlaylistAdda/
  2. Click on the Scroll to top button when already on the top of the page.
  3. See the bug
  • Screenshots
  • Link to GitHub repository with project that has issues
  • Files that can help reproduce the issue, like your AsyncAPI file, either paste inside the issue in a code block or in a sharable gist

Expected behavior

A clear and concise description of what you expected to happen.
The scroll to top button should be visible only when user scrolls down.

Adding a stylish Scrollbar

Reason/Context

Please try answering few of those questions

  • Why we need this improvement?
    Improves the UI
  • How will this change help?
  • Better UX
  • What is the motivation?
    Spotify scrollbar

Description

Please try answering few of those questions

  • What changes have to be introduced?
    Just a segment of code in css file
  • Will this be a breaking change?
    Not much

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.