-
Notifications
You must be signed in to change notification settings - Fork 15
/
app.js
207 lines (161 loc) · 5.27 KB
/
app.js
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
/*--------------------project plan--------------------- */
/*
---to do----1] prevent user from entering the same statement
----2] item numbers to be added to each item
----3] add date and time
----4] delete items
----5] confirm items
*/
// // selectors
// // selecting a single HTML element
// var mainCont= document.getElementById('main__cont');
// //selecting a group of elements by thier class name
// var main=document.getElementsByClassName('main');
// //selecting a group of elements by thier tag name
// var mainEle=document.getElementsByTagName('div');
// console.log(mainCont)
// console.log(main)
// console.log(mainEle)
// // selecting a single element using the querySelector
// var mainCont02= document.querySelector('div')
// // selecting a group of elements
// var group=document.querySelectorAll('div')
// console.log(mainCont02)
// console.log(group)
// // to create a new HTML element
// var newEle=document.createElement('section');
// // to add a new element to the page
// mainCont.appendChild(newEle);
// console.log(newEle)
// // to add a text inside any element
// newEle.textContent="this is a new element!";
// // to add attributes
// newEle.setAttribute('id', 'new')
// newEle.setAttribute('class', 'new__ele')
// if(newEle.hasAttribute("id")){
// console.log(newEle.getAttribute("id"))
// }
// // add new HTML element inside the target
// newEle.innerHTML= '<ul id="list"></ul>';
// // add classes
// newEle.className= "newClass";
// newEle.classList.add("new__class02");
// //remove classes
// newEle.classList.remove("new__class02");
/// to do list
// store the user input
var userInput=document.getElementById('user__input');
console.log(userInput)
// store the submit button
var submit=document.getElementById("butt");
console.log(submit)
// adding an event listener
submit.addEventListener('click', submitData);
// collecting all list items
var msgList=[];
var confirmedMsgs=[];
let msggAll=[];
//create the submit function
function submitData(event){
event.preventDefault();
var msg=userInput.value;
console.log(msg);
var msgCont=document.getElementById("msg__cont");
// msgCont.textContent= msg;
var item=document.createElement('li');
if((msg !== "") && (!msgList.includes(msg))){
//
msgList.push(msg);
console.log(msgList);
var list=document.createElement('ul');
// var msgStyled=`<span class="num">${(msgList.indexOf(msg) + 1)}</span><span>${date()}</span>
// <h4 class="txt">${msg}</h4><span class="close">x</span><span class="ok">ok</span>`;
// item.innerHTML= msgStyled;
let msgg= new MassegeGenerator((msgList.indexOf(msg) + 1), `${date()}`, `${time()}`, msg )
msggAll.push(msgg);
item.innerHTML=msgg.generateElement();
console.log(msggAll)
item.classList.add('item__ok');
list.classList.add("list")
list.appendChild(item)
msgCont.appendChild(list);
ok(msg);
close();
}else if(msg === ""){
var error=document.createElement('div');
error.textContent= "Please Write Something To Be Added";
error.classList.add("item__err");
var errorCont=document.getElementById('err__cont');
errorCont.appendChild(error);
}
}
function ok(msg){
var ok=document.getElementsByClassName("ok");
if(ok){
console.log(ok);
var okArr=Array.from(ok)
console.log(okArr);
for(i=0; i<okArr.length; i++){
console.log(okArr[i]);
okArr[i].addEventListener('click', function(){
if(!confirmedMsgs.includes(msg)){
confirmedMsgs.push(msg);
console.log(confirmedMsgs)
}
})
}
}else{
console.log("not here")
}
}
function close(){
var close=document.getElementsByClassName("close");
if(close){
console.log(close);
var closeArr=Array.from(close)
console.log(closeArr);
for(i=0; i<closeArr.length; i++){
console.log(closeArr[i]);
closeArr[i].addEventListener('click', function(){
closeArr.forEach(function(item){
console.log(item.parentElement);
item.parentElement.remove();
})
})
}
}else{
console.log("noot heeeere");
}
}
function date(){
var today= new Date();
var month=today.getMonth()+ 1;
var year=today.getFullYear();
var date=today.getDate();
var currentDate=`${date}/${month}/${year}`;
return currentDate;
}
// create the time function
function time(){
let today= new Date();
let hours=today.getHours();
let min=today.getMinutes();
let sec=today.getSeconds();
let currentTime=`${hours}:${min}:${sec}`;
return currentTime;
}
time()
// testing the objects
function MassegeGenerator(msgId, msgDate, msgTime, msgContent){
this.id=msgId
this.content=msgContent
this.date=msgDate
this.time=msgTime
this.generate= ()=>{
console.log(`${msgId}- ${msgDate}>> ${msgContent} ${msgTime}`);
}
this.generateElement= ()=>{
return `<span class="num">${msgId}</span><span>${msgDate} ${msgTime}</span>
<h4 class="txt">${msgContent}</h4><span class="close">x</span><span class="ok">ok</span>`;
}
}