From 69b70039bdb0d97768478f285f9c6d5ca6a6c4db Mon Sep 17 00:00:00 2001
From: thomas <thomas.ext@squadracer.com>
Date: Tue, 2 May 2023 13:11:02 +0200
Subject: [PATCH] feat(anchorScrolling): add readme file

---
 README.md                       |  3 ++-
 apps/anchor-scrolling/README.md | 30 ++++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 apps/anchor-scrolling/README.md

diff --git a/README.md b/README.md
index 120318b..2f73e00 100644
--- a/README.md
+++ b/README.md
@@ -34,6 +34,7 @@ This goal of this project is to help you get better at Angular and NgRx by resol
 <a href="./apps/scroll-cd/README.md"><img src="https://img.shields.io/badge/12-change detection -- scroll-orange" alt="change detection with scroll event"/></a>
 <a href="./apps/styling/README.md"><img src="https://img.shields.io/badge/13-styling-orange" alt="styling"/></a>
 <a href="./apps/di/README.md"><img src="https://img.shields.io/badge/16-di-red" alt="di"/></a>
+<a href="./apps/anchor-scrolling/README.md"><img src="https://img.shields.io/badge/21-anchor-scrolling-green" alt="anchor-scrolling"/></a>
 
 </br>
 <img src="https://img.shields.io/badge/Typescript--gray?logo=typescript" alt="Typescript"/>
@@ -70,7 +71,7 @@ This goal of this project is to help you get better at Angular and NgRx by resol
 <table>
   <tbody>
     <tr>
-      <td align="center" valign="top" width="14.28%"><a href="https://medium.com/@thomas.laforge"><img src="https://avatars.githubusercontent.com/u/30832608?s…00&u=6f0ad9676792f29fd7fe6e113df06213d384a813&v=4" width="100px;" alt="Thomas Laforge"/><br /><sub><b>Thomas Laforge</b></sub></a><br />20 🧩</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://medium.com/@thomas.laforge"><img src="https://avatars.githubusercontent.com/u/30832608?s…00&u=6f0ad9676792f29fd7fe6e113df06213d384a813&v=4" width="100px;" alt="Thomas Laforge"/><br /><sub><b>Thomas Laforge</b></sub></a><br />21 🧩</a></td>
     </tr>
   </tbody>
 </table>
diff --git a/apps/anchor-scrolling/README.md b/apps/anchor-scrolling/README.md
new file mode 100644
index 0000000..dad19bb
--- /dev/null
+++ b/apps/anchor-scrolling/README.md
@@ -0,0 +1,30 @@
+<h1>Anchor Scrolling</h1>
+
+> Author: Thomas Laforge
+
+### Information
+
+You begin with an application that has basic navigation and anchor navigation in the `HomeComponent`. However, using `href` recreates the path each time and refreshes the page.
+
+### Statement
+
+- Your task is to refactor this application to use the built-in navigation tool to better fit within the Angular Framework. You can explore the router, but it's better to stay within the template and use the `RouterLink` directive.
+- To improve the user experience, add smooth scrolling.
+
+### Submitting your work
+
+1. Fork the project
+2. clone it
+3. npm install
+4. `npx nx serve anchor-scrolling`
+5. _...work on it_
+6. Commit your work
+7. Submit a PR with a title beginning with **Answer:21** that I will review and other dev can review.
+
+<a href="https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A21+label%3Aanswer"><img src="https://img.shields.io/badge/-Solutions-green" alt="anchor scrolling"/></a>
+<a href='https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A21+label%3A"answer+author"'><img src="https://img.shields.io/badge/-Author solution-important" alt="anchor scrolling"/></a>
+
+<!-- <a href="{Blog post url}" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/-Blog post explanation-blue" alt="DI blog article"/></a> -->
+
+/
+_You can ask any question on_ <a href="https://twitter.com/laforge_toma" target="_blank" rel="noopener noreferrer"><img src="./../../logo/twitter.svg" height=20px alt="twitter"/></a>