
<p>Hello guys👋! Today we are going to learn how to create animations using HTML & CSS. What will you gain after following this tutorial? I hope you will understand and improve your
  styling skills using CSS and other related tools.

 read also [How to create a simpe calculator using HTML CSS and JavaScript](https://muhamadalzika.com/blog/simpleCalculator)
 </p>
  
  <br></br>

  <p>Firstly, we need to create a folder. You can name it "css-animation" or anything you prefer. Then, we will create HTML and CSS files within that folder.
    Name the HTML file "index.html" and the CSS file "style.css".</p>
    <br></br>
    <p>In the HTML file, we will set the title within the <head> tags. Name the title "animation-css". In the <body> element,
      we will add a 'main' element with a 'div' inside it, and assign the class "box" to the 'div'. The html code.</p>
      <br></br>

 ```html
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Animation</title>
</head>
<body>
    <main>
        <div class="box">
        </div>
    </main>
</body>
</html>
```
<br></br>

<p>Then, we need to style and add animations using CSS. Firstly, we will set the padding and margin to 0 for the entire page. Next,
  we will apply styles to the <body> element and style the .box class.</p>
  <p>CSS code</p>
<br></br>
    
```css
body {
    background-color: #3c6dd8;
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bolder;
    font-size: x-large;
    width: 500px;
    height: 500px;
    border-radius: 20px;
    background-color: #1b1930;
    position: relative;
    
}


@property --angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
}

.box::after,
.box::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    --angle: 0deg;
    background-image: conic-gradient(
        from var(--angle), #d4bd23, #3ced15, #7c0d05
    );
    animation: autoRotate 2s linear infinite;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.box::after {
    filter: blur(20px);
}

@keyframes autoRotate {
    to {
        --angle: 360deg;
    }
}
```

<br></br>

<p>Then, you can run your code from the terminal.</p>
<br></br>
<p>The result will look like this</p>
<br></br>

<video width="640" height="360" controls>
  <source src="/images/Screen%20Recording%202024-09-06%20002151.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<br></br>

<p>
Thank you for reading! If you found this post helpful, please spread the word.

We'd love to hear from you! Let us know how we can better assist you by sharing your suggestions.

Contact us: <https://muhamadalzika.com/about>
Email: <zikafakk@gmail.com>
</p>



Introduction to create simple animation using HTML, CSS, and JavaScript.

How to create simple animation using HTML & CSS.


<p>Hello, everyone! 👋 Today, we are going to learn how to create a responsive sidebar using HTML, CSS, and JavaScript. What will you gain from following this tutorial? I hope you will enhance your CSS styling skills and improve your JavaScript logic.

 read also [How to create a simpe calculator using HTML CSS and JavaScript](https://muhamadalzika.com/blog/simpleCalculator)
 </p>
  
  <br></br>

  <p>Firstly, we need to create a folder. You can name it "responsive-sidebar" or anything you prefer. Then, we will create HTML, CSS and JavaScript files within that folder.
    Name the HTML file "index.html", CSS file "style.css" and the JavaScript file "app.js".</p>
    <br></br>
    <p>In the HTML file, we will set the title within the 'head' tags. Name the title "sidebar". In the 'body' element, we add 'ul' and 'li' list element within 'nav' element.</p>
      <br></br>

 ```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sidebar</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="app.js" defer></script>
</head>
<body>
    <nav id="sidebar">
        <ul>
            <li>
                <button id="toggle-btn" onclick=toggleSideBar() >close</button>
            </li>
            <li class="active">
                <a href="index.html">
                    <span>Home</span>
                </a>
            </li>
            <li>
                <a href="dashboard.html">
                    <span>Dashboard</span>
                </a>
            </li>
            <li>
                <button onclick=toggleSubMenu(this) class="dropdown-btn">
                    <span>create</span>
                </button>
                <ul class="sub-menu">
                    <div>
                        <li>
                            <a href="">folder</a>
                        </li>
                        <li>
                            <a href="">document</a>
                        </li>
                        <li>
                            <a href="">project</a>
                        </li>
                    </div>
                </ul>
            </li>

            <li>
                <a href="calendar.html">
                    <span>Calendar</span>
                </a>
            </li>
            <li>
                <a href="profile.html">
                    <span>Profile</span>
                </a>
            </li>
            <li>
                <label for="darkmode">
                    <input type="checkbox" id="darkmode" class="darkmode">
                    <b>🌞</b>
                </label>
            </li>
        </ul>
    </nav>
</body>
</html>
```
<br></br>

<p>The code displayed above serves as an example. You can follow it as a guide.</p>
<p>Brief explanation: As you can see in the last line, the 'input' and 'b' elements are placed within the 'li' item. This is part of the dark/light mode feature, which I will explain in the final section.</p>

<br></br>
<p>Next, we add the 'main' element to make it resemble a real project. Here’s the HTML code.</p>
<br></br>

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>home</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="app.js" defer></script>
</head>
<body>
    <nav id="sidebar">
        <ul>
            <li>
                <button id="toggle-btn" onclick=toggleSideBar() >close</button>
            </li>
            <li class="active">
                <a href="index.html">
                    <span>Home</span>
                </a>
            </li>
            <li>
                <a href="dashboard.html">
                    <span>Dashboard</span>
                </a>
            </li>
            <li>
                <button onclick=toggleSubMenu(this) class="dropdown-btn">
                    <span>create</span>
                </button>
                <ul class="sub-menu">
                    <div>
                        <li>
                            <a href="">folder</a>
                        </li>
                        <li>
                            <a href="">document</a>
                        </li>
                        <li>
                            <a href="">project</a>
                        </li>
                    </div>
                </ul>
            </li>

            <li>
                <a href="calendar.html">
                    <span>Calendar</span>
                </a>
            </li>
            <li>
                <a href="profile.html">
                    <span>Profile</span>
                </a>
            </li>
            <li>
                <label for="darkmode">
                    <input type="checkbox" id="darkmode" class="darkmode">
                    <b>🌞</b>
                </label>
            </li>
        </ul>
    </nav>
    <main>
        <div class="container">
            <h2>Hello world</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati quas totam voluptate sit at voluptatum culpa, laborum dignissimos nobis amet inventore perspiciatis, veniam consectetur, unde molestiae ratione odit! Accusantium, blanditiis!</p>
        </div>
        <div class="container">
            <h2>example heading</h2>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia facere saepe dolor nulla error commodi minus. Impedit saepe commodi voluptates in blanditiis, quo sit aperiam sunt deleniti praesentium repellat modi?</p>
        </div>
        <div class="container">
            <h2>lorem ipsum</h2>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro architecto excepturi provident ut possimus similique alias esse voluptatem inventore atque doloremque sed natus, vel quisquam est nesciunt soluta ea impedit.</p>
        </div>
        
    </main>
</body>
</html>
```
<br></br>
<p>Then, we need to add styling to our project to make it look more polished. You can follow the code below.</p>
    
```css
:root {
    --base-clr: #11121a;
    --line-clr: #42434a;
    --hover-clr: #222533;
    --text-clr: #e6e6ef;
    --accent-clr: #5e63ff;
    --secondary-text-clr: #b0b3c1;
}

*{
    margin: 0;
    padding: 0;
}

html {
    font-family: 'Courier New', Courier, monospace;
    line-height: 1.5rem;
}
body{
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--base-clr);
    color: var(--text-clr);
    display: grid;
    grid-template-columns: auto 1fr;
}

body:has(#darkmode:checked){
    background-color: var(--text-clr);
    color: var(--base-clr);
    p {
        color: var(--base-clr);
    }

    #sidebar {
        background-color: var(--base-clr);
    }

}


