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

Coming Soon

1) Javascript Array Iteration

Coming Soon

2) Array Multidimensional Javascript

Coming Soon

3) Rekursif Javascript

Coming Soon

4) Regex Javascript

Coming Soon

5) Modules Javascript

Coming Soon

6) Object Oriented Programming (OOP) Javascript

Coming Soon

7) Javascript Prototypes

Coming Soon

8) Javascript Asynchronous

Coming Soon

9) DOM - Elemen Javascript

Coming Soon

10) Array of Objects Javascript

Coming Soon

11) Web Storage

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

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

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