All-JavaScript/32-threader/index.html at master · TutulDevs/All-JavaScript · 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
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Tweeter Thread Maker</title>
 <link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
 <main>
 <form class="form">
 <div class="info">
 <p>
 <strong>Characters:</strong> <span class="count">00</span>
 </p>
 <p>
 <strong>Threads:</strong> <span class="threadCount">00</span>
 </p>
 </div>
 <textarea class="textarea" placeholder="chirp chirp... 🐦" required="" wrap="soft" onkeyup="textInfo(this);"></textarea>
 <button type="submit" class="btn">
 Thread
 <span class="btn-icon">&#9992;</span>
 </button>
 </form>

 <div class="thread-box">
 <!--
 <article class="thread" data-index="1">
 <div class="tools">
 <span class="index">01</span>
 <span class="close" data-index="1">✖️</span>
 <span class="copy" data-index="1">📋</span>
 </div>
 <p class="tweet">
 <span class="sl">${i < 9 ? '0' + (i + 1): i + 1} /</span> <br />
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, autem.
 </p>
 </article>
 -->

 <div class="thread">
 <p>
 <span class="sl">✨</span> <br />
 Your threads will be here. 🔥 <br /><br />
 ℹ️ The character limit for each tweet is 275. <br /><br />
 </p>
 <p>
 ⚠️️ The copy to clipboard is not working because I don't know how to trigger an event inside an event delegation. But you can click on the paragraph, it'll be selected & just press <mark>Ctrl + C</mark> to copy.
 </p>
 <br />
 <p>
 If you can help me with that I'll be grateful to you.
 </p>
 <br />
 <p>
 Here are some dummy text for testing: <br />
 Plastic pollution has become one of the most pressing environmental issues, as rapidly increasing production of disposable plastic products overwhelms the world’s ability to deal with them. Plastic pollution is most visible in developing Asian and African nations, where garbage collection systems are often inefficient or nonexistent. But the developed world, especially in countries with low recycling rates, also has trouble properly collecting discarded plastics. Plastic trash has become so ubiquitous it has prompted efforts to write a global treaty negotiated by the United Nations.
 </p>

 </div>
 </div>
 </main>
 <p class="credit">
 Built by <a href="https://twitter.com/TutulDevs">Tutul</a>. <br />
 See my other <a href="https://all-js.netlify.app">JavaScript projects</a>.
 </p>

 <script src="app.js"></script>
 <script type="text/javascript" charset="utf-8">

 function deleteThread(e) {
 const [el,
 index] = [e.target,
 e.target.dataset.index];

 // Delete Tweet
 if (el.classList.contains("close")) {
 // Remove the selected el
 tweetsArr.splice(index, 1);

 // update the UI
 displayUI(threadBox, tweetsArr);
 }

 // Copy Tweet
 if (el.classList.contains("tweet")) {
 let tw = tweetsArr.splice(index, 1).join('');
 //console.log( tw )
 // el.innerText
 const text = el.innerText;
 }
 }

 threadBox.addEventListener("click", deleteThread);
 </script>
</body>
</html>