About Me

My passion for technology has been started at a very young age when was not enough for me to use an electronic device and enjoy playing whit it, but I had a strong curiosity to discover how it works and what is inside it. In the last three years, I have been starting my career in the programming field especially web programming, which is becoming all my life, and I’m spending all my time learning about programming sites. Web programing has been becoming an essential part of my life, and I’m working energy day to develop my skills and learn more information about this field, and my biggest ambition is to become a front-end web development and I’m sure that I can achieve this phase soon because of my hard work.

I hope all this information about me can give you a clear vision of me and my work. Please if you have any questions don’t hesitate to contact me.

HTML
CSS
JavaScript
Bootstrap

My Services

What i offer

Responsive Website

We create a responsive content layout site for multiple formates ( smartphone, tablet, desktop, etc), with HTML and CSS code.

Conversion and SEO friendly

We use a variety of websites that can easily be found and read search engines.

Professional look

We create a professional look for your website layout, color, button design, social icons.

HTML5 Website

We use the newest coding with HTML5 and CSS3 to develop a dynamic website

Testing and debugging

We use testing and debugging to ensure that your website operates successfully across the target device.

Height quality website

We believe that a great website requires clear, responsive code, user-friendly navigation search engine optimized page content, and beautiful design

My Blog

Latest blog

 


Most websites use testimonials on their home page for better user attraction. When we buy any services or products first we check reviews, that’s why we should use that on our website. if you have to create your websites from scratch this tutorial will helpful for you.

In this tutorial, you’ll learn How To CreateTestimonial Slider Using HTML CSS JavaScript. We’ll use HTML CSS & JS to create this awesome Testimonial Slider.

Digital Testimonial Slider  in JavaScript [Source Codes]

To create this program [Testimonial Slider ]. First, you need to create three files, HTML File, CSS File, and JavaScript File. After creating these files just paste the following codes into your files. You can also download the source code files of the Digital Clock from the given download buttom.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>testimonial javascript</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
</head>
<body>
     <div class="container">
       <div class="testimonial-card">
         <div class="testimonial-details">
           <div class="testimonial-logo">
            <i class="fas fa-quote-right"></i>
           </div>
           <p id="desc">
             Lorem ipsum dolor sit, amet
             consectetur adipisicing elit.
             Nobis, harum, neque unde ipsum
             accusamus tempora maxime animi
             veniam eius, rerum eaque suscipit.
             Tenetur dolores saepe libero
             officia at eveniet esse.
           </p>
           <div class="info">
             <h3 class="title" id="author">
               John Doe
             </h3>
             <h4 id="job">
               UX developer
             </h4>
           </div>
         </div>
         <div class="buttons">
           <div class="prev-btn">
            <i class="fas fa-chevron-left"></i>
           </div>
           <div class="next-btn">
            <i class="fas fa-chevron-right"></i>
           </div>
         </div>
         <div class="testimonial-img">
           <img src="img/test-2.jpg" alt="" id="person-img">
         </div>
       </div>
     </div>
    <script src="main.js"></script>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700&display=swap');

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  background: #fefefe;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative;
  width: 100%;
  max-width: 350px;
  height: 620px;
  background: #fff;
  border-radius: 10px;
  filter: drop-shadow(0 0 10px
          rgba(0, 0, 0, 0.5));
  overflow: hidden;        
}

.testimonial-details {
  position: relative;
  width: 100%;
  height: 380px;
  padding: 30px;
}

.testimonial-card .testimonial-logo {
  position: absolute;
  font-size: 20rem;
  color: #000;
  opacity: 0.1;
  z-index: -1;
}

.testimonial-details p {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 300;
  line-height: 30px;
  text-transform: uppercase;
}

.info {
  display: flex;
}

.testimonial-details .title {
  margin-right: 10px;
  font-size: 15px;
  font-weight: 500;
}

.testimonial-details h4 {
  color: #5f9ea0;
}

.testimonial-card .buttons {
  position: relative;
  display: flex;
  width: 80px;
  height: 40px;
  justify-content: space-between;
  align-items: center;
  margin-left: 25px;
  margin-bottom: 10px;
  background: #5f9ea0;
  color: #fff;
  padding: 10px;
  border-radius: 50px;
  z-index: 1;
}

