repl.it
@Kognise/

Oof Case

HTML, CSS, JS

No description

fork
loading
Files
  • index.html
index.html
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
<!DOCTYPE html>
<html>
  <head>
    <title>Oof Case</title>
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/kognise/[email protected]/dist/light.min.css' />
    <meta name='viewport' content='width=device-width, initial-scale=1' />
    <style>input { width: 100%; box-sizing: border-box; }</style>
  </head>

  <body>
    <h1>Oof Case</h1>
    <p>Another hack by Kognise.</p>

    <input id='input' placeholder='Type here...' />
    <input id='output' placeholder='The result will show up here' readonly />

    <script>
      const oofCase = (string) => {
        let upper = false

        return string.split(' ').map((string) => [ ... string ].map((character) => {
          if (upper && character.toLowerCase() === 'i') upper = false
          if (!upper && character.toLowerCase() === 'l') upper = true
          const result = upper ? character.toUpperCase() : character.toLowerCase()
          upper = !upper
          return result
        }).join('')).join(' ')
      }

      document.getElementById('input').addEventListener('input', (event) => {
        document.getElementById('output').value = oofCase(event.target.value)
      })
    </script>
  </body>
</html>
result
console
?