Macam atau jenis gaya bahasa formal dan Penulisan Esai

BUKA →

 Ya, ada beberapa macam atau jenis gaya bahasa formal yang umum digunakan dalam penulisan. Berikut adalah beberapa contohnya:

1. Gaya Bahasa Ilmiah: Gaya bahasa yang digunakan dalam penulisan ilmiah yang ditandai dengan penggunaan istilah teknis, bahasa yang objektif, dan disertai dengan argumen logis dan bukti empiris.

2. Gaya Bahasa Akademik: Gaya bahasa yang digunakan dalam penulisan akademik seperti esai, makalah, atau tesis. Gaya ini membutuhkan analisis mendalam, argumen yang kuat, dan referensi yang akurat.

3. Gaya Bahasa Hukum: Gaya bahasa yang digunakan dalam dokumen hukum seperti kontrak, perjanjian, atau putusan pengadilan. Gaya bahasa ini cenderung formal, jelas, dan menggunakan terminologi hukum yang spesifik.

4. Gaya Bahasa Bisnis: Gaya bahasa yang digunakan dalam komunikasi bisnis seperti surat resmi, laporan, atau proposal. Gaya bahasa ini cenderung jelas, ringkas, dan menggunakan terminologi bisnis yang khas.

5. Gaya Bahasa Jurnalistik: Gaya bahasa yang digunakan dalam penulisan berita atau artikel jurnalistik. Gaya bahasa ini ditandai dengan kejelasan, objektivitas, dan penyampaian informasi yang akurat dan singkat.

6. Gaya Bahasa Akademik Formal: Gaya bahasa formal yang digunakan dalam tulisan ilmiah, namun tidak seketat gaya bahasa ilmiah. Gaya ini lebih mengutamakan kejelasan dan keakuratan dengan sedikit sentuhan formalitas.

7. Gaya Bahasa Resmi: Gaya bahasa formal yang digunakan dalam situasi resmi, seperti pidato, surat pemberitahuan resmi, atau dokumen resmi lainnya. Gaya ini mengedepankan kejelasan, kerangka tata bahasa yang baik, dan penggunaan kata-kata yang tepat.

Penting untuk memilih gaya bahasa yang sesuai dengan konteks dan audiens yang dituju. Penggunaan gaya bahasa formal dapat memberikan kesan yang profesional, akurat, dan terpercaya dalam penulisan.

Gaya bahasa yang sering digunakan dalam penulisan esai

Dalam penulisan esai, terdapat beberapa gaya bahasa yang sering digunakan. Berikut adalah beberapa contoh gaya bahasa yang umum digunakan dalam penulisan esai:

1. Gaya Naratif: Gaya bahasa yang digunakan untuk menceritakan sebuah pengalaman atau peristiwa dengan kronologi yang jelas dan menghidupkan cerita.

Contoh: "Pada hari yang cerah itu, saya melangkahkan kaki ke taman dan disambut oleh gemerlap sinar matahari yang menari-nari di atas rerumputan hijau..."

2. Gaya Deskriptif: Gaya bahasa yang digunakan untuk menggambarkan secara rinci tentang suatu objek, tempat, atau peristiwa, sehingga pembaca dapat membayangkan dengan jelas.

Contoh: "Bangunan tua itu menjulang megah di tengah kota, dengan dinding batu yang terlihat retak-retak dan jendela-jendela berbingkai kayu yang berdebu..."

3. Gaya Argumentatif: Gaya bahasa yang digunakan untuk menyajikan argumen dan pendapat yang kuat dalam mendukung suatu pandangan atau klaim tertentu.

Contoh: "Dalam pandangan saya, pendidikan seharusnya memprioritaskan pengembangan keterampilan kritis dan kreatif, bukan hanya fokus pada pencapaian akademik semata..."

4. Gaya Eksposisi: Gaya bahasa yang digunakan untuk menyampaikan informasi secara objektif dan logis, dengan menyediakan fakta, data, dan penjelasan yang mendukung.

Contoh: "Menurut penelitian terbaru, perubahan iklim global disebabkan oleh peningkatan emisi gas rumah kaca yang berasal dari kegiatan manusia seperti pembakaran bahan bakar fosil..."