#sidebar {
    box-sizing: border-box;
    height: 100vh;
    width: 250px;
    padding: 5px 1em;
    background-color: var(--base-clr);
    border-right: 1px solid var(--line-clr);
    position: sticky;
    top: 0;
    align-self: start;
    transition: 300ms ease-in-out;
    overflow: hidden;
    box-shadow: 5px 5px 5px rgb(44, 42, 42);
    
}

#sidebar.close {
    padding: 5px;

    width: 60px;

    span {
        display: none;
    }

    a {
        display: none;
    }

    .dropdown-btn {
        display: none;
    }

    .darkmode {
        display: none;
    }

    b {
        display: none;
    }
}

#sidebar a span, #sidebar .dropdown-btn span, #sidebar b {
    flex-grow: 1;
}

#sidebar ul {
    list-style: none;
}

.darkmode {
    display: none;
}

#sidebar > ul > li:first-child{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;

}

#sidebar ul li.active a{
    color: var(--accent-clr);

}

#sidebar a, #sidebar .dropdown-btn, #sidebar b {
    border-radius: .5em;
    padding: .85em;
    text-decoration: none;
    color: var(--text-clr);
    display: flex;
    align-items: center;
    gap: 1em;

}

#sidebar a:hover, #sidebar .dropdown-btn:hover{
    background-color: var(--hover-clr);
}

#sidebar .sub-menu{
    display: grid;
    grid-template-rows: 0fr;
    transition: 300ms ease-in-out;
     
    > div{
        overflow: hidden;
    }
}

#sidebar .sub-menu a{
    padding-left: 2em;
}

#sidebar .sub-menu.show {
    grid-template-rows: 1fr;
}

#toggle-btn {
    margin: 4px;
    margin-left: auto;
    padding: 8px;

    border: none;
    border-radius: .5em;
    background: none;
    cursor: pointer;
    color: var(--text-clr);

}

#toggle-btn:hover {
    background-color: var(--hover-clr);
}


.dropdown-btn{
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    font-weight: bolder;
}

main {
    padding: min(30px,7%);
}
main p {
    color: var(--secondary-text-clr);
    margin-top: 5px;
    margin-bottom: 15px;
}

