33< head >
44 < meta charset ="UTF-8 ">
55 < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6- < link rel ="stylesheet " href ="style.css ">
7- < title > Cat Generator</ title >
6+ < title > Motivational Quotes Generator</ title >
7+ < style >
8+ body {
9+ font-family : Arial, sans-serif;
10+ display : flex;
11+ flex-direction : column;
12+ align-items : center;
13+ justify-content : center;
14+ height : 100vh ;
15+ background-color : # f0f0f0 ;
16+ }
17+ # quote {
18+ margin : 20px ;
19+ font-size : 24px ;
20+ text-align : center;
21+ }
22+ # generate-btn {
23+ padding : 10px 20px ;
24+ font-size : 16px ;
25+ cursor : pointer;
26+ }
27+ </ style >
828</ head >
929< body >
10- < div class ="container ">
11- < h2 > CAT GENERATOR</ h2 >
12- < p > Click on the button below to start generating cats🐈</ p >
13- < button id ="cat-generator " onclick ="generateCat() "> Generate Cat</ button >
14- < div class ="flex-box " id ="flex-cat-gen ">
15-
16- </ div >
17- </ div >
1830
19- < script src ="script.js "> </ script >
31+ < div id ="quote "> Click the button to generate a motivational quote!</ div >
32+ < button id ="generate-btn "> Generate Quote</ button >
33+
34+ < script >
35+ function generateQuote ( ) {
36+ const quotes = [
37+ "The best time to plant a tree was 20 years ago. The second best time is now." ,
38+ "Your limitation—it's only your imagination." ,
39+ "Push yourself, because no one else is going to do it for you." ,
40+ "Great things never come from comfort zones." ,
41+ "Dream it. Wish it. Do it." ,
42+ "Success doesn’t just find you. You have to go out and get it." ,
43+ "The harder you work for something, the greater you’ll feel when you achieve it." ,
44+ "Dream bigger. Do bigger." ,
45+ "Don’t stop when you’re tired. Stop when you’re done." ,
46+ "Wake up with determination. Go to bed with satisfaction."
47+ ] ;
48+
49+ // Generate a random index to select a quote
50+ const randomIndex = Math . floor ( Math . random ( ) * quotes . length ) ;
51+ const quote = quotes [ randomIndex ] ;
52+
53+ // Display the selected quote
54+ document . getElementById ( 'quote' ) . innerText = quote ;
55+ }
56+
57+ // Add event listener to the button
58+ document . getElementById ( 'generate-btn' ) . addEventListener ( 'click' , generateQuote ) ;
59+ </ script >
60+
2061</ body >
21- </ html >
62+ </ html >
0 commit comments