MyNotepad/script.js at main · Romi904/MyNotepad · 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

var x=document.getElementById('add').addEventListener("click",()=>{
    addNew();
});

    document.getElementById('del').addEventListener("click",()=>{
        let z=document.getElementById('clear');
        z.remove();
    });

    document.getElementById('create').addEventListener("click",()=>{
        document.getElementById('todo').toggleAttribute("readonly");
    });

    var color=0;

function addNew(text=""){
    const todo=document.createElement('div');
    todo.classList.add("box");
    todo.innerHTML=`
        <div class="todo">
            <div class="tool mar">
                <h3>MyNote</h3>
                <section>
                    <i id="copy" title="copy text" class="cpy far fa-copy"></i>
                    <i id="create" title="new todo" class="edt far fa-edit"></i>
                    <i id="del" title="delete" class="del fas fa-trash-alt"></i>
                </section>
            </div>
            <textarea name="todo" id="todo"  class="copy edit" cols="30" rows="10"></textarea>
        </div>
    `;
    document.getElementById('box').appendChild(todo);
    color++;
    console.log(color);
    const delBtn=todo.querySelector('.del');
    delBtn.addEventListener("click",()=>{
        todo.remove();
    });

    const edtBtn=todo.querySelector('.edt');
    edtBtn.addEventListener("click",()=>{
        todo.querySelector('.edit').toggleAttribute("readonly");
    });
    if(color===1){todo.querySelector('.edit').style.background='#ffcccc';}
    if(color===2){todo.querySelector('.edit').style.background='#fffa65';}
    if(color===3){todo.querySelector('.edit').style.background='#7efff5';}
    if(color===4){todo.querySelector('.edit').style.background='#7d5fff';}
    if(color===5){todo.querySelector('.edit').style.background='#ffaf40';}
    if(color===6){todo.querySelector('.edit').style.background='#ffffff';}
    if(color===7){todo.querySelector('.edit').style.background='#ffb8b8';}
    if(color===8){todo.querySelector('.edit').style.background='#fffa65';}
    if(color===9){todo.querySelector('.edit').style.background='#7efff5';}
    if(color===10){todo.querySelector('.edit').style.background='#7d5fff';}
    if(color===11){todo.querySelector('.edit').style.background='#ffaf40';}
    if(color===12){todo.querySelector('.edit').style.background='#ffffff';}
    if(color===13){todo.querySelector('.edit').style.background='#ffb8b8';}
    if(color===14){todo.querySelector('.edit').style.background='#fffa65';}
    if(color===15){todo.querySelector('.edit').style.background='#7efff5';}
    if(color===16){todo.querySelector('.edit').style.background='#7d5fff';}
    if(color===17){todo.querySelector('.edit').style.background='#ffaf40';}
    if(color===18){todo.querySelector('.edit').style.background='#ffb8b8';}


    // document.getElementById('copy').addEventListener("click",()=>{
    //     const copy=todo.querySelector('.cpy');
    //     const cop=todo.querySelector('.copy');
    //     cop.select();
    //     todo.execCommand("Copy");
    // });
}
function copy() {
    const copy=document.getElementById('copy');
    const cop=document.getElementById('todo');
    cop.select();
    document.execCommand("Copy");
}