.container{
    border: 1px solid var(--line-clr);
    border-radius: 1em;
    margin-bottom: 20px;
    padding: min(3em, 15%);

    h2, p {margin-top: 1em;} 
}

```

<br></br>
<p>Based on the code above, it is not responsive yet. So, we will make it responsive. Here’s the CSS code.</p>
<br></br>

```css
@media(max-width: 800px) {
    body {
        grid-template-columns: 1fr;
    }
    main{
        padding: 2em 1em 60px 1em;
    }
    .container {
        border: none;
        padding: 0;
    }
    #sidebar{
        height: 60px;
        width: 100%;
        border-right: none;
        border-top: 1px solid var(--line-clr);
        box-shadow: 10px 10px 10px 10px rgb(44, 42, 42);
        



        position: fixed;
        top: unset;
        bottom: 0;

        padding: 0;

        >ul{

            
            display: grid;
            grid-auto-flow: column;  
            align-items: center; 
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            gap: 10px;

        }

        ul li {
            height: 100%;
            display: inline-flex;
            font-size: small;
            
        }



        ul a, ul .dropdown-btn, ul b{
            width: 50px;
            height: 60px;
            padding: 0;
            border-radius: 0;
            justify-content: center;
            
        }

        .dropdown-btn {
            margin-left: 5px;
        }

         .dropdown-btn:hover{
            background-color: inherit;
            transform: none;
            color: var(--secondary-text-clr);
        }

        a:hover{
            background-color: inherit;
            transform: none;
            color: var(--secondary-text-clr)
        }



        #toggle-btn, .sub-menu {
            display: none;
        }

        ul li .sub-menu.show {
            position: fixed;
            box-sizing: border-box;
            height: 60px;
            width: 100%;
            background-color: var(--hover-clr);
            border-top: 1px solid var(--line-clr);
            display: flex;
            justify-content: center;
            bottom: 60px;
            left: 0;

            >div{
                overflow-x:auto ;
            }

            li{
                display: inline-flex;
                
            }

            a{
                box-sizing: border-box;
                padding: 1em;
                width: auto;
                justify-content: center;
            }

     
        }
    }
}
```
<br></br>
<p>It's will look like this.</p>
<br></br>
<video width="640" height="360" controls>
  <source src="/images/Screen%20Recording%202024-09-18%20091220.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>



<p>
 Next, we will add JavaScript logic to make it interactive. We will create a toggle button function to allow the sidebar to open and close. Additionally, we will implement a toggle function to change the icon from '☀️' to '🌓'. Here’s the JavaScript code.
</p>

```javascript
const toggleButton = document.getElementById('toggle-btn');
 const sidebar = document.getElementById('sidebar');
 const darkModeToggle = document.getElementById('darkmode');
 const bElement = document.querySelector('b');

darkModeToggle.addEventListener('change', ()=> {
    if (darkModeToggle.checked) {
        bElement.textContent = '🌓';
    } else {
        bElement.textContent = '🌞'; 
    }
});
 
 function toggleSideBar() {
    sidebar.classList.toggle('close')
    if(sidebar.classList.contains('close')) {
        toggleButton.textContent='open'
    } else {
        toggleButton.textContent='close'
    }
 }

 const toggleSubMenu = (button) => {
    button.nextElementSibling.classList.toggle('show')
 }
```

<p>Next, you can run your code from the terminal.</p>
<br></br>
<p>The result will look like this</p>
<br></br>

<video width="640" height="360" controls>
  <source src="/images/Screen%20Recording%202024-09-18%20111332.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<br></br>

<h3>So,How does the dark/light mode work?</h3>
<p>As you can see, we have added an 'input' element inside the 'li' item. The 'input' element is a checkbox, and we used the :has() pseudo-class to apply specific styles to the body.</p>
<br></br>

```css
body:has(#darkmode:checked){
    background-color: var(--text-clr);
    color: var(--base-clr);
    p {
        color: var(--base-clr);
    }

    #sidebar {
        background-color: var(--base-clr);
    }

}
```
<br></br>
<p>This means that when users click the checkbox, the background will change.</p>
<br></br>


<p>
Thank you for reading! If you found this post helpful, please spread the word.

We'd love to hear from you! Let us know how we can better assist you by sharing your suggestions.

Contact us: <https://muhamadalzika.com/about>
Email: <zikafakk@gmail.com>
</p>


How to a create responsive sidebar using HTML, CSS, and JavaScript and How to dark/light mode work in JavaScript.

How to create a responsive sidebar using HTML, CSS and JavaScript.


<p>Hello, everyone! 👋 Today, we are going to learn how to create text convert to audio using HTML, CSS, and JavaScript. What will you gain from following this tutorial? I hope you will enhance your CSS styling skills and improve your JavaScript logic.

 read also [How to create a simpe calculator using HTML CSS and JavaScript](https://muhamadalzika.com/blog/simpleCalculator)
 </p>
  
  <br></br>

  <p>Firstly, we need to create a folder. You can name it "text-to-audio" or anything you prefer. Then, we will create HTML, CSS and JavaScript files within that folder.
    Name the HTML file "index.html", CSS file "style.css" and the JavaScript file "script.js".</p>
    <br></br>
    <p>In the HTML file, we will set the title within the 'head' tags. Name the title "text-to-audio". Then, you can following the code below.</p>
      <br></br>

 ```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <h1 class="h1">TextToAudio.dev</h1>

    <p>Enter your script in the input below and press return to be audio.</p>
    <p class="sub-p">Change voices using the dropdown menu</p>
    <div class="main">
        <form class="form">
            <input type="text" class="txt" placeholder="type here..."/>
            <div>
                <label for="rate">Rate</label>
                <input type="range" min="0.5" max="2" value="1" step="0.1" id="rate" />
                <div class="rate-value">1</div>
                <div class="clearfix"></div>
            </div>
            <div>
                <label for="pitch">Pitch</label>
                <input type="range" min="0" max="2" value="1" step="0.1" id="pitch">
                <div class="pitch-value">1</div>
                <div class="clearfix"></div>
            </div>
            <select></select>
            <div class="controls">
                <button id="play" type="submit" class="btn">Play</button>
            </div>
        </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/mediarecorder-to-mp3@latest/dist/index.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
