Salman - Keep Innovating

Programming Class

Text Editor

1) HTML Tags & Elements
Pada umumnya, ada dua tipe HTML Tag, yaitu Opening Tag (Tag Pembuka) - contohnya adalah <p> dan Closing Tag (Tag Penutup) - contohnya adalah </p>
Dokumen HTML memiliki 3 tag utama, yaitu <html>, <head>, dan <body>
HTML Element merupakan sebuah komponen dalam halaman web, bisa berupa paragraf, judul, atau gambar. Pada umumnya, HTML Element terdiri dari Opening Tag, Closing Tag, Attribute (contohnya adalah "style" yang memiliki Value "color=red"), dan Content yang ingin ditampilkan di browser - Contoh : My First Paragraph.

2) HTML Attributes & Comments
Di dalam Opening Tag dapat berisi attribute, yang berfungsi untuk memberikan informasi tambahan kepada sebuah element. Contoh penggunaan tag element : <img> dan <a>
Comment adalah catatan kecil yang bisa kita tambahkan ke dalam kode sumber (source code) tanpa mengubah fungsi dari program yang kita buat. Maksudnya, keberadaan comment dalam souce code akan diabaikan dan tidak dibaca oleh komputer saat programnya dijalankan. Dalam kasus HTML, browser akan mengabaikan semua comment yang kita tulis.
HTML Comment diawali dengan

3) HTML Div, Span, & List
Div adalah sebuah elemen yang memiliki peran penting sebagai tag yang mengelompokan divisi tertentu dalam bahasa program HTML.
Tag <span> digunakan untuk mengelompokkan tulisan dalam satu baris. Pada umumnya sering digunakan untuk menambahkan CSS pada suatu tulisan pada satu baris, tapi tidak menutup kemungkinan digunakan untuk hal lainnya.
Contoh : <p>Belajar Coding bersama <span style="color:red;">SalmanTechno</span></p>
Output : Belajar Coding bersama SalmanTechno
Ada dua tipe list di HTML, yaitu :
1) Unordered list dengan menggunakan tag <ul>
2) Ordered list dengan menggunakan tag <ol>

4) HTML Table
Pada dasarnya, untuk membuat sebuah tabel di HTML cukup membutuhkan 3 tag, yaitu :
1) <table> sebagai element utama
2) <tr> atau dikenal sebagai table row tag, digunakan untuk membuat baris baru di dalam <table>
3) <td> atau dikenal sebagai table tada tag, digunakan sebagai container (wadah) dari data yang kita mau isi di dalam <tr>
Kita juga bisa menggunakan tag <th> sebagai pengganti <td> untuk membuat header cell (Biasanya digunakan untuk menampilkan judul kolom). Secara standar, <th> membuat tulisan di dalamnya menjadi tebal.
Contoh :
<table border="1">
<tr>
<th>Nama</th>
<th>Status</th>
</tr>
<tr>
<td>Salman</td>
<td>Pelajar</td>
</tr>
</table>
Hasil :

Nama	Status
Salman	Pelajar

5) HTML Forms
Form adalah suatu bagian yang berfungsi sebagai input atau masukan dari pengguna yang kemudian akan diproses atau diolah agar dapat dipakai sesuai kebutuhan
Tag <form> digunakan untuk mengawali pembuatan form.
Contoh :
<form action="/path"></form>
Tag <input> digunakan untuk membuat kotak input dimana user akan mengisi data.
Tag <select> dan <option> digunakan dimana user akan memilih salah satunya.
Tag <fieldset> akan memberikan garis tepi pada element-element HTML yang ingin kita kelompokkan
Tag <legend> digunakan untuk memberikan keterangan pada element <fieldset>
Tag <textarea> digunakan untuk menampung input dari user berupa teks yang lebih dari satu barus, dan mempunyai karakter yang sangat banyak.
Untuk membuat sebuah tombol yang dapat diklik, maka kita memerlukan tag <button>, dan juga bisa menggunakan tag <input> dengan type button atau submit.

6) HTML Multimedia
Untuk menampilkan gambar pada halaman sebuah website, maka kita membutuhkan tag <img>
Untuk bisa menambahkan video pada halaman web kita, kita sebaiknya menggunakan tag <video>
Kita dapat menggunakan <audio> untuk menampilkan suara pada halaman sebuah website. Format yang didukung pun meliputi mp3, wav, dan ogg.
Kita juga bisa menampilkan halaman website lainnya di halaman website yang kita buat dengan menggunakan tag <iframe>

