feat: update instructions

README.md

@@ -19,22 +19,22 @@
 > [!IMPORTANT]  
 > If you're reading this, it means you like this project :). Feel free to give it a star ⭐.
 
-## Features
-
-- Easily create Git commits to modify the contribution graph on GitHub.
-- Customize the contribution graph for artistic, personal, or branding purposes.
 
 ## Usage
 
-- Select the year you want to customize (Choosing the year before your GitHub joining year would be better, can use GitHub api for checking the joined date).
-- Select the desired rectangle(s) on the GitHub contribution graph that you want to customize and click `Generate` button.
-- Copy the generated Git commit command.
-- Run the copied command in your local Git repository to make the desired changes (better to create a new empty repo).
-- Push the changes to your GitHub repository to update the contribution graph.
+- Select a year (choosing a year before joining GitHub is better).
+- Click on the squares to toggle them.
+- Click on the `Generate` button to get the code.
+- Create a [new]("https://github.com/new") GitHub repository.
+- Clone the repository into your local machine.
+- Ensure your git username and email are [configured correctly]("https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/managing-contribution-settings-on-your-profile/why-are-my-contributions-not-showing-up-on-my-profile#your-local-git-commit-email-isnt-connected-to-your-account").
+- Copy the generated code into your terminal.
+- Push the changes to the remote repository.
+
 
-To create an empty commit with a specific date:
-```bash
-git commit --allow-empty --date="31 Oct 2022" --allow-empty-message -m ""
-```
+## Features
+
+- Easily create Git commits to modify the contribution graph on GitHub.
+- Customize the contribution graph for artistic, personal, or branding purposes.
 
 ![preview](/public/banner.png "preview")

public/index.html

@@ -50,6 +50,20 @@ <h2>GitHub Contribution Graph Customizer</h2>
     users can customize their contribution graph to display their name,
     messages, symbols, logos, or any other desired patterns.
   </p>
+
+  <div id="instructions-gitart">
+    <h3>Instructions</h3>
+    <ul> 
+      <li>Select a year (choosing a year before <span id="github-join-date">joining GitHub</span> is better).</li>
+      <li>Click on the squares to toggle them.</li>
+      <li>Click on the "Generate" button to get the code.</li>
+      <li>Create a <a href="https://github.com/new">new</a> GitHub repository.</li>
+      <li>Clone the repository into your local machine.</li>
+      <li>Ensure your git username and email are <a href="https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/managing-contribution-settings-on-your-profile/why-are-my-contributions-not-showing-up-on-my-profile#your-local-git-commit-email-isnt-connected-to-your-account">configured correctly</a>.</li>
+      <li>Copy the generated code into your terminal.</li>
+      <li>Push the changes to the remote repository.</li>
+    </ul>
+    </div>
   <div class="graph-container">
     <div class="graph">
       <select size="3" id="year-select"></select>

public/index.js

@@ -107,7 +107,7 @@ document.addEventListener("DOMContentLoaded", function () {
 function generateCode() {
   const dateList = dateforgitlist;
   if (dateList.length === 0) {
-    alert("Don't try to play a fool with me Nikesh!");
+    alert("empty");
     return;
   }
   const codeContainer = document.querySelector(".code");

public/style.css

@@ -46,6 +46,17 @@ h2 {
   margin-right: auto;
 }
 
+#instructions-gitart {
+  font-size: 0.9rem;
+  max-width: 500px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#instructions-gitart a {
+  color: #39d353;
+}
+
 .months {
   grid-area: months;
 }
@@ -114,7 +125,7 @@ h2 {
   grid-auto-columns: var(--square-size);
 }
 
-li {
+.graph-container li {
   list-style-type: none;
 }