Programming Class

Text Editor

HTML Basic

1) CSS Introduction
CSS adalah bahasa komputer yang digunakan untuk menambahkan design ke suatu halaman website di internet.
Ada 3 cara untuk menyisipkan CSS ke dalam HTML, yaitu :
1. Inline CSS, yaitu menggunakan attribute style untuk menyisipkan kode CSS langsung di dalam HTML Element.
2. Internal CSS, yaitu menggunakan element <style> untuk menyisipkan kode CSS. Element <style> tersebut diletakkan di dalam element.
3. External CSS, yaitu sebuah file CSS terpisah yang disambungkan dengan file HTML dengan menggunakan element <link>

2) CSS Syntax, Selector, Pseudocode
CSS Syntax adalah syntax yang digunakan untuk menunjuk atau memilih HTML Element mana yang ingin diberi style (dihias). CSS Syntax terdiri dari Selector, Property, dan Value.
selector{
property:value;
}
Jika ingin memberikan style pada semua element di website, maka kita bisa menggunakan tanda * sebagai selector.
Tanda # untuk id, sedangkan titik untuk class.
Pseudo Class Selector adalah selector CSS yang digunakan untuk mengakses bagian tertentu dalam HTML yang tidak 'terlihat'
Contoh dari pseudo class adalah :
- :hover = digunakan sehingga di outputnya nanti saat kita memindahkan kursor ke button atau huruf, maka fungsi CSS-nya akan berubah.
- ::before = Menyisipkan suatu konten sebelum element dari selector
- ::after = Menyisipkan suatu konten setelah element dari selector
- ::selection = Memberikan style pada bagian element yang diselect oleh pengguna sehingga pada saat kita highlight teks menggunakan kursor kita, maka bagian teks yang di-highlight akan memiliki warna background sesuai kode CSS kita.
- ::first-letter = Memberikan style pada huruf pertama pada element dari selector
- ::first-line = Memberikan style pada baris pertama pada element dari selector

Coming Soon

3) CSS Box Model

Coming Soon

4) CSS Display

Coming Soon

5) CSS Position

Coming Soon

6) Desain Website Responsif

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

Coming Soon

Coming Soon

Coming Soon

Coming Soon

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