My first contribution

README.md

@@ -1 +1,39 @@
 # GoodFirstIssue
+
+##  About
+GoodFirstIssue is a project designed to help new contributors discover beginner‑friendly issues in repositories. It organizes tasks into categories like **Good First Issue**, **Starter Task**, and **Help Wanted**, making open source more approachable.
+
+##  Features
+- Easy filtering of issues by label
+- Beginner‑friendly tasks highlighted
+- Repository details (stars, last updated, etc.)
+- Interactive UI with styled labels and spinner loader
+
+## Installation
+Clone the repository:
+```bash
+git clone https://github.com/yourusername/GoodFirstIssue.git
+cd GoodFirstIssue
+
+## Contributing
+ welcome to  contributions!
+steps..
+Fork the repo
+Create a new branch (git checkout -b feature-name)
+Commit your changes (git commit -m "Add feature")
+Push to your branch (git push origin feature-name)
+Open a Pull Request
+
+
+---
+
+## Recent Changes
+
+This repository has been updated with several improvements to make it more welcoming for new contributors:
+
+- Enhanced **README.md** with detailed project description, installation steps, and contribution guidelines.  
+- Updated **CSS styles** for labels (`GoodFirstIssue`, `StarterTask`, `HelpWanted`) with fresh pastel colors for a friendlier look.  
+- Improved **JavaScript sorting logic** in `RepositoryContainer` to handle issues more cleanly and prepare for tie-breakers.  
+- Added hover effects and modernized UI elements for better interactivity.  
+
+These changes are part of my journey into open source — making the project more accessible, polished, and contributor‑friendly.

fetchdata.js

@@ -78,19 +78,15 @@ function afterDateLimit(date, todaysDate, monthLimit) {
 	return daysBtwn >= dayLimit
 }
 
-
 class RepositoryContainer {
-	constructor(issue) {
-		this.owner = issue.repository.owner.login
-		this.name = issue.repository.name
-		this.starcount = issue.repository.stargazers.totalCount
-		this.issues = [ issue ]
-		this.url = issue.repository.url
-	}
-
-	addIssue(issue) {
-		this.issues.push(issue);
-	}
+    constructor(issue) {
+        this.owner = issue.repository.owner;
+        this.name = issue.repository.name;
+        this.starcount = issue.repository.starcount;
+        this.issues = [ issue ];
+        this.url = issue.repository.url;
+        this.updatedAt = issue.repository.updatedAt;
+    }
 }
 
 

index.html

@@ -19,28 +19,29 @@
 }
 
 .IssueLabel {
-    height: 20px;
-    padding: 0.15em 6px;
-    font-size: 14px;
+    height: auto;
+    padding: 0.3em 10px;
+    font-size: 16px;
     font-weight: 600;
-    line-height: 15px;
-    border-radius: 2px;
+    line-height: 20px;
+    border-radius: 4px;
     box-shadow: inset 0 -1px 0 rgba(27,31,35,0.12);
+	cursor: pointer;
 }
 
 .GoodFirstIssue {
-	background-color: #7057ff;
-	color: #ffffff;
+	background-color: #ffb6c1;
+	color: #000000;
 }
 
 .StarterTask {
-    background-color: #62dbc9;
+    background-color: #a7c7e7;
     color: #000000;
 }
 
 .HelpWanted {
-    background-color: #008672;
-    color: #ffffff;
+    background-color: #90ee90;
+    color: #000000;
 }
 
 .search-body {
@@ -188,8 +189,8 @@
 	<span class="octicon octicon-clippy"></span>
 	<div class="container welcome">
 		<div class="row d-block">
-		<h1>Find Great Open Source Opportunities.</h1>
-		<p class="lead">Made for new contributors to find great Open Source projects.</p>
+		<h1>Best open source contribution</h1>
+		<p class="lead">Made for new contributors to find best Open Source projects.</p>
 		<p>Discover Issues and Repositories with <label class="IssueLabel HelpWanted">Help Wanted</label> <label class="IssueLabel StarterTask">Starter Task</label> and <Label class="IssueLabel GoodFirstIssue">Good First Issue</label> labels. </p>
 		</div>
 	</div>