theravi04 / frontend_projects

Frontend_Project

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 Issues

Add Random Quote Generator Website

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

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

Guess my number game

I want to add a guess my number game.

Add default weather locations of some important cities

Would like to add default weather locations of some important cities like Delhi ,Bangalore, etc on the website page which will make the webpage look more filled up and awsome....shall i proceed ??

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

UI enhancement

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

Drop Down Suggestion of Cities

I would love to add a drop down suggestion when user click or select the field. Please assign this issue to me.

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.

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.

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

3. 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,

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 ~

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.

tic - tac toe game

i want to add a tic tac toe game using javascript.

Project: Colors

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

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.

Add a website made on html (Hacktober Fest)

Hi,

I will add my project which is a cat-oriented website.

Best,
Rehan.

Adding Rock-Paper-Scissors

I want to add a Rock-Paper-Scissors game using HTML, CSS, JavaScript...