.testimonial-card .buttons .prev-btn,
.testimonial-card .buttons .next-btn {
  cursor: pointer;
  transition: .3s;
}

.testimonial-card .buttons .prev-btn:hover,
.testimonial-card .buttons .next-btn:hover {
  transform: scale(1.25);
}

img {
  width: 120px;
  border-radius: 50%;
}

.testimonial-img {
  position: absolute;
  width: 40%;
  margin-left: 80px;
  background-image: url('img/shape.svg');
  padding: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

@media screen and (min-width: 992px) {
  .container {
    width: 100%;
    max-width: 900px;
    height: 500px;
  }

  .testimonial-card {
    height: 450px;
    display: flex;
    align-items: center;
  }

  .testimonial-img {
    position: relative;
    margin-left: 0;
    margin-right: 20px;
  }

  img {
    width: 300px;
    margin-top: 50px;
  }

  .testimonial-card .buttons {
    position: absolute;
    left: 17px;
    bottom: 50px;
  }

  .testimonial-details {
    padding-top: 90px;
    padding-left: 50px;
  }

  .testimonial-card .testimonial-logo {
    position: absolute;
    left: 100px;
    bottom: 0px;
  }
}

Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.

const reviews = [
    {
      id: 1,
      name: "john smith",
      job: "Web Developer",
      img:
        "img/test-1.jpg",
      text:
        "Sed ut perspiciatis unde omnis iste natus error
sit voluptatem accusantium doloremque laudantium, totam rem
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo.",
    },
    {
      id: 2,
      name: "Anna johnson",
      job: "UI Web Designer",
      img:
        "img/test-2.jpg",
      text:
        "At vero eos et accusamus et iusto odio dignissimos ducimus
qui blanditiis praesentium voluptatum deleniti atque corrupti quos
dolores et quas molestias excepturi sint occaecati cupiditate non provident.",
    },
    {
      id: 3,
      name: "Peter jones",
      job: "Front-End Developer",
      img:
        "img/test-3.jpg",
      text:
        "On the other hand, we denounce with righteous
indignation and dislike men who are so beguiled and
demoralized by the charms of pleasure of the moment,
so blinded by desire, that they cannot foresee the pain and
trouble that are bound to ensue.",
    },
  ];

const img = document.getElementById('person-img');
const author = document.getElementById('author');
const job = document.getElementById('job');
const desc = document.getElementById('desc');

const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');

let currentItem = 0;

window.addEventListener("DOMContentLoaded", function() {
  const item = reviews[currentItem];
  img.src = item.img;
  author.textContent = item.name;
  job.textContent = item.job;
  desc.textContent =item.text;
});

function showPerson(person) {
  const item = reviews[person];
  img.src = item.img;
  author.textContent = item.name;
  job.textContent = item.job;
  desc.textContent =item.text;
};

nextBtn.addEventListener("click", function() {
  currentItem++;
  if (currentItem > reviews.length -1) {
    currentItem = 0;
  }
  showPerson(currentItem);
});

prevBtn.addEventListener("click", function() {
  currentItem--;
  if (currentItem < 0) {
    currentItem = reviews.length -1;
  }
  showPerson(currentItem);
});

Download Source Code: Testimonial Slider Using JavaScript

That’s all, now you’ve successfully Build a Testimonial Slider Using JavaScript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Here are a few helpful posts you might want to read, too:

Why learning code? 7 Essential Benefits From Learning Programming

6 Things To Know Before Learning Programming

How to Teach Yourself to Learn Code

If you enjoyed this post about the Testimonial Slider Using JavaScript just drop me a line in the comments below!

P.S. If you found this post helpful, please share it with others! Thanks for your support!


The Frequently Asked Questions (FAQ) page can improve user experience. All websites should have an FAQ page because it reduces the time your employees need to answer simple questions. It allows visitors to find answers to all their questions in one place. And an FAQ page can be a great source of content ideas.

In this tutorial, we have created a Frequently Asked Questions(FAQ) accordion using HTML, CSS, and JavaScript. The accordion is used to display the content in list format. It can expand or collapse to display the content it contains.

Digital Frequently Asked Questions (FAQ)  in JavaScript [Source Codes]

To create this program [Frequently Asked Questions (FAQ) ]. First, you need to create three files, HTML File, CSS File, and JavaScript File. After creating these files just paste the following codes into your files. You can also download the source code files of the Digital Clock from the given download buttom.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Faq JavaScript</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
</head>
<body>
    <div class="container">
        <h1 class="title">
            Frequenty Asked Questions
        </h1>
        <main class="accordion">
            <div class="faq-img">
                <img src="img/faq.svg" alt="" class="accordion-img">
            </div>
            <div class="content-accordion">
                <div class="question-answer">
                    <div class="question">
                        <h3 class="title-question">
                            Do you do a Front-end developer?
                        </h3>
                        <button class="question-btn">
                            <span class="up-icon">
                                <i class="fas fa-chevron-up"></i>
                            </span>
                            <span class="down-icon">
                                <i class="fas fa-chevron-down"></i>
                            </span>
                        </button>
                    </div>
                    <div class="answer">
                        <p>Lorem ipsum dolor sit amet
                            consectetur adipisicing elit.
                            Quisquam assumenda sapiente
                            mollitia excepturi quos id
                            magnam obcaecati non est?
                            Maiores?</p>
                    </div>
                </div>
                <div class="question-answer">
                    <div class="question">
                        <h3 class="title-question">
                            What is the differrence between
                            Front-end and Back-end?
                        </h3>
                        <button class="question-btn">
                            <span class="up-icon">
                                <i class="fas fa-chevron-up"></i>
                            </span>
                            <span class="down-icon">
                                <i class="fas fa-chevron-down"></i>
                            </span>
                        </button>
                    </div>
                    <div class="answer">
                        <p>Lorem ipsum dolor sit amet
                            consectetur adipisicing elit.
                            Quisquam assumenda sapiente
                            mollitia excepturi quos id
                            magnam obcaecati non est?
                            Maiores?</p>
                    </div>
                </div>
                <div class="question-answer">
                    <div class="question">
                        <h3 class="title-question">
                            Which is better Front-end or Back-end?
                        </h3>
                        <button class="question-btn">
                            <span class="up-icon">
                                <i class="fas fa-chevron-up"></i>
                            </span>
                            <span class="down-icon">
                                <i class="fas fa-chevron-down"></i>
                            </span>
                        </button>
                    </div>
                    <div class="answer">
                        <p>Lorem ipsum dolor sit amet
                            consectetur adipisicing elit.
                            Quisquam assumenda sapiente
                            mollitia excepturi quos id
                            magnam obcaecati non est?
                            Maiores?</p>
                    </div>
                </div>
                <div class="question-answer">
                    <div class="question">
                        <h3 class="title-question">
                            What is Front-end?
                        </h3>
                        <button class="question-btn">
                            <span class="up-icon">
                                <i class="fas fa-chevron-up"></i>
                            </span>
                            <span class="down-icon">
                                <i class="fas fa-chevron-down"></i>
                            </span>
                        </button>
                    </div>
                    <div class="answer">
                        <p>Lorem ipsum dolor sit amet
                            consectetur adipisicing elit.
                            Quisquam assumenda sapiente
                            mollitia excepturi quos id
                            magnam obcaecati non est?
                            Maiores?</p>
                    </div>
                </div>
                <div class="question-answer">
                    <div class="question">
                        <h3 class="title-question">
                            What is Back-end?
                        </h3>
                        <button class="question-btn">
                            <span class="up-icon">
                                <i class="fas fa-chevron-up"></i>
                            </span>
                            <span class="down-icon">
                                <i class="fas fa-chevron-down"></i>
                            </span>
                        </button>
                    </div>
                    <div class="answer">
                        <p>Lorem ipsum dolor sit amet
                            consectetur adipisicing elit.
                            Quisquam assumenda sapiente
                            mollitia excepturi quos id
                            magnam obcaecati non est?
                            Maiores?</p>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <script src="main.js"></script>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 12px;
}