```
<br></br>

<p>The code displayed above serves as an example. You can follow it as a guide.</p>

<br></br>

<p>Then, we need to add styling to our project to make it look more polished. You can follow the code below.</p>
    
```css
body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  display: flexbox;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #58e9a5;
  padding: 20px;
}

h1,
p {
  font-family:  Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
  padding: 20px;
  font-size: 1.5rem;
  
}

.sub-p {
  font-size: small;
  font-weight: bold;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.main {
  width: 50%;
  max-width: 800px; 
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border: solid 3px #000000;
  border-radius: 8px;
  background-color: #f4eee5;
  box-shadow: 5px 5px 3px 5px #000000;
  margin: 0 auto;
}

.h1 {
  border: solid 3px #ffff;
  font-weight: bold;
  border-radius: 5px;
  margin-left: 10%;
  margin-right: 10%;
  color: #ffff;
  box-shadow: 3px 6px  #ffff;
  text-shadow: 2px 2px #000000;
}

.h1:hover {
  box-shadow: 1px 1px  #ffff;
  margin-top: 20px;
}


.txt,
select,
form > div {
  display: block;
  margin: 0 auto;
  font-family: sans-serif;
  font-size: 16px;
  padding: 5px;
}

.form {
  margin: 15px;
}

.txt {
  width: 80%;
  padding: 1.25rem;
}



select {
  width: 83%;
  border:3px solid #000000;
  border-radius: 5px;
  padding: 0.75rem;
}

form > div {
  width: 81%;
}

.txt,
form > div {
  margin-bottom: 10px;
  overflow: auto;
}

.clearfix {
  clear: both;
}

label {
  float: left;
  width: 10%;
  line-height: 1.5;
}

.rate-value,
.pitch-value {
  float: right;
  width: 5%;
  line-height: 1.5;
}

#rate,
#pitch {
  float: right;
  width: 81%;


}

input {
  border:3px solid #000000;
  border-radius: 5px;
}
.controls {
  text-align: center;
  margin-top: 10px;
}

.download-link {
  justify-content: center;
  justify-items: center;
  align-items: center;
}


a {
  color: #3498db; 
  text-decoration: none; 
  font-weight: bold; 
  padding: 10px 15px; 
  border-radius: 5px; 
  transition: background-color 0.3s;
  margin-bottom: 10px; 
}


a.download-link {
  display: inline-block;
  background-color: #3498db; 
  color: #fff; 
  text-align: center; 
  font-size: 16px; 
}

a.download-link:hover {
  background-color: #2980b9;
}

.controls {
  display: flex;
  flex-direction: column; 
  align-items: center; 
  margin-top: 10px;
}


.controls button {
  padding: 10px;
  background-color: #FFFF00;
  border: solid 3px #000000;
  border-radius: 3px;
  font-weight: bold;
  margin-bottom: 10px;
  box-shadow: 3px 3px 6px  #000000;
}

.controls button:hover {
  background-color: #8f8f0f;
  box-shadow: 1px 3px 1px  #000000;
}

.download-link-container {
  position: relative;
}


.close-button {
  position: absolute; 
  top: 5px; 
  right: 5px; 
  background: #ff0000; 
  color: #ffffff; 
  border: none; 
  border-radius: 50%; 
  width: 25px; 
  height: 25px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  cursor: pointer; 
}

.close-button:hover {
  background: #cc0000; 
}


