I already added the html tags for where my image would go when I clicked on the random button generator. Here is the link to the rest of my code:https://codepen.io/noblegas/pen/bGbPJGV?fbclid=IwAR306VPNKvbRFshCEdY2DLlcsZEIycXWB_NUKtEWqijkTMUu1X0A54Ori5E
To reiterate, I want it so each time I click on the button for a random quote, a picture of the author who wrote that quote would also appear. For those who already clicked on the codepen link to my code, should I added an image key value to my quotes arrays? '
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- main css -->
<link rel="stylesheet" href="css/main.css">
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
<!-- font awesome -->
<script src="js/all.js"></script>
<title>Display Quotes</title>
<style>
.max-height {
min-height: 100vh;
}
body {
background: #b09e99;
}
.quote-container {
background: rgba(255, 255, 255, 0.5);
}
#generate-btn {
color: white !important;
background: #64b6ac !important;
border-color: #64b6ac !important;
cursor: pointer;
font-size: 1.5rem;
padding: 0.5rem 1rem;
}
#generate-btn:hover {
background: #b09e99 !important;
border-color: #b09e99 !important;
color: #333333 !important;
}
.author {
color: #64b6ac;
}
</style>
</head>
<body>
<div class="container">
<div class="row max-height align-items-center">
<div class="col-11 mx-auto col-md-6 quote-container p-5">
<button class="btn-outline-primary text-capitalize my-4 d-block mx-auto" id="generate-btn">generate quote</button>
<h3 class="text-muted">
<span class="quote-icon mr-3">
<i class="fas fa-quote-left fa-3x"></i>
<span id="quote">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos quasi ad aliquid? Iusto cumque maiores atque, enim eos autem quasi.</span>
</span>
</h3>
<h5 class="text-right text-capitalize author">
<span class="quote-author ml-3">
author
</span>
</h5>
<span class="quote-image-l3">
<img src="" class="img-fluid" alt="">
where image will go
</span>
</div>
</div>
</div>
<!-- jquery -->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- bootstrap js -->
<script src="js/bootstrap.bundle.min.js"></script>
<!-- script js -->
<script src="js/app.js">
//immediate invoked function expression
//immediate invoked function expression
(function(){
const quotes=[
{
quote:"It is, in fact, nothing short of a miracle that the modern methods of education have not yet entirely strangled the holy curiosity of inquiry; for this delicate plant, aside from stimulation, stands mainly in need of freedom; without this it goes to wrack and ruin without fail. It is a very grave mistake to think that the enjoyment of seeing and searching can be promoted by means of coercion and a sense of duty.",
author: "Albert Einstein",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote:"Knowledge that is acquired under compulsion obtains no hold on the mind.",
author: "Plato",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"},
{
quote:"Reward and punishment is the lowest form of education.",
author: "Chuang Tzu",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},
{
quote:"Education consists mainly in what we have unlearned.",
author: "Mark Twain",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote:"I have nevere let my schooling interfere with my education",
author: "Mark Twain",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},
{
quote:"The whole theory of modern education is radically unsound. Fortunately in England, at any rate, education produces no effect whatsoever. If it did, it would prove a serious danger to the upper classes, and probably lead to acts of violence.",
author: "Oscar Wilde",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"Education is an admirable thing, but it is well to remember from time to time that nothing that is worth knowing can be taught.",
author: "Oscar Wilde",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"I loathed every day and regret every moment I spent in a school..",
author: "Wood Allen",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"I hated school. Even to this day, when I see a school bus it's just depressing to me. The poor little kids.",
author: "Dolly Parton",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"There is nothing on earth intended for innocent people so horrible as a school.",
author: "George Bernard Shaw",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"What we call education and culture is for the most part nothing but the substitution of reading for experience, of literature for life, of the obsolete fictitious for the contemporary real.",
author: "George Bernard Shaw",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"What does education often do? It makes a straight-cut ditch of a free, meandering brook.",
author: "Henry David Thoreau",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"How could youths better learn to live than by at once trying the experiment of living?",
author: "Henry David Thoreau",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"Men are born ignorant, not stupid; they are made stupid by education.",
author: "Bertrand Russell",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"Education is one of the chief obstacles to intelligence and freedom of thought.",
author: "Bertrand Russell",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"He was so learned that he could name a horse in nine languages; so ignorant that he bought a cow to ride on.",
author: "Benjamin Franklin",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"The average schoolmaster is and always must be essentially an ass, for how can one imagine an intelligent man engaging in so puerile an avocation.",
author: "H.L. Mencken",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"Education is a weapon, whose effect depends on who holds it in his hands and at whom it is aimed.",
author: "Josef Stalin",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"The vanity of teaching doth oft tempt a man to forget that he is a blockhead..",
author: "George Savile",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"Education is a state-controlled manufactory of echoes.",
author: "Norman Douglas",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"The best education consists in immunizing people against systematic attempts at education.",
author: "Paul Karl Feyerabend",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"A man who has never gone to school may steal from a freight car; but if he has a university education, he may steal the whole railroad.",
author: "Theo Roosevelt",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"But, good gracious, you've got to educate him first. You can't expect a boy to be vicious till he's been to a good school.",
author: "H.H. Munro",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"Education is hanging around until you've caught on.",
author: "Robert Frost",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"Education is the period during which you are being instructed by somebody you do not know, about something you do not want to know.",
author: "Gilbert K Chesterton",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"I wonder whether if I had an education I should have been more or less a fool than I am.",
author: "Alice James",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"I pay the schoolmaster, but it is the schoolboys who educate my son.",
author: "Ralph Waldo Emerson",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"Thank goodness I was never sent to school; it would have rubbed off some of the originality..",
author: "Helen Beatrix Potter",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"My grandmother wanted me to have an education, so she kept me out of school.",
author: "Margaret Mead",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"Anyone who has passed through the regular gradations of a classical education, and is not made a fool by it, may consider himself as having had a very narrow escape.",
author: "William Hazlitt",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"Education is a method whereby one acquires a higher grade of prejudices.",
author: "Laurence J Peter",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"I am beginning to suspect all elaborate and special systems of education. They seem to me to be built up on the supposition that every child is a kind of idiot who must be taught to think.",
author: "Anne Sullivan",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},
{quote:"Drop out of school before your mind rots from exposure to our mediocre educational system. Forget about the Senior Prom and go to the library and educate yourself if you've got any guts. Some of you like Pep rallies and plastic robots who tell you what to read.”",
author:"Frank Zappa",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}
];
const btn =document.getElementById('generate-btn');
btn.addEventListener('click',function(){
let random=Math.floor(Math.random()*quotes.length);
console.log(random);
document.getElementById('quote').textContent=quotes[random].quote;
document.querySelector('.author').textContent=quotes[random].author;
document.querySelector('.quote-image-13').textContent=quotes[random].imageurl;
});
})();
</script>
</body>
</html>
