Learn-with-Sumit · ashraful51 · Apr 19, 2022 · Apr 20, 2022 · Aug 12, 2022
diff --git a/README.md b/README.md
@@ -1,63 +1,77 @@
 [![Youtube][youtube-shield]][youtube-url]
-[![Facebook][facebook-shield]][facebook-url]
-[![Instagram][instagram-shield]][instagram-url]
-[![LinkedIn][linkedin-shield]][linkedin-url]
+[![Facebook][facebook-shield]][facebook-group-url]
 
 <!-- PROJECT LOGO -->
 <br />
-<p align="center">
-    <img src="images/lws-logo.png" alt="Logo" width="80" height="80" />
-    <h3 align="center"><a href="https://github.com/learnwithsumit/think-in-a-redux-way">Think in a Redux way</a></h3>
+ <p align="center">
+    <img src="https://avatars.githubusercontent.com/u/73503432?v=4" alt="Logo" width="80" height="80" />
+    <h3 align="center "><a href="https://learnwithsumit.com/courses/think-in-a-redux-way/what-is-state-management" target="_blank" >THINK IN A REDUX WAY - MODULE 1 - LESSON 1</a></h3>
 </p>
 
 <!-- TABLE OF CONTENTS -->
 
-## Table of Contents
+## ![tableOfContent][tableofcontent-shield] Table of Contents
 
