Blogger Rastgele Renk Üreticisi Nasıl Eklenir?
Blogger Rastgele Renk Üreticisi Nasıl Eklenir?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link href=
"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1 class="app-title">Teknofull Random Color Generator</h1>
<div id="colorDisplay"
class="color-card animate__animated animate__fadeIn">
<p id="colorHex">#FFFFFF</p>
<p id="colorRgb">RGB(255, 255, 255)</p>
</div>
<div class="buttons">
<button onclick="genColorFn()">
<i class="fas fa-random"></i>
Generate Color</button>
<button onclick="cpyFn('colorHex')">
<i class="far fa-copy"></i>
Copy HEX</button>
<button onclick="cpyFn('colorRgb')">
<i class="far fa-copy"></i>
Copy RGB</button>
<button onclick="darkFn()">
<i class="fas fa-adjust"></i>
Dark Mode</button>
</div>
<p id="copyMessage" class="animate__animated"></p>
</div>
<script src="app.js"></script>
<script>
document.addEventListener('DOMContentLoaded', genColorFn);
</script>
</body>
</html>
/* Write CSS Here */body {
font-family: 'Montserrat', sans-serif;
text-align: center;
padding: 20px;
transition: background-color 0.3s ease-in-out;
}
.container {
max-width: 400px;
margin: auto;
}
.app-title {
margin-bottom: 20px;
}
.color-card {
width: 200px;
height: 200px;
margin: 20px auto;
background-color: #ffffff;
border: 2px solid #000;
}
.buttons button {
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
#copyMessage {
margin-top: 10px;
font-size: 1.1rem;
}
.dark-mode {
background-color: #333;
color: white;
}
.light-mode {
background-color: white;
color: black;
}
// Function to generate random color
function genColorFn() {
let randomColor = Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
let hexColor = `#${randomColor}`;
let rgbColor = hexToRgb(hexColor);
// Update the displayed color values
document.getElementById('colorDisplay').style.backgroundColor = hexColor;
document.getElementById('colorHex').innerText = hexColor;
document.getElementById('colorRgb').innerText = `RGB(${rgbColor})`;
}
// Function to convert HEX to RGB
function hexToRgb(hex) {
let bigint = parseInt(hex.slice(1), 16);
let r = (bigint >> 16) & 255;
let g = (bigint >> 8) & 255;
let b = bigint & 255;
return `${r}, ${g}, ${b}`;
}
// Function to copy color code
function cpyFn(type) {
let copyText = document.getElementById(type).innerText;
navigator.clipboard.writeText(copyText).then(() => {
// Display a message for successful copy
let copyMessage = document.getElementById('copyMessage');
copyMessage.innerText = `${type === 'colorHex' ? 'HEX' : 'RGB'} copied!`;
copyMessage.classList.add('animate__fadeIn');
setTimeout(() => {
copyMessage.classList.remove('animate__fadeIn');
copyMessage.innerText = '';
}, 2000);
});
}
// Function to toggle Dark Mode
function darkFn() {
document.body.classList.toggle('dark-mode');
}
Bu yazı Serkan Gündoğdu tarafından yazılmıştır.
✔ Bu içeriği Beğendiyseniz Lütfen Paylaşın ⤵