5. Gaya Persuasif: Gaya bahasa yang digunakan untuk mempengaruhi dan meyakinkan pembaca tentang suatu pandangan atau tindakan yang diinginkan.

Contoh: "Kita semua memiliki tanggung jawab untuk menjaga kelestarian alam ini. Dengan mengurangi penggunaan plastik sekali pakai, kita dapat memberikan kontribusi kecil namun signifikan dalam pelestarian lingkungan..."

Pilihan gaya bahasa dalam penulisan esai akan tergantung pada tujuan, topik, dan pendekatan yang ingin disampaikan oleh penulis. Penting untuk memilih gaya bahasa yang sesuai untuk menyampaikan pesan dengan jelas dan efektif.

Apakah ada esai menggunakan gaya bahasa populer (gaul)?

Ya, Anda dapat menulis esai menggunakan gaya bahasa populer atau gaul, tergantung pada konteks dan tujuan penulisan esai tersebut. Gaya bahasa populer atau gaul dapat memberikan sentuhan yang lebih santai, informal, dan mengikuti tren terkini. Namun, penting untuk mempertimbangkan audiens dan tujuan esai Anda saat menggunakan gaya bahasa tersebut.

Berikut adalah contoh penggunaan gaya bahasa populer atau gaul dalam kalimat esai:

1. Gaya Bahasa Populer:

   "Bukan karena gue sok sok-an, tapi nih topik essay, sebenernya kekinian banget, loh. Mau tau kenapa? Dengerin dulu deh, nanti pada paham!"

2. Gaya Bahasa Gaul:

   "Jadi gini, essaynya tuh sumpah kekinian abis, guys! Gak bohong, ini topik yang lagi jadi hits banget, loh. Gue janjiin deh, kalian gak bakal bosen!"

Pastikan untuk menggunakan gaya bahasa populer atau gaul secara konsisten dalam seluruh esai Anda jika Anda memilih untuk menerapkannya. Namun, ingatlah untuk tetap menjaga kualitas dan kesesuaian bahasa dengan konteks dan tujuan penulisan Anda.

Gaya Bahasa Populer:

"Aku bukan karena sok sok-an, tapi nih topik essay, sebenernya kekinian banget, loh. Mau tau kenapa? Dengerin dulu deh, nanti pada paham!"

Gaya Bahasa Gaul:

"Jadi gini, essaynya tuh sumpah kekinian abis, guys! Gak bohong, ini topik yang lagi jadi hits banget, loh. Aku janjiin deh, kalian gak bakal bosen!"

0 comments

mengenai px dan em pada CSS

BUKA →

Dalam bahasa pemrograman CSS (Cascading Style Sheets), px dan em adalah dua unit pengukuran yang sering digunakan untuk menentukan ukuran dan jarak antar elemen pada tampilan web.

px (pixel) adalah unit pengukuran yang tidak berubah, artinya ukuran elemen akan selalu sama pada semua jenis perangkat, baik itu desktop, tablet, atau ponsel. Contohnya, jika kita mengatur ukuran font menjadi 16px, maka ukuran font tersebut akan tetap 16px pada semua perangkat.

Sedangkan em adalah unit pengukuran yang relatif terhadap ukuran font dari elemen yang dikelilinginya. Satu em sama dengan ukuran font dari elemen parent-nya. Misalnya, jika kita mengatur ukuran font parent-nya menjadi 16px, maka satu em sama dengan 16px. Jika kita ingin mengatur ukuran font dari elemen child-nya menjadi setengah dari ukuran font parent-nya, maka kita dapat menggunakan nilai 0.5em.

Keuntungan menggunakan em adalah kita dapat membuat tampilan web yang lebih responsif dan fleksibel, karena ukuran elemen akan menyesuaikan dengan ukuran font dari elemen parent-nya. Namun, kekurangannya adalah jika terdapat banyak elemen yang bersarang (nested), maka perhitungan ukuran em menjadi lebih kompleks dan membingungkan.

Jadi, pada dasarnya, penggunaan px atau em tergantung pada kebutuhan dan preferensi pengembang. Jika ingin tampilan yang lebih statis dan konsisten, maka gunakan px. Namun, jika ingin tampilan yang lebih fleksibel dan responsif, maka gunakan em.

