Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS New to html,css and js need some help

renny

renny

Coder
Here is what I have. A html file, a css file and a js file. They all are in the same folder.
I want to make a html canvas with all 3 of the file in the folder. I getting the script from a tutorial.
I am sure I am calling the other files from the html file. I don't thing that the other files(css, js)are not being seen.
I hope that you can understand what i am saying.
here is my html file
Code: 
<!DOCTYPE html>

<html lang="en">
    <head>
        <title>HTML Canvas API for Games</title>
        <meta content="text.html;charset=utf-8" http-equiv="Content-type">
        <meta content="utf-8" http-equiv="encoding">
        <link rel="stylesheet" type="text/css" href="bundle.css">
        <script scr="bundle.js"></script>
        
    </head>
    <body>
        <canvas id="canvas" width="800" height="600"></canvas>


    
        

    </body>

</html>

here is my css file

Code: 
body{
    margin:0px;
    padding:0px;
}

Here is mt js file

Code: 
window.onload = function(){
    
    console.log("HTML Canvas API for Games");
    
    let canvas = document.getElementById("canvas");
    let content = canvas.getContext("2d");
    
    context.fillStyle = "#1bafdb";
    context.fillRect(0,0 canvas.width, canvas.height);
}
I am using notepad++ as an editor on window 7
When i click on the html file firefox comes up with just a blank page.
I hope someone can help
Thank you
 
Sort by date Sort by votes
Your code has some problems. Loading an external script file is not scr it is src -
HTML: 
<script src="bundle.js"></script>
In your script file you have defined canvas context as content and you are calling an undefined variable context. Change context to content -
JavaScript: 
content.fillStyle = "#1bafdb";
In fillRect method there are 4 perameter but you are declaring 3. Put a coma after second 0 -
JavaScript: 
context.fillRect(0,0, canvas.width, canvas.height);
 
Upvote 0 Downvote
I mad a very simple test
my html script

Code: 
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
   
    <title>TEST</title>
</head>
<body>
    <h1>CSS Basics</h1>
    <p> this is a test</p>
</body>
</html>

and my css script

Code: 
h1{
    color: orange;
}

p{
    color: red;
}

The css did not do anything.
But if I put the css script in to the html file it works fine.
I can't understand why the html file is not reading the css file.
If I put the css script in the html file it works fine as you can see from the photo.
I can get the html file to see any file or function.
I am going to try an new editor.
 

Attachments

  • test.png
    test.png
    5.9 KB · Views: 1
Upvote 0 Downvote
Just to see if there is a problem, I made a folder on my desktop and labeled it m"SITE".
Next I copy/pasted your HTML code into notepad and saved it as "index.html" in the :site" folder.
Next I copy/pasted your CSS code into notepad and saved it as "style.css" in the :site" folder.
I then opened the site folder and clicked on "index.html"
My browser opened and I got the exact page as your image.

SO _ You must be saving things wrong. Go look in your folder and make sure only two files exist and that their names are correct!
 
Upvote 0 Downvote
Thank you I download aton and it works good. I will try what you did and see if it works
Thank you so much for you help.
Now the real work begins.
up date:
I just did what you done and it work perfectly.
I am sure I will be back
Renny
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom