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

Cara Membuat Aplikasi Text To Speech dengan JavaScript di Blogger

BUKA →

Program ini adalah sebuah text-to-speech yang memungkinkan pengguna untuk memasukkan teks ke dalam kotak teks, memilih kecepatan pengucapan, dan menggunakan tombol untuk memutar, menghentikan, dan menghentikan sementara pengucapan.

Setiap browser, mungkin akan berbeda hasilnya. Saya coba di laptop, bisa langsung jalan, dengan berbagai macam browser. Saya coba buka menggunakan android, perlu minta diizinkan dulu untuk mengaktifkan membaca teks, baru setelah itu bisa dengan lancar. Semoga bisa dimanfaatkan.

Program JavaScript yang memanfaatkan fitur Text-to-Speech (TTS) pada browser untuk membaca teks yang dimasukkan pada kolom teks di dalam elemen HTML <textarea> dengan kecepatan tertentu. Program ini terdiri dari beberapa elemen HTML seperti <textarea>, <label>, dan beberapa elemen tombol seperti "Play", "Pause", dan "Stop" yang dapat digunakan untuk mengontrol pembacaan teks.

Jika browser yang Anda gunakan, tidak mendukung SpeechSynthesis, coba aktifkan lebih dahulu. Biasanya untuk browser yang digunakan di handphone. Atau coba gunakan browser yang lain, misalnya Chrome, atau Firefox, atau Edge. Atau coba jalankan READ IT DISINI, dan ikuti apa yang diminta untuk mengijinkan membaca Text. Semoga berhasil.

🐥

Masukkan kalimat yang akan dibaca : Speed

Cara kerjanya adalah sebagai berikut:

1. Mendapatkan elemen dari halaman HTML dengan menggunakan document.getElementById() dan menyimpannya dalam variabel untuk mengaksesnya lebih mudah nantinya.
2. Menambahkan event listener pada tombol untuk memulai, menghentikan, dan menghentikan sementara pengucapan.
3. Membuat objek SpeechSynthesisUtterance() yang merupakan bagian dari Web Speech API. Objek ini memungkinkan untuk mengatur teks yang akan diucapkan, kecepatan pengucapan, dan beberapa opsi lainnya.
4. Menambahkan event listener pada objek utterance untuk mendapatkan karakter terakhir dari teks yang diucapkan.
5. Membuat beberapa fungsi untuk memulai, menghentikan, dan menghentikan sementara pengucapan. Fungsi-fungsi ini memanipulasi objek speechSynthesis yang merupakan bagian dari Web Speech API dan bertanggung jawab untuk mengontrol pengucapan teks.

Jika ada yang masih belum bisa copas program di halaman ini, silakan tuliskan komentar.
Untuk contoh program membaca text yang ada di halaman blog, silakan buka Text To Speech isi post DISINI.

🐥

Code untuk membuat program ini, adalah sebagai berikut:

HTML :

  
Masukkan kalimat yang akan dibaca :
<textarea id="text"></textarea>
<label>Speed</label>
<input id="speed" max="3" name="speed" type="number" value="1" />
<button id="play-button">Play</button>
<button id="pause-button">Pause</button>
<button id="stop-button">Stop</button>

CSS :

  
<style>
#text{width:99%;height:50vh}
</style>
  

Javascript :

  
<script>
const playButton = document.getElementById('play-button')
const pauseButton = document.getElementById('pause-button')
const stopButton = document.getElementById('stop-button')
const textInput = document.getElementById('text')
const speedInput = document.getElementById('speed')
let currentCharacter

playButton.addEventListener('click', () => {
  playText(textInput.value)
})
pauseButton.addEventListener('click', pauseText)
stopButton.addEventListener('click', stopText)
speedInput.addEventListener('input', () => {
  stopText()
  playText(utterance.text.substring(currentCharacter))
})

const utterance = new SpeechSynthesisUtterance()
utterance.addEventListener('end', () => {
  textInput.disabled = false
})
utterance.addEventListener('boundary', e => {
  currentCharacter = e.charIndex
})

function playText(text) {
  if (speechSynthesis.paused && speechSynthesis.speaking) {
    return speechSynthesis.resume()
  }
  if (speechSynthesis.speaking) return
  utterance.text = text
  utterance.rate = speedInput.value || 1
  textInput.disabled = true
  speechSynthesis.speak(utterance)
}

function pauseText() {
  if (speechSynthesis.speaking) speechSynthesis.pause()
}

function stopText() {
  speechSynthesis.resume()
  speechSynthesis.cancel()
}
</script>  
  

Program di atas adalah program JavaScript yang menggunakan SpeechSynthesis API untuk membaca teks yang dimasukkan oleh pengguna melalui textarea dan mengontrol kecepatan pembacaan suara menggunakan tombol "Play", "Pause", dan "Stop" yang telah didefinisikan.

Ketika pengguna mengetik teks di dalam textarea, teks tersebut disimpan dalam objek SpeechSynthesisUtterance yang kemudian diproses dan dibaca oleh API speech synthesis menggunakan metode speak(). Tombol "Pause" digunakan untuk memberhentikan pembacaan sementara, sementara tombol "Stop" digunakan untuk menghentikan pembacaan dan mengulangi dari awal. Tombol "Play" digunakan untuk memulai pembacaan teks.

Ketika pengguna memilih kecepatan suara melalui input dengan tipe "number", nilai yang dipilih oleh pengguna disimpan ke dalam variabel rate dan digunakan untuk mengatur kecepatan pembacaan menggunakan properti "rate" pada objek utterance.

Program juga menggunakan event listener untuk mendeteksi akhir pembacaan suara dan menampilkan teks di textarea yang kembali diaktifkan, serta event listener "boundary" untuk mengetahui karakter terakhir yang telah dibaca sehingga kecepatan suara dapat disesuaikan saat diganti oleh pengguna.

0 comments