چگونه با جاوااسکریپت(generate randome quote) بسازیم؟

یه همچین چیزی که با زدن رکمه جنریت برامون گوت درست کنه

html

<div id=&quotconteaner&quot>
<h1> GENERATE RANDOM QUOTE </h1>
<button id=&quotgenerate&quot>Generate quote</button>
<div id=&quottextplace&quot></div>
</div>

css

h1{
background-color: #33d30b;
box-shadow: inset -1px -3px 3px;
border-radius: 4px;
}
#conteaner{
display: flex;
flex-direction: column;
align-content: space-around;
align-items: center;
justify-content: center;
}
#generate{
background-color: aqua;
padding: 17px;
font-size:x-large ;
border: none;
box-shadow: inset -3px -2px 3px;
border-radius: 11px;
}
#textplace{
background-color: #b79898;
margin-top: 10px;
text-align: center;
font-size: 25px;
box-shadow: inset -2px -3px 3px;

font-size: x-large;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 19px;

}
span{
background-color: #b79898;
margin: -28px;
padding: 6px;
position: absolute;
top: 64%;

box-shadow: inset -1px -2px 3px;
border-radius: 12px;
}

js

const quotes=[
{
id:1,
quote:&quotThe greatest glory in living lies not in never falling, but in rising every 
time we fall.&quot,
who:&quot -Nelson Mandela&quot
},
{
id:2,
quote:&quotThe way to get started is to quit talking and begin doing.&quot,

who:&quot -Walt Disney&quot},
{id:3,
quote:&quotThe future belongs to those who believe in the beauty of their dreams. &quot,
who:&quot --Eleanor Roosevelt&quot
},{
id:4,
quote: &quotSpread love everywhere you go. Let no one ever come to you 
without leaving happier.&quot,
who:&quot  -Mother Teresa&quot
},
{
id:5,
quote:&quotI never dreamed about success, I worked for it.&quot ,
who:&quot -Estee Lauder&quot
},
{
id:6,

quote:&quotSuccess seems to be connected with action. Successful people keep moving. They make mistakes but they don't quit.&quot ,
who:&quot -Conrad Hilton&quot

},
{
id:7,
quote: &quotThere are no secrets to success. It is the result of preparation, hard
 work, and learning from failure.&quot,
who:&quot -Colin Powell&quot
},
]
const generate=document.getElementById(&quotgenerate&quot)

generate.addEventListener(&quotclick&quot,e=>{
const random=Math.floor(Math.random()*7)+1
const textplace=document.getElementById(&quottextplace&quot)
textplace.style.padding=&quot79px&quot

const filterbyrandom= quotes.filter((w)=>{

return w.id==random
})
filterbyrandom.forEach(e => {
const textplace=document.getElementById(&quottextplace&quot)
textplace=`&quot${e.quote}&quot<br> <span>${e.who}</span>`
});
})

لینک دانلود فایل کد ها