```

<br></br>
<p>Based on the code above, it is not responsive yet. So, we will make it responsive. Here’s the CSS code.</p>
<br></br>

```css
@media (max-width: 768px) {
  body {
    height: auto;
    max-width: 100%;
    margin: 0;
    padding: 10px;
  }

  .main {
    width: 90%;
    padding: 10px;
  }

  .h1 {
    margin-left: 5%;
    margin-right: 5%;
    font-size: 1.5em;
  }

}
```
<br></br>
<p>
 Next, We will add the function logic in JavaScript. To make the text convert to audio, we will using speechSynthesis API.
  speechSynthesis API allows you to convert text into spoken words, opening up a myriad of possibilities for interactive and engaging web applications.
  You can follow the code below. I have expleined in the comment.
</p>

<br></br>

```javascript
const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector(".txt");
const voiceSelect = document.querySelector("select");

const pitch = document.querySelector("#pitch");
const pitchValue = document.querySelector(".pitch-value");
const rate = document.querySelector("#rate");
const rateValue = document.querySelector(".rate-value");

let voices = [];
let audioChunks = []; // to store chunks audio

// Inisialisation AudioContext & MediaStreamDestination to record
const audioContext = new AudioContext();
const destination = audioContext.createMediaStreamDestination();
const mediaRecorder = new MediaRecorder(destination.stream);

// Populate list voices
function populateVoiceList() {
  voices = synth.getVoices().sort(function (a, b) {
    const aname = a.name.toUpperCase();
    const bname = b.name.toUpperCase();

    if (aname < bname) {
      return -1;
    } else if (aname === bname) {
      return 0;
    } else {
      return +1;
    }
  });
  const selectedIndex =
    voiceSelect.selectedIndex < 0 ? 0 : voiceSelect.selectedIndex;
  voiceSelect.innerHTML = "";

  for (let i = 0; i < voices.length; i++) {
    const option = document.createElement("option");
    option.textContent = `${voices[i].name} (${voices[i].lang})`;

    if (voices[i].default) {
      option.textContent += " -- DEFAULT";
    }

    option.setAttribute("data-lang", voices[i].lang);
    option.setAttribute("data-name", voices[i].name);
    voiceSelect.appendChild(option);
  }
  voiceSelect.selectedIndex = selectedIndex;
}

populateVoiceList();

if (speechSynthesis.onvoiceschanged !== undefined) {
  speechSynthesis.onvoiceschanged = populateVoiceList;
}

function speak() {
  if (synth.speaking) {
    console.error("speechSynthesis.speaking");
    return;
  }

  if (inputTxt.value !== "") {
    const utterThis = new SpeechSynthesisUtterance(inputTxt.value);

    utterThis.onend = function (event) {
      console.log("SpeechSynthesisUtterance.onend");
      mediaRecorder.stop(); // Stop record while don't speak
    };

    utterThis.onerror = function (event) {
      console.error("SpeechSynthesisUtterance.onerror");
    };

    const selectedOption =
      voiceSelect.selectedOptions[0].getAttribute("data-name");

    for (let i = 0; i < voices.length; i++) {
      if (voices[i].name === selectedOption) {
        utterThis.voice = voices[i];
        break;
      }
    }

    utterThis.pitch = pitch.value;
    utterThis.rate = rate.value;

    // connect audio from SpeechSynthesis to AudioContext
    const audioElement = new Audio();
    audioElement.srcObject = destination.stream;
    const source = audioContext.createMediaElementSource(audioElement);
    source.connect(destination);
    source.connect(audioContext.destination);

    // Start recording while speak
    mediaRecorder.start();

    // starting speak
    synth.speak(utterThis);
  }
}

// Event handler recording
mediaRecorder.ondataavailable = function (event) {
  audioChunks.push(event.data);
};

mediaRecorder.onstop = function () {
  const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
  const audioURL = URL.createObjectURL(audioBlob);

  // display audi recording
  const audio = new Audio(audioURL);
  audio.play();

  // Close button
const closeButton = document.createElement('button');
closeButton.textContent = 'X'; // Teks tombol tutup
closeButton.classList.add('close-button');

// add eventListener to close button
closeButton.addEventListener('click', (event) => {
  event.stopPropagation(); // preven close button click
  event.preventDefault(); // preven default action button if there.
  if (downloadLinkContainer.parentElement) {
    downloadLinkContainer.remove(); // remove all the container
  }
});

// create element <a>
const downloadLink = document.createElement('a');
downloadLink.href = audioURL;
downloadLink.download = 'speech_recording.wav';
downloadLink.classList.add('download-link');
downloadLink.textContent = 'Download Recording';

// wrap link download & close button with container
const downloadLinkContainer = document.createElement('div');
downloadLinkContainer.classList.add('download-link-container');
downloadLinkContainer.appendChild(downloadLink); // add link download to container
downloadLinkContainer.appendChild(closeButton); // add close button to container

// find container with controls class
const controlsContainer = document.querySelector('.controls');

// add container
if (controlsContainer) {
  controlsContainer.appendChild(downloadLinkContainer);
}


};

inputForm.onsubmit = function (event) {
  event.preventDefault();
  audioChunks = []; // Reset array audioChunks
  speak();
  inputTxt.blur();
};

