Assigning attributes to each letter in a pangram

I am attempting to assign the appropriate class to a group of elements, representing each letter in the alphabet. The elements have IDs ranging from #alpha_0 to #alpha_25. If a letter appears just once in the input, it should be displayed in green. If a letter appears more than once, it should be red. If a letter does not appear at all, it should remain black.

The code snippet provided below is an initial attempt that currently has some flaws.

var isPangram = function() {
 var s = $('#input').val().toLowerCase();
 console.log(s);
 var alpha = letters[getAlphabet()].join('');
 console.log(alpha);
 var len = alpha.length;
 for (var i = 0; i < len; i++) {
  if (s.indexOf(alpha.charAt(i)) != -1) {
   if ($('#alpha_'+i).hasClass('green')) {
    // already matched, change to red
   } else {
    // not yet matched, change to green
   }
  } else {
   // no match found
  }
 }
}

Answer №1

The most efficient approach would be to initially determine the frequency of each letter and then assign appropriate classes accordingly.

(function($) {
  function calculateLetterFrequency(inputText) {
    var alphabet = 'abcdefghijklmnopqrstuvwxyz';
    var alphabetSet = alphabet.split('');

    var letterFrequency = {};
    $.each(alphabetSet, function() {
      letterFrequency[this] = 0;
    });

    var processedText = inputText.toLowerCase().replace(/[^a-z]/g, '');

    $.each(processedText.split(''), function() {
      letterFrequency[this]++;
    });

    return letterFrequency;
  }

  function applyLetterStyles(frequencyData) {
    $('.letter').removeClass('green').removeClass('red');

    $.each(frequencyData, function(letter, count) {
      if (count > 0) {
        $('#alpha_' + (letter.charCodeAt(0) - 'a'.charCodeAt(0))).addClass(count > 1 ? 'red' : 'green');
      }
    });
  }

  function checkIfPangram() {
    var userInputText = $('#input').val();
    var letterFrequencyData = calculateLetterFrequency(userInputText);

    applyLetterStyles(letterFrequencyData);
  }
})(jQuery);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating the titles of Bootstrap 4 Switches on the fly

Currently utilizing Bootstrap 4 Toggle on my website, I'm struggling to figure out how to dynamically modify the labels on the toggles at runtime. My objective is to implement a toggle-switch that, once activated, displays a countdown indicating the ...

Fulfill the promise to retrieve the value contained within

Is there a way to use TypeScript to call the Wikipedia API for retrieving a random page title and save it in a variable for later use? I am struggling with resolving promises as I keep getting ZoneAwarePromise returned. I'm new to both promises and Ty ...

Passing state to getStaticProps in Next JSLearn how to effectively pass state

I am currently fetching games from IGDB database using getStaticProps and it's all working perfectly. However, I now have a new requirement to implement game searching functionality using a text input field and a button. The challenge I'm facing ...

Angular.js: Ensure all services are loaded before initializing the application

I am currently developing an application using angular.js and I need to ensure that the result from a specific service is accessible throughout the entire application right from the beginning. How can this be accomplished? The service in question is as f ...

Adjust the positioning of the background and create a smooth fade effect for

Is there a way to simultaneously change the background position and display an image in front of it? My current solution involves using a second div with padding to center it, but when I hover over the padding of the first div, the image does not change. ...

useEffect initiates all actions

I'm currently exploring hooks functionality within a Next.JS project. I've successfully used a useEffect to track scrolling behavior in order to dynamically change the content displayed in a header when the page is scrolled. const [ scrollY, setS ...

The customized styling for Material Angular does not seem to properly apply to <md-card> elements within ui-views

I am trying to achieve a specific effect on the ui-views <md-card id="sidebar" flex="20" class="sche-card" layout-padding="true"> <div ui-view="card" autoscroll="false"></div> </md-card> However, I am facing an issue where the car ...

Obtaining the URL of the Parent Page Using Javascript

I encountered a situation in which, when I open a modal window dialog from Page1.aspx, if a user attempts to directly open that dialog by copying the URL and pasting it into the browser, I want to prevent the modal window from opening. It should only open ...

Is it possible to hide a div using Media Queries until the screen size becomes small enough?

Whenever the screen size shrinks, my navbar sections start getting closer together until they eventually disappear. I've implemented a button for a dropdown menu to replace the navbar links, but I can't seem to make it visible only on screens wit ...

What sets id and class apart from each other?

I understand that for id we need to use the '#' symbol and for class '.' symbol. However, I am unsure of the specific purposes of both class and id in styling CSS. Can someone provide clarification on when I should use id and when I sho ...

Recording Audio Using ReactJS

I am exploring ways to record audio using ReactJS and save it on my Node server. Initially, I attempted to utilize the "react-audio-recorder" module but encountered issues when attempting to record multiple audios consecutively. Additionally, I experiment ...

How can I achieve a fade-in effect whenever the flag image is clicked?

A unique "international" quotes script has been created, showcasing Dutch, English, German, and French quotes. The script displays different quotes every day, with a draft-result visible in the upper right corner of this page ... The code used for this sc ...

Generating an SQL query that produces interactive buttons that users can click with the goal of potentially altering the contents of a DIV element

I'm having some trouble explaining this, but here it goes.. My home.php file looks like this: <body> <div id='leftColumn'> <?php include ('includes/roomQuery.php') </div> ...

Show a checkbox element with a square in the center instead of a tick mark

Is there a way to create a custom checkbox in HTML with a black box in the center, similar to the third checkbox shown in the image below? I've noticed this design in many interfaces, but I haven't been able to find a satisfactory example online ...

Using a JSON string with form field names and corresponding values to automatically fill in form fields using jQuery

My JSON string looks like this: [{"meta_key":"algemeen_reden","meta_value":"oplevering"},{"meta_key":"algemeen_netspanning","meta_value":"230"}] Currently, I am using the following script to fill out form fields: // Grab Algemeen Data get_algemeen_data ...

Updating Multiple Divs with jQuery AJAX (Continuous Repeated Refreshing)

I've been trying for a while to solve this issue but haven't found a solution yet. My auto-refresh feature works, however, it refreshes all the divs inside each other. For example, I have a computer-aided dispatch application with sections for av ...

Using a custom font in a Django project without relying on the Google Fonts API

I've hit a roadblock in my programming journey and I'm seeking help. As a newcomer to both programming and Django, I've been following a helpful tutorial up until part 4. Everything was going well until I stumbled upon a new font online cal ...

Alerting old session data following an AJAX request

After making an AJAX call that updates a $_SESSION variable, my <script> is supposed to echo out the new variable. However, it keeps alerting the old data even though the data is reaching the .php page and being stored in the session. I've attem ...

jQuery Menu shuts down with a .slideToggle load when clicked away from the menu

I have encountered similar questions regarding my menu open/close functionality, which is operated by slideToggle() instead of a class. I prefer not to modify my CSS to make it functional. The requirement is for the menu to close when the user clicks anyw ...

Modify the website address and show the dynamic content using AJAX

$(function(){ $("a[rel='tab']").click(function(e){ //capture the URL of the link clicked pageurl = $(this).attr('href'); $("#Content").fadeOut(800); setTimeout(function(){ $.ajax({url:pageurl+'?rel=tab&apo ...