0 comments

Menambahkan Ganti Baris Otomatis Javascript ˂p˃ di awal baris data dan ˂/p˃ di akhir baris

BUKA →

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat website interaktif dan dinamis. Bahasa pemrograman ini pertama kali diperkenalkan pada tahun 1995 oleh Brendan Eich selama bekerja di Netscape Communications Corporation. Saat ini, JavaScript telah menjadi salah satu bahasa pemrograman yang paling populer di dunia dan digunakan oleh banyak developer untuk membuat berbagai macam aplikasi web.

Salah satu kelebihan JavaScript adalah kemampuannya untuk memanipulasi halaman web secara dinamis. Dengan JavaScript, Anda dapat membuat efek animasi, mengubah warna, mengganti teks, dan banyak lagi. Selain itu, JavaScript juga memungkinkan Anda untuk membuat interaksi antara pengguna dan website, seperti form yang bisa diisi dan tombol yang bisa diklik.

Berikut adalah contoh kode JavaScript untuk menambahkan tag <p> di awal dan akhir baris pada data yang diberikan:

Kode berikut akan membuat variabel result yang berisi data yang sudah ditambahkan tag <p> di awal dan akhir barisnya. Anda bisa menampilkan hasilnya di console atau memasukkan variabel result ke dalam elemen HTML yang diinginkan.

Hasilnya akan menjadi seperti ini:

<p>Agama</p> <p>Air</p> <p>Akuntansi</p> <p>ARSITEKTUR</p> <p>Artikel</p> <p>Bahasa Indonesia</p> <p>Bahasa Tips</p> <p>USAHA</p>

Berikut adalah contoh kode JavaScript untuk menambahkan tag <p> pada awal dan akhir setiap baris dalam elemen dengan id "data":

---

Dari Program di atas, ditambahkan, jika ada baris kosong, maka baris tersebut dihapus.

Kode tersebut akan mengambil isi teks dari elemen dengan id "data", kemudian memisahkan setiap baris menjadi array menggunakan fungsi split('\n'). Selanjutnya, kode akan melakukan iterasi pada setiap baris, menambahkan tag <p> pada awal dan akhir setiap baris, dan menggabungkan semua baris menjadi satu string HTML. Akhirnya, hasilnya akan ditetapkan kembali pada elemen dengan id "data".

Anda bisa menambahkan CSS di atas ke dalam tag <style> pada bagian head HTML. Selain itu, Anda juga harus menambahkan class dan id yang sesuai pada elemen HTML untuk memastikan CSS dapat diterapkan dengan baik.

Anda bisa menambahkan kondisi if di dalam fungsi map untuk memeriksa apakah nilai item kosong atau tidak. Jika kosong, maka tidak akan ditambahkan tag <p> dan </p>. Berikut adalah contohnya:

function processData() { const inputElement = document.getElementById("input"); const outputElement = document.getElementById("output"); const inputData = inputElement.value.split("\n"); const processedData = inputData .map(item => { if (item.trim() !== "") { return `<p>${item}</p>\n`; } else { return ""; } }) .join(""); outputElement.value = processedData; }

Pada contoh di atas, kita menggunakan trim() untuk menghapus spasi di awal dan akhir string, kemudian memeriksa apakah string tersebut kosong setelah dihapus spasi. Jika tidak kosong, maka ditambahkan tag <p> dan </p>. Jika kosong, maka tidak ada tag yang ditambahkan.

0 comments

Menambahkan Nomor Urut di dalam DIV menggunakan CSS saja

BUKA →

Contoh Penambahan Nomor Urut dengan CSS

Agama

Air

Akuntansi

ARSITEKTUR

Artikel

Bahasa Indonesia

Bahasa Tips

USAHA

2

Agama

Air

Akuntansi

ARSITEKTUR

Artikel

Bahasa Indonesia

Bahasa Tips

USAHA

3

Agama

Air

Akuntansi

ARSITEKTUR

Artikel

Bahasa Indonesia

Bahasa Tips

USAHA

