dun-sin / code-magic Goto Github PK

View Code? Open in Web Editor NEW

379.0 7.0 202.0 1.85 MB

Code Generator - Easily Generate CSS and Tailwind code based on your choice and input

Home Page: https://code-magic.vercel.app

License: MIT License

HTML 31.15% TypeScript 57.64% CSS 11.08% Shell 0.03% JavaScript 0.09%

css html typescript developer-tools tools hacktoberfest open-source styling-css generator

code-magic's Introduction

🚀 About

Code Magic is a website where you can get simple CSS tricks to make your application elegant with just few clicks.

🧙‍♀️ Magic options available for you:

Pic Text - Convert images to CSS art. Just upload and get CSS art with just one click.
Gradient Text - Dual color gradient for your texts.
Gradient Border - Get dual color gradient with desired radius.
Gradient Background - Make your backgrounds stand out by applying gradient colors.
Animations
- Select one of the below options
  
  Skew
  
  Fade
  
  Spin
- Set duration and speed for the animations
- And boom
Box Shadow - Cast a shadow on your element.
Border Radius - Get desired border radius for your element.
Text Shadow - Create a cool shadow for your text.
Input Range - Style your range input type elements easily and quickly

⚒️ Languages / Tools

HTML

CSS

TypeScript

🧑🏾‍💻 Demo

Check out the website: Code Magic

👇🏽 Prerequisites

Before installation, please make sure you have already installed the following tools:

Git
NodeJs

👌🏾 What you have to do to contribute

Read the rules
Follow the installation Steps
Follow the contributing Steps

🛠️ Installation Steps

Fork the project. Click on the icon in the top right to get started
Clone the project, you can use the following command:

git clone https://github.com/<your-github-username>/Code-Magic

Navigate to the project directory

cd Code-Magic

Install dependencies with npm install

npm install

npm install -g commitizen

Run the project

npm run dev

🥂 After making a change

Create a new branch

git checkout -b YourBranchName

Add it to staging area

NOTE: don't commit the package.json

git add <path to the file you worked on>

Commit your changes with

git cz

Push your changes

git push

👨‍👩‍👦 Community

Don't forget to join the discord community - Join us

👩🏽‍💻 Contributing

Contributions make the open source community such an amazing place to learn, inspire, and create.
Any contributions you make are greatly appreciated.
Check out our contribution guidelines for more information.

🛡️ License

Code-Magic is licensed under the MIT License - see the LICENSE file for details.

💪🏽 Thanks to all Contributors

Thanks a lot for spending your time helping Code-Magic grow. Thanks a lot! Keep rocking🍻

🙏🏽 Support

This project needs a star️ from you. Don't forget to leave a star✨

code-magic's People

Contributors

Stargazers

Watchers

Forkers

oumaimafisaoui damoski2 mundume dharmik48 sreekar-tammana ayushlohmod temisan0x kendalldoescoding-forks kishore1k yoofi-a-appiah shoruntech dev-phantom rayanabid razaahmad333 fbfdsouza fk00750 sylar-codex tausifqureshi786 akshat-mishra101 karthik-315 nafisa-huda sradha-suresh12 gsr72 smar10 hjertelundhs klausmikhaelson gabrielabubakar adetoye-dev hasnainmakada-99 nakamcode segunajibola njong392 ykdojo benjaminkakai ctoffanin jc-coder jexxxika ajijolanurudeen jeoffreyduke pushkaraj2007 harsh97x dhrumi-shah alicalimli jeremiahhaastrup dhrumishah thrila elijah-trillionz clinton-lynx bhumika-ag vishnu-kota coding-hashira shivarapolu01 rupali-codes tes-balo cradoe rinshin-jalal ayodeled5 czlucius yash91989201 tobysolutions manishbisht777 dsdeepak17 daols1 abdulmumin1 aayushd18 deepanshu1334 debanjo31 oyedare abhishekpatil4 mchirag2002 getricha oceaneyes123 chan2k14 ericchuk ohhkaneda vargriym ssghost satechmedia eddybruv theharryszn aapsi codedmachine111 buneeisslo tanmaybhosale najeebkp ruchita1010 juanbuena dhavaldobariya333 ajamru iamgideonidoko ni-vik najib-b anuragh2002 mr-loop-1 mb-008 creative-tutorials khanhtranngoccva iampearlep hridoyhazard omagr

code-magic's Issues

[FEATURE] Add a transition for modals

Description

All modals pop up suddenly

It will be more soothing if the modals have a gentle transition before pop-up

Screenshots

No response

Description

Adding the live picture or gif of a project in the readme.md file is good.

Use a screenshot or a gif

Screenshots

No response

Description

There are some issues with copying the formatted code text to clipboard and also toggling the display of the text on initial submission.

Screenshots

[FEATURE] Gradient Background Generator

Description

In reference to issue #5

Screenshots

[BUG] generator cards not aligned in center on mobile devices

Description

The generator cards not aligned in center.

I can fix this issue

@Dun-sin can you please assigned it to me.

Screenshots

Description

I need a dark mode.

Screenshots

No response

[FEATURE] Separate each Generator functionality into modules

