ruby-array-explorer/index.html at master · janiceshiu/ruby-array-explorer · 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
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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ruby Array Explorer</title>

    <!-- Google Tag Manager -->
      <script>
        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-T4M78QN');
      </script>
    <!-- End Google Tag Manager -->

    <link rel="stylesheet" href="index.css" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript" src="data.js"></script>

    <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/gruvbox-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
    <script>
      hljs.initHighlightingOnLoad();
      hljs.configure({useBR: true});
    </script>
  </head>
  <body>
    <!-- Google Tag Manager (noscript) -->
      <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T4M78QN"
        height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->

    <div id='octocat'>
      <a href="https://github.com/contrepoint/ruby-array-explorer" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill: #f55e41; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
    </div>
    <div id='language'>Language:
      <select id='sel-language'>
        <option value='en'>English</option>
      </select>
    </div>
    <div id='content'>
      <div id='left'>
        <h1 id='left-title'>Ruby Array Explorer</h1>
        <h2 id='left-description'>Find the array method you need without digging through the docs</h2>
        <div id='left-content'>
          <div>
            I have an array. I would like to:
            <select id='first-selector'>
              <option value='default'>...</option>
              <option value="add">add elements or other arrays</option>
              <option value="rm">remove elements</option>
              <option value="find">find elements</option>
              <option value="iter">iterate over elements</option>
              <option value='sort'>order the array</option>
              <option value='other'>do something else</option>
            </select>
          </div>

          <div id='second-selector'>
            <div id='add'>I need to add:
              <select id='sel-add'>
                <option value='default'>...</option>
                <option value='start'>element(s) to the front of an array</option>
                <option value='end'>element(s) to the end of an array</option>
                <option value="insert">element(s) at a specific array location</option>
                <option value='concat'>this array to other array(s)</option>
              </select>
            </div>

            <div id='rm'>I need to remove:
              <select id='sel-rm'>
                <option>...</option>
                <option value='start'>element(s) from the start of the array</option>
                <option value="end">element(s) from the end of an array</option>
                <option value="delete_at">element(s) at a specific location</option>
                <option value="delete">all occurences of a specific element</option>
                <option value="compact">nil elements</option>
                <option value="uniq">duplicate elements</option>
              </select>
            </div>

            <div id='find'>I need to find:
              <select id='sel-find'>
                <option>...</option>
                <option value='specific'>an element at a specific position</option>
                <option value="match">elements that match a condition I create</option>
                <option value='include'>whether a certain element exists</option>
                <option value="bsearch">an element that matches a condition in a sorted array</option>
              </select>
            </div>

            <div id='iter'>I need to iterate by:
              <select id='sel-iter'>
                <option>...</option>
                <option value='each'>executing a function I will create for each element</option>
                <option value="map">creating a new array from each element with a function I create</option>
              </select>
            </div>

            <div id='sort'>I need to:
              <select id='sel-sort'>
                <option>...</option>
                <option value='reverse'>reverse the array</option>
                <option value="sort">sort the array's elements</option>
              </select>
            </div>

            <div id='other'>I need to:
              <select id='sel-other'>
                <option>...</option>
                <option value='length'>find an array's length</option>
                <option value="empty">check whether an array is empty</option>
              </select>
            </div>
          </div>

          <div id='documentation'>
            <h2 id='doc-title'>Create an Array</h2>
            <div>
              A new array can be created by using the literal constructor [].<br>
              Arrays can contain different types of objects.
            </div>
            <a href='https://ruby-doc.org/core-2.5.0/Array.html#class-Array-label-Creating+Arrays' id='doc-link' target='_blank'>see the docs →</a>
          </div>
        </div>
      </div>

      <div id='right'>
        <h2 id='right-title'>Code</h2>
        <div id='right-content'>
          <div>
            <pre id='codeblock'>
              <code id='code' class='ruby'> # Create an array<br>numbers = [1, 2, 3] #=> [1, 2, 3]</code>
            </pre>
          </div>
        </div>
      </div>
    </div>

    <footer class='footer'>
      inspired by <a href='https://sdras.github.io/array-explorer/'>Javascript Array Explorer
    </footer>
  </body>
</html>