Giter Site home page Giter Site logo

alexandra-haynes / memes-collection Goto Github PK

View Code? Open in Web Editor NEW
9.0 2.0 15.0 2.88 MB

Join us in building a coding memes generator

Home Page: https://alexandra-haynes.github.io/memes-collection/

License: MIT License

HTML 15.34% JavaScript 84.66%
first-contribution firstcontribution firstpullrequest funny memes newbiefriendly opensource pull-request

memes-collection's Introduction

Coding Memes & Jokes! ๐ŸŽ‰

Welcome to the Coding Memes & Jokes repository! A place to share your favorite coding memes and jokes.

Why Contribute?

  1. ๐ŸŽฏ Celebrate Open Source: Contribute to the open-source community.

  2. ๐ŸŒCommunity Engagement: Become a part of the global open-source community. You can engage in discussions, share your knowledge, and learn from others.

Who can contribute to this project?

graph LR
A[Memes Collection <br> Repository] --> B(Web Dev Contributors)
A --> C(Meme & Joke <br> Contributors)
B --> D( Modify code to <br>enhance the website)
C --> E(Contribute Jokes)
C --> F(Contribute Memes)

How to start contributing?

Step 1 Fork The Repository

  • Use the button at the top right to fork this repository.

    Note: Don't forget to give a star before forking this repository

  • You will be directed to "Create a new fork" page, the details will be already filled by default.

  • Click on the "Create fork" button on the bottom-right of the page.

    Now you can freely work on this forked repository of your without affecting the main repository.

Step 2 Clone The Forked Repository

  • Click on the green color dropdown button with "<>Code" written on it.

  • Copy the HTTPS link given in it.

  • Open Git Bash in any folder on your local device and then give the following command.

    git clone <paste the link here>
    

Step 3 Navigate to the repository and create a new Branch

  • Open the folder which you have just cloned.

    Note: The default name of the folder will be "memes-collection"

  • Open this folder in VScode.

  • Before you make any modifications in any file you must always clear a new branch for the respecitve branch to do so, open git bash in the current folder i.e "memes-collection" and then give the following command.

    git branch adding-joke
    or
    git checkout -b adding-joke
    

    Note: By using the above command a new branch named "adding-joke" will be created which signifies that this branch is going to be used for adding new joke

How to start this project?

  • Once you are done with the above steps.

  • Open new VScode terminal for the folder and give the following commands:

    npm install
    npm start
    
  • After doing this the website will open up in you default browser and thus you will be able to see working the website.

Adding new Memes or Jokes

  • For Memes: Add your meme to the src/MemesCollection.json file in the following format:

    {
    "id": <unique-id>,
    "path": "<path-to-your-meme>"
    }

    Make sure to replace <unique-id> and <path-to-your-meme> with the appropriate values. Place your meme image in the src/memes/ folder with the same name as the path value in the MemesCollection.json file.

  • For Jokes: Add your joke to the src/JokesCollection.json file in the following format:

    { "id": <unique-id> , "joke": "<your-joke>", "contributor": "<your-name>" }

    Make sure to replace <unique-id>, <your-joke>, and <your-name> with the appropriate values.

    For id, simply increment the last id in the array. Double-check to be unique (no one else used the same id).

How to raise a Pull Request?

  • After completing all the changes which you have made its time to commit it and then raise a pull request.

  • Stage Your Changes: in Git bash (for the respective "memes-collection") start giving the following command.

    git add -A
    or
    git add myfolder/file1.js
    

    Note: git add -A will stage all the files which are changes, which sometimes can be a problem, use it only when you have a good idea about this command else you can use the command git add myfolder/file1.js, here myfolder/file1.js is the path of the folder "file1.js" in which you made the changes

  • Commit Your Changes:

    git commit -m "Write a short discription about your commit"
    eg
    git commit -m "Added new Meme/Joke"
    or
    git commit -m "Modified the footer"
    
  • Push to Your Fork:

    git push origin main <branch-name>
    eg
    git push origin main adding-joke
    

    This will push all your changes to your forked repository in your GitHub account

  • Creating a Pull Request: After doing all this go to your github account -> open the folder repository -> switch to the branch in which you have made the changes -> You will find a message being displayed at the top saying "this branch is n commits ahead of the original repository" -> Create pull Request (PR) Give a sort title to your PR and a brief discription to it.

For more detailed contribution guidelines, please read CONTRIBUTING.md.

Code of Conduct

We believe in fostering an inclusive community. All contributors are expected to adhere to our Code of Conduct. In case of any violations, the maintainers reserve the right to take appropriate actions.

Happy coding! ๐ŸŽƒ

memes-collection's People

Contributors

alexandra-haynes avatar arhamkhnz avatar chinaman234 avatar fa-901 avatar hparashar27 avatar kaniz-fatma avatar kobebuckley avatar nongsnail avatar parthsolanki1498 avatar pedaars avatar petrosdevri avatar shail-patel-321 avatar shiba-tatsuya avatar starbone avatar vermilion4 avatar vishal-1004 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

memes-collection's Issues

Adding footer to the website

Title:

[Report/Suggestion]: Briefly describe the issue here


Type:

  • Inappropriate Content Report
  • Enhancement Suggestion

Description:

Please provide a detailed description. If you're reporting inappropriate content, specify which meme/joke and why you find it inappropriate. If suggesting an enhancement, describe what you'd like to see improved or added.