Description

Every generator should have its own ts file for functions that should be exported and used in the main file

Screenshots

No response

[FEATURE] Custom Text Shadow Generator

Description

In issue #5 you asked for a new generator idea.
Can I build a custom text shadow generator? Similar to this: https://cssgenerator.org/text-shadow-css-generator.html

Screenshots

No response

[BUG] Header not looking proper on small screen devices

Description

Problem: The Header/Navbar of a web page is not looking proper on small screen devices.

Solution: Decrease the right and left padding of a nav element.

Screenshots

Description

Add icons of the Languages / tools to the README.md

Screenshots

No response

[BUG] generator card's images looks stretched

Description

The images on generator cards looks stretched because of hard coding their width and height irrespective of their aspect ratio .

I want to fix this and make this look like.

Screenshots

No response

Description

Doing a little rebranding and hence the colors are changing, change the primary & secondary colors to this👇🏾

primary color: #081121
secondary color: #0E213C

Before contributing, read 👉🏾 this 👈🏾

Screenshots

No response

[BUG] code generated by gradient-text not working

Description

For a given text,
The gradient text generator generates the following code

p {
  font-size: 2rem;
  background: linear-gradient(101deg, rgb(101, 166, 174), rgb(20, 173, 74)) text;
  -webkit-text-fill-color: transparent;
}

This code do not makes the text look gradient

The correct one I would suggest

p {
  font-size: 2rem;
  background: linear-gradient(101deg, rgb(101, 166, 174), rgb(20, 173, 74));
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

will be more appropriate

Screenshots

No response

[FEATURE] Add toast popup after clicking 'Get Code' Button

Description

Problem: Right now when we click on the 'Get Code' button it just copies the code to the clipboard, without giving any hint that the code is copied.

Solution: add a popup when the code is copied to the clipboard, with the help of any JavaScript libraries like eggy.js

I can work on this!

Screenshots

Something like this:

[BUG] Copy code doesn't work on the first time

Description

The copy code button doesn't work when pressed the first time, even though it shows on screen, "Copied to Clipboard" it only actually copies to "Clipboard" on the second clip/second time it shows "Copied to Clipboard".

While this is no problem, it makes it inconvenient for users at times.

Screenshots

No response

[FEATURE] Write better code

Description

If you find a code that uses bad coding principle, propose a better way to do it and why?

Screenshots

No response

There is an issue with text-pic generator

Description

It shows different text than provided

Screenshots

[FEATURE] Push up notifications

Description

What do you think about a push up notification for users? Where users can get notified of new features and new versions of the app. Like the one youtube uses

Screenshots

No response

[FEATURE] Gradient Border Generator

Description

Add generator for gradient border

Screenshots

[BUG] Nav content are not centered properly.

Description

Problem

Content of Nav is not vertically aligned.

Solution

Correction in Nav padding might solve this issue.

Screenshots

[DOCS] use JSdoc to generate documentation

Description

There are already comments using the jsdoc syntax, generate the documentation

Screenshots

No response

Button issue

Omo, I love the work, absolutely great
But i noticed the download image and get code buttons are kind of stepping out of their boundaries, atleast that how i see it in my phone.

[Bug] Title animation is not working properly

Description

Problem

The Title animation is not looking good. It looks like the screen is flickering.

Solution

You made the animation using a change in liner gradient but I changed it to background movement. I know this sounds creepy but this is the best I could explain.

Screenshots

2022-08-09.20-19-43.mp4

[BUG] UI/UX Issue (Responsive)

Description

Issue: Footer section overlap with the page content.

Solution suggestion: Set some background color to the footer.

Screenshots

[FEATURE] option to pick colors

Description

In the gradient text generator, the colors in the gradient are fixed, users should get the option to pick the two colors they want

Screenshots

No response

[FEATURE] Create a simple animation generator

Description

Hey guys i'm new to open source :), and I want to contribute to this project by adding a simple css animation generator that supports rotating objects, skewing them, fade-in and fade-out with the option to adjust the duration

Screenshots

No response

[OTHER] Block "blank" issues from being created

What would you like to share?

In the other issue template it is stated to NOT create blank issues. I would suggest you blank block issues from being created. I can work on this if required @Dun-sin.

Additional information

No response

[BUG] Make Mobile Responsive

Description

Problem: The input elements in the modal for the generators on mobile go out of the modal a little.

Solution: it's probably a padding or margin doing that. Use media query to make it fix in the modal container

Screenshots

[FEATURE] Text Gradient Generator

Description

In reference to #5

Screenshots

[FEATURE] Live update to gradient preview

Description

In the gradient generators, there's this div in between the color pickers, it should have the gradient effect as a preview and should update when either of this 3 things are updated:

First color value
Second color Value
Degree

Before contributing, read 👉🏾 this 👈🏾

Screenshots

[BUG] Make Website Mobile responsive

Description

The website was first created with the Desktop first design approach, need to make mobile friendly and responsive

Screenshots

No response

[BUG] Get code button malfunction

Description

The get code button is meant to copy code to clipboard, that works okay, but the problem is when the button is clicked for the first time, nothing happens. It works the second time