jQuery toggleClass example

Toggle class name on click in jQuery

by dixalex

HTML

<div class="valid-container hidden">
<insert class="valid-domain">yahoo.com</insert>
<insert class="valid-domain">icloud.com</insert>
<insert class="valid-domain">gmail.com</insert>
<insert class="valid-domain">msn.com</insert>
<insert class="valid-domain">ncpwiped.org</insert>
<insert class="valid-domain">noemail.com</insert>
<insert class="valid-domain">ncptest.com</insert>
<insert class="valid-domain">students.dadeschools.net</insert>
<insert class="valid-domain">live.com</insert>
<insert class="valid-domain">protonmail.com</insert>
<insert class="valid-domain">gerogebrown.ca</insert>
<insert class="valid-domain">rogers.com</insert>
<insert class="valid-domain">comcast.net</insert>
<insert class="valid-domain">qq.com</insert>
<insert class="valid-domain">nielsen.com</insert>
<insert class="valid-domain">queensu.ca</insert>
<insert class="valid-domain">mail.com</insert>
<insert class="valid-domain">BRESNAN.NET</insert>
<insert class="valid-domain">tuta.io</insert>
<insert class="valid-domain">att.net</insert>
<insert class="valid-domain">charter.net</insert>
<insert class="valid-domain">yandex.com</insert>
<insert class="valid-domain">swcsd.us</insert>
<insert class="valid-domain">michener.ca</insert>
<insert class="valid-domain">duck.com</insert>
<insert class="valid-domain">globetrotter.net</insert>
<insert class="valid-domain">wscschools.org</insert>
<insert class="valid-domain">windstream.net</insert>
<insert class="valid-domain">hughes.net</insert>
<insert class="valid-domain">proton.me</insert>
<insert class="valid-domain">outlook.com</insert>
<insert class="valid-domain">cox.net</insert>
<insert class="valid-domain">sbcglobal.net</insert>
<insert class="valid-domain">netscape.com</insert>
<insert class="valid-domain">usa.com</insert>
<insert class="valid-domain">bellsouth.net</insert>
<insert class="valid-domain">mymts.net</insert>
<insert class="valid-domain">mylenape.net</insert>
<insert class="valid-domain">spss.hk</insert>
<insert...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.hidden {
  display: none;
}

.valid-domain, .misspelling {
  display: block;
  clear: both;
  color: green;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

// Define the QWERTY keyboard layout
const qwertyKeyboard = {
  'q': 'wa', 'w': 'qes', 'e': 'wrd', 'r': 'etf', 't': 'ryg', 'y': 'tuh', 'u': 'yij',
  'i': 'uok', 'o': 'ipl', 'p': 'o[', 'a': 'qsz', 's': 'wadx', 'd': 'esfc', 'f': 'rdgv',
  'g': 'tfhb', 'h': 'ygjn', 'j': 'uhkm', 'k': 'ijl', 'l': 'ok;', 'z': 'ax', 'x': 'szc',
  'c': 'dxv', 'v': 'fcb', 'b': 'gvn', 'n': 'hbm', 'm': 'jn'
};

function generateMisspellingsTable(validDomains) {
  const validDomainsSet = new Set(validDomains);
  const misspellings = new Set();
  const table = document.createElement('table');
  const tbody = document.createElement('tbody');

  // Create header row
  const headerRow = document.createElement('tr');
  ['Misspelling', 'Original Domain'].forEach(headerText => {
    const th = document.createElement('th');
    th.textContent = headerText;
    headerRow.appendChild(th);
  });
  tbody.appendChild(headerRow);

  validDomains.forEach(domain => {
    for (let i = 0; i < domain.length; i++) {
      const char = domain[i].toLowerCase();
      const adjacentChars = qwertyKeyboard[char];
      if (adjacentChars) {
        for (let j = 0; j < adjacentChars.length; j++) {
          const misspelled = domain.slice(0, i) + adjacentChars[j] + domain.slice(i + 1);
          if (!validDomainsSet.has(misspelled) && !misspellings.has(misspelled)) {
            misspellings.add(misspelled);
            const row = document.createElement('tr');
            const misspellingCell = document.createElement('td');
            const originalDomainCell = document.createElement('td');
            misspellingCell.textContent = misspelled;
            originalDomainCell.textContent = domain;
            row.appendChild(misspellingCell);
            row.appendChild(originalDomainCell);
            tbody.appendChild(row);
          }
        }
      }
    }
  });

  table.appendChild(tbody);
  $('.invalid-container').append(table);
}

// Usage
$(document).ready(function() {
  const validDomains =...