hapidzfadli: CSS
News Update
Loading...
Tampilkan postingan dengan label CSS. Tampilkan semua postingan
Tampilkan postingan dengan label CSS. Tampilkan semua postingan

Minggu, 13 September 2020

Membuat UI Jam Analog Menggunakan HTML CSS dan Javascript

Membuat UI Jam Analog Menggunakan HTML CSS dan Javascript

 


Pada artikel kali ini saya akan memberikan panduan cara membuat jam analog dengan tampilan keren menggunakan HTML CSS dan JavaScript. Namun sebelum mengikuti panduan ini sebaiknya kalian harus mengerti terlebih dahulu dasar dasar dari html css dan javascript supaya paham.

Jam analog yang akan kita buat, nantinya bisa kita gunakan untuk mempercantik website agar lebih interaktif (bisa di tambahkan sebagai widget). Bagaimana membuat Jam analog menggunakan javascript? berikut panduanya:

Pertama silahkan buat dulu folder untuk menyimpan proyek yang akan kita buat silahkan berinama jam analog atau namanya terserah kalian. Jika sudah di buat silahkan tambhakn file index.html untuk menyimpan kode html dam buat file style.css untuk menyimpan kode css nya.

Selanjutnya silahkan masukan kode html berikut kedalam file index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Jam Dinding</title>
</head>
<body>
<div class="clock">
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<div class="min">
<div class="mn" id="mn"></div>
</div>
<div class="sec">
<div class="sc" id="sc"></div>
</div>
</div>

<script>
const deg = 6;
const hr = document.getElementById('hr');
const mn = document.getElementById('mn');
const sc = document.getElementById('sc');



