Add table of contents

README.md

@@ -1,69 +1,134 @@
 <img src="https://puu.sh/Hrjcd/89376e720d.png" width=500 />
 
 #
+
 A series of **ReactJS coding challenges** with a variety of difficulties. Deep dive into the why [here](https://dev.to/alexgurr/react-coding-challenges-for-interviews-beginners-1hlk).
 
 &nbsp;
-## The Challenges
-### Easy 🙂
+
+<!-- TABLE OF CONTENTS -->
+<h2 id="table-of-contents"> Table of Contents :book:</h2>
+
+<ul>
+ <li>
+ <a href="#The-challenges"> The Challenges</a>
+ <ul>
+ <li><a href="#Easy">Easy</a></li>
+ <li><a href="#Medium">Medium</a></li>
+ <li><a href="#Hard">Hard</a></li>
+ </ul>
+ </li>
+ <li><a href="#What-are-the-challenges-for?"> What are the challenges for?</a></li>
+ <li><a href="#How-do-they-work/how-do-I-get-started?"> How do they work / how do I get started?</a></li>
+ <li><a href="#Have-you-got-the-solutions?"> Have you got the solutions?</a></li>
+ <li><a href="#Why-does-it-take-so-long-for-updates/new-challenges?"> Why does it take so long for updates / new challenges?</a </li>
+ <li><a href="#Community"> Community</a></li>
+ <li><a href="#Thoughts-or-feedback"> Thoughts or feedback</a></li>
+ <li><a href="#Contributing"> Contributing</a></li>
+</ul>
+
+&nbsp;
+
+<!-- THE CHALLENGES -->
+<h2 id="The-challenges"> The Challenges</h2>
+
+<!-- EASY -->
+<h3 id="Easy"> Easy 🙂</h3>
+
 ##### 🚀 [Rocket Ship](https://github.com/alexgurr/react-coding-challenges/tree/master/rocket-ship)
+
 Unecessary re-renders, fine grained control.
 
 &nbsp;
-### Medium 😐
+
+<!-- MEDIUM -->
+<h3 id="Medium"> Medium 😐</h3>
+
 ##### 🌙 [Dark Mode](https://github.com/alexgurr/react-coding-challenges/tree/master/dark-mode)
+
 State / shared state, DOM manipulation.
 
 ##### <img width="100px" src="https://puu.sh/HoZq9/88ebf554b5.jpg" /> ![soon](https://badgen.net/badge/status/coming%20soon/green?icon=)
+
 Data visualisation and graphing. API usage.
 
 &nbsp;
-### Hard 😬
+
+<!-- HARD -->
+<h3 id="Hard"> Hard 😬</h3>
+
 ##### 🎧 [Spootify](https://github.com/alexgurr/react-coding-challenges/tree/master/spootify)
+
 Loading state, API usage.
 
 ##### 🤖 [Chatter](https://github.com/alexgurr/react-coding-challenges/tree/master/chatter)
+
 Web sockets, events, callbacks & React hooks. Talks to [Botty](https://github.com/alexgurr/botty).
 
 ##### 🛒 Shoppit ![later](https://badgen.net/badge/status/coming%20later/yellow?icon=)
 
 &nbsp;
-## What are the challenges for?
+
+<!-- WHAT ARE THE CHALLENGES FOR? -->
+<h2 id="What-are-the-challenges-for?"> What are the challenges for?</h2>
+
 They could be:
+
 - Short coding exercises, for use in interviews with candidates
 - Ways for you to test yourself / test your coding abilities under pressure
-- Fun exercises to help you learn React 
+- Fun exercises to help you learn React
 
 &nbsp;
-## How do they work / how do I get started?
-The scaffolding of each challenges / app is done for you and each challenge has *create-react-app* as its foundation.
+
+<!-- HOW DO THEY WORK / HOW DO I GET STARTED? -->
+<h2 id="How-do-they-work/how-do-I-get-started?"> How do they work / how do I get started?</h2>
+
+The scaffolding of each challenges / app is done for you and each challenge has _create-react-app_ as its foundation.
 
 - Clone the whole challenges repository
 - Run `yarn` or `npm install` in any of the individual challenge directories to install dependencies
 - Run `yarn start` or `npm start` to start the application on port 3000 (CRA default)
 - Each challenge has a README with requirements for you to complete
 
-*Some challenges might require usage of external APIs, but all information will be provided in the individual challenge readme.*
+_Some challenges might require usage of external APIs, but all information will be provided in the individual challenge readme._
 
 &nbsp;
-## Have you got the solutions?
+
+<!-- HAVE YOU GOT THE SOLUTIONS? -->
+<h2 id="Have-you-got-the-solutions?"> Have you got the solutions?</h2>
+
 All the coding challenges have been completed to a high standard. Get an automatic invite to the solutions repository at [solutions.alexgurr.com](https://www.solutions.alexgurr.com).
 
 #### Why are the solutions invite only?
-People use these challenges for interviews. By putting the solutions behind a collaboration wall / invite-only repository we can discourage candidates from simply looking up the solutions. We track current / past collaborators, meaning if you want to check if a potential candidate had access / looked at the solutions you can get in touch and find out. 
+
+People use these challenges for interviews. By putting the solutions behind a collaboration wall / invite-only repository we can discourage candidates from simply looking up the solutions. We track current / past collaborators, meaning if you want to check if a potential candidate had access / looked at the solutions you can get in touch and find out.
 
 &nbsp;
-## Why does it take so long for updates / new challenges?
+
+<!-- WHY DOES IT TAKE SO LONG FOR UPDATES / NEW CHALLENGES? -->
+<h2 id="Why-does-it-take-so-long-for-updates/new-challenges?"> Why does it take so long for updates / new challenges?</h2>
+
 I work on these challenges & solutions in my spare time, on top of a full time job and everything else that comes in life. Because of this, I don't always get a lot of time to maintain and add new challenges. Interested in becoming a collaborator or submitting your own challenge? **Reach out below or submit a new challenge!**
 
 &nbsp;
+
+<!-- COMMUNITY -->
+<span id=Community>
+
 ## Community ![slack-icon](https://puu.sh/Hse6N/da4145b9e1.png)
+
 We're on Slack - come and [join us](https://join.slack.com/t/reactcodingch-ywm3888/shared_invite/zt-o5ns0i1x-nUW_obRlBOAh2muJITqX~g)!
 
 &nbsp;
-## Thoughts or feedback 💬
+
+<!-- THOUGHTS OR FEEDBACK -->
+<h2 id="Thoughts-or-feedback"> Thoughts or feedback 💬</h2>
+
 Conflicting opinion about a challenge difficulty rating? Need some help or guidance? Got a challenge idea? Get in touch at [alexgurr.com](https://www.alexgurr.com).
 
 &nbsp;
-## Contributing 💡
+
+<!-- CONTRIBUTING -->
+<h2 id="Contributing"> Contributing 💡</h2>
+
 We have an [issue template](https://github.com/alexgurr/react-coding-challenges/blob/master/issue_template.md), [pull request template](https://github.com/alexgurr/react-coding-challenges/blob/master/pull_request_template.md) and a [new challenge template](https://github.com/alexgurr/react-coding-challenges/blob/master/new_challenge_template.md). We encourage you to fill out the right template and open a PR / issue!