Merge pull request #355 from abhilipsasahoo03/master · AnIkeT126/30DaysOfJavaScript@f8c60b8 · GitHub
Skip to content

Commit f8c60b8

Browse files
swapnilsparshswapnilsparsh
authored
Merge pull request swapnilsparsh#355 from abhilipsasahoo03/master
Added Movie/TV Series Quote Generator
2 parents b1032d4 + 11f984b commit f8c60b8

5 files changed

Lines changed: 201 additions & 0 deletions

File tree

‎30DaysOfJavaScript/assets/68.png‎

196 KB
Loading

‎68 - Movie-TV Series-Quote-Generator/index.html‎

Lines changed: 50 additions & 0 deletions

‎68 - Movie-TV Series-Quote-Generator/script.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const getNextQuote = async() =>
2+
{
3+
var url = "https://raw.githubusercontent.com/msramalho/json-tv-quotes/master/quotes.json";
4+
const response = await fetch(url);
5+
const totalQuotes = await response.json();
6+
const index = Math.floor(Math.random()*totalQuotes.length);
7+
const quo=totalQuotes[index].quote;
8+
const auth=totalQuotes[index].author;
9+
const sour=totalQuotes[index].source;
10+
quote.innerHTML=""+quo;
11+
author.innerHTML="~ "+auth;
12+
source.innerHTML=""+sour;
13+
tweet.href="https://twitter.com/intent/tweet?text="+quo+" ~ "+auth+" | "+sour;
14+
whatsapp.href="whatsapp://send?text="+quo+" ~ "+auth+" | "+sour;
15+
}
16+
17+
getNextQuote();

‎68 - Movie-TV Series-Quote-Generator/style.css‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
min-height: 100vh;
12+
background-color: #19172e;
13+
font-family: "Garamond", serif;
14+
transition-timing-function: ease-in;
15+
transition: 0.7s;
16+
}
17+
18+
#quote {
19+
text-align: center;
20+
font-size: 40px;
21+
font-weight: bold;
22+
color: white;
23+
}
24+
25+
#author {
26+
margin: 10px;
27+
text-align: right;
28+
font-size: 25px;
29+
font-style: italic;
30+
font-family: "Garamond", serif;
31+
color: #19172e;
32+
}
33+
34+
#source {
35+
margin: 10px;
36+
text-align: right;
37+
font-size: 25px;
38+
font-weight: 700;
39+
font-family: "Garamond", serif;
40+
color: #19172e
41+
}
42+
43+
.container {
44+
display: flex;
45+
flex-direction: column;
46+
align-items: center;
47+
padding: 30px;
48+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
49+
border-radius: 15px;
50+
width: 600px;
51+
background-color: rgba(255, 255, 255, 0.3);
52+
margin: 10px;
53+
}
54+
55+
56+
.buttons {
57+
width: 100%;
58+
display: flex;
59+
justify-content: space-between;
60+
align-items: center;
61+
margin-top: 9px;
62+
63+
}
64+
65+
#tweet {
66+
border: solid rgb(102, 179, 255);
67+
border-radius: 4px;
68+
background-color: rgb(102, 179, 255);
69+
color: white;
70+
text-align: center;
71+
font-size: 1.8em;
72+
width: 60px;
73+
height: 35px;
74+
line-height: 40px;
75+
76+
}
77+
78+
#whatsapp {
79+
border: solid #25D366;
80+
border-radius: 4px;
81+
background-color: #25D366;
82+
color: white;
83+
text-align: center;
84+
font-size: 1.8em;
85+
width: 60px;
86+
height: 35px;
87+
line-height: 40px;
88+
89+
}
90+
91+
footer {
92+
93+
text-align: center;
94+
color: white;
95+
font-size: 1rem;
96+
position: absolute;
97+
bottom: 0px;
98+
padding: 5px;
99+
line-height: 3vh;
100+
font-family: "Roboto", sans-serif;
101+
}
102+
103+
.heading{
104+
font-family: "Roboto", sans-serif;
105+
color: white;
106+
font-size: 50px;
107+
position: absolute;
108+
top: 0;
109+
left: 0;
110+
right: 0;
111+
text-align: center;
112+
padding: 100px;
113+
line-height: 3vh;
114+
}
115+
116+
.container:hover {
117+
box-shadow: 0 10px 10px rgb(0, 0, 0);
118+
}
119+
120+
.next {
121+
font-size: 18px;
122+
border-radius: 5px;
123+
cursor: pointer;
124+
padding: 10px;
125+
margin-top: 5px;
126+
font-weight: bold;
127+
color: white;
128+
background-image: linear-gradient(to right bottom, rgb(230, 100, 0), #ffedbca8);
129+
}

‎index.html‎

Lines changed: 5 additions & 0 deletions

0 commit comments

Comments
 (0)