Coder Social home page Coder Social logo

frontend_projects's Introduction

Hacktoberfest-2023

Contribution RulesπŸ“š:

  • Do NOT remove other content.
  • Styling/code can be pretty, ugly or stupid, big or small as long as it works.
  • Try to keep pull requests small to minimize merge conflicts

Getting Started πŸ€©πŸ€—:

  • Raise an Issue under hacktoberfest , hacktoberfest-accepted label
  • Fork this repo (button on top)
  • Clone on your local machine
git clone https://github.com/theravi04/Frontend_Projects.git
  • Navigate to the project directory.
cd HacktoberFest-23
  • Create a new Branch
git checkout -b my-new-branch
git add .
  • Commit your changes.
git commit -m "Relevant message"
  • Then push your changes
git push origin my-new-branch
  • Create a new pull request from your forked repository

Add Geo Location API

Visit this website: https://www.geonames.org/

Create and account. After this, copy your user name.
```Enable Free Services
Visit this link after creating your account: https://www.geonames.org/manageaccount
Then enable the free services. There should be a Click here to enable link.
Enter your user name in script.js in the const USERNAME = ""; 

## Avoid Conflicts {Syncing your fork}

An easy way to avoid conflicts is to add an 'upstream' for your git repo, as other PRs may be merged while you're working on your branch/fork.   

```terminal
git remote add upstream https://github.com/theravi04/Frontend_Projects.git

You can verify that the new remote has been added by typing

git remote -v

To pull any new changes from your parent repo simply run

git merge upstream/master

This will give you any eventual conflicts and allow you to easily solve them in your repo. It's a good idea to use it frequently in between your own commits to make sure that your repo is up to date with its parent.

For more information on syncing forks read this article from Github.

FAQs (Frequently Asked Questions)

  • Who all can contribute?
    • Anyone with a GitHub account and who is signed up for hacktoberfest :)
  • Are you getting paid for this?
    • Sadly no. But I think we should. This is 100% unofficial and I do it for fun, fame and glory.
  • Who are you and why are you doing this?
    • I am Ravi & I am doing this because I love Open Source and Hacktoberfest. I want to make it easier for people to get started with Hacktoberfest and Open Source.
  • How many pull requests (PR) must be made?
    • 4
  • What is the event for?
    • For the open source community engagement and learn how to contribute to open source.

frontend_projects's People

Contributors

abrarlala avatar ashishk1331 avatar eternoseeker avatar gauravp23 avatar jitisha-khede avatar kaushalkumar99 avatar motivated-star avatar prateekpr17 avatar prathameshtheurkar avatar pushkar1713 avatar ronitbaranwal avatar sanju2 avatar subhasish-roy avatar suma30 avatar tandindev avatar theashu02 avatar theravi04 avatar varshaa-7 avatar vedika-gupta avatar wendell00 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

frontend_projects's Issues

[Bug]: Date of Birth Input Length Validation

Issue Description: The "Date of Birth" input fields in the Payment form should be limited to accepting exactly 2 characters for "DD," 2 characters for "MM," and 4 characters for "YYYY" to enforce the desired date format (e.g., "DD-MM-YYYY" or "MM/DD/YYYY").

Screenshot 2023-10-12 144809

Expected behaviour:

  • The "DD" input field should accept exactly 2 numeric characters.
  • The "MM" input field should accept exactly 2 numeric characters.
  • The "YYYY" input field should accept exactly 4 numeric characters.
  • Any attempt to enter more characters than the specified limits should be visually restricted within the input fields without allowing further input.

Resume website

I want to add a resume outside build using html , css and javascript

Project: Colors

I wanted to add a project which displays colour cards and help the designer get their colours for websites.

Instead of folders share files

Context

For now, we need to share entire folders of static data.

Possible Solution

Instead of sharing entire folders, the contributors can share files in markdown format to display the project's information. eg.

---
title: Project Name
project_url: link to the real demo of the project
author: name of the author
github_username: GitHub username
github_repository_link: link to the GitHub repository
---

Now, the new contributors can duplicate the above code from contributing.md or we can provide a sample.md file to just replace placeholder data with your actual data.
This approach will include:

  1. creating a sample template
  2. adding the rule to the contributing.md

Also, it approves of clean code.

Assignment Request

I would love to make all the necessary changes mentioned above. Please assign me to this issue.

UI enhancement

I would like to add background image and bordering for a better look of the weather app,
please assign me this issue

Automatically detect user location and display the weather of their city and cities close by. - (Hacktober Fest )

We use a grid system which changes based on screen size ( maybe a 13 on phones 23 on tablets and 3*3 on laptops).
This issue can be divided into three main parts:

  • Getting user location
  • Getting the weather of major cities close by ( we could use on the three methods mentioned below)
  • Updating the website ( would suggest using ejs for this)

Finding User Location:

Use the IPstack API To get Location using User's IP address.

Adding "Major Cities":

We could do one of the three methods:

  1. Using another API to fetch major cities close to the user.
  • API : GeoDB cities API.
  • Has a lot of params to filter cities, like min , max population , radius , country_region, etc.
  • We essentially fetch the coordinates from each city and pass it to the weather API, the only constrain over here would be the time taken to do so.
  • The output format will be common for both of the solutions, and is described below.
  1. Display the weather of major cities close to the user from a fixed list set by us.
  • For this we could use a dictionary which contains the name of the city (in accordance with openWeather's syntax for names) as the key , and a list containing [latitude and longitude] as the value.
  • We could iterate this dictionary and compare it with the current user location and retrieve the weather of the 4 closest cities.
  1. Display the weather of all major cities from a list like @kaushalkumar99 suggested, accept we use grid. (I was not sure if @kaushalkumar99 was referring to a grid system when he mentioned placement)
  • Issue Link
  • This is relatively simpler as we iterate through a pre-determined list and fetch the weather of the cities.

Updating the website and possible style

This will be a Major step up from the current website; but i propose switching to ejs templates instead of html files.
For the styling part refer to the image attached.
I have partially modified a previous website which I made; The main intention of this mockUp is to show what I want the website to look like.
Do focus on the card which says Name of The city,

Screenshot 2023-10-10 220347

Misc

  • I do have experience with geoLocation APIs, however, I am a little rusty in webdev right now, because I haven't done it in a year.
  • I am open to suggestions and I think the first method listed in " Adding major cities " should be our end goal for this website.
  • I can start from the second method and work up to the first method.
  • TO minimize merge conflicts I am happy to purely work on getting current user location and fetching the weather.
  • I can do multiple pull requests to edit the CSS and other aspects of my issue.

Apologies for such a long comment.
~ The End ~

Project : Temprature Converter

Project Description: 🌑️ This project facilitates temperature conversions between Celsius and Fahrenheit, making it a valuable tool for everyday use.

Hi there πŸ‘‹

I'm excited to contribute to Hacktoberfest 2023, and I'd like to work on this issue. It looks like a great opportunity to learn and contribute to the project.

Please assign this issue to me, and I'll start working on it right away. If you have any specific instructions or guidelines, please let me know, and I'll make sure to follow them.

Thanks a lot for considering my request!

Best regards,
Prateek Sethi

Adding a new project of Calculator .

The websites are great but they all require a pinch of mathematic in it. So, I am thinking of adding a new project of calculator where people could calculate their day-to-day necessities.

If its okay for you , may I work on this issue and can I get it assigned.

Parallax effect website

I want to add my parallax effect website of my favourite stories to this project as a part of hacktoberfest event, Please assign me this issue.

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.