setInterval (() => {
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * deg;
let ss = day.getSeconds() * deg;

hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`;
})
</script>
</body>
</html>

Penjelasan Kode pada HTML

Pada bagian atas ada kode <link rel="stylesheet" href="style.css">  ini berguna untuk menghubungkan file html kita dengan file style.css. Mengapa harus di hubungkan? untuk mempercantik tampilan jam nya kita harus menggunakan css sebagai style.

Pada bagian body ada div dengan class clock merupakan tampilan utama jamnya. Di dalam div dengan class clock ada beberapa div lagi dengan class dan id. div ini berguna sebagai arah jarum nya.

Selanjutnya pada bagian tag script di dalamnya ada beberapa variabel dan fungsi untuk mengatur arah jarum jam.

const deg digunakan untuk mengatur rotasi
const hr, mn, sc pada bagian atas digunakan untuk mengambil code dari id masing masing.
fungsi setInterval di perlukan untuk mengatur waktu bergeraknya arah jarum jam.

Kemudian silahkan masukan kode css berikut kedalam file style.css:

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

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #091921;
}
.clock {
width: 350px;
height: 350px;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-image: url(clock.png);
border: 4px solid #091921;
border-radius: 50%;
box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
inset 0 -15px 15px rgba(255, 255, 255, 0.05),
0 15px 15px rgba(0, 0, 0, 0.3),
inset 0 15px 15px rgba(0, 0, 0, 0.3);

}
.clock::before {
content: '';
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #fff;
z-index: 1000;
}
.clock .hour,
.clock .min,
.clock .sec
{
position: absolute;
}
.clock .hour, .hr {
width: 160px;
height: 160px;

}
.clock .min, .mn {
width: 190px;
height: 190px;
}
.clock .sec, .sc {
width: 230px;
height: 230px;
}

.hr, .mn, .sc {
display: flex;
justify-content: center;
border-radius: 50%;
position: absolute;
}
.hr::before {
content: '';
position: absolute;
width: 8px;
height: 80px;
background: #ff105e;
border-radius: 6px 6px 0 0;
z-index: 10;
}
.mn::before {
content: '';
position: absolute;
width: 4px;
height: 90px;
background: #fff;
border-radius: 6px 6px 0 0;
z-index: 20;
}
.sc::before {
content: '';
position: absolute;
width: 2px;
height: 150px;
background: #e2e2e2;
border-radius: 6px 6px 0 0;
z-index: 22;
}

Kode css ini akan mempercantik dan mengatur penempatan setiap elemen pada kode html.


Jika sudah memasukan kode kode tersebut silahkan buka file index.html menggunakan browser nanti tampilanya seperti ini:


nah itulah sedikit tentang cara membuat jam analog otomatis menggunakan html css dan javascript. sampai jumpa pada tutorial berikutnya

Jumat, 11 September 2020

Cara Membuat Function Copy to Clipboard Menggunakan JavaScript 2020

Cara Membuat Function Copy to Clipboard Menggunakan JavaScript 2020

Cara Membuat  Copy to Clipboard Menggunakan


Pada artikel kali ini saya akan membuat fungsi untuk menyalin text menggunakan bahasa pemrograman javascript. Dengan menggunakan fungsi ini kita bisa menyalin text hanya dengan mengklik icon / img copy dengan satu kali klik. Bagaimana Cara Membuat Copy to Clipboard ? . Berikut panduannya:

Sebelum mengikuti tutorial ini pastikan kalian sudah membaca artikel sebelumnya tentang cara membuat password generator secara otomatis karena kita akan menggunakan kode dari projek tersebut. 

Silahkan salin kode html dan css pada artikel tersebut kemudian pastekan pada folder proyek baru kita. paste kode html pada file index.html dan kode css pada file style.css.

Jika sudah silahkan buka file index.html kemudian tambahkan code seperti berikut:

<img src="https://img.icons8.com/material-rounded/24/000000/copy.png" alt="copy">

Letakan di bawah kode <input

Selanjutnya untuk memindahkan dan mengatur ukuran dari img yang sudah kita tambahkan dalam kode html. Kita membutuhkan property css untuk melakukan itu.  silahkan tambahkan kode css berikut pada file style.css:

.input-box img {
position: absolute;
width: 40px;
top: 56px;
right: 14px;
opacity: 0.2;
cursor: pointer;
transform: rotate(90deg);
}
.input-box img:hover {
opacity: 1;
color: gray;
}

Supaya kode ini berjalan kita membutuhkan sebuah fungsi, kita akan menggunkan javascript untuk membuat fungsinya silahkan tambahkan kode berikut tepat di atas kode </script>:

function copyPassword(){
var copyPassText = document.getElementById("password");
copyPassText.select();
copyPassText.setSelectionRange(0, 9999)
document.execCommand("copy");
}

Ketika fungsi ini di panggil kita bisa mengcopy text dari input. Untuk memanggilnya silahkan tambahakan atribut onclick="copyPassword();" berikut pada tag img:

<img src="https://img.icons8.com/material-rounded/24/000000/copy.png" alt="copy" onclick="copyPassword();">

Nah itulah cara membuat copy to clipboard menggunakan javascript. Kode yang kita buat akan berjalan ketika kita sudah mengenerate password dengan mengklik button generate kemudian mengklik icon salin atau copy dan jika sudah di klik maka text yang ada di input otomatis tersalin.

Cara Membuat Random Password Otomatis Menggunakan HTML CSS dan JavaScript

Cara Membuat Random Password Otomatis Menggunakan HTML CSS dan JavaScript



Password Generator atau pembuat sandi secara acak dapat membantu kalian ketika membuat aplikasi multi user karena dengan bantuan password generator sistem akan menghasilkan atau mengenerate password sendiri sehingga admin tidak susah payah untuk memikirkan password untuk user yang nanti password tersebut di berikan ke email user. 

Password generator juga sangat bermanfaat bagi user untuk mempersulit hacker ketika melakukan serangan brute force. Karena semakin rumit dan panjang password semakin sulit pula untuk di jebol jadi kalian para user bisa menggunakan password generator untuk membuat password yang kuat.

Lalu bagaimana cara membuat password generator. Oke berikut panduan cara membuat sistem generate password otomatis menggunakan javascript:

Pertama buat dulu folder password untuk menyimpan proyeknya, kemuadn di dalam foldernya buat file index.html dan style.css

Masukan kode html berikut ke dalam file html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Generator</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="input-box">
<h2>Random Password Generator</h2>
<input type="text" placeholder="Create password" id="password" readonly="">
<div class="btn" onclick="getPassword();">Generate password</div>
</div>
<script>
function getPassword(){

var char = "01234567890ABCNSIFNOQFBWBIFIFIQPqbidqifcifcbiqficqzqeoptpnxkp!#$%^&*()(Y%#@#^()";
var passwordLenght = 16;
var password = "";

for (var i = 0; i < passwordLenght; i++){
var randomNumber = Math.floor(Math.random() * char.length);
password += char.substring(randomNumber, randomNumber + 1);

}
document.getElementById("password").value = password;
}
</script>
</body>
</html>

Masukan kode css berikut ke file css:
* {
margin: 0;
padding: 0;
font-family: consolas;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #f8f8f8;
}

.input-box {
position: relative;
width: 450px;
}
.input-box h2 {
color: #333;
font-size: 24;
}
.input-box input {
position: relative;
padding: 0 20px;
border: none;
width: 100%;
height: 60px;
margin: 15px 0 20px;
outline: none;
font-size: 24px;
background: transparent;
letter-spacing: 4px;
border-radius: 8px;
box-sizing: border-box;
color: #333;
box-shadow: -4px -4px 10px rgba(255, 255, 255, 1),
inset 4px 4px 10px rgba(0, 0, 0, 0.05),
inset -4px -4px 10px rgba(255, 255, 255, 1),
4px 4px 10px rgba(0, 0, 0, 0.05);
}

.input-box input::placeholder {
letter-spacing: 0;
}

.input-box .btn {
position: relative;
cursor: pointer;
color: #fff;
background: #333;
font-size: 24px;
padding: 10px 15px;
border-radius: 8px;
display: inline-block;
}
.input-box .btn:active{
background: red;
}

Nah nanti tampilanya seperti ini: 


Untuk mendapatkan password secara acak kalian tinggal klik button dengan tulisan Generate password nanti di bagain inputnya akan menampilkan password secara acak. Bagaimana kode ini bisa berfungsi? 

Pada kode html saya menggunakan javascript di dalamnya terdapat function yang dapat mengacak string dengan method Math.random jadi string yang ada di variabel char diacak dan di tampung kedalam variabel randomNumber yang nantinya mengahasilkan 16 string dan dimasukan ke variabel password. Setelah itu kitqa ambil id password yang dalam input untuk memasukan value, nah valuenya berupa string dari variabel password.

Featured

[Featured][recentbylabel2]

Featured

[Featured][recentbylabel2]
Notification
This is just an example, you can fill it later with your own note.
Done