i was working in ‘quote machine’ project…and it is working fine in codepen.io but, while copied the same code and pasted it in Brackets editor my code is not working anymore…
html and css are working fine but when it comes to javascript it is not working and the jquery animation is also not working… i included jquery library and linked javascript with HTML…checked twice… nothing is happening…
any solution?
Can you post your code so far?
HTML
<head>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Encode+Sans+Expanded" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="javascript.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<h1>My Quote Machin</h1>
</div>
<div id="quote">
<h1>"I shall not waste my days in trying to prolong them."</h1>
<!-- <i class="fa fa-twitter" aria-hidden="true" style="font-size: 30px; color: blue; margin: 10px;"></i> -->
</div>
<div id="press">
<button class="btn btn-lg">Quote</button>
</div>
</body>
JS
var quotes = [
'The Way Get Started Is To Quit Talking And Begin Doing.',
'The Pessimist Sees Difficulty In Every Opportunity. The Optimist Sees Opportunity In Every Difficulty.',
'Don\'t Let Yesterday Take Up Too Much Of Today.',
'You Learn More From Failure Than From Success. Don\'t Let It Stop You. Failure Builds Character.',
'It\'s Not Whether You Get Knocked Down, It\'s Whether You Get Up.',
'If You Are Working On Something That You Really Care About, You Don\'t Have To Be Pushed. The Vision Pulls You.',
'People Who Are Crazy Enough To Think They Can Change The World, Are The Ones Who Do',
'Failure Will Never Overtake Me If My Determination To Succeed Is Strong Enough.',
'Entrepreneurs Are Great At Dealing With Uncertainty And Also Very Good At Minimizing Risk. That\'s The Classic Entrepreneur',
'We May Encounter Many Defeats But We Must Not Be Defeated',
'Knowing Is Not Enough; We Must Apply. Wishing Is Not Enough; We Must Do', 'Imagine Your Life Is Perfect In Every Respect; What Would It Look Like?'
];
function makeId() {
var randomNumber = Math.floor(Math.random() * quotes.length);
$("#quote > h1").html(quotes[randomNumber]);
}
$("#press > button").click(function () {
$("#quote > h1").fadeOut('slow', function () {
makeId();
$(this).fadeIn('slow');
});
});
CSS
body {
margin: 0;
padding: 0;
background-color: #37474F;
background-image: url("https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=1500&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D");
background-size: cover;
background-repeat: no-repeat;
}
#header {
font-family: 'Lobster', cursive;
color: white;
text-align: center;
letter-spacing: 3px;
word-spacing: 4px;
border-bottom: solid 4px red;
margin: 0px 200px;
padding: 5px 40px;
}
#header h1 {
font-size: 60px;
}
#quote {
background-color: #cc3914;
opacity: 0.9;
width: 60%;
height: 200px;
border: 2px solid white;
border-radius: 10px;
font-family: 'Encode Sans Expanded', sans-serif;
font-size: 30px;
margin: auto;
margin-top: 20px;
padding: 35px;
text-align: center;
color: white;
word-spacing: 5px;
}
#quote h1 {
font-size: 30px;
}
#press {
text-align: center;
margin: 10px 100px;
//background-color: pink;
height: 50px;
}
.btn {
background-color: orange;
width: 20%;
height: 40px;
color: purple;
border-radius: 10px;
font-size: 20px;
}
.btn:hover {
background-color: darkorchid;
color: white;
letter-spacing: 2px;
box-shadow: 5px 5px 3px grey;
}
/*#main {
font-family: 'Encode Sans Expanded', sans-serif;
font-size: 25px;
margin: 0px 50px;
padding: 35px;
text-align: center;
color: white;
//overflow: auto;
background-color: skyblue;
}*/
Do you get any errors or warnings on your console?
My guess is that it’s because you are loading javascript.js before the contents of the <body> are loaded into the browser (so the code is referencing elements that aren’t there yet). Try moving the <script src="javascript"> line right before the closing </body> tag.
Or you can wrap the event handler in $(document).ready().
$(document).ready(function() {
$('#press > button').click(...);
});
Tip. Codepen has an Export button which allows you to download the whole pen as a zip file.
ok it worked but getting these errors where is says ‘’$" is not defined … all 5 lines same error…but the code runs fine
That’s because JQuery is not loaded (properly). Add this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> to your header.
Like @kevcomedia mentioned, you need to put your scripts at the bottom of your body not the header, make sure you put your jquery down there, and make sure you have your jQuery script above your javascript.js.
OP said their code is working. Maybe the errors they’re seeing are errors reported by a linter? I’m not sure
