WebDev-Final-Hackathon/script.js at main · Harshinireddy05/WebDev-Final-Hackathon · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
  const wrapper = document.querySelector(".wrapper"),
  editableInput = wrapper.querySelector(".editable"),
  readonlyInput = wrapper.querySelector(".readonly"),
  placeholder = wrapper.querySelector(".placeholder"),
  counter = wrapper.querySelector(".counter"),
  button = wrapper.querySelector("button");
  let textArea = document.querySelector('.placeholder');

  editableInput.onfocus = ()=>{
    placeholder.style.color = "#c5ccd3";
  }
  editableInput.onblur = ()=>{
    placeholder.style.color = "#98a5b1";
  }

  editableInput.onkeyup = (e)=>{
    let element = e.target;
    validated(element);
  }
  editableInput.onkeypress = (e)=>{
    let element = e.target;
    validated(element);
    placeholder.style.display = "none";
  }

  function validated(element){
    let text;
    let maxLength = 100;
    let currentlength = element.innerText.length;

    if(currentlength <= 0){
      placeholder.style.display = "block";
      counter.style.display = "none";
      button.classList.remove("active");
    }else{
      placeholder.style.display = "none";
      counter.style.display = "block";
      button.classList.add("active");
    }

    counter.innerText = maxLength - currentlength;

    if(currentlength > maxLength){
      let overText = element.innerText.substr(maxLength);
      overText = `<span class="highlight">${overText}</span>`;
      text = element.innerText.substr(0, maxLength) + overText;
      readonlyInput.style.zIndex = "1";
      counter.style.color = "#e0245e";
      button.classList.remove("active");
    }else{
      readonlyInput.style.zIndex = "-1";
      counter.style.color = "#333";
    }
    readonlyInput.innerHTML = text;
  }


  function createTask(){
    var x = document.getElementById("inprogress");
    var y = document.getElementById("done");
    var z = document.getElementById("create-new-task-block");
    if (x.style.display === "none") {
        x.style.display = "block";
        y.style.display = "block";
        z.style.display = "none";
    } else {
        x.style.display = "none";
        y.style.display = "none";
        z.style.display = "flex";
    }
}


var uid = new ShortUniqueId();
textArea.addEventListener('keydown',function(e){
    let key = e.key;
    if(key === "Enter"){
        if(textArea.value == ""){
            textArea.value = "";
            alert("Please Enter some task!");
            return;
        }
        generateTicket(textArea.value,taskColor);
        textArea.value = "";
        modal.style.display = 'none'
        addModal = true
    }
})

function generateTicket(task,priority,ticketId){
    let id;
    if(ticketId){
        id = ticketId
    }else{
        id = uid.rnd();
    }

    let ticketCont = document.createElement("div");
    ticketCont.className = "ticket-cont";
    ticketCont.innerHTML = `<div class="ticket-color ${priority}"></div>
                            <div class="ticket-id">#${id}</div>
                            <div class="ticket-area">${task}</div>
                            <div class="lock-unlock"><i class="fa-solid fa-lock"></i></div>`
    console.log(ticketCont)
    mainCont.appendChild(ticketCont);
    if(!ticketId){
        ticketArr.push({id:id,task:task,color:taskColor});
        let stringifiedArr = JSON.stringify(ticketArr);
        localStorage.setItem('tasks',stringifiedArr);
        console.log(ticketArr);
    }

}