Notes/Lecture_Notes
1
0
Fork 0
mirror of https://github.com/dholerobin/Lecture_Notes.git synced 2025-07-02 05:26:28 +00:00
Code Issues Packages Projects Releases Wiki Activity
Lecture_Notes/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/4_Kanban Board - 1(Design and Structure of the App).md
mrinal1224 98aa698dd9 push
2024-05-07 12:57:28 +05:30

14 KiB
Raw Blame History

Agenda

Topics to cover in Javascript:

Certainly, here are the headings for the provided topics:

  1. Kanban Board
  2. Create and Update Task
  3. Lock and Unlock Tasks
  4. Colors
  5. Pop-up Dialog Box
  6. Delete
  7. Local Storage

We will try to cover most of these topics in today's sessions and the remaining in the next.

So let's start.

Demo of the project:

Initially showing the demonstartion of the adding task, setting the colors, unlock/lock feature, filtering based on the colors and delete feature.

Discussing about the local storage and the crud operation and also try to cover the drag-drop functionalities, accessibility.

On the highest level, mainly there are two components, to mark those will be using the two divs namely toolbox-container and maincontainer.

Inside the toolbox container first there are different tags for colors which we ca have and after that these two boxes of + and X. Apart fro that we can those ticket also.

WireFrame of the Kanban Board

In toolbox container there are two container namely toolbox-priority-cont and action-btn-cont.

  • Inside the toolbox-priority-cont we are having the four divs of colors(pink, blue, purple and green).
  • In the toolbox-priority-cont having the two divs of add-btn and remove-btn. Alaso adding the font from the cdn font library.

Opening the live server and just seeing the effects of the added code till now and nothing is visible till now since no css has been added.

<!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>KanbanBoard</title>
    <link rel = "stylesheet" href = "./style.css">
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw == " crossorigin = "anonymous" referrerpolicy = "no-referrer" />
</head>
<body>
    <div class = "toolbox-cont">
        <div class = "toolbox-priority-cont">
            <div class = "color red"></div>
            <div class = "color blue"></div>
            <div class = "color green"></div>
            <div class = "color black"></div>
        </div>
        <div class = "action-btn-cont">
            <div class = "add-btn">
                <i class = "fa-solid fa-plus fa-xl"></i>
            </div>
            <div class = "remove-btn">
                <i class = "fa-solid fa-trash fa-lg"></i>
            </div>
        </div>
    </div>

    <div class = "main-cont">
        <!-- <div class = "ticket-cont">
             <div class = "ticket-color red"></div>
             <div class = "ticket-id">#qu45</div>
             <div class = "task-area" contenteditable = "true">Some Task</div>
             <div class = "lock-unlock"><i class = "fa-solid fa-lock"></i></div>
        </div> -->
    </div>


    <div class = "modal-cont">
        <textarea class = "textarea-cont" placeholder = "Enter Your Task"></textarea>
        <div class = "priority-color-cont">
            <div class = "priority-color red"></div>
            <div class = "priority-color blue"></div>
            <div class = "priority-color green"></div>
            <div class = "priority-color black active"></div>
        </div>
    </div>

    <script src = "https://cdn.jsdelivr.net/npm/short-unique-id@latest/dist/short-unique-id.min.js"></script>
    <script src = "./script.js"></script>
</body>
</html>

Nothing is visible as no css has been added.

Let's start creating the css file namely style.css, and adding the code for the colors first by creating the css variables for the colors like pink, green, purple etc.

/* create css variables  */
:root{
    --ligthBackground: #F9F5EB;
    --background:#E4DCCF;
    --red:#EA5455;
    --blue:#002B5B;
    --green:#245953;
}

*{
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 0;
    background-color: var(--background);
}

Now adding the css for the toolbox container starting with height, background-color and then adding the toolbox-priority-container by providing it with height, background-color. Same for the action-btn also same color and height.

/* styling starts from here */


/* ************toolbox_cont **********/
.toolbox-cont{
    height: 5rem;
    background-color: var(--blue);
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100vw;
}

Now adding the display: flex in the parent conatiner namely in the toolbox-container in the css code. Add margin-left in the toolbox-priority-cont and margin-left in the action-btn-cont. Also change the background-color of the action-btn-cont to the light.

Now add the color blocks in the toolbox-priority-cont. Providing the height and width to the color block. Also add the display:space-evenly and align-items:center to the parent class.

