anjali1102 / hacktober2022

DevKit 🧑‍💻👩‍💻is open-source collection of frontend projects made with HTML, CSS, Javascript, React, APIs, Angular, etc for uplifting Creative thinking over Binge-watching tutorials.

Hacktober 2022

Hacktober is back with yet another season of open source contribution from around the world! This repository, DevKit, is a part of the Hacktober Fest accepted repository.

An open-source collection of frontend projects made with HTML, CSS, Javascript, React, APIs, Angular, etc for uplifting Creative thinking over Binge-watching tutorials.

How to Contribute 🥳

If you are new to contributing to open source projects, this README.md and CONTRIBUTING.md will help you with the same.

To give you a brief overview, you have to:

1. Fork the repository
2. Make sure that it is up-to-date with the original repository
3. Moving into a branch (inside your forked repository) made for the feature assigned to you
4. Pushing it onto your forked repository
5. Opening a PR (pull request)

The same has been explained in detail along with the required CLI commands in the CONTRIBUTING.md file.

Visit the CONTRIBUTING.md

Fire Particle	Space Animation☄	Brick Breaker
CSS Animation Bus	Resume	Confetti Animation
Drawing Board	guess Game	Guess Number
Joke generator	Quote generator	REACT~PASSWORD~GENERATOR
Tesla Clone	Simple Login-register	Wikipedia Viewer
advice generator	Progress Steps	expense tracker
Starbucks Landing Page	Random color Generator	Coffee Shop

Project Maintainer ❤

Anjali Chauhan

Note to Contributors 🙂

Once you have made a PR to the repository; Sit back patiently and relax while the your PR is reviewed.

In case of any help, please free to contact me via mail @ [email protected]

hacktober2022's Issues

Adding my new project - Hulu App (Streaming App)

Watch movies, new TV shows, Hulu Originals, and more with Hulu.

Whether you’re looking to watch new TV series, browse episodes of your favorite series or want to discover and browse the latest movies you’ll have everything you need.

Technologies used for this app:
HTML , CSS , Javascript , React

Hosting Platform
Netlify

If Your PR got counted in hacktoberfest , Give 🙂 / Rejected 🥺

Add chime sound effect - Project Calculator

Is your feature request related to a problem? Please describe.

Add Chime Sound Effect on button click

Cross browser quotes extension

A cross browser quotes extension which gives you daily motivational and inspirational quotes and works on both chrome as well as mozilla firefox it fetches the quotes with the help of API and this feature is created in the form a browser extension so there is no need to host it anywhere else

2 hulk login pages project

Describe the bug
There is duplicacy of project. Make sure to resolve it.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://github.com/anjali1102/Hacktober2021/
2. Scroll down
3. See error

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

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Weather web-app

weather web-app project added

#Description
A weather app that gives information about weather of the Cities .

link-->
https://brave-brattain-b354a7.netlify.app/

BMI Calculator

I want to add a BMI Calculator, which would display BMI after user enters Height and Weight. Please assign me this issue under Hacktoberfest, @anjali1102.

Add favicon to Click-notification button webpage

Is your feature request related to a problem? Please describe.
Yes, favicon is not present for this webpage.

Describe the solution you'd like
Web-page will look more professional after adding favicon.

Enhancement for instructions page

This page looks old, improve the beautification, make it more attractive

Lighting Circle effect

it's an new css effect.
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Blackground select on button click

Make a button, which gives options of background pictures and set that background

Steps to contribute are mentioned in CONTRIBUTING.md

references

autowrite.text.demo.mp4

Add a CSS Flip animation

Add a card flip animation using HTML & CSS.

Login-Page using html Css and Javascript

[New Project] - Face Detection using javascript

project for finding object/face in live webcam using tensorflow.js/Face-api.js.

Enhance hover effects Text Editor

Is your feature request related to a problem? Please describe.

REPOSITORY here
The Hover effect looks so ugly, beautify them more.
The last icon [brush icon] is for clearing the entire canvas, the icon design doesn't suit with its functionality, so change this icon design.

words glow effect

adding new css effect
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Cake Shop Landing page

Document.-.Google.Chrome.2020-11-03.13-45-55.mp4

Guess My Number

Details

A random number will be generated by the computer and the player will have to guess it.

Add new CSS effect that is Circle effect

#Add new CSS effect so that website should look appealed.
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[New Project]Web based Chat Application

#Description
A Chat Application Web App that uses for text chatting as well as in sending photographs in high quality.

Link-
https://chat-room-mj5.netlify.app/

Product Landing Page

A product landing page of a headphone manufacturer with light box gallery, using html, css and js.

[Fix] Some grammatical error in main readme

Recreate Navbar & add image slider

Describe the bug

The "Contact Us" is moving out of the navbar. Fix it

Repository HERE

To Reproduce
Steps to reproduce the behavior:

1. Clone this Project
2. Set up in VS code
3. See error

Implement signup page for cake-shop landing page project

Is your feature request related to a problem? Please describe.
Yes. Currently sign up button is not doing anything.

