The GitHub Pages website is not displaying exactly like it does when running locally with a live server

Currently in the process of creating a compact website where users can input an anagram and receive all potential words that can be formed from it. Additionally, upon receiving these words, there is an option to click on one for its definitions.

The site operates smoothly when utilizing live server locally; however, encountering issues arise once the repository is deployed using GitHub Pages.

Locally, when entering a word (for example, "acres"), the site accurately displays all possible words generated by the anagram. Conversely, GitHub Pages fails to produce the same results. The script.js file contains all logic necessary for finding viable words by reading a dictionary.txt file and sifting through words to identify those formable by the anagram. Moreover, this JavaScript file manages retrieving word definitions from an external dictionary API and integrating the data into the main HTML file.

Displayed below is the script.js file. Apologies if it appears disorganized! Admittedly, I am relatively new to coding JavaScript for frontend development. For reference, the index.html and style.css files are provided, as potential issues may lie within them.

[Your rewritten content here]
... [Additional code snippets included] ...

Access the GitHub Pages link here.

I have attached screenshots displaying the differing outcomes when inputting "acres" as the anagram:

Find the direct link to the GitHub repository here.

An oversight seems to prevent identical functionality between the local and deployed versions. Can anyone pinpoint what might be overlooked?

javascripthtmlcssgithub-pages

Answer №1

After carefully examining the dictionary that is returned (with words separated by line breaks), I couldn't understand the rationale behind removing the last character of each word in the word array:

for (let i = 0; i < words.length; i++) {
   words[i] = words[i].slice(0,-1);
}

Upon closer inspection, I noticed that this code snippet was causing multiple repetitions of letters 'a', 'b', 'c'... 'z' to be inserted into the word array when typing the letter 'a'. This unintended consequence might be affecting the accuracy of finding anagrams.

In my opinion, it seems unnecessary to include this code. Removing it seems to yield the expected results based on my observations.

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

Inscribe latitude from marker onto input field

Currently, I am working on a feature where markers are added to Google Maps API v3 by clicking on the map. Each marker then displays its coordinates in an info window. However, I am facing an issue with picking up the latitude and longitude values and inse ...

javascriptjqueryhtmlformsgoogle-maps-api-3

What is the best way to retrieve the content of a specific class in Selenium WebDriver?