body {
  min-height: 100vh;
  font-family: 'Poppins', sans-serif;
  background: #efefef;
  display: flex;
  justify-content: center;
}

.container {
  position: relative;
  background: #fff;
  margin-top: 50px;
  margin-bottom: 30px;
  border-radius: 10px;
  filter: drop-shadow(0 0 10px
          rgba(0, 0, 0, 0.5));
}

.accordion {
  position: relative;
  width: 350px;
  margin-left: 40px;
}

.title {
  margin-top: 20px;
  font-size: 2rem;
  text-align: center;
}

.content-accordion {
  margin-top: 35px;
  margin-right: 50px;
}

.question-answer {
  width: 100%;
  border-bottom: 1px solid #e8e8e8;
}

.question {
  display: flex;
  justify-content: space-between;
}

.accordion-img {
  position: relative;
  width: 320px;
}

.title-question {
  margin: 1.4rem 0rem;
  font-size: 1.2rem;
  font-weight: 500;
  color: #000;
}

.question-btn {
  font-size: 1.5rem;
  background: transparent;
  border-color: transparent;
  cursor: pointer;
}

.up-icon {
  display: none;
}

.answer {
  font-size: 1.2rem;
  line-height: 1.8;
  display: none;
}

.show-text .answer {
  display: block;
}

