Merge pull request #480 from Nityasaha13/main

Added AI Quote Generator App
Ayushparikh-code · Sep 17, 2024 · fa1be6a · fa1be6a
2 parents 8cf501d + 430d504
commit fa1be6a
Show file tree

Hide file tree

Showing 9 changed files with 747 additions and 3 deletions.
diff --git a/AI Quote Generator/index.html b/AI Quote Generator/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Quotes Generator</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <header>
+        <h1>AI Quotes Generator</h1>
+    </header>
+    <div class="container">
+        <div id="quoteContainer">
+            <p id="quoteText"></p>
+        </div>
+        <button id="getQuoteBtn" style="background-color: 3498db;">Get Quote</button>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/AI Quote Generator/script.js b/AI Quote Generator/script.js
@@ -0,0 +1,28 @@
+const getQuoteBtn = document.getElementById("getQuoteBtn");
+const quoteText = document.getElementById("quoteText");
+
+getQuoteBtn.addEventListener("click", () => {
+    getQuoteBtn.classList.add("loading");
+    getQuoteBtn.textContent = "Loading...";
+    getQuote();
+});
+
+// Initially, remove loading state
+getQuoteBtn.classList.remove("loading");
+getQuoteBtn.textContent = "Get Quote";
+
+function getQuote() {
+    fetch("https://api.quotable.io/random")
+        .then((response) => response.json())
+        .then((data) => {
+            quoteText.innerHTML = `"${data.content}" - ${data.author}`;
+            getQuoteBtn.classList.remove("loading");
+            getQuoteBtn.textContent = "Get Quote";
+        })
+        .catch((error) => {
+            console.error("Error fetching quote:", error);
+            quoteText.innerHTML = "Failed to fetch a quote. Please try again later.";
+            getQuoteBtn.classList.remove("loading");
+            getQuoteBtn.textContent = "Get Quote";
+        });
+}
diff --git a/AI Quote Generator/styles.css b/AI Quote Generator/styles.css
@@ -0,0 +1,56 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #3498db;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start; /* Adjusted to align header at the top */
+    height: 100vh;
+}
+
+header {
+    background-color: #2c3e50;
+    color: #ecf0f1;
+    text-align: center;
+    padding: 10px;
+    width: 100%;
+}
+
+.container {
+    text-align: center;
+    background-color: #fff;
+    padding: 20px;
+    margin-left: 2%;
+    margin-right: 2%;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 18px;
+    cursor: pointer; /* Set default cursor to pointer */
+    background-color: #3498db; /* Default background color */
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    transition: background-color 0.3s, transform 0.3s, filter 0.3s;
+}
+
+button.loading {
+    background-color: #ddd;
+    cursor: not-allowed;
+}
+
+button:hover {
+    background-color: #2980b9;
+    transform: scale(1.05); /* Zoom in effect on hover */
+    filter: brightness(0.9); /* Darken the button on hover */
+}
+
+#quoteContainer {
+    margin-top: 20px;
+    font-size: 20px;
+}
diff --git a/Single Window Portfolio/css/style.css b/Single Window Portfolio/css/style.css
@@ -0,0 +1,80 @@
+/* Animation */
+
+@import url('https://fonts.googleapis.com/css?family=Roboto');
+* {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+body {
+    background: #003b59;
+    font-family: 'Montserrat', sans-serif;
+    color: #fff;
+    line-height: 1.3;
+    -webkit-font-smoothing: antialiased;
+}
+
+#animations {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+#main_body {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    padding: 0;
+    width: 100%;
+    text-align: center;
+}
+
+.body_class img {
+    width: 10vw;
+    border-radius: 50%;
+}
+
+.body_class a {
+    font-size: 1.3rem;
+    padding: 10px;
+}
+
+.body_class a:hover {
+    font-size: 1.2rem;
+    color: white;
+    cursor: pointer;
+    transition: 0.4s;
+}
+
+
+/* Responsiveness via screen widths */
+
+@media screen and (max-width: 768px) {
+    .body_class img {
+        width: 30%;
+        border-radius: 50%;
+    }
+    .body_class a {
+        font-size: 1.3rem;
+        padding: 0px;
+    }
+}
+
+@media screen and (max-width: 1024px) {
+    .body_class img {
+        width: 25%;
+        border-radius: 50%;
+    }
+    .body_class a {
+        font-size: 1.3rem;
+        padding: 4px;
+    }
+}
diff --git a/Single Window Portfolio/images/ng.png b/Single Window Portfolio/images/ng.png
diff --git a/Single Window Portfolio/index.html b/Single Window Portfolio/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en" class="no-js">
+
+<head>
+    <title>Nitya Saha</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" crossorigin="anonymous">
+    <script type="text/javascript" src="js/index.js"></script>
+    <script type="text/javascript" src="js/main_animation.js"></script>
+</head>
+
+<body>
+    <div id="animations">
+        <div id="main_body" class="body_class">
+            <img src="images/ng.png" alt="Profile pic">
+            <h1 style="font-family: 'Roboto', sans-serif; font-style: initial;">Nitya Gopal Saha</h1>
+            <h2 class="desc" style="font-weight: 10; font-size: 20px;">
+                I'm a
+                <span class="text-switcher" style="font-style: initial; font-size: 22px;" data-hold-time="1000"
+                    data-switch-content='[ "Web Developer.", "WordPress Developer.","Content Creator.", "Blogger.", "Tech Enthusiast."]'></span>
+            </h2>
+            <hr style="width: 50%; background-color: #1D2951; border-color: #1D2951;">
+            <a href="https://www.instagram.com/newzimo/" style="color: white;"><i class="fab fa-instagram"
+                    style="font-size: 2em;"></i></a>
+            <a href="https://github.com/Nityasaha13" style="color: white;"><i class="fab fa-github"
+                    style="font-size: 2em;"></i></a>
+            <a href="https://www.linkedin.com/in/nitya-gopal-saha-a668b024b/" style="color: white;"><i
+                    class="fab fa-linkedin" style="font-size: 2em;"></i></a>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/Single Window Portfolio/js/index.js b/Single Window Portfolio/js/index.js
@@ -0,0 +1,83 @@
+/* JS code used to start the animation */
+document.addEventListener('DOMContentLoaded', function() {
+    particleground(document.getElementById('animations'), {
+        dotColor: '#5cbdaa',
+        lineColor: '#5cbdaa'
+    });
+    var intro = document.getElementById('main_body');
+    intro.style.marginTop = -intro.offsetHeight / 2 + 'px';
+}, false);
+
+/* JS code used for text switcher */
+var textSwitcher = function(el, toRotate, period) {
+    this.toRotate = toRotate;
+    this.el = el;
+    this.loopNum = 0;
+    this.period = parseInt(period, 10) || 2000;
+    this.txt = "";
+    this.tick();
+    this.isDeleting = false;
+};
+
+textSwitcher.prototype.tick = function() {
+    var i = this.loopNum % this.toRotate.length;
+    var fullTxt = this.toRotate[i];
+
+    if (this.isDeleting) {
+        this.txt = fullTxt.substring(0, this.txt.length - 1);
+    } else {
+        this.txt = fullTxt.substring(0, this.txt.length + 1);
+    }
+
+    this.el.innerHTML = '<span class="wrap">' + this.txt + "</span>";
+
+    var that = this;
+    var delta = 200 - Math.random() * 100;
+
+    if (this.isDeleting) {
+        delta /= 2;
+    }
+
+    if (!this.isDeleting && this.txt === fullTxt) {
+        delta = this.period;
+        this.isDeleting = true;
+    } else if (this.isDeleting && this.txt === "") {
+        this.isDeleting = false;
+        this.loopNum++;
+        delta = 500;
+    }
+
+    setTimeout(function() {
+        that.tick();
+    }, delta);
+};
+
+window.onload = function() {
+    var elements = document.getElementsByClassName("text-switcher");
+    for (var i = 0; i < elements.length; i++) {
+        var toRotate = elements[i].getAttribute("data-switch-content");
+        var period = elements[i].getAttribute("data-hold-time");
+        if (toRotate) {
+            new textSwitcher(elements[i], JSON.parse(toRotate), period);
+        }
+    }
+    // INJECT CSS
+    var css = document.createElement("style");
+    css.type = "text/css";
+    css.innerHTML = ".text-switcher > .wrap { border-right: 0.08em solid #666 }";
+    document.body.appendChild(css);
+};
+
+document.querySelectorAll('nav a').forEach(anchor => {
+    anchor.addEventListener('click', function(e) {
+        e.preventDefault();
+        const targetId = this.getAttribute('href').substring(1);
+        const targetSection = document.getElementById(targetId);
+        if (targetSection) {
+            window.scrollTo({
+                top: targetSection.offsetTop,
+                behavior: 'smooth'
+            });
+        }
+    });
+});