Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- function solve() {
- // HTML elements
- let buttonAdd = document.getElementById('add');
- let buttonReset = document.getElementById('reset');
- let ulIdList = document.getElementById('list');
- let ulClSentList = document.querySelector('.sent-list');
- let ulDeleteList = document.querySelector('.delete-list');
- // console.log(ulDeleteList);
- // Functionality
- // <!-- <li>
- // <h4>Title: For Work</h4>
- // <h4>Recipient Name: John@abv.bg</h4>
- // <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem ut recusandae deserunt, debitis perspiciatis praesentium facilis, suscipit adipisci provident, tempora repellat ratione voluptate sit vel animi totam. Quia, qui enim.</span>
- // <div id="list-action">
- // <button type="submit" id="send">Send</button>
- // <button type="submit" id="delete">Delete</button>
- // </div>
- // </li> -->
- buttonAdd.addEventListener('click', (e) => {
- let inputFields = document.querySelectorAll('input');
- inputFields = Array.from(inputFields);
- let textarea = document.getElementById('message');
- let arrOfFields = inputFields.map(el => el.value);
- arrOfFields.push(textarea.value);
- if (!arrOfFields.includes('')) {
- let liElement = document.createElement('li');
- let h4Element1 = document.createElement('h4');
- let h4Element2 = document.createElement('h4');
- let spanElement = document.createElement('span');
- let divElement = document.createElement('div');
- let buttonSend = document.createElement('button');
- let buttonDelete = document.createElement('button');
- buttonSend.type = 'submit';
- buttonDelete.type = 'submit';
- buttonSend.id = 'send';
- buttonDelete.id = 'delete';
- buttonSend.textContent = 'Send';
- buttonDelete.textContent = 'Delete';
- divElement.id = 'list-action';
- h4Element1.textContent = `Title: ${arrOfFields[1]}`;
- h4Element2.textContent = `Recipient Name: ${arrOfFields[0]}`;
- spanElement.textContent = arrOfFields[2];
- divElement.appendChild(buttonSend);
- divElement.appendChild(buttonDelete);
- liElement.appendChild(h4Element1);
- liElement.appendChild(h4Element2);
- liElement.appendChild(spanElement);
- liElement.appendChild(divElement);
- ulIdList.appendChild(liElement);
- inputFields.forEach(el => el.value = '');
- textarea.value = '';
- buttonDelete.addEventListener('click', (e) => {
- let liElement3 = document.createElement('li');
- let spanElement3 = document.createElement('span');
- let spanElement4 = document.createElement('span');
- spanElement3.textContent = `To: ${arrOfFields[0]}`;
- spanElement4.textContent = `Title: ${arrOfFields[1]}`;
- liElement3.appendChild(spanElement3);
- liElement3.appendChild(spanElement4);
- ulDeleteList.appendChild(liElement3);
- ulIdList.textContent = '';
- e.preventDefault();
- })
- let sentButtonInli = document.getElementById('send');
- sentButtonInli.addEventListener('click', (e) => {
- let liElement2 = document.createElement('li');
- let spanElement2 = document.createElement('span');
- let spanElement21 = document.createElement('span');
- let divElement2 = document.createElement('div');
- let buttonDelete2 = document.createElement('button');
- buttonDelete2.type = 'submit';
- buttonDelete2.classList.add('delete');
- buttonDelete2.textContent = 'Delete';
- spanElement2.textContent = `To: ${arrOfFields[0]}`;
- spanElement21.textContent = `Title: ${arrOfFields[1]}`;
- divElement2.classList.add('btn');
- divElement2.appendChild(buttonDelete2);
- liElement2.appendChild(spanElement2);
- liElement2.appendChild(spanElement21);
- liElement2.appendChild(divElement2);
- ulClSentList.appendChild(liElement2);
- ulIdList.textContent = '';
- // <!-- <li>
- // <span>To: John@abv.bg</span>
- // <span>Title: For Work</span>
- // </li> -->
- buttonDelete2.addEventListener('click', (e) => {
- let liElement3 = document.createElement('li');
- let spanElement3 = document.createElement('span');
- let spanElement4 = document.createElement('span');
- spanElement3.textContent = `To: ${arrOfFields[0]}`;
- spanElement4.textContent = `Title: ${arrOfFields[1]}`;
- liElement3.appendChild(spanElement3);
- liElement3.appendChild(spanElement4);
- ulDeleteList.appendChild(liElement3);
- ulClSentList.textContent = '';
- e.preventDefault();
- })
- e.preventDefault();
- })
- e.preventDefault();
- }
- e.preventDefault();
- })
- buttonReset.addEventListener('click', (e) => {
- let inputFields = document.querySelectorAll('input');
- inputFields = Array.from(inputFields);
- let textarea = document.getElementById('message');
- inputFields.forEach(el => el.value = '');
- textarea.value = '';
- // ulIdList.textContent = '';
- e.preventDefault();
- })
- // <!-- <li>
- // <span>To: John@abv.bg</span>
- // <span>Title: For Work</span>
- // <div class="btn">
- // <button type="submit" class="delete">Delete</button>
- // </div>
- // </li> -->
- }
- solve()
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement