Мой код работает на codepen, но не снаружи, используя код Visual Studio для создания моих файлов (которые: Quote.html, Quote.css, Quote.js все в одной папке).
Когда я открываю свой файл html в браузере, я получаю зеленый экран, поэтому файл css связывается правильно, а файл js - нет.
В зависимости от того, что япрочитал о Stackoverflow Я правильно помещаю файл js в сценарий, насколько я понимаю, но что-то я делаю неправильно.I
Код HTML-файла:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Quote.css">
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"></script>
<script src="Quote.js" type="text/javascript"></script>
</body>
</html>
//css file code:
body {background-color: green; color: white;}
#quote-box {
margin-top: 80px;
}
Код файла Javascript:
const quotes = [
{
quote: "Don't cry because it's over, smile because it happened.",
author: "Dr. Seuss"
},
{
quote: "You only live once, but if you do it right, once is enough.",
author: "Mae West"
},
{
quote: "Be yourself; everyone else is already taken.",
author: "Oscar Wilde"
},
{
quote:
"Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.",
author: "Albert Einstein"
},
{ quote: "So many books, so little time.", author: "Frank Zappa" },
{
quote: "A room without books is like a body without a soul.",
author: "Marcus Tullius Cicero"
},
{
quote:
"If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals.",
author: "J.K. Rowling"
}
];
class Presentational extends React.Component {
constructor(props) {
super(props);
this.state = {
quote: "If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals.", author: "J.K. Rowling"
}
this.newQuote = this.newQuote.bind(this);
this.sendTweet = this.sendTweet.bind(this);
}
newQuote() {
const randNumber = Math.floor(Math.random() * quotes.length);
this.setState({quote: quotes[randNumber].quote, author: quotes[randNumber].author})
}
sendTweet = () => {
const url = "twitter.com";
const text = this.state.quote.concat(" - ").concat(this.state.author);
window.open('http://twitter.com/share?url='+encodeURIComponent(url)+'&text='+encodeURIComponent(text), '', 'left=0,top=0,width=550,height=450,personalbar=0,toolbar=0,scrollbars=0,resizable=0');
}
render() {
return (
<div id="quote-box" class="container">
<div class="row">
<h1 class="col-md-3"></h1>
<h1 class="text-center col-md-6">Random Quotes:</h1>
<h1 class="col-md-3"></h1>
</div>
<div class="row">
<p class="col-md-3"></p>
<blockquote class="col-md-6">
<p id="text"><i class="fa fa-quote-left"></i> {this.state.quote} <i class="fa fa-quote-right"></i></p>
<cite id="author">-- {this.state.author}</cite>
</blockquote>
<p class="col-md-3"></p>
</div>
<div class="row">
<p class="col-md-3"></p>
<button id="new-quote" class="btn btn-default col-md-1" onClick={this.newQuote}>New Quote</button>
<p class="col-md-3"></p>
<a id="tweet-quote" onClick={this.sendTweet} class="text-right"><button class="btn btn-default col-md-2">Tweet Quote <i class="fa fa-twitter"></i></button></a>
<p class="col-md-3"></p>
</div>
</div>
);
}
};
ReactDOM.render(<Presentational />, document.getElementById("app"));
Это ссылка Codepen на то, что должно отображаться: https://codepen.io/EOJA/pen/MRNoBq