Python Code : from selenium import webdriver from selenium.webdriver.chrome.options import Options options = webdriver.ChromeOptions() options.add_argument(r"--user-data-dir=C:\Users\bji\AppData\Local\Google\Chrome\ ...

htmlcssseleniumselenium-webdriver

Hide the menu when tapping outside on a tablet device

Currently working with HTML, CSS, and JS (specifically Angular) I have a Header menu that contains dropdown sub-menus and sub-sub-menus in desktop view. On a PC, the sub-menus appear on hover and clicking on an entry redirects you somewhere. Clicking o ...

javascriptangularjsdrop-down-menuhoverclick

What is the best way to generate a list from a text file in javascript?

I have a document called department.txt which lists various departments: Chemistry Physics Mathematics Other I'm looking to generate a dropdown menu <select> in my HTML by importing this file. How can I achieve this using Javascript? There are ...

javascripthtml

Revamp the layout of the lower HTML video menu

Here is my code: <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> video { width: 100%; height: auto; } </style> </head> <body> <video width="400" controls> ...

javascripthtmlcssvideohtml5-video

using JavaScript to strip away content following .jpg

var lochash = "#http://www.thepresidiumschool.com/news_image/102%20NRD_7420.jpg&lg=1&slide=0"; I am looking to eliminate or modify the content that comes after .jpg. ...

javascriptjquery

Is there a way to invoke an Angular2 function from within a Google Map infowindow?

I am currently working on integrating Google Maps using javascript in a project, and I'm facing a challenge. I want to call an Angular2 function inside an infowindow as shown in the code snippet below. Pay attention to the infoContent variable that co ...

javascriptgoogle-maps-api-3angulargoogle-maps-markers

Ways to loop through an array in a JSON object

Exploring methods of iterating through an array in json: $(document).ready(function(){ $('#wardno').change(function(){ //this code will execute whenever there is a change in the select with id country $("#wardname > ...

javascriptjqueryjson

Can we programmatically switch to a different mat-tab that is currently active?

Looking to programmatically change the selected mat-tab in a TypeScript file. I came across a solution for md-tab, but I need it for mat-tab. I attempted the suggested solution without success. Here's what I tried: HTML <button class="btn btn- ...

javascriptangulartypescriptangular-material

Styling each individual page in R Shiny with CSS

I've created an R shiny application and am in the process of adding styling to it. I've incorporated some HTML code and want to customize elements like the background color using CSS. After doing some research online, I learned that I should use ...

htmlcssruser-interfaceshiny

Utilizing Isotope JS on your Wordpress website

I'm in the process of integrating the .js plugin, Isotope, into my Wordpress installation. It should be positioned at the bottom of this page: To achieve this, I am referring to an example on codepen: https://codepen.io/desandro/pen/mEinp The script ...

javascriptjquerycsswordpress

Can modifications be made to a page's source content variable using Ajax?

Can modifications be made to the source content of a page through Ajax loaded by a jsp include in the main jsp? If not, is it possible to refresh only that portion of the page (the jsp that loads some of the content) and have a portion of the content in t ...

javascriptjavajqueryajaxjsp

What is the reason that self focus doesn't function in JavaScript?

Whenever an input element triggers a blur event, I want to focus on a specific element. The issue arises when I try to focus on the same element that caused the blur event. Why does this only work when the element I am focusing on is not the one triggeri ...

javascriptjqueryjquery-events

Error encountered while implementing onMutate function in React Query for Optimistic Updates

export const usePostApi = () => useMutation(['key'], (data: FormData) => api.postFilesImages({ requestBody: data })); Query Definition const { mutateAsync } = usePostApi(); const {data} = await mutateAsync(formData, { onMutate: ...

javascriptreactjstypescriptreact-queryoptimistic

Troubleshooting the issue of React forms hook not functioning properly with Material UI Select input

How the Textfield below should load: https://i.sstatic.net/29Sz4.png How it actually loads: https://i.sstatic.net/TdPYM.png My Select component, created using Material UI and React form hook, is not loading the default value as expected. The component ...

javascriptreactjstypescriptreact-hooksmaterial-ui

Confirm the object received from the API and assign default values

Seeking to extract data from an API and verify if all fields are strings, but if they are missing I aim to assign default values. My intention was to utilize the yup library to validate the object accordingly, ensuring that the returned function is prope ...

javascripttypescriptvalidationtypesyup

The dropdown feature functions properly on Chrome but seems to be malfunctioning on

Dropdown list inside the HTML header table My query was addressed in the link above, however, the solution only seemed to work on Chrome and not Firefox. I specifically want the dropdown arrow header to be displayed next to the table header instead of bel ...

htmlcssbootstrap-4

Navigating to a Different Page in React Based on Button Click and Meeting Specific Conditions

Within this particular component, I have implemented a button named Submit. When this button is clicked, it triggers a series of actions: first, it exports the drawing created by the user as a jpeg URL, then sends this image data to another API that genera ...

javascriptreactjs

Tips for fading the text of list items when their checkbox is marked as done?

I am trying to figure out how to gray out a list item when its checkbox is checked. The code I currently have takes text input from a textbox and adds it to an unordered list when the add button is clicked. Each list item contains a checkbox within it. My ...

javascripthtmlcss

Error encountered while trying to display content in the rendering area

const Pages = () => { return ( <> <Box display="flex"> {window.location.pathname === "/profile" ? undefined : <Sidebar />} <Box flex={3}> <Navbar /> <Routes> {/* Cont ...

javascriptreactjsmaterial-uijsxreact-router-dom