Skip to content

Commit fa1be6a

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #480 from Nityasaha13/main
Added AI Quote Generator App
2 parents 8cf501d + 430d504 commit fa1be6a

File tree

9 files changed

+747
-3
lines changed

9 files changed

+747
-3
lines changed

‎AI Quote Generator/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>AI Quotes Generator</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<header>
11+
<h1>AI Quotes Generator</h1>
12+
</header>
13+
<div class="container">
14+
<div id="quoteContainer">
15+
<p id="quoteText"></p>
16+
</div>
17+
<button id="getQuoteBtn" style="background-color: 3498db;">Get Quote</button>
18+
</div>
19+
<script src="script.js"></script>
20+
</body>
21+
</html>

‎AI Quote Generator/script.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
const getQuoteBtn = document.getElementById("getQuoteBtn");
2+
const quoteText = document.getElementById("quoteText");
3+
4+
getQuoteBtn.addEventListener("click", () => {
5+
getQuoteBtn.classList.add("loading");
6+
getQuoteBtn.textContent = "Loading...";
7+
getQuote();
8+
});
9+
10+
// Initially, remove loading state
11+
getQuoteBtn.classList.remove("loading");
12+
getQuoteBtn.textContent = "Get Quote";
13+
14+
function getQuote() {
15+
fetch("https://api.quotable.io/random")
16+
.then((response) => response.json())
17+
.then((data) => {
18+
quoteText.innerHTML = `"${data.content}" - ${data.author}`;
19+
getQuoteBtn.classList.remove("loading");
20+
getQuoteBtn.textContent = "Get Quote";
21+
})
22+
.catch((error) => {
23+
console.error("Error fetching quote:", error);
24+
quoteText.innerHTML = "Failed to fetch a quote. Please try again later.";
25+
getQuoteBtn.classList.remove("loading");
26+
getQuoteBtn.textContent = "Get Quote";
27+
});
28+
}

‎AI Quote Generator/styles.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background-color: #3498db;
4+
margin: 0;
5+
padding: 0;
6+
display: flex;
7+
flex-direction: column;
8+
align-items: center;
9+
justify-content: flex-start; /* Adjusted to align header at the top */
10+
height: 100vh;
11+
}
12+
13+
header {
14+
background-color: #2c3e50;
15+
color: #ecf0f1;
16+
text-align: center;
17+
padding: 10px;
18+
width: 100%;
19+
}
20+
21+
.container {
22+
text-align: center;
23+
background-color: #fff;
24+
padding: 20px;
25+
margin-left: 2%;
26+
margin-right: 2%;
27+
border-radius: 5px;
28+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
29+
}
30+
31+
button {
32+
padding: 10px 20px;
33+
font-size: 18px;
34+
cursor: pointer; /* Set default cursor to pointer */
35+
background-color: #3498db; /* Default background color */
36+
color: #fff;
37+
border: none;
38+
border-radius: 5px;
39+
transition: background-color 0.3s, transform 0.3s, filter 0.3s;
40+
}
41+
42+
button.loading {
43+
background-color: #ddd;
44+
cursor: not-allowed;
45+
}
46+
47+
button:hover {
48+
background-color: #2980b9;
49+
transform: scale(1.05); /* Zoom in effect on hover */
50+
filter: brightness(0.9); /* Darken the button on hover */
51+
}
52+
53+
#quoteContainer {
54+
margin-top: 20px;
55+
font-size: 20px;
56+
}

‎Single Window Portfolio/css/style.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/* Animation */
2+
3+
@import url('https://fonts.googleapis.com/css?family=Roboto');
4+
* {
5+
-webkit-box-sizing: border-box;
6+
-moz-box-sizing: border-box;
7+
box-sizing: border-box;
8+
}
9+
10+
html,
11+
body {
12+
width: 100%;
13+
height: 100%;
14+
overflow: hidden;
15+
}
16+
17+
body {
18+
background: #003b59;
19+
font-family: 'Montserrat', sans-serif;
20+
color: #fff;
21+
line-height: 1.3;
22+
-webkit-font-smoothing: antialiased;
23+
}
24+
25+
#animations {
26+
width: 100%;
27+
height: 100%;
28+
overflow: hidden;
29+
}
30+
31+
#main_body {
32+
position: absolute;
33+
left: 0;
34+
top: 50%;
35+
padding: 0;
36+
width: 100%;
37+
text-align: center;
38+
}
39+
40+
.body_class img {
41+
width: 10vw;
42+
border-radius: 50%;
43+
}
44+
45+
.body_class a {
46+
font-size: 1.3rem;
47+
padding: 10px;
48+
}
49+
50+
.body_class a:hover {
51+
font-size: 1.2rem;
52+
color: white;
53+
cursor: pointer;
54+
transition: 0.4s;
55+
}
56+
57+
58+
/* Responsiveness via screen widths */
59+
60+
@media screen and (max-width: 768px) {
61+
.body_class img {
62+
width: 30%;
63+
border-radius: 50%;
64+
}
65+
.body_class a {
66+
font-size: 1.3rem;
67+
padding: 0px;
68+
}
69+
}
70+
71+
@media screen and (max-width: 1024px) {
72+
.body_class img {
73+
width: 25%;
74+
border-radius: 50%;
75+
}
76+
.body_class a {
77+
font-size: 1.3rem;
78+
padding: 4px;
79+
}
80+
}

