CodePen Home Rastgele Renk Üretici

[Leydihan]

[Only Registered Users Can See Links] arkadaşlar, bugün sizlerle web projelerinizde kullanabileceğiniz oldukça sade ve şık bir Rastgele Renk Üretici uygulamasını paylaşmak istiyorum.

Bu çalışma, tek bir buton tıklamasıyla sayfanın arka plan rengini rastgele değiştirmenize ve üretilen rengin HEX kodunu ekranda görmenize olanak tanıyor. Tasarım aşamasında hızlıca renk fikirleri edinmek isteyenler için oldukça pratik bir araç.

HTML Yapısı:

<div class="color">
<span id="hex">#333333</span>
<button onclick="getNewColor()">Yeni Renk Getir</button>
</div>

<!-- Sosyal Medya Linkleri -->
<div class="youtube">
<a class="watch" href="[Only Registered Users Can See Links]" target="blank_">
<span>Seyret</span>
</a>
<a class="me" href="[Only Registered Users Can See Links]" target="blank_">
<span>ABONE OL</span>
</a>
</div>

CSS Tasarımı:

@import url('[Only Registered Users Can See Links]');

* {
padding: 0;
margin: 0;
}

body {
background: #333;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

.color {
font-family: 'Montserrat', sans-serif;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column nowrap;
padding: 20px;
}

#hex {
color: white;
font-size: 40px;
text-transform: uppercase;
margin-bottom: 10px;
}

.color button {
background: none;
outline: none;
color: white;
border: 2px solid white;
cursor: pointer;
font-size: 20px;
padding: 10px;
transition: all .2s linear;
}

.color button:hover {
background: white;
color: #333;
}

JavaScript Fonksiyonu:

function getNewColor() {

var symbols = '0123456789ABCDEF';
var color = '#';

for (let i=0 ; i<6 ; i++) {
color = color + symbols[Math.floor(Math.random() * 16)];
}

document.body.style.background = color;
document.getElementById('hex').innerHTML = color;

}


Kodlar oldukça basit ve geliştirilmeye müsaittir. Kendi projelerinize göre renk geçiş efektleri veya kopyalama özellikleri ekleyerek daha da işlevsel hale getirebilirsiniz.
Rastgele Renk Üretici, HTML - CSS - JS Videolu Anlatımı

[Only Registered Users Can See Links]İyi kodlamalar dilerim!

Kaynak ([Only Registered Users Can See Links])

[OmerAti]

güzel paylasim emegine saglik:p