Programming Class

Text Editor


HTML Basic


CSS Basic







Coming Soon

1) Internal & External Javascript






Coming Soon

2) Variabel dan Tipe Data Javascript






Coming Soon

3) Operator Javascript






Coming Soon

4) Fungsi Javascript






Coming Soon

5) Objek Javascript






Coming Soon

6) Array Javascript






Coming Soon

7) Object Math Javascript






Coming Soon

8) Javascript Conditional






Coming Soon

9) Javascript Loop






Coming Soon

10) Javascript HTML DOM






Coming Soon

11) Javascript ES6

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