.show-text .up-icon {
  display: inline;
}

.show-text .down-icon {
  display: none;
}

@media screen and (min-width: 992px) {
  .accordion {
    width: 920px;
    height: 0;
    display: flex;
  }

  .accordion-img {
    position: relative;
    width: 420px;
    top: 88px;
  }

  .question-answer {
    width: 380px;
  }

  .content-accordion {
    margin-top: 85px;
  }

  .title {
    margin-top: 50px;
    font-size: 3rem;
  }
}

Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.

const questions = document.querySelectorAll('.question-answer');

questions.forEach(function(question) {
    const btn = question.querySelector('.question-btn');
    btn.addEventListener("click", function() {
        questions.forEach(function(item) {
            if (item !== question) {
                item.classList.remove("show-text");
            }
        })
        question.classList.toggle("show-text");
    })
})

Download Source Code:  Frequently Asked Questions in JavaScript

That’s all, now you’ve successfully Build Frequently Asked Questions (FAQ) in JavaScript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Here are a few helpful posts you might want to read, too:

Why learning code? 7 Essential Benefits From Learning Programming

6 Things To Know Before Learning Programming

How to Teach Yourself to Learn Code

If you enjoyed this post about the Frequently Asked Questions Using JavaScript just drop me a line in the comments below!

P.S. If you found this post helpful, please share it with others! Thanks for your support!

 


JavaScript countdown timers are used on a variety of e-commerce and under-construction websites to keep users up to date. We see on different types of e-commerce websites that a kind of countdown starts sometime before the arrival of any product or offer.

In this tutorial, you’ll learn how to create a countdown timer in JavaScript from scratch.

Digital Countdown in JavaScript [Source Codes]

To create this program [Countdown]. First, you need to create three files, HTML File, CSS File, and JavaScript File. After creating these files just paste the following codes into your files. You can also download the source code files of the Digital Clock from the given download buttom.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown javascript</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="container">
      <div class="card-img">
        <img src="img/spider-man.png" alt="" class="card">
      </div>
      <div class="card-details">
        <h1 class="title">
          spider-man : no way home
        </h1>
        <h3 class="date">
          exclusivity watch movie on
          <span class="date-day">
            Monday, 19 october 2021
          </span>
        </h3>
        <p>Lorem ipsum dolor sit amet
          consectetur adipisicing elit.
          Vel ratione deserunt ea
          perspiciatis. Suscipit, itaque
          eaque possimus at molestiae
          quaerat!</p>
          <div class="countdown">
            <!-- days -->
            <div class="countdown-format">
              <div>
                <h3 class="day">20</h3>
                <span>days</span>
              </div>
            </div>
            <!-- hours -->
            <div class="countdown-format">
              <div>
                <h3 class="day">20</h3>
                <span>hours</span>
              </div>
            </div>
            <!-- mins -->
            <div class="countdown-format">
              <div>
                <h3 class="day">20</h3>
                <span>mins</span>
              </div>
            </div>
            <!-- secs -->
            <div class="countdown-format">
              <div>
                <h3 class="day">20</h3>
                <span>secs</span>
              </div>
            </div>
          </div>
          <button class="btn">
            watch trailer
          </button>
      </div>
    </div>
    <script src="main.js"></script>  
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  font-family: 'Oswald', sans-serif;
  background: #efefef;
}

