Why does code work in "codepen" but not in "vscode"?

Question

1.00/5 (2 votes)

See more:

Ive made a carousel that rotates in CodePen but will not rotate in VSCode. The attribute that makes it rotate is the one that says "data-ride="carousel" In other words if you take that attribute out it won't work.

I'm hoping that someone could tell me why this is not working in VS Code.

Here is the HTML

HTML

<!doctype html>
<html lang="en">
  <head>
    
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
   <link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
    <link rel="stylesheet" href="CSS/Index.css">
   
    

    <title>Ristorante Con Fusion: Home</title>

</head>

<body class="row-centered column-centered">





<div class="d-flex justify-content-center">
<div class="container d-none d-sm-block" style="margin: 60px 0 40px 0">
    <div class="row row-content">
        <div class="col">
            <div id="mycarousel" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner" role="listbox">
                    <div class="carousel-item active">
                        <img class="d-block img-fluid" src="images/uthappizza.png" alt="Uthappizza">
                        <div class="carousel-caption d-none d-sm-block">
                            <h2> Uthappizza <span class="badge badge-danger">HOT</span> <span class="badge badge-pill badge-default">$4.99</span></h2>
                            <p class="d-none d-sm-block" >A unique combination of Indian Uthappam (pancake) and
                                Italian pizza, topped with Cerignola olives, ripe vine
                                cherry tomatoes, Vidalia onion, Guntur chillies and
                                Buffalo Paneer.</p>

                    </div> 
                    </div>   
                    <div class="carousel-item">
                        <img class="d-block img-fluid" src="images/buffet.png" alt="buffet">
                        <div class="carousel-caption d-none d-sm-block">
                            <h2>Weekend Grand Buffet  <span class="badge badge-danger">New</span></h2>
                            <p class="d-none d-sm-block"> Featuring mouthwatering combinations with a choice
                                of live different salads, six enticing appetizers, six main entrees and five
                                choicest desserts. Free flowing bubbly and soft drinks. All for just
                                $19.99 per person.
                            </p>
                        
                    </div>
                    </div>
                    <div class="carousel-item">
                        <img class="d-block img-fluid" src="images/alberto.png" alt="alberto">
                        <div class="carousel-caption d-none d-sm-block">
                            <h2>Alberto Somayya</h2>
                            <h4>Executive Chef</h4>
                            <p class="d-none d-sm-block">Award winning three-star Michelin chef with wide
                                International experience having worked closely with
                                whos-who in the culinary world, he specializes in
                                creating mouthwatering Indo-Italian fusion experiences.
                            </p>
                    </div>
                    </div>
                </div>   
                                    <ol class="carousel-indicators">
                                        <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
                                        <li data-target="#mycarousel" data-slide-to="1"></li>
                                        <li data-target="#mycarousel" data-slide-to="2"></li>
                                    </ol>
                                    <a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
                                        <span class="carousel-control-prev-icon"></span>
                                    </a>
                                    <a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
                                        <span class="carousel-control-next-icon"></span>
                                    </a>
                                                    <div class="btn-group" id="carouselButton">
                                                        <button class="btn btn-danger btn-sm" id="carousel-pause">
                                                            <span class="fa fa-pause"></span>
                                                        </button>
                                                        <button class="btn btn-primary btn-sm" id="carousel-play">
                                                            <span class="fa fa-play"></span>
                                                        </button>
                                                    </div>

            </div>
        </div>
    </div>
</div>
</div>



<script src="JS/home.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="JS/home.js"></script>

  

</body>

</html>

Here is the CSS:

<pre lang="CSS">



.carousel {
    background:#512DA8;
}

.carousel-item {
  height: 300px;
 
}

.carousel-item img {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 300px;
}

.carousel-caption {

    background-color:rgba(0,0,0,.3);
    padding: 20px 20px 0 20px;
    position:absolute;
    right:60px;
    left:35%;
    top:30px;
    height: 250px;
    width: 60%;
    z-index: 0;

}


#carouselButton {
    right:10px;
    position: absolute;
    bottom: 10px;
    z-index: .8;
}

What I have tried:

As I said, I inputted the code into CodePen and it worked.

Posted 17-Nov-19 3:31am

mattkrebs

Add a Solution

Comments

Dave Kreskowiak 17-Nov-19 18:36pm

The IDE doesn't matter at all and doesn't affect if the code runs or not. Whether or not it works is entirely up the browser and your dev server setup.

Now, how the IDE interacts with and publishes your code to your web server may configured wrong, but there is no way we can possibly tell you what that is with the information you've provided.

DerekT-P 19-Nov-19 7:46am

Why are you referencing JSHome.js twice? And what does it do? We can't know what's in there and it may be the reason for the different behaviour. Is javascript throwing an error? Have you tried debugging it in (e.g.) Chrome's developer tools? When you say it won't work "in VSCode"... VSCode is a development environment / editor - what browser are you actually running the code in?

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)