7) HTML Layout Website
Layout sebuah website biasanya terdiri dari : header, navigation bar, main content, dan footer.
Semantic element menjelaskan tujuan dari element tersebut kepada browser dan pemrogram lain yang membaca kodenya. Semantic element tidak mempengaruhi tampilan dari halaman web, itu adalah fungsi dari CSS. HTML 4 menggunakan non-semantic element sedangkan HTML 5 menggunakan semantic element.
Berikut adalah contoh dari non-semantic element :
1) <div id="header">
2) <div id="menu">
3) <div id="content">
4) <div id="article">
5) <div id="footer">
Contoh dari semantic element :
1) <header>
2) <nav>
3) <section>
4) <aside>
5) <article>
6) <footer>

CSS Basic

Javascript Basic

Javascript Intermediate

AI - Machine Learning

Free Source Code

Sebelum mengcopy source code dibawah ini, mohon untuk :
- Like semua video pembelajaran
- Share salah satu pembelajaran ke 5 group Social Media
- Subscribe SalmanTechno Channel

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">  
    <title>Text To Speech in JavaScript</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="wrapper">
      <header>Text To Speech</header>
      <form action="#">
        <div class="row">
          <label>Enter Text</label>
          <textarea></textarea>
        </div>
        <div class="row">
          <label>Select Voice</label>
          <div class="outer">
            <select></select>
          </div>
        </div>
        <button id="button">Convert To Speech</button>
      </form>
    </div>
    <script src="script1.js"></script>
  </body>
</html>

