1.6

README.md

@@ -1,63 +1,76 @@
 [![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/rewrite-the-counter-application" target="_blank" >THINK IN A REDUX WAY - MODULE 1 - LESSON 6</a></h3>
 </p>
 
 <!-- TABLE OF CONTENTS -->
 
-## Table of Contents
-
--   [How to run](#how-to-run)
--   [Contact](#contact)
-
-<!-- HOW TO RUN -->
-
-## How to run
-
-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.
+## ![tableOfContent][tableofcontent-shield] Table of Contents
 
-Please follow the below instructions to run different branches of this respository in your machine:
+| HTML TEMPLATE                            | CODE RUN                   | CONTACT                    |
+| ---------------------------------------- | -------------------------- | -------------------------- |
+| [Get HTML template](#-get-html-template) | [How to run](#-how-to-run) | [Contact us](#-contact-us) |
 
-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.
+<br>
 
-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 -
+<!-- GET HTML TEMPLATE -->
 
-```sh
-git checkout 2.1
-```
+## ![htmlIcon][htmlicon-shield] Get HTML Template
 
-4. Follow the corresponding branch's README file instruction to run code.
+You can find the raw HTML template of the counter application from the "html_template" folder.
 
-<!-- CONTACT -->
+<!-- HOW TO RUN -->
 
-## Contact
+## ![rocketIcon][rocketicon-shield] How to run
 
-Support - [[email protected]](mailto:[email protected])
+Please follow the below instructions to run this branch in your machine:
 
-Repository Link: [https://github.com/learnwithsumit/think-in-a-redux-way](https://github.com/learnwithsumit/think-in-a-redux-way)
+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.
 
-Course Details: [https://learnwithsumit.com/think-in-a-redux-way](https://learnwithsumit.com/think-in-a-redux-way)
+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.6
+   ```sh
+   git checkout 1.6
+   ```
+5. Just run the index.html file with Visual Studio Code [Live Server plugin](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).
+   <br>
+
+<!-- CONTACT  -->
+
+## ![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

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>

index.html

@@ -0,0 +1,48 @@
+<!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>
+    <!-- import redux from cdn -->
+    <script src="https://unpkg.com/redux@latest/dist/redux.min.js"></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 Web Application
+      </h1>
+
+      <!-- counters -->
+      <div class="mx-auto max-w-md 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 id="counter" class="text-2xl font-semibold"></div>
+          <div class="flex space-x-3">
+            <button
+              id="increment"
+              class="bg-indigo-400 text-white px-3 py-2 rounded shadow"
+              id="increment"
+            >
+              Increment
+            </button>
+            <button
+              id="decrement"
+              class="bg-red-400 text-white px-3 py-2 rounded shadow"
+              id="decrement"
+            >
+              Decrement
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="./script.js"></script>
+    <footer>thanks for visiting this address</footer>
+  </body>
+</html>

script.js

@@ -0,0 +1,54 @@
+//_____________________select dom elements
+const counterEl = document.querySelector('#counter')
+const incrementEl = document.getElementById('increment')
+const decrementEl = document.getElementById('decrement')
+
+
+//_______________initial state  => Frist Step
+const initialState = {
+    value : 0,
+}
+
+//_______________create reducer function => Second step
+function counterReducer(state = initialState, action) {
+    if(action.type === 'increment') {
+        return {
+            ...state,
+            value: state.value + 1,
+        }
+    } else if  (action.type === 'decrement'){
+        return {
+            ...state,
+            value: state.value - 1,
+        }
+
+    }else {
+        return state
+    }
+}
+
+//_______________create Store  => Third step
+
+const store = Redux.createStore(counterReducer)
+//------> for vanilla js -> store subscrition ->
+const render = () => {
+    const state = store.getState()
+    counterEl.innerText = state.value.toString()
+}
+//update ui first to show a default value o->
+render()
+
+store.subscribe(render)
+
+
+//________________action dispatch (event listener handling) -> Fourth Step
+incrementEl.addEventListener('click', () => {
+    store.dispatch({
+        type: 'increment',
+    })
+})
+decrementEl.addEventListener('click', () => {
+    store.dispatch({
+        type: 'decrement',
+    })
+})