Skip to content

Commit

Permalink
Merge branch 'dhairyagothi:Main' into Main
Browse files Browse the repository at this point in the history
  • Loading branch information
@1754riya
1754riya authored Jul 13, 2024
2 parents 4f6b1d5 + 3e057b7 commit 2a090bc
Show file tree
Hide file tree
Showing 8 changed files with 641 additions and 5 deletions.
102 changes: 102 additions & 0 deletions public/Quotely-Laughs/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quotely Laughs</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>😉</text></svg>">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
rel="stylesheet"
/>
<style>
.loader {
border-top-color: #3498db;
animation: spinner 1.5s linear infinite;
}

@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script defer src="script.js"></script>
</head>
<body
class="bg-gray-100 text-gray-900 flex flex-col justify-between h-screen relative"
>
<header
class="bg-gradient-to-r from-blue-500 to-green-500 p-4 shadow-md text-center"
>
<h1 class="text-3xl font-bold text-white">Quotely Laughs</h1>
</header>
<main class="flex-grow flex flex-col items-center justify-center">
<button
id="generate"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-6"
>
Generate Quote and Joke
</button>
<div
id="content"
class="bg-gray-200 p-6 rounded shadow-md text-center max-w-md w-full"
>
<div class="mb-6">
<p id="quote" class="text-lg font-medium mb-4"></p>
<div class="flex items-center justify-center">
<p class="text-base">Share quote on:</p>
<div>
<a id="share-quote-x" href="#" target="_blank">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20px"
height="20px"
viewBox="0 0 512 512"
>
<path
fill="black"
d="M389.2 48h70.6L305.6 224.2L487 464H345L233.7 318.6L106.5 464H35.8l164.9-188.5L26.8 48h145.6l100.5 132.9zm-24.8 373.8h39.1L151.1 88h-42z"
/>
</svg>
</a>
</div>
</div>
</div>
<div>
<p id="joke" class="text-lg font-medium mb-4"></p>
<div class="flex items-center justify-center">
<p class="text-base">Share joke on:</p>
<div>
<a id="share-joke-x" href="#" target="_blank">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20px"
height="20px"
viewBox="0 0 512 512"
>
<path
fill="black"
d="M389.2 48h70.6L305.6 224.2L487 464H345L233.7 318.6L106.5 464H35.8l164.9-188.5L26.8 48h145.6l100.5 132.9zm-24.8 373.8h39.1L151.1 88h-42z"
/>
</svg>
</a>
</div>
</div>
</div>
</div>
</main>

<div
id="loading"
class="hidden absolute inset-0 bg-gray-800 bg-opacity-50 flex items-center justify-center"
>
<div
class="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 h-16 w-16"
></div>
</div>
</body>
</html>
87 changes: 87 additions & 0 deletions public/Quotely-Laughs/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
document.getElementById("generate").addEventListener("click", generateContent);

document.addEventListener("DOMContentLoaded", async () => {
await generateContent();
});

async function generateContent() {
showLoading();
const quote = await getRandomQuote();
const joke = await getRandomJoke();
hideLoading();

document.getElementById("quote").innerText = quote;
document.getElementById("joke").innerText = joke;

updateShareLinks(quote, joke);
}

function showLoading() {
document.getElementById("loading").classList.remove("hidden");
}

function hideLoading() {
document.getElementById("loading").classList.add("hidden");
}

async function getRandomQuote() {
const quoteApiUrl = "https://api.freeapi.app/api/v1/public/quotes/quote/random";
try {
const response = await fetch(quoteApiUrl);
if (response.ok) {
const quoteData = await response.json();
const quoteText = quoteData.data.content;
const quoteAuthor = quoteData.data.author;
return `"${quoteText}" - ${quoteAuthor}`;
}
} catch (error) {
console.warn("Failed to fetch a quote from the API:", error);
}

const fallbackQuotes = [
"The only way to do great work is to love what you do. -Steve Jobs",
"Believe you can and you're halfway there. -Theodore Roosevelt",
"Success is not final, failure is not fatal: It is the courage to continue that counts. -Winston Churchill",
"In the middle of difficulty lies opportunity. -Albert Einstein",
"Don't watch the clock; do what it does. Keep going. -Sam Levenson",
];
return fallbackQuotes[Math.floor(Math.random() * fallbackQuotes.length)];
}

async function getRandomJoke() {
const jokeApiUrl =
"https://v2.jokeapi.dev/joke/Programming,Spooky?blacklistFlags=political,racist,sexist&format=txt";
try {
const response = await fetch(jokeApiUrl);
if (response.ok) {
return await response.text();
}
} catch (error) {
console.warn("Failed to fetch a joke from the API:", error);
}

const fallbackJokes = [
"Why don’t scientists trust atoms? Because they make up everything!",
"I told my wife she was drawing her eyebrows too high. She looked surprised.",
"Why don’t skeletons fight each other? They don’t have the guts.",
"What do you call fake spaghetti? An impasta.",
];
return fallbackJokes[Math.floor(Math.random() * fallbackJokes.length)];
}

