Salman - Keep Innovating

Programming Class

Selamat datang di Programming Class SalmanTechno!
Pada programming class ini, kami telah menyusun kurikulum pembelajaran basic programming secara terstruktur mulai dari HTML, CSS, dan Javascript.
Silahkan klik tombol HTML, CSS, dan Javascript di bawah ini.
SELAMAT BELAJAR!

Text Editor

HTML Basic

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();

HTML


<html>
<head>
	<title>Kalkulator Peluang</title>
	<link rel="stylesheet" type="text/css" href="css/peluang.css">
</head>
<body>
	<div id="calculator">
		<h2>Kalkulator Peluang</h2>
		<label for="event1">Kejadian 1:</label>
		<input type="number" id="event1" min="0" required>
		<label for="sample1">Sampel 1:</label>
		<input type="number" id="sample1" min="0" required>
		<button onclick="hitung()">Hitung</button>
		<div id="hasil">
			<hr>
		<label for="event2">Kejadian 2:</label>
		<input type="number" id="event2" min="0" required>
		<label for="sample2">Sampel 2:</label>
		<input type="number" id="sample2" min="0" required>
		<button onclick="calculate()">Hitung</button>
		<div id="result">
	</div>
	<script src="js/peluang.js"></script>
</body>
</html>

CSS

body{
	font-family:Arial, sans-serif;
}
#calculator{
	width:300px;
	margin:0 auto;
	padding:20px;
	border:1px solid #ccc;
	border-radius:5px;
}
#calculator label{
	display: block;
	margin-bottom: 10px;
}
#result{
	margin-top:20px;
	font-weight: bold;
}

Javascript

  function hitung(){
	var event1 = parseFloat(document.getElementById('event1').value);
	var sample1 = parseFloat(document.getElementById('sample1').value);
	var fraction = simplifyFraction(event1, sample1);
	var desimal = event1/sample1;
	var percentage = desimal * 100;
	var komplemen = 1 - desimal;
	var pecahan = desimalKePecahan(komplemen);
	document.getElementById('result').innerHTML = 'Hasil:<br>' +
	'Dalam bentuk pecahan: ' + fraction + '<br>' + 'Dalam bentuk desimal: ' + desimal.toFixed(2) + '<br>' +
	'Dalam bentuk persentase: ' + percentage.toFixed(2) + '%' + '<br>' + 'Peluang Komplemen: ' + komplemen +
	'<br>' + 'Peluang Komplemen dalam bentuk pecahan: ' + '1 - ' + fraction + ' = ' + pecahan;
	if(event1 >= sample1){
		alert("Angka kejadian 1 Lebih Besar daripada Angka Sampel");
		location.reload();
	}
}

function calculate(){
	if(event1 >= sample1){
		alert("Angka kejadian 1 Lebih Besar daripada Angka Sampel");
		location.reload();
	}
	else if(event2 >= sample2){
		alert("Angka kejadian 2 Lebih Besar daripada Angka Sampel");
		location.reload();
	}
	if(event1 >= sample1 && event2 >= sample2){
		alert("Angka kejadian 1 Lebih Besar daripada Angka Sampel");
		alert("Angka kejadian 2 Lebih Besar daripada Angka Sampel");
		location.reload();
	}
	var event1 = parseFloat(document.getElementById('event1').value);
	var sample1 = parseFloat(document.getElementById('sample1').value);
	var event2 = parseFloat(document.getElementById('event2').value);
	var sample2 = parseFloat(document.getElementById('sample2').value);
	var fraction = simplifyFraction(event1*event2, sample1*sample2);
	var desimal = (event1*event2)/(sample1*sample2);
	var percentage = desimal * 100;
	var komplemen = 1 - desimal;
	var pecahan = desimalKePecahan(komplemen);
	document.getElementById('result').innerHTML = 'Hasil:<br>' +
	'Dalam bentuk pecahan: ' + fraction + '<br>' + 'Dalam bentuk desimal: ' + desimal.toFixed(2) + '<br>' +
	'Dalam bentuk persentase: ' + percentage.toFixed(2) + '%' + '<br>' + 'Peluang Komplemen: ' + komplemen + '<br>' + 'Peluang Komplemen dalam Pecahan: ' 
	 + '1 - ' + fraction + ' = ' + pecahan;
}

function simplifyFraction(numerator, denominator){
	var gcd = calculateGCD(numerator, denominator);
	numerator /= gcd;
	denominator /= gcd;

	return numerator + '/' + denominator;
}
function calculateGCD(a,b){
	if(b === 0){
		return a;
	}
	return calculateGCD(b, a%b);
}
function desimalKePecahan(angka) {
  // Mencari pembilang dan penyebut terkecil
  var pembilang = 1;
  var penyebut = 1;
  
  while (pembilang / penyebut !== angka) {
    if (pembilang / penyebut < angka) {
      pembilang++;
    } else {
      penyebut++;
    }
  }
  
  return pembilang + '/' + penyebut;
<
    >