--   [How to run](#how-to-run)
--   [Contact](#contact)
+| HTML TEMPLATE                            | CODE RUN                   | CONTACT                    |
+| ---------------------------------------- | -------------------------- | -------------------------- |
+| [Get HTML template](#-get-html-template) | [How to run](#-how-to-run) | [Contact us](#-contact-us) |
 
-<!-- HOW TO RUN -->
+<br>
 
-## How to run
+<!-- GET HTML TEMPLATE -->
 
-Different lessons taught in this [Redux Bangla Course by Learn with Sumit](https://learnwithsumit.com/think-in-a-redux-way), are organized in separate branches with naming convention - [**module number**].[**lesson number**]. For example, **Module-1 Lesson-1** source code is shared in **1.1** branch. Just switch to a branch and follow the corresponding branch's README file instruction.
+## ![htmlIcon][htmlicon-shield] Get HTML Template
 
-Please follow the below instructions to run different branches of this respository in your machine:
+You can find the raw HTML template of the counter application from the "html_template" folder.
 
-1. Login to the GitHub account on which you have been granted access to this repository. If you have purchased the course but didn't get the access to this repository, please contact our support team. You will find contact details below.
-
-2. Clone this repository -
-    ```sh
-    git clone https://github.com/learnwithsumit/think-in-a-redux-way
-    ```
-3. Checkout/switch to your desired branch. For example to switch to branch 2.1 -
+<!-- HOW TO RUN -->
 
-```sh
-git checkout 2.1
-```
+## ![rocketIcon][rocketicon-shield] How to run
 
-4. Follow the corresponding branch's README file instruction to run code.
+Please follow the below instructions to run this branch in your machine:
 
-<!-- CONTACT -->
+1. Login to the GitHub account on which you have been granted access to this repository. If you have purchased the course but didn't get the access to this repository, please contact our support team. You will find contact details below.
 
-## Contact
+2. Clone this repository -
+   ```sh
+   git clone https://github.com/Learn-with-Sumit/think-in-a-redux-way.git
+   ```
+3. Go to the cloned project directory
+   ```sh
+   cd think-in-a-redux-way
+   ```
+4. Checkout/switch to branch 1.1
+   ```sh
+   git checkout 1.1
+   ```
+5. Just run the index.html file with Visual Studio Code [Live Server plugin](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).
 
-Support - [[email protected]](mailto:[email protected])
+<br>
 
-Repository Link: [https://github.com/learnwithsumit/think-in-a-redux-way](https://github.com/learnwithsumit/think-in-a-redux-way)
+<!-- CONTACT  -->
 
-Course Details: [https://learnwithsumit.com/think-in-a-redux-way](https://learnwithsumit.com/think-in-a-redux-way)
+## ![contactIcon][contacticon-shield] Contact us
 
-Youtube Channel: [https://youtube.com/LearnwithSumit](https://youtube.com/LearnwithSumit)
+[![Facebook][facebook-shield]][facebook-url]
+[![LinkedIn][linkedin-shield]][linkedin-url]
+[![Instagram][instagram-shield]][instagram-url]
+[![mail][mail-shield]][mail-url]
 
 <!-- MARKDOWN LINKS & IMAGES -->
 
 [youtube-shield]: https://img.shields.io/badge/-Youtube-black.svg?style=flat-square&logo=youtube&color=555&logoColor=white
 [youtube-url]: https://youtube.com/LearnwithSumit
 [facebook-shield]: https://img.shields.io/badge/-Facebook-black.svg?style=flat-square&logo=facebook&color=555&logoColor=white
-[facebook-url]: https://facebook.com/groups/learnwithsumit
+[facebook-url]: https://facebook.com/letslearnwithsumit
+[facebook-group-url]: https://facebook.com/groups/learnwithsumit
 [instagram-shield]: https://img.shields.io/badge/-Instagram-black.svg?style=flat-square&logo=instagram&color=555&logoColor=white
 [instagram-url]: https://instagram.com/learnwithsumit
 [linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=flat-square&logo=linkedin&colorB=555
 [linkedin-url]: https://linkedin.com/company/learnwithsumit
+[thumbnail-shield]: https://i.ibb.co/d6hxnvd/Screenshot-50.png
+[mail-shield]: https://img.shields.io/badge/%F0%9F%93%A7%20Email-support%40learnwithsumit.com-lightgray
+[mail-url]: mailto:[email protected]
+[tableofcontent-shield]: https://img.icons8.com/external-flatart-icons-flat-flatarticons/28/undefined/external-direction-business-and-teamwork-flatart-icons-flat-flatarticons.png
+[htmlicon-shield]: https://img.icons8.com/external-flaticons-flat-flat-icons/28/undefined/external-html-computer-programming-flaticons-flat-flat-icons.png
+[rocketicon-shield]: https://img.icons8.com/arcade/30/undefined/experimental-rocket-arcade.png
+[contacticon-shield]: https://img.icons8.com/external-flaticons-lineal-color-flat-icons/28/undefined/external-support-communication-media-flaticons-lineal-color-flat-icons.png
diff --git a/html_template/index.html b/html_template/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Simple Counter Application</title>
+        <script src="https://cdn.tailwindcss.com"></script>
+    </head>
+    <body>
+        <div class="w-screen h-screen p-10 bg-gray-100 text-slate-700">
+            <!-- header -->
+            <h1 class="max-w-md mx-auto text-center text-2xl font-bold">
+                Simple Counter Application
+            </h1>
+
+            <!-- counters -->
+            <div class="max-w-md mx-auto mt-10 space-y-5">
+                <div
+                    class="p-4 h-auto flex flex-col items-center justify-center space-y-5 bg-white rounded shadow"
+                >
+                    <div class="text-2xl font-semibold">0</div>
+                    <div class="flex space-x-3">
+                        <button
+                            class="bg-indigo-400 text-white px-3 py-2 rounded shadow"
+                        >
+                            Increment
+                        </button>
+                        <button
+                            class="bg-red-400 text-white px-3 py-2 rounded shadow"
+                        >
+                            Decrement
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <script src="./script.js"></script>
+    </body>
+</html>
diff --git a/html_template/script.js b/html_template/script.js
diff --git a/index.html b/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Simple Counter Application</title>
+        <script src="https://cdn.tailwindcss.com"></script>
+    </head>
+    <body>
+        <div class="w-screen h-screen p-10 bg-gray-100 text-slate-700">
+            <!-- header -->
+            <h1 class="max-w-md mx-auto text-center text-2xl font-bold">
+                Simple Counter Application
+            </h1>
+
+            <!-- counters -->
+            <div class="max-w-md mx-auto mt-10 space-y-5">
+                <div
+                    class="p-4 h-auto flex flex-col items-center justify-center space-y-5 bg-white rounded shadow"
+                >
+                    <div class="text-2xl font-semibold" id="counter">0</div>
+                    <div class="flex space-x-3">
+                        <button
+                            class="bg-indigo-400 text-white px-3 py-2 rounded shadow"
+                            id="increment"
+                        >
+                            Increment
+                        </button>
+                        <button
+                            class="bg-red-400 text-white px-3 py-2 rounded shadow"
+                            id="decrement"
+                        >
+                            Decrement
+                        </button>
+                    </div>
+                </div>
+
+                <div
+                    class="p-4 h-auto flex flex-col items-center justify-center space-y-5 bg-white rounded shadow"
+                >
+                    <div class="text-2xl font-semibold" id="counter2">0</div>
+                    <div class="flex space-x-3">
+                        <button
+                            class="bg-indigo-400 text-white px-3 py-2 rounded shadow"
+                            id="increment2"
+                        >
+                            Increment
+                        </button>
+                        <button
+                            class="bg-red-400 text-white px-3 py-2 rounded shadow"
+                            id="decrement2"
+                        >
+                            Decrement
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <script src="./script.js"></script>
+    </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,33 @@
+// select dom elements
+const counterEl = document.getElementById("counter");
+const incrementEl = document.getElementById("increment");
+const decrementEl = document.getElementById("decrement");
+
+const counter2El = document.getElementById("counter2");
+const increment2El = document.getElementById("increment2");
+const decrement2El = document.getElementById("decrement2");
+
+// initial state
+let count = 0;
+let count2 = 0;
+
+// event listeners
+incrementEl.addEventListener("click", () => {
+    count++;
+    counterEl.innerText = count;
+});
+
+decrementEl.addEventListener("click", () => {
+    count--;
+    counterEl.innerText = count;
+});
+
+increment2El.addEventListener("click", () => {
+    count2++;
+    counter2El.innerText = count2;
+});
+
+decrement2El.addEventListener("click", () => {
+    count2--;
+    counter2El.innerText = count2;
+});