function updateShareLinks(quote, joke) {
const siteURL =
"https://50-days-50-web-project.vercel.app/Quotely-Laughs/index.html";

document.getElementById(
"share-quote-x"
).href = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
`${quote} \n\nGenerated by Quotely Laughs.\nVisit site at ${siteURL}`
)}`;

document.getElementById(
"share-joke-x"
).href = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
`${joke} \n\nGenerated by Quotely Laughs.\nVisit site at ${siteURL}`
)}`;
}
122 changes: 122 additions & 0 deletions public/Social Media Glowing/glow.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
/* author: https://codepen.io/Sammy2400/pen/pogXVzy
sam
*/

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #000;
}
.icons{
display: inline-flex;
}
.icons a{
margin: 0 25px;
text-decoration: none;
color: #fff;
display: block;
position: relative;
}
.icons a .layer{
width: 55px;
height: 55px;
transition: transform 0.3s;
}
.icons a:hover .layer{
transform: rotate(-35deg) skew(20deg);
}
.icons a .layer span{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 1px solid #fff;
border-radius: 5px;
transition: all 0.3s;
}
.icons a .layer span.fab{
font-size: 30px;
line-height: 55px;
text-align: center;
}
.icons a:hover .layer span:nth-child(1){
opacity: 0.2;
}
.icons a:hover .layer span:nth-child(2){
opacity: 0.4;
transform: translate(5px, -5px);
}
.icons a:hover .layer span:nth-child(3){
opacity: 0.6;
transform: translate(10px, -10px);
}
.icons a:hover .layer span:nth-child(4){
opacity: 0.8;
transform: translate(15px, -15px);
}
.icons a:hover .layer span:nth-child(5){
opacity: 1;
transform: translate(20px, -20px);
}
.icons a:nth-child(1) .layer span,
.icons a:nth-child(1) .text{
color: #4267B2;
border-color: #4267B2;
}
.icons a:nth-child(2) .layer span,
.icons a:nth-child(2) .text{
color: #1DA1F2;
border-color: #1DA1F2;
}
.icons a:nth-child(3) .layer span,
.icons a:nth-child(3) .text{
color: #E1306C;
border-color: #E1306C;
}
.icons a:nth-child(4) .layer span,
.icons a:nth-child(4) .text{
color: #2867B2;
border-color: #2867B2;
}
.icons a:nth-child(5) .layer span,
.icons a:nth-child(5) .text{
color: #ff0000;
border-color: #ff0000;
}
.icons a:hover:nth-child(1) .layer span{
box-shadow: -1px 1px 3px #4267B2;
}
.icons a:hover:nth-child(2) .layer span{
box-shadow: -1px 1px 3px #1DA1F2;
}
.icons a:hover:nth-child(3) .layer span{
box-shadow: -1px 1px 3px #E1306C;
}
.icons a:hover:nth-child(4) .layer span{
box-shadow: -1px 1px 3px #2867B2;
}
.icons a:hover:nth-child(5) .layer span{
box-shadow: -1px 1px 3px #ff0000;
}
.icons a .text{
position: absolute;
left: 50%;
bottom: -5px;
opacity: 0;
font-weight: 500;
transform: translateX(-50%);
transition: bottom 0.3s ease, opacity 0.3s ease;
}
.icons a:hover .text{
bottom: -35px;
opacity: 1;
}
71 changes: 66 additions & 5 deletions public/Social Media Glowing/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,76 @@
<title>Glowing Social Media Icon</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="glow.css">
</head>

<body>
<div class="container">
<i class="fa fa-apple" id="apple"></i>
<i class="fa fa-twitter" id="twitter"></i>
<i class="fa fa-github-square github" id="github"></i>
<i class="fa fa-facebook-square" id="facebook"></i>
<i class="fab fa-facebook" id="apple"></i>
<i class="fab fa-twitter" id="twitter"></i>
<i class="fab fa-instagram" id="github"></i>
<i class="fab fa-linkedin-in" id="facebook"></i>
</div>

<div class="icons">
<a href="#">
<div class="layer">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fab fa-facebook-f"></span>
</div>
<div class="text">
Facebook</div>
</a>
<a href="#">
<div class="layer">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fab fa-twitter"></span>
</div>
<div class="text">
Twitter</div>
</a>
<a href="#">
<div class="layer">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fab fa-instagram"></span>
</div>
<div class="text">
Instagram</div>
</a>
<a href="#">
<div class="layer">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fab fa-linkedin-in"></span>
</div>
<div class="text">
Linkedin</div>
</a>
<a href="#">
<div class="layer">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fab fa-youtube"></span>
</div>
<div class="text">
YouTube</div>
</a>
</div>
</body>

</html>
</html>
Loading

0 comments on commit 2a090bc

Please sign in to comment.