pitch.onchange = function () {
  pitchValue.textContent = pitch.value;
};

rate.onchange = function () {
  rateValue.textContent = rate.value;
};

voiceSelect.onchange = function () {
  speak();
};
```

<p>Next, you can run your code from the terminal.</p>
<br></br>
<p>The result will look like this</p>
<br></br>

<video width="640" height="360" controls>
  <source src="/images/audio-text.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<br></br>



<p>
Thank you for reading! If you found this post helpful, please spread the word.

We'd love to hear from you! Let us know how we can better assist you by sharing your suggestions.

Contact us: <https://muhamadalzika.com/about>
Email: <zikafakk@gmail.com>
</p>


How to create text convert to audio using HTML, CSS, and JavaScript.

How to create text convert to audio using HTML, CSS and JavaScript.

<p>Hello guys👋! Today we are going to learn how to create shadow-box generator using HTML & CSS. What will you gain after following this tutorial? I hope you will understand and improve our
  styling skills using CSS and increasing our logic using JavaScript.

 read also [How to create simple animation using HTML & CSS.](https://muhamadalzika.com/blog/animation-css)
 </p>
  
  <br></br>

  <p>Firstly, we need to create a folder. You can name it "Box-shadow generator." or anything you prefer. Then, we will create HTML, CSS and Javascript files within that folder.
    Name the HTML file "index.html", CSS file "style.css" and the JavaScript file "script.js".</p>
    <br></br>
    <p>In the HTML file, we will set the title within the <head> tags. Name the title "Box-shadow generator.". In the 'body' element,
      we will add a 'div' element with a 'div' inside it, and assign the class "main" to the 'div'.
        <br></br>
        Here the html code.</p>
      <br></br>

 ```html
     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css" />
    <title>shadowbox-generator</title>
</head>
<body>
    
        <div class="main">
            <h1>Box-shadow generator.</h1>
            <div class="form-group">
                <label for="offset-x">Offset X:</label>
                <input type="range" id="offset-x" name="offset-x" min="-50" max="50">
              
                <label for="offset-y">Offset Y:</label>
                <input type="range" id="offset-y" name="offset-y" min="-50" max="50">
              
                <label for="blur-radius">Blur Radius:</label>
                <input type="range" id="blur-radius" name="blur-radius" min="0" max="50">
              
                <label for="spread-radius">Spread Radius:</label>
                <input type="range" id="spread-radius" name="spread-radius" min="0" max="50">
    
                <label for="border-radius">Border Radius:</label>
                <input type="range" id="border-radius" name="border-radius" min="0" max="100" value="0">
              
                <label for="color">Shadow Color:</label>
                <input type="color" id="color" name="color">
            </div>
            

          
            <div id="preview-box" class="preview-box"></div>

            <div class="copy">
                <input id="css-code" class="textarea" readonly>

                <button id="copy-btn" class="btn">Copy</button>
            </div>
          
      
          </div>
    
   
      <script src="script.js"></script>
</body>
</html>
  
```
<br></br>

<p>Then, we need to style and add animations using CSS. Firstly, we will set the padding and margin to 0 for the entire page. Next,
  we will apply styles to the <body> element and style the .main class.</p>
  <p>CSS code</p>
<br></br>
    
```css
/* Resetting and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'sans-serif';
}

body {
  min-height: 100vh;
  display: flex;

/* Center horizontally */
  justify-content: center; 

/* Center vertically */
  align-items: center;
  background-image: linear-gradient(to bottom, #1488cc, #2b32b2);

/* Prevent content from touching screen edges */
  padding: 20px; 
}

h1 {
  text-align: center;
  font-weight: bold;
  margin: auto;
  margin: 5px;
}

.btn {
  background-color: #0270c6;
  padding: .5em;
  box-shadow: 5px 4px 6px 0px #000000;
  border-radius: 13px;
  color: #fff;
  
}

.btn:hover {
  background-color: #1292f3;
  box-shadow: 1px 1px 6px 0px #000000;border-radius: 13px;
}

.main {
  box-shadow: 0px 0px 5px 0px #0a68ff;border-radius: 0px;
  width: 50%;
  background-color: #fff;
  padding: 20px;
  
  transition: all 0.3s ease;
}

label {
  background-color: #fff;

/* Add space between label and next element */
  margin-bottom: 10px; 

  font-size: large;
}

/* Container for label and input */
.form-group {
  display: flex;
  flex-direction: column;

/* Space between each form group */
  margin-bottom: 20px; 
}

.form-group label {
/* Space between label and input */
  margin-bottom: 5px; 
}