.toolbox-priority-cont{
    height: 3rem;
    width: 18rem;
    background-color:var(--ligthBackground);
    margin-left: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.action-btn-cont{
    height: 3rem;
    width: 10rem;
    background-color:var(--ligthBackground);
    margin-left: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-around;   
}

.color{
    height: 1.5rem;
    width: 3rem;
}
.red{
    background-color: var(--red);
}

.blue{
    background-color: var(--blue);
}

.green{
    background-color: var(--green);
}

.black{
    background-color: black;
}

Provide the font size to the both add-btn and remove-btn and also add the display:flex, align-item:center and justify-content:space-evenly in the action-btn-cont.

.add-btn,.remove-btn{
    font-size: 1.25rem
}
.action-btn-cont{
    height: 3rem;
    width: 10rem;
    background-color:var(--ligthBackground);
    margin-left: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-around;   
}

Now let's add the hover effect to the button of add-btn and remove-btn as follows:

.add-btn:hover{
background-color: #4BB543;
}
.remove-btn:hover{
background-color: #4BB543;
}

Asking Question?

Can you add the hover effect to these color boxes in the nav bar? Ans: You can try by themself.

Now lets start creating the modal with its html and css structure as follows:

    <div class = "modal-cont">
        <textarea class = "textarea-cont" placeholder = "Enter Your Task"></textarea>
        <div class = "priority-color-cont">
            <div class = "priority-color red"></div>
            <div class = "priority-color blue"></div>
            <div class = "priority-color green"></div>
            <div class = "priority-color black active"></div>
        </div>
    </div>



 .modal-cont{
   height: 50vh;
   width: 45vw;
   display: flex;
   background-color: lightsalmon;
   position: absolute;
   top:30%;
   left: 27%;
   display: none;


}
 .textArea-cont{
     height: 100%;
     width: 75%;
     resize: none;
     outline: none;
     border: none;
     background-color: #dfe4ea;
     font-size: 2rem;
     color: black;
 }
 .priority-colors-container{
     height: 100%;
     width: 25%;
     display: flex;
     flex-direction: column;
     background-color: #4b4b4b;
     align-items: center;
     justify-content: space-around;

 }
 .priority-color{
     height: 3rem;
     width: 5rem;
 }

 .active{
     border: 5px solid lightsalmon;
 }

This CSS code defines styles for a modal container and its components:

  1. .modal-cont:

    • Defines the modal's dimensions and appearance.
    • Positioned absolutely with a specific top and left offset.
    • Initially hidden with display: none.

  2. .textArea-cont:

    • Represents a text area within the modal.
    • Takes 75% of the modal's width.
    • Has specific styling for background color, font size, and no borders.

  3. .priority-colors-container:

    • A container for priority color elements.
    • Takes 25% of the modal's width.
    • Aligns items vertically and adds a background color.

  4. .priority-color:

    • Represents priority color elements.
    • Fixed dimensions for each element.

  5. .active:

    • Adds a border to elements with this class, using a lightsalmon color.

Overall, these styles are likely used for a modal interface, with a text area and priority color options.

Now we will be working for the buttons of + and X by giving the event listener to them. Here is a basic structure of the event Litener for them as follows:

Eventlistener.(click):
let flag=false
flag=true
if(flag=true){
modal visible
}

let addBtn = document.querySelector('.add-btn')
let modalCont = document.querySelector('.modal-cont')
let addTaskFlag = false

addBtn.addEventListener('click' , function(){
    // Display the model
    addTaskFlag = !addTaskFlag
    
    if(addTaskFlag == true){
        modalCont.style.display = 'flex'
    }
    else{
        modalCont.style.display = 'none'
    }

})

This JavaScript code adds functionality to a button:

  1. addBtn and modalCont variables are defined to select HTML elements with specific classes.

  2. An event listener is added to addBtn for a click event.

  3. When the button is clicked, a flag (addTaskFlag) toggles between true and false.

  4. If addTaskFlag is true, the modal container (modalCont) is displayed by changing its display style property to 'flex'.

  5. If addTaskFlag is false, the modal container is hidden by setting its display property to 'none'.

This code toggles the visibility of the modal when the button is clicked.

Now lets create the structure of the task ticket as follows:

<!-- Task Ticket -->

<div class = "main-cont">
     <!-- <div class = "ticket-cont">
         <div class = "ticket-color"></div>
         <div class = "ticket-id">12345</div>
         <div class = "task-area" contenteditable = "false">Random Task</div>
          <div class = "ticket-lock">
            <i class = "fa-solid fa-lock"></i>
          </div>
</div> -->

Now also give the styling to the task ticket:

 .modal-cont{
   height: 50vh;
   width: 45vw;
   display: flex;
   background-color: lightsalmon;
   position: absolute;
   top:30%;
   left: 27%;
   display: none;
}
.ticket-cont{
    height: 12rem;
    width: 15rem;
    background-color: coral;
}
.ticket-color{
    height: 1rem;
}

.ticket-id{
    background-color: yellow;
    height: 2rem;
}

This CSS code defines styles for a modal container and its associated ticket elements:

  1. .modal-cont:

    • Defines the modal's dimensions and appearance.
    • Positioned absolutely with specific top and left offsets.
    • Initially hidden with display: none.
    • Has a flex display and a light salmon background color.

  2. .ticket-cont:

    • Represents a ticket container.
    • Fixed height and width for each ticket.
    • Coral background color.

  3. .ticket-color:

    • Represents a color strip on the ticket.
    • Fixed height and width, typically used for visual categorization.

  4. .ticket-id:

    • Represents the ID section of the ticket.
    • Has a yellow background color and a specific height.

These styles appear to be used for creating a modal with tickets, each with a color strip and an ID section.