After completing the Codecademy flipboard tutorial, I decided to apply what I learned by putting together a .js file for a carousel. Following the instructions on the website, I created separate files named app.js, index.html, and style.css in one folder on my computer.
Despite carefully setting up the file paths and sources correctly, the carousel is not functioning as expected when I run it locally. Strangely, when I run the same code on Codecademy's platform, the carousel works perfectly fine. This inconsistency has left me puzzled about the code interactions between .js, .html, and .css files.
The main JavaScript function controlling the carousel behavior looks like this:
var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
// More JavaScript functions here...
}
$(document).ready(main);
index.html
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<!-- Header content here -->
</div>
</div>
<div class="slider">
<!-- Slider content here -->
</div>
<div class="slider-nav">
<!-- Navigation buttons here -->
</div>
<script src="jquery-1.11.1.min.js"></script>
<script src="app.js"></script>
</body>
</html>style.css
/* CSS styles go here */
.container {
width: 960px;
}
.header {
/* Header styles */
}
.menu {
/* Menu styles */
}
.slider {
/* Slider styles */
}