
<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, today we're going to learn how to create a responsive navbar in your NEXT JS application.
  As navigation is a key aspect of your website that allows users to explore it, better implementation of this navbar in desktop, tablet, and mobile can help you improve the website's accessibility,
  which will ultimately retain your website visitors. Let me show you how I implemented it on my website, https://muhamadalzika.com, which is based on NEXT JS. </p>
  <h3><strong>1. Project setup.</strong></h3>
  <p>Open your project on vscode studio or create your Next.js project using bellow command in your terminal</p>

  ```bash
npx create-next-app@latest
```
<p>Then will, show like below.</p>

```bash
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`? No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*
```

<br>
</br>
<p>In this tutorial, I'm not using TypeScript. You can select 'Yes' for all of them except <strong>TypeScript</strong>.</p>

<br>
</br>

<h3><strong>2. Setup your folder.</strong></h3>
<p>You can follow my folder structure setup below.</p>

<br>
</br>

![folder Image](/images/Screenshot%202024-09-01%20130537.png)

<br>
</br>

<h3><strong>3. Write the code in the Navbar.js file.</strong></h3>
<p>You can follow the code bellow.</p>

<br>
</br>

```jsx
"use client"
// components/Navbar.js
import { useState } from 'react';
import Link from 'next/link';
import { FaBars, FaTimes } from 'react-icons/fa';
import { IoSearch } from "react-icons/io5";
import { AiOutlineShopping } from "react-icons/ai";
import { FaRegHeart } from "react-icons/fa";
import { RiAccountBoxLine } from "react-icons/ri";

const Navbar = () => {
const [isOpen, setIsOpen] = useState(false);

const toggleMenu = () => {
    setIsOpen(!isOpen);
};

return (
<nav className='bg-transparent p-4 shadow
 sticky top-0'>
<div className='flex items-center justify-between
space-x-2 h-16 max-w-screen'>
<div className='flex items-center '>
<Link href="/">
<h1 className='text-black text-md md:text-2xl
sm:text-md font-bold'>Logo</h1>
</Link>
</div>
<div className="relative ">
<input
type="text"
className="pl-10 pr-4 py-2 w-32 md:w-64 sm:w-48
 text-xs
md:text-md border
border-gray-300 rounded-md focus:outline-none
 focus:ring-2
focus:ring-black"
placeholder="Search..."
      />
<button className='absolute left-3
 top-2 text-gray-500'>
<IoSearch size={20}/>
</button>
</div>
<div className='md:hidden pt-2'>
<button onClick={toggleMenu}
 className='text-black
focus:outline-none'>
{isOpen ? <FaTimes size={24} /> :
 <FaBars size={24} />}
</button>
</div>
<div className='flex space-x-2'>
<div className='md:flex space-x-2 hidden
 md:block'>
<Link href="/" className='hover:animate-bounce
hover:transition-delay-300
hover:ease-in-out hover:bg-gray-100
text-black hover:text-gray-800
font-semibold text-sm py-1 px-2 rounded
shadow text-sm'>
<p>about</p>
</Link>
<Link href="/" className="hover:animate-bounce
 hover:transition-delay-300
hover:ease-in-out hover:bg-gray-100 text-black
hover:text-gray-800
font-semibold py-1 px-2
 rounded shadow text-sm ">
<p>service</p>
</Link>
<Link href="/" className="hover:animate-bounce
hover:transition-delay-300
hover:ease-in-out hover:bg-gray-100 text-black
hover:text-gray-800
font-semibold py-1 px-1 rounded
shadow text-sm">
<p>contact</p>
</Link>
<div className='relative pt-1'>
<button className="relative hover:animate-bounce
hover:transition-delay-300
hover:ease-in-out hover:bg-gray-100 text-black
hover:text-gray-800
py-1 px-1 rounded shadow text-sm">
<RiAccountBoxLine className='font-semibold'
 size={20} />
</button>
</div>
</div>
<div className='relative pt-1'>
<button className="relative hover:animate-bounce
hover:transition-delay-300
hover:ease-in-out hover:bg-gray-100 text-black
hover:text-gray-800
py-1 px-1 rounded shadow text-sm">
<FaRegHeart className='font-semibold' size={20}/>
<span className="absolute top-0 right-0 transform
translate-x-1/2
translate-y-1/2
text-xs bg-red-500 text-white rounded-full h-4 w-4
 flex
items-center
justify-center">0</span>
</button>
</div>
<div className='relative pt-1'>
<button className="relative
 hover:animate-bounce
hover:transition-delay-300
hover:ease-in-out hover:bg-gray-100
 text-black
hover:text-gray-800 py-1
px-1 rounded shadow text-sm">
<AiOutlineShopping className='font-semibold'
 size={20} />
<span className="absolute top-0 right-0 transform
translate-x-1/2
-translate-y-1/2
text-xs bg-red-500 text-white rounded-full h-4 w-4
flex items-center
justify-center">0</span>
            </button>
        </div>
        </div>
        
      </div>

{/* Mobile menu */}
<div className={`md:hidden ${isOpen ?
'block' : 'hidden'}`}>
<div className='flex flex-col space-y-4 mt-4'>
<Link href="/" className='animate-bounce
 hover:bg-gray-100
text-slate-300
hover:text-gray-800
font-semibold py-2 px-4 rounded shadow transition
duration-300
ease-in-out'>
            <p>about</p>
          </Link>
<Link href="/project" className="animate-bounce
 hover:bg-gray-100
                text-slate-300
                 hover:text-gray-800
font-semibold py-2 px-4 rounded shadow  transition
 duration-300
               ease-in-out">
<p>project</p>
</Link>
 <Link href="/about" className="animate-bounce
 hover:bg-gray-100
text-slate-300
hover:text-gray-800
font-semibold py-2 px-4 rounded shadow  transition
 duration-300
ease-in-out">
 <p>contact</p>
</Link>
<button className="relative animate-bounce
hover:bg-gray-100 text-slate-300
hover:text-gray-800 font-semibold
py-2 px-4 rounded shadow  transition duration-300
 ease-in-out">
<RiAccountBoxLine className='font-semibold'
 size={20} />
<span className='bottom-3 items-center'>Log-in</span>
</button>
        
</div>
</div>
</nav>
);
};
export default Navbar;
```

<br>
</br>
<p>After that, you have to import the 'Navbar file' into Layout.</p>
<br>
</br>

```jsx
import { Inter } from "next/font/google";
import "./globals.css";
import Navbar from "@/component/navbar";