Location:

If reporting inappropriate content, please provide a link or the path to the file or location in the repository where the content can be found.


Additional Context:

Add any other context or screenshots about the report/suggestion here. For instance, if you're suggesting a feature, explain why you believe it would benefit the project.


Guidelines:

For Inappropriate Content:
We strive to maintain a positive and inclusive environment. If something is reported as inappropriate, it will be evaluated, and actions will be taken accordingly. When reporting, please be clear and constructive.

For Enhancement Suggestions:
All suggestions are welcome! If you have ideas on how to improve the project or its functionality, we'd love to hear them.

Update Read me file

Title

Since the project has been excluded from the hackathon, we should get rid of the hackfest info.

Type

  • Enhancement Suggestion
  • Inappropriate Content Report

Description

Remove all hacktober fest details

Location

readme file

Random Joke and Meme Generator

Title:

Random Joke and Meme Generator

Description:

You idea of displaying all the memes and joke is nice but if the number of memes and joke keep on increasing then the website will grow to big vertically. So to avoid this we can make this website as a random Joke or Memes generator were anyone can click on a button to get a new joke or a new meme as they like and thus the vertical length will also be reduced.


Location:

I would like to make these changes in "src" folder of this repository were i might edit the existing js file or even create new more files as per the need.

For Enhancement Suggestions:
I am quite experienced person with good front end knowledge so i would also like to work on some UX part of the website if you agree.
But for now i wish if we could make this website of your as random joke and memes generator.
Where beginners can continue with giving their memes and jokes as usually and developers like me can update the appearance and feature of the website.

@Alexandra-Haynes

Update babel dependency

Title

The dev dependency for babel seems to be causing a problem when installing the node modules

Type

  • Enhancement Suggestion
  • Inappropriate Content Report

Description

Location

/package.json

Additional Context

Screenshot 2023-10-03 at 12 07 59 AM

After some research I saw this is a common bug with npm. One potential solution which worked for me was updating the babel dependency to version "^7.21.11". This is the latest version of the package.

https://www.npmjs.com/package/@babel/plugin-proposal-private-property-in-object

Create components folder

Title

Code organization

Type

  • Enhancement Suggestion
  • Inappropriate Content Report

Description

There is no components folder. We should add that and move files like Jokes.js, and Memes.js to organize code. That way future components like header/footer have a place to go.

Location

/src

Additional Context

Screenshot 2023-10-03 at 12 29 40 AM

Header is not Visible on the hosted website

Title

Type

  • Enhancement Suggestion
  • Inappropriate Content Report

Description

Post merge #19, the header is not visible on the live page.

Location

/src/components/header

Additional Context

Not sure if we need to re-deploy or we are not rendering it correctly

Fix the README.md file documentation

Title:

Actually everything is fine in the readme.md file only one thing is not correct there -

er

"Earn a T-Shirt: Complete the challenge and earn a limited edition T-shirt." because it is mentioned in the FAQ section of hacktoberfest site that this year there is no t-shirt reward.

link - https://hacktoberfest.com/participation/#faq
sol

So, by removing or correcting that point from the readme.Md file , this issue can be solved


Description:

Please provide a detailed description. If you're reporting inappropriate content, specify which meme/joke and why you find it inappropriate. If suggesting an enhancement, describe what you'd like to see improved or added.


Location:

2nd point - https://github.com/Alexandra-Haynes/hacktoberfest2023-memes-collection#why-contribute


Additional Context:

Add any other context or screenshots about the report/suggestion here. For instance, if you're suggesting a feature, explain why you believe it would benefit the project.


Guidelines:

For Inappropriate Content:
We strive to maintain a positive and inclusive environment. If something is reported as inappropriate, it will be evaluated, and actions will be taken accordingly. When reporting, please be clear and constructive.

For Enhancement Suggestions:
All suggestions are welcome! If you have ideas on how to improve the project or its functionality, we'd love to hear them.

Create a header component

Title

  1. Create a header component in src/components
  2. Import inside App.js
  3. Render it above Memes

Type

  • Enhancement Suggestion
  • Inappropriate Content Report

Description

The header should have a title of the project, and a link to the Github repository

Location

Additional Context

Layout: Generate Button

Title

The generate button under the meme needs some padding or margin to keep consistent layout with the generate button under jokes

Type

  • Enhancement Suggestion
  • Inappropriate Content Report

Description

Location

src/GlobalStyle.js

Additional Context

Screenshot 2023-10-03 at 3 00 39 PM

Add 2 new memes

Title: Add 2 new memes

[Report/Suggestion]: Briefly describe the issue here


Type:

  • Inappropriate Content Report
  • Enhancement Suggestion

Description:

I would like to add 2 memes to the page.


Location:

If reporting inappropriate content, please provide a link or the path to the file or location in the repository where the content can be found.


Additional Context:

Add any other context or screenshots about the report/suggestion here. For instance, if you're suggesting a feature, explain why you believe it would benefit the project.


Guidelines:

For Inappropriate Content:
We strive to maintain a positive and inclusive environment. If something is reported as inappropriate, it will be evaluated, and actions will be taken accordingly. When reporting, please be clear and constructive.

For Enhancement Suggestions:
All suggestions are welcome! If you have ideas on how to improve the project or its functionality, we'd love to hear them.

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.