.preview-box {
  padding: 10px;
  background-image: linear-gradient(to bottom, #1488cc, #2b32b2);
  border-radius: 8px;
  border: 1px solid #ccc;
  transition: all 0.3s ease;
}

.textarea {
  width: 55%;
  padding: .5em;
  margin: 0;
  margin-left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 5px 4px 6px 0px #000000;border-radius: 13px;
}

.copy {
  display: flex;
  justify-items: center;
  align-items: center;
  justify-content: center;
  justify-content: space-between;
  margin-top: 10%;
}

/* Preview box specific styles */
.preview-box {
  height: 80px;
  margin: 20px auto;
  border: 1px solid black;
  width: 50%;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .main {
  /* Reduce width on tablets */
    width: 80%; 
    padding: 15px;
  }

  .preview-box {
  /* Adjust to full width on smaller screens */
    width: 50%;
    margin-bottom: 15px;
  }

  .textarea {
    width: 55%;
    font-size: x-small;
  }

  .form-group {
  /* Ensure label and input are stacked vertically */
    flex-direction: column; 
  }
}

/* Extra small screens (mobile phones) */
@media (max-width: 480px) {
  .main {
  /* setting width on small screens */
    width: 90%; 
    padding: 10px;
  }

   .preview-box {
  /* setting width for inputs on mobile */
    width: 50%; 
    margin-bottom: 10px;
  }

  .textarea {
    width: 55%;
    font-size: x-small;
  }

 /* Reduce spacing between form groups */
  .form-group {
    margin-bottom: 10px;
  }
}
```

<br></br>

<p>Finally, we add the JavaScript logic to manage or set the box-shadow, just like you. The JavaScript code is shown below.</p>

<br></br>

```javascript
const offsetX = document.getElementById('offset-x');
const offsetY = document.getElementById('offset-y');
const blurRadius = document.getElementById('blur-radius');
const spreadRadius = document.getElementById('spread-radius');
const color = document.getElementById('color');
const borderRadiusInput = document.getElementById('border-radius'); 
const previewBox = document.getElementById('preview-box');
const cssCode = document.getElementById('css-code');
const copyBtn = document.getElementById('copy-btn');
const btnCopied = document.querySelector('button');

function updateShadow() {
    const offsetXValue = offsetX.value;
    const offsetYValue = offsetY.value;
    const blurRadiusValue = blurRadius.value;
    const spreadRadiusValue = spreadRadius.value;
    const colorValue = color.value;
    const borderRadiusValue = borderRadiusInput.value; 
  
    const boxShadow = `${offsetXValue}px ${offsetYValue}px ${blurRadiusValue}px ${spreadRadiusValue}px ${colorValue}`;
    previewBox.style.boxShadow = boxShadow;
    previewBox.style.borderRadius = `${borderRadiusValue}px`; 
    
    cssCode.value = `box-shadow: ${boxShadow};\nborder-radius: ${borderRadiusValue}px;`; 
}
offsetX.addEventListener('input', updateShadow);
offsetY.addEventListener('input', updateShadow);
blurRadius.addEventListener('input', updateShadow);
spreadRadius.addEventListener('input', updateShadow);
color.addEventListener('input', updateShadow);
borderRadiusInput.addEventListener('input', updateShadow);

// Add event listener to copy button
copyBtn.addEventListener('click', function() {
    // Copy the CSS code to clipboard
    navigator.clipboard.writeText(cssCode.value)
      .then(() => {
        // Show confirmation message
        
        btnCopied.textContent = 'Copied!'
        // Hide confirmation message after 2 seconds
        setTimeout(() => {
          btnCopied.textContent ='Copy'
        }, 2000);
      })
      .catch(err => {
        console.error('Failed to copy: ', err);
      });
});


updateShadow();
```
  
<p>Then, you can run your code from the terminal.</p>
<br></br>
<p>The result will look like this</p>
<br></br>

![Box generator image](/images/Screenshot%202024-09-05%20140234.png)

<br></br>

[Demo project.](https://shadowbox-repository.vercel.app/)

<br></br>

<p>
Thank you for reading! If you found this post helpful, please spread the word.

We'd love to hear from you! Let us know how we can better assist you by sharing your suggestions.
</p>
<br></br>

<p>Contact us:</p>

<https://muhamadalzika.com/about>

<p>Email:</p>

<zikafakk@gmail.com>



Creating shadowbox generator using HTML CSS & JavaScript.

How to create shadow-box generator using HTML, CSS & JavaScript.

<p>Hello guys👋, welcome back! In this tutorial, we are going to learn how to create a calculator using HTML, CSS, and JavaScript. The purpose of this tutorial is to improve our programming logic.

We’ll need three files in a folder. You can name the folder 'simple-calculator'. Inside, create three files: an HTML file, a CSS file, and a JavaScript file.
First, we’ll write in the HTML file, which we’ll name 'index.html'.
Next, we’ll create the CSS file and name it 'style.css'. Finally,
we’ll create the JavaScript file and name it 'index.js'.

Let's start with the HTML code. Read also [How to create a responsive navbar in Next.js](https://muhamadalzika.com/blog/createSimpleNavbar).

```HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator</title>
    
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap"
      rel="stylesheet"
    />
    
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
        <div class="h1Class">
            <h1>Simple calculator</h1>
        </div>
    <div class="calculator">
      <div class="display">
        <input type="text" placeholder="0" id="input" disabled />
      </div>
      <div class="buttons">
        
        <input type="button" value="AC" id="clear" />
        
        <input type="button" value="DEL" id="erase" />
        <input type="button" value="/" class="input-button" />
        <input type="button" value="*" class="input-button" />

        <input type="button" value="7" class="input-button" />
        <input type="button" value="8" class="input-button" />
        <input type="button" value="9" class="input-button" />
        <input type="button" value="-" class="input-button" />

        <input type="button" value="6" class="input-button" />
        <input type="button" value="5" class="input-button" />
        <input type="button" value="4" class="input-button" />
        <input type="button" value="+" class="input-button" />

        <input type="button" value="1" class="input-button" />
        <input type="button" value="2" class="input-button" />
        <input type="button" value="3" class="input-button" />

        <input type="button" value="=" id="equal" />
        <input type="button" value="0" class="input-button" />
        <input type="button" value="." class="input-button" />
      </div>
    </div>
    
    <script src="index.js"></script>
  </body>
</html>
```

<br></br>
<p>In the HTML code, within the <header></header> tags, we include the CSS file link to connect the HTML with the CSS. Here is the CSS code:</p>
<br></br>

```CSS
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Mono", monospace;
}
body {
  height: 100vh;
}
.calculator {
  width: 400px;
  background-color: #54556d;
  padding: 50px 30px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0, 5, 24, 0.4);
}
.display {
  width: 100%;
}
.display input {
  width: 100%;
  padding: 15px 10px;
  text-align: right;
  border: none;
  background-color: transparent;
  color: #ffffff;
  font-size: 35px;
}
.h1Class {
text-align: center;
font-size: larger;
font-weight: bold;
font-family: monospace;
margin: 5px;
flex: auto;
justify-items: center;
}