CSS

    /* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #FC5C7D;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #6A82FB, #FC5C7D);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #6A82FB, #FC5C7D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
::selection{
  color: #fff;
  background: #5256AD;
}
.wrapper{
  width: 370px;
  padding: 25px 30px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 7px 7px 20px rgba(0,0,0,0.05);
}
.wrapper header{
  font-size: 28px;
  font-weight: 500;
  text-align: center;
}
.wrapper form{
  margin: 35px 0 20px;
}
form .row{
  display: flex;
  margin-bottom: 20px;
  flex-direction: column;
}
form .row label{
  font-size: 18px;
  margin-bottom: 5px;
}
form .row:nth-child(2) label{
  font-size: 17px;
}
form :where(textarea, select, button){
  outline: none;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 5px;
}
form .row textarea{
  resize: none;
  height: 110px;
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid #999;
}
form .row textarea::-webkit-scrollbar{
  width: 0px;
}
form .row .outer{
  height: 47px;
  display: flex;
  padding: 0 10px;
  align-items: center;
  border-radius: 5px;
  justify-content: center;
  border: 1px solid #999;
}
form .row select{
  font-size: 14px;
  background: none;
}
form .row select::-webkit-scrollbar{
  width: 8px;
}
form .row select::-webkit-scrollbar-track{
  background: #fff;
}
form .row select::-webkit-scrollbar-thumb{
  background: #888;
  border-radius: 8px;
  border-right: 2px solid #ffffff;
}
form button{
  height: 52px;
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  margin-top: 10px;
  background: #FC5C7D;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #6A82FB, #FC5C7D);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #6A82FB, #FC5C7D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  transition: 0.3s ease;
}
form button:hover{
  background: #4534fe;
}

@media(max-width: 400px){
  .wrapper{
    max-width: 345px;
    width: 100%;
  }
}

Javascript

    const textarea = document.querySelector("textarea"),
voiceList = document.querySelector("select"),
speechBtn = document.querySelector("button");

let synth = speechSynthesis,
isSpeaking = true;

voices();

function voices(){
    for(let voice of synth.getVoices()){
        let selected = voice.name === "Google US English" ? "selected" : "";
        let option = ``;
        voiceList.insertAdjacentHTML("beforeend", option);
    }
}

synth.addEventListener("voiceschanged", voices);

function textToSpeech(text){
    let utterance = new SpeechSynthesisUtterance(text);
    for(let voice of synth.getVoices()){
        if(voice.name === voiceList.value){
            utterance.voice = voice;
        }
    }
    synth.speak(utterance);
}

speechBtn.addEventListener("click", e =>{
    e.preventDefault();
    if(textarea.value !== ""){
        if(!synth.speaking){
            textToSpeech(textarea.value);
        }
        if(textarea.value.length > 80){
            setInterval(()=>{
                if(!synth.speaking && !isSpeaking){
                    isSpeaking = true;
                    speechBtn.innerText = "Convert To Speech";
                }else{
                }
            }, 500);
            if(isSpeaking){
                synth.resume();
                isSpeaking = false;
                speechBtn.innerText = "Pause Speech";
            }else{
                synth.pause();
                isSpeaking = true;
                speechBtn.innerText = "Resume Speech";
            }
        }else{
            speechBtn.innerText = "Convert To Speech";
        }
    }
});

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Kalkulator Himpunan menggunakan HTML, CSS, dan Javascript</title>
	<link rel="stylesheet" type="text/css" href="css/himpunan.css">
</head>
<body>
	<h1>Kalkulator Himpunan</h1>
	<br>
	<img src="multimedia/operasihimpunan.png" style="width:300px;height:300px;">
	<br>
	<div>
		<label for="setA">Himpunan A :</label>
		<input type="text" id="setA" name="setA">
	</div>
	<div>
		<label for="setB">Himpunan B :</label>
		<input type="text" id="setB" name="setB">
	</div>
	<br>
	<button onclick="calculate()">Hitung</button>
	<div id="result"></div>
	<script src="js/himpunan.js"></script>
</body>
</html>

CSS

body{
	font-family:Arial, sans-serif;
}
h1{
	text-align:left;
}
label{
	display:block;
	margin-top:10px;
}
input[type="text"]{
	padding:5px;
	border:1px solid #ccc;
	border-radius:3px;
}
button{
	padding:5px 10px;
	background-color:#4CAF50;
	color:#fff;
	border:none;
	border-radius:3px;
	cursor:pointer;
}
button:hover{
	background-color:#3e8e41;
}
p{
	margin-top:20px;
	font-weight:bold;
}

Javascript

  function calculate() {
  // variabel himpunanA dan B
  var setA = document.getElementById("setA").value.split(",");
  var setB = document.getElementById("setB").value.split(",");

  setA = setA.map(Number).sort(function(a, b) { return a - b; });
  setB = setB.map(Number).sort(function(a, b) { return a - b; });

  // gabungan
  var union = setA.concat(setB.filter(function(item) {
    return setA.indexOf(item) === -1;
  }));

  // irisan
  var intersection = setA.filter(function(item) {
    return setB.indexOf(item) !== -1;
  });

  // B - A
  var differenceA = setA.filter(function(item) {
    return setB.indexOf(item) === -1;
  });

  // A - B
  var differenceB = setB.filter(function(item) {
    return setA.indexOf(item) === -1;
  });

  // A XOR B 
  var symmetricDifference = differenceA.concat(differenceB);

  // A komplemen
  var complementA = [];
  for (var i = 1; i <= 100; i++) {
    if (setA.indexOf(i) === -1) {
      complementA.push(i);
    }
  }

  // hasil
  var result = "Himpunan A: {" + setA.join(", ") + "}
";
  result += "Himpunan B: {" + setB.join(", ") + "}
";
  result += "Gabungan: {" + union.join(", ") + "}
";
  result += "Irisan: {" + intersection.join(", ") + "}
";
  result += "A-B: {" + differenceA.join(", ") + "}
";
  result += "B-A: {" + differenceB.join(", ") + "}
";
  result += "A XOR B: {" + symmetricDifference.join(", ") + "}
";
  result += "A^c: {" + complementA.join(", ") + "}";
  document.getElementById("result").innerHTML = result;
}

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Voice To Text menggunakan HTML, CSS, dan Javascript</title>
	<link rel="stylesheet" type="text/css" href="css/voicetotext.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-bs4.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-bs4.js"></script>
</head>
<body>
	<h1 style="color:white;">Aplikasi Voice To Text</h1>
	<button id="start">Start Recording</button>
	<button id="stop" style="margin-left:10px;">Stop Recording</button>
	<button onclick="myFunction()" style="margin-left:10px;">Copy Text</button>
	<button onClick="document.location.reload(true)" style="margin-left:10px;">Refresh</button>
	<br><br>
	<div>
		<textarea id="summernote"></textarea>
	</div>
	<script src="js/voicetotext.js"></script>
</body>
</html>

CSS

body{
	text-align:center;
	font-family:Arial,sans-serif;
}
h1{
	color:#333;
}
#clock{
	font-size:48px;
	margin-bottom:20px;
}
#alarm-form{
	margin-top:20px;
}
#alarm-form label{
	margin-right:10px;
}
#alarm-form button{
	margin-top:10px;
	padding:5px 10px;
}

Javascript

  function setAlarm() {
    var alarmInput = document.getElementById("alarm-time");
    var alarmTime = alarmInput.value;

    if (alarmTime === "") {
        alert("Harap pilih waktu alarm!");
        return;
    }

    var now = new Date();
    var alarm = new Date(now.toDateString() + " " + alarmTime);

    if (alarm <= now) {
        // Tambahkan 1 hari jika waktu alarm sudah berlalu hari ini
        alarm.setDate(alarm.getDate() + 1);
    }

    var timeUntilAlarm = alarm - now;

    setTimeout(function() {
        playAlarmSound();
        alert("Waktunya alarm!");
    }, timeUntilAlarm);
}

function playAlarmSound() {
    var alarmSound = document.getElementById("alarm-sound");
    alarmSound.play();
}

function stopAlarmSound() {
    var alarmSound = document.getElementById("alarm-sound");
    alarmSound.pause();
    alarmSound.currentTime = 0;
}

function updateClock() {
    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();

    hours = addLeadingZero(hours);
    minutes = addLeadingZero(minutes);
    seconds = addLeadingZero(seconds);

    var timeString = hours + ":" + minutes + ":" + seconds;
    document.getElementById("clock").textContent = timeString;

    setTimeout(updateClock, 1000);
}

function addLeadingZero(number) {
    if (number < 10) {
        return "0" + number;
    }
    return number;
}

updateClock();

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Alarm Peningat Waktu</title>
	<link rel="stylesheet" type="text/css" href="css/alarm.css">
</head>
<body>
	<h1>Alarm Pengingat Waktu</h1>
	<div id="clock"></div>
	<div id="alarm-form">
		<label>Pilih waktu alarm :</label>
		<input type="time" id="alarm-time">
		<button onclick="setAlarm()">Atur Alarm</button>
	</div>

	<audio id="alarm-sound" src="multimedia/alarmsound.mp3"></audio>

	<script src="js/alarm.js"></script>
</body>
</html>

CSS

body{
	text-align:center;
	font-family:Arial,sans-serif;
}
h1{
	color:#333;
}
#clock{
	font-size:48px;
	margin-bottom:20px;
}
#alarm-form{
	margin-top:20px;
}
#alarm-form label{
	margin-right:10px;
}
#alarm-form button{
	margin-top:10px;
	padding:5px 10px;
}

Javascript

  function setAlarm() {
    var alarmInput = document.getElementById("alarm-time");
    var alarmTime = alarmInput.value;

    if (alarmTime === "") {
        alert("Harap pilih waktu alarm!");
        return;
    }

    var now = new Date();
    var alarm = new Date(now.toDateString() + " " + alarmTime);

    if (alarm <= now) {
        // Tambahkan 1 hari jika waktu alarm sudah berlalu hari ini
        alarm.setDate(alarm.getDate() + 1);
    }

    var timeUntilAlarm = alarm - now;

    setTimeout(function() {
        playAlarmSound();
        alert("Waktunya alarm!");
    }, timeUntilAlarm);
}

function playAlarmSound() {
    var alarmSound = document.getElementById("alarm-sound");
    alarmSound.play();
}

function stopAlarmSound() {
    var alarmSound = document.getElementById("alarm-sound");
    alarmSound.pause();
    alarmSound.currentTime = 0;
}

function updateClock() {
    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();

    hours = addLeadingZero(hours);
    minutes = addLeadingZero(minutes);
    seconds = addLeadingZero(seconds);

    var timeString = hours + ":" + minutes + ":" + seconds;
    document.getElementById("clock").textContent = timeString;

    setTimeout(updateClock, 1000);
}

function addLeadingZero(number) {
    if (number < 10) {
        return "0" + number;
    }
    return number;
}

updateClock();

Programming Class

Text Editor

HTML Basic

CSS Basic

Javascript Basic

Javascript Intermediate

AI - Machine Learning

Free Source Code

Text To Speech

HTML

CSS

Javascript

Kalkulator Himpunan

HTML

CSS

Javascript

Voice To Text

HTML

CSS

Javascript

Alarm

HTML

CSS

Javascript