.container {
  position: relative;
  background: #fff;
  margin: 30px;
  overflow: hidden;
  border-radius: 10px;
  filter: drop-shadow(0px 0px 10px
           rgba(0, 0, 0, 0.5));
}

.card-img {
  position: relative;
  width: 100%;
}

.card-img .card {
  position: relative;
  width: 100%;
  top: 20%;
  right: 15%;
  margin: auto;
  filter: drop-shadow(-6px 40px 23px
            rgba(0, 0, 0, 0.5));
}

.card-details {
  position: relative;
  width: 100%;
  padding: 40px;
}

.card-details .title {
  margin-bottom: 20px;
  font-size: 35px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #444;
}

.card-details .date {
  margin-bottom: 20px;
}

.card-details .date-day {
  color: #6179fe;
}

.card-details p {
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #444;
}

.countdown {
  display: flex;
}

.countdown-format {
  width: 5rem;
  height: 5rem;
  margin-right: 1rem;
  display: grid;
  place-items: center;
  background: #000;
  color: #fff;
  text-align: center;
}

.countdown h3 {
  font-size: 2rem;
  letter-spacing: 3px;
}

.countdown-format span {
  display: block;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.85rem;
  color: #ccc;
}

.card-details .btn {
  width: 150px;
  margin-top: 50px;
  padding: 15px 25px;
  border: none;
  border-radius: 7px;
  background: #000;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

@media screen and (min-width: 992px) {
  .container {
    display: flex;
    width: 70%;
    height: auto;
    top: 50px;
    left: 15%;
    margin: 0;
  }
 
}

Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.

const months = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December',
];
const weekdays = [
  'Sunday',
  'Monday',
  'Tuesday',
  'Wednesday',
  'Thursday',
  'Friday',
  'Saturday',
];

const dates = document.querySelector('.date span');
const countdown = document.querySelector('.countdown');
const items = document.querySelectorAll('.countdown-format h3');

let tempDate = new Date();
let tempYear = tempDate.getFullYear();
let tempMonth = tempDate.getMonth();
let tempDay = tempDate.getDate();
// months are ZERO index based;
const FutureDate = new Date(tempYear, tempMonth, tempDay + 10, 11, 30, 0);

// let FutureDate = new Date(2021, 11, 17);

const year = FutureDate.getUTCFullYear();
let month = FutureDate.getMonth();
month = months[month];
const date = FutureDate.getDate();
const weekday = weekdays[FutureDate.getDay()];

dates.textContent = `${weekday}, ${date} ${month} ${year}`;

// future date
const FutureTime = FutureDate.getTime();

function getRemainningTime() {
  const today = new Date().getTime();
  const t = FutureTime - today;
  // console.log(t);

  // 1s = 1000ms
  // 1m = 60s
  // 1hr = 60min
  // 1d = 24hr

  // value in ms
  const oneDay = 24 * 60 * 60 * 1000;
  const oneHour = 60 * 60 * 1000;
  const oneMinute = 60 * 1000;

  let days = t / oneDay;
  days = Math.floor(days);
  let hours = Math.floor((t % oneDay) / oneHour);
  let minutes = Math.floor((t % oneHour) / oneMinute);
  let seconds = Math.floor((t % oneMinute) / 1000);

  // set value array

  function Furmat(item) {
    if (item < 10) {
      return (item = `0${item}`);
    }
    return item;
  }
  const values = [days, hours, minutes, seconds];
  items.forEach(function(item, index) {
    item.innerHTML = Furmat(values[index]);
  });
  if (t < 0) {
    clearInterval(countdown);
    countdown.innerHTML = `
    <h3 class="expired">
    Sorry, This Time expired</h3>`
  }
};

// countdowns
let countdowns = setInterval(getRemainningTime, 1000);

// call function
getRemainningTime();


Download Source Code:  Create a Countdown JavaScript

That’s all, now you’ve successfully Create a Countdown Using JavaScript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Here are a few helpful posts you might want to read, too:

Why learning code? 7 Essential Benefits From Learning Programming

6 Things To Know Before Learning Programming

How to Teach Yourself to Learn Code

If you enjoyed this post about the Countdown Using JavaScript just drop me a line in the comments below!

P.S. If you found this post helpful, please share it with others! Thanks for your support!

Contact Me

Contact With Me

Should you need any further information, please do not hesitate to contact me.