.display input::placeholder {
  color: #9490ac;
}
.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  margin-top: 40px;
}
.buttons input[type="button"] {
  font-size: 20px;
  padding: 17px;
  border: none;
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  border-radius: 5px;
}
.buttons input[type="button"]:hover {
  box-shadow: 0 8px 25px #000d2e;
}
input[type="button"]#equal {
  grid-row: span 2;
  background-color: #101010;
}
input[type="button"][value="0"] {
  grid-column: span 2;
}
```
<br></br>
<p>Now, to add functionality to the calculator, we use JavaScript. We start by creating a variable called equal_pressed, which is initially set to zero.
  Every time the equal button is pressed, the value of equal_pressed is changed to one.
This means that once an evaluation is completed and the equal button is pressed, the display will clear itself when the user enters a new number or operator for a new calculation.
We also add a click event listener to the clear button (AC). When AC is pressed, the entire display is cleared. Similarly, we add a click event listener to the erase button.
Here, we use the substr method to delete or remove the last entered digit from the display.</p>
<br></br>

```Javascript
let equal_pressed = 0;
//Refer all buttons excluding AC and DEL
let button_input = document.querySelectorAll(".input-button");
//Refer input,equal,clear and erase
let input = document.getElementById("input");
let equal = document.getElementById("equal");
let clear = document.getElementById("clear");
let erase = document.getElementById("erase");

window.onload = () => {
  input.value = "";
};

//Access each class using forEach
button_input.forEach((button_class) => {
  button_class.addEventListener("click", () => {
    if (equal_pressed == 1) {
      input.value = "";
      equal_pressed = 0;
    }
    //display value of each button
    input.value += button_class.value;
  });
});

//Solve the user's input when clicked on equal sign
equal.addEventListener("click", () => {
  equal_pressed = 1;
  let inp_val = input.value;
  try {
    //evaluate user's input
    let solution = eval(inp_val);
    //True for natural numbers
    //false for decimals
    if (Number.isInteger(solution)) {
      input.value = solution;
    } else {
      input.value = solution.toFixed(2);
    }
  } catch (err) {
    //If user has entered invalid input
    alert("Invalid Input");
  }
});

//Clear Whole Input
clear.addEventListener("click", () => {
  input.value = "";
});
//Erase Single Digit
erase.addEventListener("click", () => {
  input.value = input.value.substr(0, input.value.length - 1);
});
```

<br></br>
![Calculator Image](/images/calculator.png)
<br></br>

<p>The calculator has been made! We have been finished created a calculator using HTML CSS JavaScript. If you found this post helpful, please spread the word.
We'd love to hear from you! Let us know how we can better assist you by sharing your suggestions.
  
Contact us: <https://muhamadalzika.com/about>
Email: <zikafakk@gmail.com>
</p>

Full guide to create a calculator using HTML, CSS, and JavaScript.

Muhamad Alzika

Articles tagged with "css"

How to create simple animation using HTML & CSS.

How to create a responsive sidebar using HTML, CSS and JavaScript.

How to create text convert to audio using HTML, CSS and JavaScript.

How to create shadow-box generator using HTML, CSS & JavaScript.

How to create a simple calculator using HTML, CSS, JavaScript.