‎Single Window Portfolio/images/ng.png‎

441 KB
Loading

‎Single Window Portfolio/index.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="no-js">
3+
4+
<head>
5+
<title>Nitya Saha</title>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
9+
<link rel="stylesheet" href="css/style.css">
10+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" crossorigin="anonymous">
11+
<script type="text/javascript" src="js/index.js"></script>
12+
<script type="text/javascript" src="js/main_animation.js"></script>
13+
</head>
14+
15+
<body>
16+
<div id="animations">
17+
<div id="main_body" class="body_class">
18+
<img src="images/ng.png" alt="Profile pic">
19+
<h1 style="font-family: 'Roboto', sans-serif; font-style: initial;">Nitya Gopal Saha</h1>
20+
<h2 class="desc" style="font-weight: 10; font-size: 20px;">
21+
I'm a
22+
<span class="text-switcher" style="font-style: initial; font-size: 22px;" data-hold-time="1000"
23+
data-switch-content='[ "Web Developer.", "WordPress Developer.","Content Creator.", "Blogger.", "Tech Enthusiast."]'></span>
24+
</h2>
25+
<hr style="width: 50%; background-color: #1D2951; border-color: #1D2951;">
26+
<a href="https://www.instagram.com/newzimo/" style="color: white;"><i class="fab fa-instagram"
27+
style="font-size: 2em;"></i></a>
28+
<a href="https://github.com/Nityasaha13" style="color: white;"><i class="fab fa-github"
29+
style="font-size: 2em;"></i></a>
30+
<a href="https://www.linkedin.com/in/nitya-gopal-saha-a668b024b/" style="color: white;"><i
31+
class="fab fa-linkedin" style="font-size: 2em;"></i></a>
32+
</div>
33+
</div>
34+
</body>
35+
36+
</html>

‎Single Window Portfolio/js/index.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/* JS code used to start the animation */
2+
document.addEventListener('DOMContentLoaded', function() {
3+
particleground(document.getElementById('animations'), {
4+
dotColor: '#5cbdaa',
5+
lineColor: '#5cbdaa'
6+
});
7+
var intro = document.getElementById('main_body');
8+
intro.style.marginTop = -intro.offsetHeight / 2 + 'px';
9+
}, false);
10+
11+
/* JS code used for text switcher */
12+
var textSwitcher = function(el, toRotate, period) {
13+
this.toRotate = toRotate;
14+
this.el = el;
15+
this.loopNum = 0;
16+
this.period = parseInt(period, 10) || 2000;
17+
this.txt = "";
18+
this.tick();
19+
this.isDeleting = false;
20+
};
21+
22+
textSwitcher.prototype.tick = function() {
23+
var i = this.loopNum % this.toRotate.length;
24+
var fullTxt = this.toRotate[i];
25+
26+
if (this.isDeleting) {
27+
this.txt = fullTxt.substring(0, this.txt.length - 1);
28+
} else {
29+
this.txt = fullTxt.substring(0, this.txt.length + 1);
30+
}
31+
32+
this.el.innerHTML = '<span class="wrap">' + this.txt + "</span>";
33+
34+
var that = this;
35+
var delta = 200 - Math.random() * 100;
36+
37+
if (this.isDeleting) {
38+
delta /= 2;
39+
}
40+
41+
if (!this.isDeleting && this.txt === fullTxt) {
42+
delta = this.period;
43+
this.isDeleting = true;
44+
} else if (this.isDeleting && this.txt === "") {
45+
this.isDeleting = false;
46+
this.loopNum++;
47+
delta = 500;
48+
}
49+
50+
setTimeout(function() {
51+
that.tick();
52+
}, delta);
53+
};
54+
55+
window.onload = function() {
56+
var elements = document.getElementsByClassName("text-switcher");
57+
for (var i = 0; i < elements.length; i++) {
58+
var toRotate = elements[i].getAttribute("data-switch-content");
59+
var period = elements[i].getAttribute("data-hold-time");
60+
if (toRotate) {
61+
new textSwitcher(elements[i], JSON.parse(toRotate), period);
62+
}
63+
}
64+
// INJECT CSS
65+
var css = document.createElement("style");
66+
css.type = "text/css";
67+
css.innerHTML = ".text-switcher > .wrap { border-right: 0.08em solid #666 }";
68+
document.body.appendChild(css);
69+
};
70+
71+
document.querySelectorAll('nav a').forEach(anchor => {
72+
anchor.addEventListener('click', function(e) {
73+
e.preventDefault();
74+
const targetId = this.getAttribute('href').substring(1);
75+
const targetSection = document.getElementById(targetId);
76+
if (targetSection) {
77+
window.scrollTo({
78+
top: targetSection.offsetTop,
79+
behavior: 'smooth'
80+
});
81+
}
82+
});
83+
});

0 commit comments

Comments
 (0)