Berikut adalah contoh penggunaan CSS untuk menambahkan nomor urut di depan data pada elemen <div> dengan id "urut":

<h2>Contoh Penambahan Nomor Urut dengan CSS</h2> <style> #urut { counter-reset: nomor; /* Mengatur ulang nilai counter menjadi 0 */ list-style-type: none; /* Menghilangkan tanda bullet pada list */ } #urut > * { counter-increment: nomor; /* Menambahkan 1 pada nilai counter */ } #urut > *::before { content: counter(nomor) ". "; /* Menampilkan nomor urut */ } </style> <div id="urut"> <p>Agama</p> <p>Air</p> <p>Akuntansi</p> <p>ARSITEKTUR</p> <p>Artikel</p> <p>Bahasa Indonesia</p> <p>Bahasa Tips</p> <p>USAHA</p> </div>

Dalam contoh di atas, properti counter-reset digunakan untuk mengatur ulang nilai dari counter, sedangkan properti counter-increment digunakan untuk menambahkan nilai counter setiap kali elemen turunan dari <div> dengan id "urut" ditemukan. Properti content pada selector ::before digunakan untuk menampilkan nomor urut di depan setiap elemen.

0 comments

Menambahkan Nomor Urut pada DIV menggunakan Javascript

BUKA →

Agama Air Akuntansi ARSITEKTUR Artikel Bahasa Indonesia Bahasa Inggris Bank Soal Biologi bisnis Budaya Cerita Cerpen Fiksi Fisika Gizi iklan Internet Kesehatan Kesenian Kimia Komputer Latihan Soal manajemen Marketing Matematika Naskah Drama Patiseri Pengetahuan Puisi Resep Masakan Sejarah Sekretaris Seks Struktur Teknologi Tips USAHA

---

---

1. Agama 2. Air 3. Akuntansi 4. ARSITEKTUR 5. Artikel 6. Bahasa Indonesia 7. Bahasa Inggris 8. Bank 9. Soal Biologi 10. bisnis 11. Budaya 12. Cerita 

0 comments

Background gradasi dari kiri ke kanan dari hijau ke transparan

BUKA →

Untuk membuat background dengan gradasi dari kiri ke kanan dari hijau ke transparan pada CSS, Anda dapat menggunakan properti background dan linear-gradient.

Berikut adalah contoh kodenya:

