Source Code

Membuat Profil Random Menggunakan HTML CSS & JavaScript

Mandan Koding20 September 20220

Hai teman-teman datang lagi di mandankoding.com, kali ini kita akan berbagi kode tentang Membuat Profil Random Menggunakan HTML CSS & JavaScript. Dalam blog sebelumnya kita sudah membuat tantang Landing Page Kuliner Html & CSS. Pada proyek kali ini kamu bisa menyalin kode-nya untuk praktek atau mencobanya secara langsung. dan kamu juga bisa lihat video tutorial proses pembuatnya di Youtube mandan koding.

Membuat Profil Random Menggunakan HTML CSS & JavaScript

Sebelum kamu menyalin kode di bawah, silahkan buat terlebih dahulu file-file di dalam satu folder, seperti di bawah ini:

Coba kamu perhatikan file di atas, untuk file dengan nama jquery.js silahkan download di sini:

Pertama kita membuat file dengan nama index.html, silahkan salin kode di bawah:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mandan koding</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="container">
        <div class="content">
            <h1>Emoji Profile Picture</h1>

            <div class="profile-pic">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <circle class="profile-pic_background" cx="12" cy="12" r="12"></circle>
                    <path class="profile-body" d="M 0 24 Q 0 20 6 17 C 9 20.5, 15 20.5, 18 17 Q 24 20 24 24"></path>
                </svg>
                <div class="icon">
                    <span class="random-emoji"></span>
                </div>
            </div>

            <button class="icon-button" id="previousEmoji">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                    <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path>
                    <path d="M0 0h24v24H0z" fill="none"></path>
                </svg>
            </button>

            <button id="changeEmoji">Change Emoji</button>

            <button class="icon-button" id="nextEmoji">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                    <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path>
                    <path d="M0 0h24v24H0z" fill="none"></path>
                </svg>
            </button>

        </div>
    </div>

    <script src="jquery.js"></script>
    <script src="app.js"></script>

</body>

</html>

Tutorial Kami Lainnya:

Kedua, kita akan menambahkan file CSS dengan nama style.css untuk mempercantik tampilan nya, silahkan salin kode di bawah ini:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

.container {
    background-color: burlywood;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
}

.content {
    flex: 1;
    padding: 2rem 1rem;
    text-align: center;
}

h1 {
    margin-bottom: 1rem;
    color: #ffffff;
}

.profile-pic {
    position: relative;
    margin: auto;
    margin-bottom: 1.5rem;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 2px 4px 6px rgba(169, 169, 169, 0.25);
}

.profile-pic svg {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    border-radius: 50%;
}

.profile-pic svg .profile-pic_background {
    fill: #8e8e8e;
}

.profile-pic svg .profile-body {
    fill: #0d0d0d;
}

.profile-pic .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 0px;
    transform: translate(-50%, -50%);
}

.profile-pic .icon span {
    font-size: 105px;
}

.random-emoji {
    opacity: 0;
    transition: 200ms opacity ease;
}

.random-emoji.set {
    opacity: 1;
}

button {
    display: inline-block;
    background-color: #dfdfdf;
    color: #ffffff;
    padding: 0.75rem;
    width: auto;
    min-width: 150px;
    cursor: pointer;
    line-height: inherit;
    vertical-align: middle;
    outline: 0;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 17px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    box-shadow: 0 8px 6px -4px rgba(169, 169, 169blue, 0.4);
}

button.icon-button {
    color: #aeaeae;
    padding: 0.625rem;
    min-width: 0;
}

button.icon-button:hover,
button.icon-button.hover {
    color: #5f5f5f;
}

button.icon-button svg {
    display: inline-block;
    fill: currentColor;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
}

Ketiga, kita menambahkan file JavaSript dengan nama app.js, kita memerlukan JavaSript untuk memberikan beberapa tindakan dalam membuat Profile Random salah satunya, saat kita klik tombol next, maka gambar nya akan bertukar juga ke gambar selanjutnya, sekarang silahkan salin kode di bawah ini:

let randomEmojiEl = $('.random-emoji'),
    emojis = ['🍖', '😍', '👽', '🎾', '🎁', '🐸', '🤓', '😎', '🥳', '👻', '🤖', '🎃', '😺', '😇', '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐨', '🐯', '🐮', '🦁', '🐷', '🐵', '🌝', '⚽', '🏀', '⚾', '🏐', '🎱', '📦', '💎', '⚙', '📯', '🗳', '🎈', '🛡'],
    colors = ['#df5300', '#ffd900', '#a0b5b6', '#dbf900', '#cc8300', '#59bb3c', '#ffd900', '#ffd900', '#ffd900', '#a3a5a8', '#909191', '#ff8200', '#f5c40b', '#ffd900', '#b05d00', '#ffdb50', '#cbc0c9', '#ffb455', '#c4b5b6', '#fd6e00', '#a16738', '#927b75', '#ffe600', '#ad8777', '#fb9400', '#d16e89', '#d19e5a', '#fee866', '#4d4d4d', '#fa7521', '#da8689', '#787878', '#242424', '#825224', '#04a4fc', '#7b868b', '#dabc2f', '#3f97b2', '#bf0313', '#fe745d'],
    currentEmoji = 0;

function setRandomEmoji(r = null) {

    if (r == null) {
        r = Math.round(Math.random() * (emojis.length - 1));

        while (r == currentEmoji && emojis.length > 1) {
            r = Math.round(Math.random() * (emojis.length - 1));
        }
    } else {

        if (r < 0) r = emojis.length - 1;
        if (r >= emojis.length) r = 0;
    }

    currentEmoji = r;
    randomEmojiEl.html(emojis[r]);

    $('#changeEmoji').css({
        'background-color': colors[r],
        'box-shadow': '0 8px 6px -4px ' + hexToRgbA(colors[r], .4),
    });
}

function hexToRgbA(hex, a = 1) {

    let c;

    if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {

        c = hex.substring(1).split('');
        if (c.length == 3) {
            c = , c[0], c[1], c[1], c[2], c[2]];
        }

        c = '0x' + c.join('');
        return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(', ') + ', ' + a + ')';
    }
    throw new Error('Bad Hex');
}

$(window).on('load', function () {

    setRandomEmoji();
    randomEmojiEl.addClass('set')
});

$('#changeEmoji').on('click', function () {

    setRandomEmoji();
})

$('#previousEmoji').on('click', function () {

    setRandomEmoji(currentEmoji - 1)
});

$('#nextEmoji').on('click', function () {

    setRandomEmoji(currentEmoji + 1)
});

Setelah semuanya selesai, silahkan jalankan file index.html, maka tampilan akan muncul seperti gambar dibawah ini:

Itu saja tutorial dari kami, dalam pembuatan proyek Membuat Profil Random Menggunakan HTML CSS & JavaScript, ini di fungsikan bila kamu menggunakannya untuk user yang ingin memilih gambar apa yang akan menjadi tampilan profil mereka di suatu website yang kamu buat.

Semoga bermanfaat, selemat belajar🎉🎉