When I load or refresh the web, this is what I see before the website loads:
this is what loads after:
And when there is a bug, it doesn’t erase this html syntax.(I know how to fix bug)
Hopefully this can be solved; wasted so much time on trying to figure it out.
This is how it looks btw when I press start game:
I would hazard a guess that what is showing is the html.
Then the css is applied by the js code assigning or changing classes.
When the js stops because of a bug the screen is very much the same as when starting.
Is the js in a seperate file?
How are you loading that js file.
What else is happening, eg. reading a database or other http requests. And how are you making any http requests?
Html and js are in the same folder.
I’m opening by live server(I don’t understand your question)
I didn’t make any http requests because never learned how.
Everything else functions normal and there isn’t any explicit bugs in console.
I added a bubble image and it contributed to the glitch; still don’t know what to do.
Why not just show the code. html. js and css.
As there are no detected bugs, it is most likely a logic error. A problem with the code itself and unless we can see the code we can not assist you.
ps. When you click on a url you are making a http request. And when the browser fetches the js and css files the browser is generating a http request. Everything received from a server is the result of a http request. In the Google Chrome debugger there is a network tab which gives details of network activity. The waterfall column gives details of when files are loaded, duration and sequence. If the sequence is not html, css and js then the page will often not display correctly.
I dumped all my code onto Codepen. I don’t know how to add pics to it. so idk if it will hinder anything.
This is what I am getting in the console when I run the codepen;
[Warning] [THEME 513 'SP Ads'] – "To prevent errors in tests, add a `pluginId` key to your `modifyClass` call. This will ensure the modification is only applied once." (discourse-f2382e6109afa9bcf7c34b87934f48e2067d5e4bf2d8034f10989d296f12b303.br.js, line 4010)
[Error] Unrecognized Content-Security-Policy directive 'worker-src'.
[Warning] The following functions are deprecated: googletag.pubads().setTagForChildDirectedTreatment(), googletag.pubads().clearTagForChildDirectedTreatment(), googletag.pubads().setRequestNonPersonalizedAds(), and googletag.pubads().setTagForUnderAgeOfConsent(). Please use googletag.pubads().setPrivacySettings() instead. (pubads_impl_2022070601.js, line 10)
[Info] Successfully preconnected to https://c.amazon-adsystem.com/
[Error] Origin https://www.sitepoint.com is not allowed by Access-Control-Allow-Origin. Status code: 401
[Error] XMLHttpRequest cannot load https://api.rlcdn.com/api/identity/envelope?pid=72 due to access control checks.
[Error] Failed to load resource: Origin https://www.sitepoint.com is not allowed by Access-Control-Allow-Origin. Status code: 401 (envelope, line 0)
[Error] Failed to load resource: the server responded with a status of 400 () (usersync, line 0)
[Error] Unrecognized Content-Security-Policy directive 'worker-src'. (x4)
[Error] Refused to execute a script because its hash, its nonce, or 'unsafe-inline' does not appear in the script-src directive of the Content Security Policy. (6, line 0, x5)
[Error] Unrecognized Content-Security-Policy directive 'worker-src'. (x2)
[Error] Refused to execute a script because its hash, its nonce, or 'unsafe-inline' does not appear in the script-src directive of the Content Security Policy. (6, line 1)
[Error] Failed to load resource: the server responded with a status of 404 () (Bubble.jpg, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (Games.css, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (Games.js, line 0)
[Error] Refused to execute https://cdpn.io/Growly/fullembedgrid/Games.js as script because "X-Content-Type-Options: nosniff" was given and its Content-Type is not a script MIME type.
[Error] Failed to load resource: the server responded with a status of 404 () (BlackJack.jpg, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (Dealer.jpg, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (Deck.jpg, line 0)
> Selected Element
< <button style="color: blue;">Draw a Card</button>
[Error] Failed to load resource: the server responded with a status of 404 () (discourse-checklist-1e07a6f8feed538735d6b92a0ab960ace8430ada4cec9ba1f112d3fdab3b9844.js.map, line 0)
I never use classes in js. Js is a prototypical language and shoehorning it into a class structure to me is crazy.
Call me old fashioned, but I have no intention of learning to use classes in js.
First off, you’re not one for conventions are you Growly 
The convention for classes is to use a label/name starting with a capital letter. You have a mix of upper and lowercase labels throughout your code, which is confusing.
For instance
function ForOwner(a) {
a.style.backgroundImage = "url(Images/Dealer.jpg)";
...
a.style.margin = "20px";
}
That looks like a constructor function to me.
I’m not an expert on OOP, but did have a go at a bit of refactoring.
class DealerAnimation {
constructor (target) {
this.animation = gsap.from(
target,
{
opacity: 0,
duration: 3,
onComplete: this.deal
}
)
this.message = 'Greetings!'
}
deal () {
console.log(this.message)
}
}
class ChatAnimation {
constructor (target) {
this.animation = gsap.to(
target,
{
x: '300px',
y: '-50px',
onComplete: this.card
}
)
this.message = 'Welcome'
}
// functions/methods should have a name that is
// a doing word. displayCard, getCard, displayMessage?
card () {
console.log(this.message)
}
}
const dealerAnim = new DealerAnimation('.Owner')
const chatAnim = new ChatAnimation('.Image')
It’s good to learn about Classes, but to an extent I am with dennisjn here — I’m certainly not a fan of the ‘this’ keyword.
Without a better look at all of your code, I can’t see any reason not to just use gsap without the class wrapper.
const dealerAnimation = gsap.from(
'.Owner',
{
opacity: 0,
duration: 3,
onComplete() {
console.log('Greetings')
}
}
)
I realise that this doesn’t answer your question, but sorting out your code to follow established conventions would be a good start. It would certainly make your code more understable to anyone who might want to help you.
I am working from the top, so maybe I am missing something, but why not just style with css?
Instead of this.
// Owner should be lowercase owner
Owner.classList.add("Owner");
ForOwner(Owner);
function ForOwner(a) {
a.style.backgroundImage = "url(Images/Dealer.jpg)";
a.style.minHeight = "300px";
a.style.backgroundRepeat = "no-repeat";
a.style.backgroundPosition = "center";
a.style.margin = "20px";
}
...
This instead?
css
body {
max-width: 800px;
margin: auto;
}
.owner {
background-image: url('Images/Dealer.jpg');
min-height: 300px;
background-repeat: no-repeat;
background-position: center;
margin: 20px;
}
.image {
animation-fill-mode: forwards;
height: 200px;
margin-bottom: 30px;
position: absolute;
background-repeat: repeat;
}
.result {
color: white;
text-align: center;
font-size: 20px;
margin: 10px;
display: none;
}
.card-deck {
background-repeat: no-repeat;
height: 75px;
width: 50px;
border: solid;
display: none;
margin-top: 30px;
margin-left: 20px;
background-image: url('Images/Deck.jpg');
}
...
Less Javascript is a good thing. Less to debug, less to go wrong.
Edit: Sorry if my tone comes across as harsh. It’s good you are tackling this project, I would just deal with things like case (upper/lower) to start with. It will make it easier for you and anyone else in the long run.
I understand, I will start over everything if I get lost in the code. ty and You guys are too kind.
I organized the code now. There is an improvement in fixing the glitch which is the text not glitching, but the bubble and the dealer pic is still glitching.
I don’t know what I did to fix the text glitch.
The bubble isn’t glitching now, but the dealer pic is glitching I think?
The dealer pic flashes before the animation starts when I spam the refresh page? is that normal? When I don’t spam the refresh button and refresh it once the animation is done, the animation doesn’t glitch.
I think it is glitchin but idk
What do you mean by “spam the refresh page”?
“reload this page”
or when I spam refresh in the vscode live server.
I’ve had a look through the code and you still appear to be using capitals everywhere.
You use vscode, don’t you? I have a little fix for you, that you make like.
I have broken it down into stages using your code as an example
Click on edit → replace (Ctrl + H)
let (\w) matches ‘let’, space and (\w) matches a letter. In this case the first letter.
Now Press Ctrl + Shift + L (Select All)
Then press Ctrl + Shift + P and type into the box ‘transform’ and click on Transform to Lowercase
Next step is just to convert those 'let’s to 'const’s
The result
I didn’t know I had to do it. sorry
Please don’t be sorry. These aren’t orders. I just wanted to show you a quick way to fix this and maybe other edits to your code.
Do I not capitalize anything?
When I don’t use gsap and use keyframes instead, the image doesn’t glitch. I guess I can’t use gsap.
Classes
class Rectangle {
constructor (width, height) {
this.width = width;
this.height = height;
}
}
const rectangle = new Rectangle(6, 4)
Not used so much these days, a constructor function
function Rectangle (width, height) {
this.width = width;
this.height = height;
}
const rectangle = new Rectangle(6, 4)
And of course built-ins like Math, Date, Number etc.
A common convention for custom variables is to use camelCase
const backgroundColor = 'red';
const cardDeck = document.querySelector('.card-deck');
By not following these conventions it isn’t going to necessarily break your program, but it is going to make your code more difficult and time consuming to read and understand.