div {
  width: 100%;
  height: 200px;
  background: linear-gradient(to right, #00FF00, transparent);
}

Penjelasan kode di atas:

div adalah elemen HTML yang ingin diberi background dengan gradasi.
width dan height digunakan untuk menentukan lebar dan tinggi elemen div.
background digunakan untuk menentukan background elemen div. Properti ini memiliki nilai berupa linear-gradient yang menandakan bahwa gradasi berbentuk garis lurus, kemudian diikuti oleh arah gradasi to right yang artinya gradasi akan dimulai dari kiri ke kanan. Selanjutnya, diikuti oleh warna awal gradasi yaitu #00FF00 yang merupakan kode warna hijau. Sedangkan, transparent digunakan untuk memberikan efek transparan pada akhir gradasi.
Dengan kode di atas, maka elemen div akan memiliki background dengan gradasi hijau ke transparan dari kiri ke kanan. Anda dapat mengubah nilai warna hijau menjadi warna lain sesuai keinginan Anda.

Berikut adalah contoh HTML yang dapat digunakan untuk menampilkan div dengan latar belakang gradasi dari hijau ke transparan secara horizontal:

<title>Contoh CSS Background Gradasi</title>
	<style>
		div {
			width: 100%;
			height: 200px;
			background: linear-gradient(to right, #00FF00, transparent);
		}
	</style>
	<div></div>

Kode CSS di atas digunakan untuk membuat div dengan lebar 100% dan tinggi 200px, serta latar belakang berupa gradasi dari warna hijau (#00FF00) ke transparan secara horizontal dari kiri ke kanan. Kemudian, div tersebut ditampilkan dalam elemen body pada halaman HTML.

Berikut ini contohnya hasilnya :

Contoh CSS Background Gradasi

Contoh penerapannya, bisa dilihat DISINI.
Dalam contoh dilink tersebut, saya tambahkan juga rumus untuk memberikan harga wiremesh otomatis yang didapat dari Jayasteel.
Codenya adalah sebagai berikut:

<div style="background: linear-gradient(to right, rgb(151, 178, 170), transparent); 
border-radius: 5px; 
color: #4d487a; 
font-size: 2em; 
padding: 1rem;"> 

<b>Harga Wiremesh M7 = 
<script>kode javascrip untuk menampilkan harga per kg</script> 
per kg.
<br>Update 
<script>kode js untuk menampilkan bulan dan tahun sekarang</script> 
adalah= 
<script>kode js untuk menampilkan harga per lembar</script> 
per lembar</b>
</div>

Dan Hasilnya adalah sebagai berikut

Harga Wiremesh M7 = harga per kg per kg.
Update adalah= harga per lembar per lembar

0 comments

Membuat Tombol Copy (Salin) ke Clipboard dari PRE - CODE

BUKA →

Program ini adalah contoh implementasi fungsi "Salin Kode" dengan menggunakan JavaScript. Ketika tombol "Salin Kode" di klik, maka kode yang terdapat di dalam elemen dengan id "input" akan disalin ke clipboard menggunakan fungsi navigator.clipboard.writeText(). Setelah itu, tombol "Salin Kode" akan berganti teks menjadi "Kode telah berhasil disalin!" sebagai umpan balik kepada pengguna. Setelah dua detik, tombol tersebut akan kembali ke teks semula yaitu "Salin Kode".

Program tersebut berguna untuk memudahkan pengguna dalam menyalin kode dari suatu halaman web tanpa harus melakukan proses copy paste secara manual.

Contoh Copy Kode

 
  
  CONTOH CODE YANG DI SALIN
    <script>
      const copyButton = document.getElementById("copy-button");
      const codeOutput = document.getElementById("input");

      copyButton.addEventListener("click", () => {
        const code = codeOutput.textContent;
        navigator.clipboard.writeText(code);
        copyButton.textContent = "Kode telah berhasil disalin!";
        setTimeout(() => {
          copyButton.textContent = "Salin Kode";
        }, 2000);
      });
    </script>
  

Code yang dipakai untuk membuat program ini, adalah sebagai berikut:

CSS :

    
<style>
  pre {
  background-color: #f4f4f4;
  padding: 10px;
  font-family: monospace;
  font-size: 14px;
  border: 1px solid #ddd;
  line-height: 1.5;
  overflow-x: auto;
}

code {
  font-family: monospace;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 3px;
  color: #4725ce;
}
      button {
        margin-top: 10px;
        padding: 5px 10px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
      }
      button:hover {
        background-color: #3e8e41;
      }
</style>
    

HTML :

    <h1>Contoh Copy Kode</h1>
    <br />
<pre> <button id="copy-button">Salin Kode</button>
  <code class="language-js" id="input">
CONTOH CODE YANG DI SALIN
  </code>
</pre>    

Javascript :

Kemudian saya mencoba membuat untuk yang jika Code yang di Salin ada beberapa, maka hasilnya, sebagai contoh bisa dibuka di link berikut : Banyak Tombol Copy (Salin) ke Clipboard dari CODE

0 comments

TIDAK DIPAKAI.... UNTUK COBA-COBA PROGRAM

BUKA →

disini

Section 1

Content of section 1.

Subsection 1.1

Content of subsection 1.1.

Subsection 1.2

Content of subsection 1.2.

Section 2

Content of section 2.

Subsection 2.1

Content of subsection 2.1.

Subsubsection 2.1.1

Content of subsubsection 2.1.1.

0 comments

Kode parsing (PARSE) : kode script, CSS, dan HTML yang diposting di blog ditampilkan apa adanya, tanpa dijalankan

BUKA →

Untuk memastikan bahwa kode script, CSS, dan HTML yang diposting di blog ditampilkan apa adanya, tanpa dijalankan, Anda dapat menggunakan fungsi escape() untuk menghindari karakter yang biasa digunakan dalam bahasa markup seperti <, >, &, dan " menjadi kode yang dienkripsi, atau lebih dikenal sebagai entitas HTML.

Berikut adalah contoh kode parsing yang dapat Anda gunakan untuk menghindari karakter khusus:

Dalam contoh ini, fungsi escape() digunakan untuk mengenkripsi kode, sehingga jika terdapat karakter khusus seperti <, >, &, dan ", karakter tersebut akan diubah menjadi entitas HTML. Sehingga kode yang ditampilkan di halaman blog akan di-render sebagai teks biasa, dan bukan dijalankan sebagai bahasa markup.

Contoh Parsing Kode

Kode:


Hasil:

Di atas adalah contoh hasilnya. Anda bisa mencoba paste kode html, atau css, atau javascript, untuk di-Parse.
Dan berikut adalah kodenya, Anda bisa copas untuk dipasang di blog Anda.
Jangan lupa meninggalkan komentar. Jangan ragu untuk bertanya, jika ada kesulitan, atau ingin paham lebih jelas.

CSS :

    
<style>
      pre {
        background-color: #f5f5f5;
        border: 1px solid #ddd;
        border-radius: 3px;
        font-size: 14px;
        line-height: 1.5;
        padding: 10px;
        white-space: pre-wrap;
        word-wrap: break-word;
      }
      button {
        margin-top: 10px;
        padding: 5px 10px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
      }
      button:hover {
        background-color: #3e8e41;
      }
</style>
    

HTML :

    
    <h1>Contoh Parsing Kode</h1>
    <label for="code-input">Kode:</label>
    <br>
    <textarea id="code-input" rows="12"></textarea>
    <br>
    <button id="parse-button">Parsing Kode</button>
    <button id="copy-button">Salin Kode</button>
    <br>
    <label for="code-output">Hasil:</label>
    <br>
    <pre id="code-output"></pre>
    

Javascript :

    
    <script>
      const parseButton = document.getElementById("parse-button");
      const copyButton = document.getElementById("copy-button");
      const codeInput = document.getElementById("code-input");
      const codeOutput = document.getElementById("code-output");

      parseButton.addEventListener("click", () => {
        const code = codeInput.value;
        const parsedCode = parseCode(code);
        codeOutput.textContent = parsedCode;
      });

      copyButton.addEventListener("click", () => {
        const code = codeOutput.textContent;
        navigator.clipboard.writeText(code);
        copyButton.textContent = "Kode telah berhasil disalin!";
        setTimeout(() => {
          copyButton.textContent = "Salin Kode";
        }, 2000);
      });

      function parseCode(code) {
        const encodedCode = code.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
        return encodedCode;
      }
    </script>
    

Diatas, adalah contoh HTML lengkap yang sudah termasuk dengan fitur parsing dan tombol salin.

Program tersebut adalah sebuah aplikasi web sederhana yang memiliki fitur untuk melakukan parsing pada kode yang dimasukkan pengguna. Kode yang dimasukkan bisa berupa HTML, CSS, atau JavaScript. Setelah pengguna memasukkan kode tersebut, aplikasi akan melakukan parsing untuk mengubah karakter khusus pada kode menjadi karakter yang lebih aman untuk ditampilkan pada halaman web.

Aplikasi ini terdiri dari satu halaman web dengan tiga bagian utama yaitu kotak input kode, tombol "Parse", dan kotak output kode hasil parsing. Ketika pengguna menekan tombol "Parse", aplikasi akan menjalankan fungsi parseCode() yang melakukan parsing pada kode yang dimasukkan oleh pengguna.

Fungsi parseCode() akan menerima kode yang dimasukkan oleh pengguna sebagai parameter dan kemudian melakukan parsing pada karakter khusus seperti <, >, &, ", dan '. Karakter-karakter ini akan diubah menjadi kode HTML entity yang lebih aman untuk ditampilkan pada halaman web. Hasil parsing akan dikembalikan sebagai output dari fungsi parseCode().

Setelah fungsi parseCode() selesai dijalankan, output dari hasil parsing akan ditampilkan pada kotak output kode di halaman web. Selain itu, pengguna juga dapat menekan tombol "Copy All" untuk menyalin kode hasil parsing ke clipboard dan muncul pesan "Kode telah berhasil disalin!" sebagai umpan balik kepada pengguna.

Semoga berguna.
Afandi Kusuma.

0 comments

Animasi gambar Besar Bergerak berganti setiap hari OTOMATIS

BUKA →

Di halaman ini diberikan contoh animasi gambar besar yang bergerak bergantian otomatis. Kamu bisa copas kode yang ada di halaman ini, untuk kamu pasang di blog kamu. Jika kesulitan copasnya, silakan bertanya via komentar.

🍀

🍀

    
<style>
@keyframes mov{0%{transform:translateX(0) translateY(0) rotate(0);opacity:0.03;}
  25%{transform:translateX(250px) translateY(200px) rotate(90deg);opacity:0.2;}
  50%{transform:translateX(0) translateY(350px) rotate(180deg);opacity:0.03;}
  75%{transform:translateX(-300px) translateY(250px) rotate(270deg);opacity:0.2;}
  100%{transform:translateX(0) translateY(0) rotate(0deg);opacity:0.03;}}
  .el{animation-name:mov;animation-duration:5s;animation-timing-function:ease-in-out;animation-iteration-count:2;animation-fill-mode:forwards}
  .el2{animation-name:mov2;animation-duration:8s;animation-timing-function:ease-in-out;animation-iteration-count:2;animation-fill-mode:forwards}
@keyframes mov2{0%{transform:translateX(0) translateY(0) rotate(0);opacity:0.03;}
25%{transform:translateX(250px) translateY(250%) rotate(90deg);opacity:0.2;}
50%{transform:translateX(0) translateY(500%) rotate(270deg);opacity:0.01;}
75%{transform:translateX(-250%) translateY(250%) rotate(360deg);opacity:0.3;}
100%{transform:translateX(0) translateY(0) rotate(0deg);opacity:0.03;}}
</style>

<div style="height: 1px; width: 100vw;"><div class="el" id="ka" style="font-size: 30em;">🍀</div></div>
<div><div class="el2" id="ka2" style="font-size: 25em;">🍀</div></div>

<script>
const kk3 = ["🪐", "💦", "💗", "💖", "💝", "💞", "💙", "🍒", "💎", "🎀", "📀", "🔍", "💫", "🌱", "🏠", "🌳", "🔎", "🏡", "🌷", "🌸", "💡", "🌺", "🌻", "🌼", "🌏", "🌿", "🍀", "🍁", "🍂", "🍃", "🐥", "🐓", "🔑", "📶", "🏆", "🌌", "🔆", "🐤"];
  
  const da = new Date().getDate();
  document.getElementById("ka").textContent = kk3[da];
  document.getElementById("ka2").textContent = kk3[da + 2];
</script>
    

Kode tersebut merupakan kode HTML, CSS, dan JavaScript yang menghasilkan animasi pada dua elemen div berisi karakter emoji bunga 🍀.

CSS pada kode tersebut menentukan animasi menggunakan @keyframes yang diberi nama "mov" dan "mov2". Animasi tersebut berisi transformasi elemen div dengan properti translateX, translateY, dan rotate, serta pengaturan opasitas elemen pada waktu tertentu dalam animasi. Setiap animasi berlangsung selama beberapa detik dengan dua kali pengulangan.

Elemen div pada kode tersebut diberi kelas "el" dan "el2" serta ID "ka" dan "ka2". Keduanya berisi karakter emoji bunga 🍀 dengan ukuran font yang berbeda.

JavaScript pada kode tersebut menentukan karakter emoji yang ditampilkan pada elemen div dengan ID "ka" dan "ka2" berdasarkan tanggal saat ini (diambil dengan menggunakan objek Date). Karakter emoji ditentukan dari array kk3 yang berisi karakter-karakter emoji tertentu. Karakter emoji pada elemen div "ka" ditentukan dari indeks array yang sama dengan tanggal hari ini, sementara karakter emoji pada elemen div "ka2" ditentukan dari indeks array yang diambil 2 hari setelah tanggal hari ini. 

0 comments

Mengambil salah satu karakter dalam array

BUKA →

Program ini adalah sebuah script JavaScript yang menampilkan sebuah array karakter dan dua tombol untuk menampilkan karakter berikutnya atau sebelumnya dari array tersebut.

Hasil: 🪐

Array karakter tersebut disimpan dalam variabel kk3 dan berisi berbagai jenis karakter unicode seperti emoticon, simbol, dan emoji.

🪐

Pada saat halaman dimuat, script ini akan menetapkan variabel i3 ke nilai awal 0, yang akan digunakan untuk menunjukkan indeks dari karakter yang sedang ditampilkan dari array kk3.

Karakter Acak

Kemudian, script ini akan mencari elemen dengan id bb2 dan menetapkan elemen tersebut ke variabel ss2. Elemen tersebut akan digunakan untuk menampilkan karakter yang sedang ditampilkan.

Ketika tombol "Prev" atau "Next" ditekan, event listener akan memanggil fungsi yang mengubah nilai dari variabel i3 tergantung pada tombol yang ditekan dan kemudian menampilkan karakter yang sesuai dari array kk3 ke elemen ss2.

Dengan demikian, program ini memungkinkan pengguna untuk menampilkan karakter berikutnya atau sebelumnya dari array karakter dengan menekan tombol "Prev" atau "Next".

Sebagai percobaan sebelumnya, juga dibuat untuk menampilkan salah satu isi array secara acak. Juga menampilkan isi array pada urutan tertentu yang ditetapkan.
Kode yang digunakan, dibagikan di bawa.

Hasil: 🪐

---

Klik disini untuk menampilkan karakter pertama

---

Klik icon/karakter untuk menampilkan karakter berikutnya:

Hasil: 🪐

---

Klik tombol untuk menampilkan karakter berikutnya atau sebelumnya:

Hasil: 🪐

Berikut ini adalah kode yang digunakan untuk membuat program yang bisa mengambil salah satu karakter dalam array Dimulai dengan membuat button prev dan next seperti berikut ini, dan tempat untuk menampilkan karakter yang diambil dari array.

HTML :

  
<p>Klik tombol untuk menampilkan karakter berikutnya atau sebelumnya:</p>

<p>Hasil: <span id="bb2"></span></p>
<button id="prev">Prev</button>
<button id="next">Next</button>

Anda bisa menambahkan css berikut ini jika diperlukan

CSS :

  
<style>
#bb2{font-size:3em}
</style>
  

Dan inilah javascript yang menjalankan program ini.

Javascript :

  
<script>
  const kk3 = ["🪐", "💦", "💗", "💖", "💝", "💞", "💙", "🍒", "💎", "🎀", "📀", "🔍", "💫", "🌱", "🏠", "🌳", "🔎", "🏡", "🌷", "🌸", "💡", "🌺", "🌻", "🌼", "🌏", "🌿", "🍀", "🍁", "🍂", "🍃", "🐥", "🐓", "🔑", "📶", "🏆", "🌌", "🔆", "🐤"];
  let i3 = 0;

  const ss2 = document.getElementById("bb2");
  span.textContent = kk3[i3];

  document.getElementById("prev").addEventListener("click", function() {
    i3--;
    if (i3 < 0) {
      i3 = kk3.length - 1;
    }
    ss2.textContent = kk3[i3];
  });

  document.getElementById("next").addEventListener("click", function() {
    i3++;
    if (i3 === kk3.length) {
      i3 = 0;
    }
    ss2.textContent = kk3[i3];
  });
</script> 
  

Di blog yang lain, program ini, saya coba terapkan untuk memberikan karakter besar sebagai background yang berganti setiap hari atau sesuai tanggal.

["🪐", "💦", "💗", "💖", "💝", "💞", "💙", "🍒", "💎", "🎀", "📀", "🔍", "💫", "🌱", "🏠", "🌳", "🔎", "🏡", "🌷", "🌸", "💡", "🌺", "🌻", "🌼", "🌏", "🌿", "🍀", "🍁", "🍂", "🍃", "🐥", "🐓", "🔑", "📶", "🏆", "🌌", "🔆", "🐤"]

0 comments

Menggambar hanya dengan menggunakan CSS

BUKA →

🍀

Tanggal saat ini adalah:

Tanggal kemarin adalah:

---

🍀 ...

0 comments