Skip to content

Commit ddcabe0

Browse files
CodingTarikCodingTarik
committed
fun
1 parent ecf50d0 commit ddcabe0

File tree

3 files changed

+283
-0
lines changed

3 files changed

+283
-0
lines changed

‎_posts/fun/2025-05-03-color-palett.md

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
---
2+
title: Color Palette Generator for Your Designs
3+
description: Generate beautiful color combinations for your projects.
4+
date: 2025-03-06T12:00:00.000Z
5+
tags:
6+
- Tools
7+
- Design
8+
- Colors
9+
categories:
10+
- Tools
11+
- Web
12+
math: false
13+
---
14+
15+
# Color Palette Generator
16+
17+
Choosing the right colors is crucial for any design project, whether you're designing a website, logo, or creating graphics. The **Color Palette Generator** helps you create beautiful and harmonious color palettes for your next project.
18+
19+
**How does the Color Palette Generator work?**
20+
21+
1. Select a base color you want to start with.
22+
2. The generator will suggest a color palette based on that color.
23+
3. You can tweak the palette and choose additional colors.
24+
4. Copy the colors and use them directly in your design!
25+
26+
Get started and see how easily you can create stunning color combinations.
27+
28+
<div class="color-palette-generator">
29+
<h2>Generate Color Palettes</h2>
30+
<input type="color" id="baseColor" />
31+
<button id="generatePaletteButton">Generate Palette</button>
32+
<div id="paletteOutput"></div>
33+
</div>
34+
35+
<script>
36+
document.getElementById('generatePaletteButton').addEventListener('click', function() {
37+
const baseColor = document.getElementById('baseColor').value;
38+
const palette = generatePalette(baseColor);
39+
const paletteOutput = document.getElementById('paletteOutput');
40+
paletteOutput.innerHTML = '';
41+
42+
palette.forEach(color => {
43+
const colorDiv = document.createElement('div');
44+
colorDiv.style.backgroundColor = color;
45+
colorDiv.classList.add('colorBox');
46+
paletteOutput.appendChild(colorDiv);
47+
});
48+
});
49+
50+
function generatePalette(baseColor) {
51+
// Simple color palette generation based on lightness variations
52+
const colorList = [];
53+
for (let i = -5; i <= 5; i++) {
54+
colorList.push(lightenOrDarkenColor(baseColor, i * 10));
55+
}
56+
return colorList;
57+
}
58+
59+
function lightenOrDarkenColor(color, amount) {
60+
let usePound = false;
61+
if (color[0] == "#") {
62+
color = color.slice(1);
63+
usePound = true;
64+
}
65+
66+
const num = parseInt(color, 16);
67+
let r = (num >> 16) + amount;
68+
if (r > 255) r = 255;
69+
else if (r < 0) r = 0;
70+
71+
let b = ((num >> 8) & 0x00FF) + amount;
72+
if (b > 255) b = 255;
73+
else if (b < 0) b = 0;
74+
75+
let g = (num & 0x0000FF) + amount;
76+
if (g > 255) g = 255;
77+
else if (g < 0) g = 0;
78+
79+
const colorString = (usePound ? "#" : "") + (r << 16 | b << 8 | g).toString(16).padStart(6, '0');
80+
return colorString;
81+
}
82+
</script>
83+
84+
<style>
85+
.color-palette-generator {
86+
background: linear-gradient(135deg, #667eea, #764ba2);
87+
padding: 30px;
88+
border-radius: 15px;
89+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
90+
color: white;
91+
text-align: center;
92+
margin-top: 40px;
93+
}
94+
95+
.color-palette-generator input {
96+
padding: 10px;
97+
font-size: 1rem;
98+
border-radius: 5px;
99+
border: 1px solid #ddd;
100+
margin-bottom: 20px;
101+
}
102+
103+
.color-palette-generator button {
104+
background-color: #FF6347;
105+
border-radius: 5px;
106+
padding: 10px 15px;
107+
border: none;
108+
cursor: pointer;
109+
color: white;
110+
font-size: 1rem;
111+
}
112+
113+
.color-palette-generator button:hover {
114+
background-color: #FF4500;
115+
}
116+
117+
.colorBox {
118+
width: 50px;
119+
height: 50px;
120+
margin: 5px;
121+
display: inline-block;
122+
}
123+
</style>

‎_posts/fun/2025-05-03-emoji-conv.md

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
---
2+
title: Emoji Converter: Convert Text to Emojis
3+
description: Turn your text messages into a fun and creative emoji sequence!
4+
date: 2025-03-06T10:00:00.000Z
5+
tags:
6+
- Tools
7+
- Social Media
8+
- Emojis
9+
categories:
10+
- Tools
11+
- Web
12+
math: false
13+
---
14+
15+
# Emoji Converter
16+
17+
Emojis are a fun and creative way to express yourself online, but did you know you can convert plain text into emojis? Our **Emoji Converter** lets you turn any message into a series of emojis that represent the text in a fun and visual way.
18+
19+
**How does the Emoji Converter work?**
20+
21+
1. Simply type your message into the input field.
22+
2. Click the "Convert" button to turn your message into emojis.
23+
3. Copy your new emoji sequence and share it wherever you like.
24+
25+
Try it out and see how creative you can get with your messages!
26+
27+
<div class="emoji-converter">
28+
<h2>Convert Text to Emojis</h2>
29+
<input type="text" id="textInput" placeholder="Enter your text here" />
30+
<button id="convertButton">Convert</button>
31+
<p id="emojiOutput">Your emoji message will appear here</p>
32+
</div>
33+
34+
<script>
35+
document.getElementById('convertButton').addEventListener('click', function() {
36+
const text = document.getElementById('textInput').value;
37+
const emojiMessage = text.split('').map(char => `&#x1F4A9;`).join(''); // This will just turn each character into a poop emoji for fun!
38+
document.getElementById('emojiOutput').innerHTML = emojiMessage;
39+
});
40+
</script>
41+
42+
<style>
43+
.emoji-converter {
44+
background: linear-gradient(135deg, #667eea, #764ba2);
45+
padding: 30px;
46+
border-radius: 15px;
47+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
48+
color: white;
49+
text-align: center;
50+
margin-top: 40px;
51+
}
52+
53+
.emoji-converter input {
54+
width: 80%;
55+
padding: 10px;
56+
font-size: 1rem;
57+
border-radius: 5px;
58+
border: 1px solid #ddd;
59+
margin-bottom: 20px;
60+
}
61+
62+
.emoji-converter button {
63+
background-color: #FF6347;
64+
border-radius: 5px;
65+
padding: 10px 15px;
66+
border: none;
67+
cursor: pointer;
68+
color: white;
69+
font-size: 1rem;
70+
}
71+
72+
.emoji-converter button:hover {
73+
background-color: #FF4500;
74+
}
75+
76+
#emojiOutput {
77+
margin-top: 20px;
78+
font-size: 1.5rem;
79+
word-wrap: break-word;
80+
}
81+
</style>

‎_posts/fun/2025-05-03-quote-generator.md

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
title: Random Quote Generator for Inspiration
3+
description: Get inspired with a new motivational quote every time!
4+
date: 2025-03-06T14:00:00.000Z
5+
tags:
6+
- Tools
7+
- Inspiration
8+
- Quotes
9+
categories:
10+
- Tools
11+
- Web
12+
math: false
13+
---
14+
15+
# Quote Generator
16+
17+
Sometimes, all you need is a little inspiration. Our **Quote Generator** provides you with random quotes from famous personalities, philosophers, and thinkers to give you the motivation and insight you need throughout your day.
18+
19+
**How does the Quote Generator work?**
20+
21+
1. Click the "Generate Quote" button to get a random quote.
22+
2. Read the quote, and let it inspire you.
23+
3. Share it with your friends or keep it for later!
24+
25+
Click the button below to start generating your first inspirational quote!
26+
27+
<div class="quote-generator">
28+
<h2>Generate a Random Quote</h2>
29+
<button id="generateQuoteButton">Generate Quote</button>
30+
<p id="quoteOutput">Your motivational quote will appear here</p>
31+
</div>
32+
33+
<script>
34+
const quotes = [
35+
"The only way to do great work is to love what you do. – Steve Jobs",
36+
"Success is not final, failure is not fatal: It is the courage to continue that counts. – Winston Churchill",
37+
"Believe you can and you're halfway there. – Theodore Roosevelt",
38+
"It does not matter how slowly you go as long as you do not stop. – Confucius",
39+
"Act as if what you do makes a difference. It does. – William James"
40+
];
41+
42+
document.getElementById('generateQuoteButton').addEventListener('click', function() {
43+
const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
44+
document.getElementById('quoteOutput').innerHTML = randomQuote;
45+
});
46+
</script>
47+
48+
<style>
49+
.quote-generator {
50+
background: linear-gradient(135deg, #667eea, #764ba2);
51+
padding: 30px;
52+
border-radius: 15px;
53+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
54+
color: white;
55+
text-align: center;
56+
margin-top: 40px;
57+
}
58+
59+
.quote-generator button {
60+
background-color: #FF6347;
61+
border-radius: 5px;
62+
padding: 10px 15px;
63+
border: none;
64+
cursor: pointer;
65+
color: white;
66+
font-size: 1rem;
67+
}
68+
69+
.quote-generator button:hover {
70+
background-color: #FF4500;
71+
}
72+
73+
#quoteOutput {
74+
margin-top: 20px;
75+
font-size: 1.2rem;
76+
font-style: italic;
77+
word-wrap: break-word;
78+
}
79+
</style>

0 commit comments

Comments
 (0)