concatunate_2_lists_horizontally.github.io/index.html at main · MahmoudAbdelate/concatunate_2_lists_horizontally.github.io · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>concatenate 2 lists horizontally</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        display: grid;
        place-items: center;
        margin: 0;
        height: 100vh;
        background-color: #141414;
        color: white;
        font-size: 23px;
      }
    </style>
  </head>
  <body>
    <!-- showing messages -->
    <p id="messageBox">Welcome!</p>
  </body>
  <script>
    const messageBox = document.getElementById('messageBox');

    // making two lists concatenate horizontally
    function concatenate(list1, list2) {
      let result = '';

      list1.forEach((item, index) => {
        result += `${item},${list2[index]}\n`;
      });

      return result;
    }

    const listsSeparator = '\n\n\n'; // between input lists
    const lineSeparator = '\n\n'; // between input lists' items

    messageBox.innerText = 'entered <script>';

    // 1. saving the second list
    navigator.clipboard.readText().then((copiedText) => {
      messageBox.innerText = 'checkpoint 0';
      // checking if it's undefined
      if (copiedText === undefined) {
        messageBox.innerText = 'copy text first';
        return;
      }
      messageBox.innerText = 'checkpoint 1';

      // split copiedText to 2 lists
      lists = copiedText.split(listsSeparator);
      messageBox.innerText = 'checkpoint 2';

      // validating the length of lists
      if (lists.length !== 2) {
        messageBox.innerText = `lists aren't separated correctly\n\nlists' length: ${lists.length}\n\n${lists}`;
        return;
      }
      messageBox.innerText = 'checkpoint 3';

      // split lists' items
      list1 = lists[0].split(lineSeparator);
      list2 = lists[1].split(lineSeparator);
      messageBox.innerText = 'checkpoint 4';

      // checking lists' items number equality
      if (list1.length !== list2.length) {
        messageBox.innerText = `lists' items number aren't equal\n1st list has ${list1.length} item\n2nd list has ${list2.length} item`;
        return;
      }
      messageBox.innerText = 'checkpoint 5';

      // concatenate
      const result = concatenate(list1, list2);
      messageBox.innerText = 'checkpoint 6';

      // save result to clipboard
      navigator.clipboard.writeText(result);

      // showing the result on the screen with 'Done' message
      messageBox.innerText = 'Done\nSaved to clipboard';
    });
  </script>
</html>