Describe the solution you'd like
on clicking at sign up button on landing page, it should take customer to sign up form/page.

Bubble CSS Effect

it's an css effect which can help website to look more appealing.
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Add hover effect/CSS animations on socials

Is your feature request related to a problem? Please describe.
Repository is Here

ADD beautiful hover effects/CSS animations on the social accounts section 😄

Additional context
Add any other context or screenshots about the feature request here

All steps are mentioned in CONTRIBUTING.md

Resume Project Damaged

Describe the bug
A clear and concise description of what the bug is.

Check this repository REPOSITORY

BUGS ARE 🐛

To Reproduce
Steps to reproduce the behavior:

1. Clone this repository
2. set up in VS code
3. See error

Incremental Counter

Incrementing counter counts up to any number using Javascript

Counters.mp4

Select image from local on canvas - Text Editor

Is your feature request related to a problem? Please describe.

Make an icon by which users can select photos from his/her local system and that image gets appear on canvas

Addition of a New Project

I want to add a new project which is basically a very simple music web app.
If @anjali1102 permits, I can add that project to this repository.

News App

I would like to contribute my project news application in here

#demo of the project => https://newsapp-abipravi.netlify.app/

if you assign it to me can do it

Change the click button Animation

Is your feature request related to a problem? Please describe.
in Current click button animation is boring, make it more attractive 😀
Repository

Steps to contribute are mentioned in CONTRIBUTING.md
you can take ideas from here

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Adding new project - crypto currency website

Crypto currency website - Landing page with proper react setup

Technologies used:
React,
Javascript,
Html,
CSS,

Hosting platform : Netlify

QR Code Generator

This is a simple QR Code Generator. Using this we can easily generate qr code for any text.

I want to add new front end projects

Please assign me this issue @anjali1102

Zoom-In-Zoom-Out effect on hover

Document.-.Google.Chrome.2020-09-09.20-20-40.mp4

HEARTBEAT ANIMATION PROJECT

Document.-.Google.Chrome.2020-11-03.13-43-51.mp4

Expense-tracker

Expense Tracker

• A JavaScript based expense tracker to keep track of income and expenses with add and remove items options and save to local storage .

---

Project Specifications

• Created UI for project
• Transaction items are displayed in DOM.
• Showing balance, expense and income totals
• Added new transition and reflecting in total
• Delete button to delete items from DOM
• Persist to local storage

---

Alternatives considered

• React based app: it would take more storage compared to simple JavaScript App and would require a lot more dependencies
• Python GUI based app: it would be complicated and more space consuming than the present app with lot other libraries need to be imported.

---

Screenshot

Add favicon to all the web-pages

Is your feature request related to a problem? Please describe.
Yes, It will add value to the projects.

Describe the solution you'd like
Want to add favicon to the web pages.

Add dark mode

Is your feature request related to a problem? Please describe.

Project is Here

Light attracts bugs, As we coders are vampires, There's a need for dark mode on the website 🕶️

All steps are mentioned in CONTRIBUTING.md 😄

After completing pls add project Screenshot/GIF in main readme

Add more colour select Text Editor

Is your feature request related to a problem? Please describe.

Add three more colors here( like white, pink, brown etc)

REPOSITORY HERE

new CSS effect

it's an css effect of light.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Improve the "Join here section" looks terrible

Describe the bug

This Join here section looks very ugly, Improve the styling, animation. Make it beautiful.

Please also change the button styling

To Reproduce
Steps to reproduce the behavior:

1. Clone This Project
2. Set up in VS Code
3. See error

Please don't hesitate to ask any anything 😀

Add sin cos tan in Project Calculator

Is your feature request related to a problem? Please describe.

Add sin cos tan button in calculator

Make a new row at end

For References you can see this

Sound effect with every button click

Is your feature request related to a problem? Please describe.

Repository
Whenever notifications appear add a short sound effect, so it can alert the user

click-animation.mp4

All steps to contributing are mentioned in CONTRIBUTING.md

Remove vertical scrolling

Describe the bug

In this Project , remove the vertical scrolling bar.

You can play with Sizing, without hampering the core of project.

And then add your project screenshot in here

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

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

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Project is damaged

https://github.com/anjali1102/Hacktober2021/tree/master/Space-Animation-CSS-HTML

Fork this
Open in VS code
Fix the bugs

fixbugs.mp4

Add favicon to calculator web-page.

Can I work on this issue? @anjali1102

Create Fitness calculator page -Project Gym Website

Is your feature request related to a problem? Please describe.
Create Fitness calculator page. You can make a BMI finder or you are free to implement your own ideas.

Please, Take it forward

SEE This GYM WEBSITE PROJECT

If you face any problem during contribution, Follow CONTRIBUTING.md 😄

Don't hesitate to ask any doubts

Add About Us Page -Project Gym website

Is your feature request related to a problem? Please describe.
Please add the "About us page" in Gym Website

Check this

You are free to use your creative thinking

Check CONTRIBUTING.md if find any issue during contribution

Please feel free to ask any doubts 😀