const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Create Responsive Navbar",
description: "Create Responsive Navbar by using Next.js",
};

export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
<Navbar/>
{children}
</body>
</html>
  );
}
```

<br>
</br>
<p>And optionally, in the page.js file, you can write anything. If you're confused, you can follow me by writing this code in the 'page.js' file.</p>
<br>
</br>


```jsx
export default function Home() {
  return (
    <div className="flex
 justify-center items-center min-h-screen">
      <main className="container
 mx-auto p-4 text-center">
        <h1 className="text-3xl
 font-bold">Welcome to My store</h1>
        <p className="mt-4">
This is the homepage.
</p>
      </main>
    </div>
  );
}
```

<br>
</br>


<p>So, you have to run the code by typing npm run dev in your terminal.</p>
<p>It will seem like this.</p>

<br>
</br>

![Project Image2](/images/Screenshot%202024-09-01%20131234.png)

<br>
</br>

<p>Thanks for reading!

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 a responsive navbar by using next.js for beginners.

How to create a responsive navigation bar in next.js


<p>Do you ever feel confused when trying to come up with ideas for a web project? Sometimes, when learning web development, we struggle to decide what we want to create or build. If you're experiencing this, I have some solutions to help you overcome it.</p>
<p>Firstly, let me share my experience of how I got the idea to create a web app project as a beginner. While I was learning a new programming language, I felt confused about how to apply it to a real project. I overthought it for a week, wasting time in the process. During that same period, I had a problem managing my time. That’s when I got the idea to solve my problem by using what I knew about web development to create my own app. I built a simple project to manage my time using React.

Before this, I didn't know how to apply my knowledge to a real project, even though there were many videos on YouTube explaining various projects. However, I chose not to watch them because I didn't want to fall into the "tutorial hell" trap. After coming up with the idea, I started working on the project and finished it within a week. I was really happy because, for the first time I was able to create something. Even though the project was very simple, it helped me in many ways.

The lesson I learned after finishing my project is that ideas often come when you face a problem. You can implement code to solve your own problems and turn it into an app. Essentially, to become a programmer or web developer, you need to solve problems. Create an app and solve it. This is the simple project I created when I had a problem. </p>
![](]('https://second-papper.vercel.app/')
[![Project Image](/images/Screenshot%202024-08-24%20064142.png)](https://second-papper.vercel.app/)

<p>This is an open-source project. If you want to use it, you can use it for learning.</p>
<p>Thanks for your attention!</p>
<p>I will write tutorials on HTML, CSS, and simple JS projects for beginners. So, stay tuned!</p>


A personal story about getting the idea for a web app project as a beginner.

How to Get the Idea to Create a Web App Project as a Beginner

<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