DEV Community: Code with Ayan

5+ Amazing CSS Box-shadow Generators to improve your Design

Code with Ayan — Mon, 11 Jul 2022 22:38:13 +0000

Ever wondered why your design misses some depth? Adding a modern-looking shadow can improve, mainly for buttons in css.

Creating box shadows in CSS consumes a lot of time. For this many different box-shadow generator tools have come up, which allow you to play around with it and copy the code when done.

Here are some of my best CSS box-shadow generators you will need to create a modern-looking shadow. Try different things with the tools and copy the code once you are finished.

5+ Amazing CSS Box-shadow Generators

1. Box Shadow CSS Generator

2. Box Shadow.dev

3. Shadows Brumm

4. Shadow Palette Generator

5. Neumorphism.io

Bonus Tool

Box-shadow.art

If you want to get more information about this article
Click here!

Thanks for reading this out. Please feel free to leave your comments on how we can improve. So, next time we could bring more improved content for you.

My Website: codewithayan, you can contact me here!

Cheers,

Glassmorphism Login Form using CSS in 2022

Code with Ayan — Sun, 03 Jul 2022 23:52:16 +0000

Hey Devs, Today in this post we’ll learn How to Create a Glassmorphism Login Form. To create it we are going to use simple CSS and HTML. Hope you enjoy this post.

Glassmorphism CSS has been gaining much popularity as a result of its stunning appearance. It is very similar to Login Form but differs in its transparent design. Many websites and applications like Apple and Microsoft use this type of design.

These types of classy-interface UI make User Experience better and lead to increased sales, lead generation, and customer growth. You should also use shape psychology to represent your brand as trustworthy and build users' trust in your brand.

Demo

Click to watch demo!

Glassmorphism Login Form CSS 2022 (Source Code)

HTML Code

<!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>Design - codewithayan</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous"/>
    <link rel="stylesheet" href="Style.css">
</head>
<body>
    <div class="container">
        <div class="circle"></div>
        <div class="circle"></div>
    </div>

    <form>
        <h2 id="heading">Login</h3>

        <input type="text" placeholder="Email or Phone" id="username">
        <input type="password" placeholder="Password" id="password">

        <button id="btn">Log In</button>

        <div class="social">
            <div class="Google"><i class="fab fa-google"></i>  Google</div>
            <div class="github"><i class="fab fa-github"></i>  Github</div>
        </div>
    </form>
</body>
</html>

CSS Code

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #000000;
}
.container{
    width: 400px;
    height: 500px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}
.circle{
    height: 174px;
    width: 175px;
    position: absolute;
    border-radius: 50%;
}
.circle:first-child{
    background: linear-gradient(
        #13e000,
        #78ff1e);
    left: -60px;
    top: -80px;
}
.circle:last-child{
    background: linear-gradient(
        to right,
        #ff00b3,
        #ff1fff);
    right: -20px;
    bottom: -80px;
}
form{
    height: 500px;
    width: 370px;
    background-color: rgba(255,255,255,0.13);
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.1);
    box-shadow: 0 0 40px rgba(8,7,16,0.6);
    padding: 50px 35px;
}
form *{
    font-family: 'Poppins',sans-serif;
    color: #ffffff;
    letter-spacing: 0.5px;
    outline: none;
    border: none;
}
#heading{
    font-size: 40px;
    font-weight: 600;
    line-height: 42px;
    text-align: center;
}
input{
    display: block;
    height: 50px;
    width: 100%;
    background-color: rgba(255,255,255,0.07);
    border-radius: 3px;
    padding: 0 10px;
    font-size: 18px;
    margin-top: 40px;
    border: none;
    outline: none;
}
input::placeholder{
    color: #e5e5e5;
}
#btn{
    margin-top: 40px;
    width: 100%;
    background-color: #ffffff;
    color: #080710;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
}

.social{
    margin-top: 28px;
    display: flex;
  }
  .social div{
    width: 150px;
    border-radius: 3px;
    padding: 7px 10px 10px 7px;
    background-color: rgba(255,255,255,0.27);
    color: #eaf0fb;
    text-align: center;
  }
  .social div:hover{
    background-color: rgba(255,255,255,0.47);
  }
.github{
    margin-left: 25px;
  }
  .social i{
    margin-right: 4px;
  }

Congratulations! You have now successfully created our Glassmorphism Login Form using HTML & CSS.

My Website: codewithayan, see this to checkout all of my amazing Tutorials.

Social Media icons with Hover/Effect using CSS & HTML

Code with Ayan — Sun, 26 Jun 2022 23:48:04 +0000

Hello guys, Today in this post, we’ll learn How to Create social media icons with Hover Effect using HTML and CSS. To create it we are going to use simple CSS & Font Awesome. Hope you enjoy our blog.

Social media icons are a very important part of our website. They allow users to quickly share our content across social media sites, expanding users in seconds with just a click.

Even it is a small feature to be implemented; you can be creative with it and make the social icons interactive in a way that adds a unique experience for your users.

Demo

Click to watch demo!

To create Social Media Icons Hover Effect we have used Font Awesome to make icons. Hence, you will need a Font Awesome link in your <head> tag. It’s very simple, all you need to do is to log into Font Awesome site and they will provide you with the Kit’s Code.

Social Media icons Hover Effect HTML CSS (source code)

HTML Code

<!DOCTYPE html>
<html lang="en">
    <head>
         <title>Making Animations</title>
        <link rel="stylesheet" href="Animations.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-                     awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous"/>
    </head>

    <body> 

        <div class="wrapper">
            <div class="button">
                <div class="icon">
                    <a class="fab fa-facebook-f"></a>
                </div>
                <span>Facebook</span>
            </div>
            <div class="button">
                <div class="icon">
                    <a class="fab fa-instagram"></a>   
                </div>
                <span>Instagram</span>
            </div>

            <div class="button">
                <div class="icon">
                    <a class="fab fa-twitter"></a>
                </div>
                <span>Twitter</span>
            </div>

            <div class="button">
                <div class="icon">
                    <a class="fab fa-youtube"></a>
                </div>
                <span>Youtube</span>
            </div>
        </div> 

    </body>
</html>

CSS Code

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
html,body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background: linear-gradient(315deg, #fff 0%, rgb(245, 245, 245) 74%);
}
.button{
    height: 60px;
    width: 60px;
    background-color: #fff;
    border-radius: 60px;
    cursor: pointer;
    box-shadow: 0 10px 10px rgb(94, 91, 91);
    float: left;
    overflow: hidden;
    transition: all 1s ease-in-out;
}
.button:hover{
    width: 220px;
}

.button:nth-child(1):hover .icon { background: #4267B2;}
.button:nth-child(2):hover .icon { background: #E1306C;}
.button:nth-child(3):hover .icon { background: #1DA1F2;}
.button:nth-child(4):hover .icon { background: #FF0000;}

.button:nth-child(1) span { color: #4267B2;}
.button:nth-child(2) span { color: #E1306C;}
.button:nth-child(3) span { color: #1DA1F2;}
.button:nth-child(4) span { color: #FF0000;}

.button span{
    font-size: 20px;
    font-weight: 500;
    line-height: 60px;
    margin-left: 10px;
}
.button, .icon{
    display: inline-block;
    height: 60px;
    width: 60px;
    text-align: center;
    border-radius: 50px;
}
.button, .icon a{
    font-size: 25px;
    line-height: 60px;
}
.icon{
    float: left;
}

Congratulations! We have now successfully created our Social Media icons with Hover Effect using CSS.

My Website: codewithayan, see this to check out all of my amazing Tutorials.

Simple Login Page in HTML and CSS

Code with Ayan — Fri, 24 Jun 2022 19:34:03 +0000

Hello guys, Today in this post we’ll learn How to Create a Simple Login Page with a fantastic design. To create it we are going to use pure CSS and HTML. Hope you enjoy this post.

A login page is one of the most important component of a website or app that allows authorized users to access an entire site or a part of a website. You would have already seen them when visiting a website. Let's head to create it

Whether it’s a signup or login page, it should be catchy, user-friendly and easy to use. These types of Forms lead to increased sales, lead generation, and customer growth.

Demo

Click to watch demo!

Simple Login Page HTML CSS (source code)

HTML Code

<!DOCTYPE html>
  <html lang="en" >
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="styledfer.css">
  </head>

  <body>
   <div id="login-form-wrap">
    <h2>Login</h2>
    <form id="login-form">
      <p>
      <input type="email" id="email" name="email" placeholder="Email " required><i class="validation"><span></span><span></span></i>
      </p>
      <p>
      <input type="password" id="password" name="password" placeholder="Password" required><i class="validation"><span></span><span></span></i>
      </p>
      <p>
      <input type="submit" id="login" value="Login">
      </p>

      </form>
    <div id="create-account-wrap">
      <p>Don't have an accout? <a href="#">Create One</a><p>
    </div>
   </div>

  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js'></script>
  </body>
</html>

CSS Code

body {
  background-color: #020202;
  font-size: 1.6rem;
  font-family: "Open Sans", sans-serif;
  color: #2b3e51;
}
h2 {
  font-weight: 300;
  text-align: center;
}
p {
  position: relative;
}
a,
a:link,
a:visited,
a:active {
  color: #ff9100;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
a:focus, a:hover,
a:link:focus,
a:link:hover,
a:visited:focus,
a:visited:hover,
a:active:focus,
a:active:hover {
  color: #ff9f22;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
#login-form-wrap {
  background-color: #fff;
  width: 16em;
  margin: 30px auto;
  text-align: center;
  padding: 20px 0 0 0;
  border-radius: 4px;
  box-shadow: 0px 30px 50px 0px rgba(0, 0, 0, 0.2);
}
#login-form {
  padding: 0 60px;
}
input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  outline: none;
  height: 60px;
  line-height: 60px;
  border-radius: 4px;
}
#email,
#password {
  width: 100%;
  padding: 0 0 0 10px;
  margin: 0;
  color: #8a8b8e;
  border: 1px solid #c2c0ca;
  font-style: normal;
  font-size: 16px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  display: inline-block;
  background: none;
}
#email:focus,
#password:focus {
  border-color: #3ca9e2;
}
#email:focus:invalid,
#password:focus:invalid {
  color: #cc1e2b;
  border-color: #cc1e2b;
}
#email:valid ~ .validation,
#password:valid ~ .validation 
{
  display: block;
  border-color: #0C0;
}
#email:valid ~ .validation span,
#password:valid ~ .validation span{
  background: #0C0;
  position: absolute;
  border-radius: 6px;
}
#email:valid ~ .validation span:first-child,
#password:valid ~ .validation span:first-child{
  top: 30px;
  left: 14px;
  width: 20px;
  height: 3px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
#email:valid ~ .validation span:last-child
#password:valid ~ .validation span:last-child
{
  top: 35px;
  left: 8px;
  width: 11px;
  height: 3px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.validation {
  display: none;
  position: absolute;
  content: " ";
  height: 60px;
  width: 30px;
  right: 15px;
  top: 0px;
}
input[type="submit"] {
  border: none;
  display: block;
  background-color: #ff9100;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  font-size: 18px;
  position: relative;
  display: inline-block;
  cursor: pointer;
  text-align: center;
}
input[type="submit"]:hover {
  background-color: #ff9b17;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

#create-account-wrap {
  background-color: #eeedf1;
  color: #8a8b8e;
  font-size: 14px;
  width: 100%;
  padding: 10px 0;
  border-radius: 0 0 4px 4px;
}

Congratulations! You have now successfully created our Simple Login Page in HTML and CSS.

My Website: codewithayan, see this to checkout all of my amazing Tutorials.

Amazing animated search bar using HTML & CSS

Code with Ayan — Wed, 22 Jun 2022 14:39:56 +0000

Hey guys, Today in this post, we’ll learn How to add an amazing animated search bar with icon using CSS and HTML. To create it we are going to use simple CSS & Font Awesome. Hope you enjoy this post.

A search bar is a very important component of our website. They allow users to easily search for articles available on your blog and help them find out what they are looking for easily, which increases the friendliness of the website to users.

Extending the search box to Hover is an idea that modern websites use nowadays, with placing it in the top navbar of the website to see it easily. Even if it is a small feature to be implemented; you can be creative with it and make the Search bar interactive in a way that adds a good experience for the users.

So, let's head to create this!

Demo

Click to watch demo!

To create Animated search bar we have used Font Awesome. Hence, you will need a Font Awesome link in your

tag. It’s very simple, all you need to do is to log into Font Awesome site and they will provide you with the Kit’s Code.

Animated search bar with icon HTML CSS (source code)
HTML Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Animated Search Bar</title>
        <link rel="icon" href="animated.jpg">
        <link rel="stylesheet" href="SearchBar.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous"/>
    </head>

    <body>
        <br>
        <form action="" id="s">
            <input type="search">
            <i class="fa fa-search"></i>
        </form>

    </body>
</html>

CSS Code

body{
    padding: 0;
    margin: 0;
    height: 100vh;
    width: 100%;
    background: #07051a;
}

form{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: all 1s;a
    width: 50px;
    height: 50px;
    background: white; 
    box-sizing: border-box;
    border-radius: 25px;
    border: 4px solid white;
    padding: 5px;
}
input{
    position: absolute;
    width: 100%;
    height: 42.5px;
    line-height: 30px;
    display: none;
    font-size: 1em;
    border-radius: 20px;
    padding: 0 20px;
    top: 0;
    left: 0;
    outline: 0;
    border: 0;
}
.fa{
    box-sizing: border-box;
    padding: 10px;
    width: 42.5px;
    height: 42.5px;
    position: absolute;
    border-radius: 50%;
    color: #07051a;
    text-align: center;
    font-size: 1.2em;
    transition: all 1s;
    top: 0;
    right: 0;
}
form:hover {
    width: 200px;
    cursor: pointer;
}
form:hover input {
    display: block;
}

form:hover .fa {
    background: #07051a;
    color: white;
}

Congratulations! We have now successfully created our Amazing Animated search bar with icon and Hover Effect.

My Website: codewithayan, see this to checkout all of my amazing Tutorials.

Amazing Food Card with Hover/Effect using CSS & HTML

Code with Ayan — Tue, 21 Jun 2022 19:56:17 +0000

Hello guys, Today in this post, we’ll learn How to Create an Amazing Food Card with amazing Hover Effect using CSS and HTML. To create it we are going to use simple CSS and HTML. Hope you enjoy this post.

Food Cards play a key role in increasing the engagement of a Food selling website. Food Cards display the image, showing the appearance of food. They allow users to see the price and easily order the food.

Any movement of the Card when hovered signs users of a response-giving website. This makes the User Experience better. You can be creative with it and make your Food Cards interactive in a way that adds a good experience for the users.

Demo

Click to watch demo!

Amazing Food Card HTML CSS (source code)

HTML Code

<!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>Document</title>
    </head>
    <body>

    <div class="single-menu">
        <img src="hamBurger.jpg" alt="zinger-burger">
        <div class="content">
            <h2>Plain fries<span>100rs</span></h2>
            <p>Crisp to teeth, our in house made French fries.</p>
        </div>
    </div>

    </body>
</html>

CSS Code

body{
     background-color: #000;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh   ;
    }
.single-menu{
     display: flex;
     align-items: center;
     flex-direction: column;
    }
    .single-menu:hover img{
        border-radius: 50%;
    }
    .single-menu img{
        max-width:  250px;
        margin-right: 25px;
        border: 1px solid #ddd;
        padding: 3px;
        transition: .5s;
    }
    .single-menu h2{
        color: red;
        text-transform: capitalize;
        font-size: 21px;
        margin-bottom: 6px;
        padding-bottom: 5px;
    }
    .single-menu p{
        font-size: 15px;
    }
    .single-menu span{
        float: right;
        color: rgb(238, 9, 9);
        font-style: italic;
    }

Congratulations! We have now successfully created our Amazing Food Card with a simple Hover Effect

My Website: codewithayan, see this to checkout all of my amazing Tutorials.

Simple Feedback Form using Html, CSS and Javascript

Code with Ayan — Mon, 20 Jun 2022 17:48:37 +0000

Hey guys, Today in this post, we’ll learn How to Create a Simple Feedback Form using CSS and HTML. To create it we are going to use simple CSS, HTML & Javascript. Hope you enjoy this post.

Feedback Forms are usually used by websites and businesses to know how they can improve, it helps in making User Experience better. Customers reveal what they think about the company's services. This connects both Company and users to get a better understanding. Companies could easily get Feedback by Using different emojis to get ratings. Making users feel at ease. Writing something when the Send button is pressed, signs users of a response giving website. Be creative with it and make your Feedback Forms interactive to add a good experience for the users.

DEMO

Click to watch demo!

Simple Feedback Form Html Javascript (source code)

HTML Code

 <!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="feedback" class="feedback-container">
    <strong>How satisfied are you with our <br/> customer support service?</strong>
      <div class="ratings-container">
        <div class="rating">
          <img src="https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-emoji-neumojis-smiley-neu-royyan-wijaya-17.png" alt="">
          <small>Happy</small>
        </div>
        <div class="rating"><img src="https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-emoji-neumojis-smiley-neu-royyan-wijaya-3.png" alt=""/>
          <small>Neutral</small>
        </div>
        <div class="rating active"><img src="https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-emoji-neumojis-smiley-neu-royyan-wijaya-30.png" alt=""/>
          <small>unsatisfied</small>
        </div>
      </div>

      <button class="btn" id="send">Send Review</button>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS Code
Then, add CSS to our Feedback Form. We have used External CSS to link with HTML so make sure you name your file (style).css. You could also use Internal CSS.

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

* {
  box-sizing: border-box;
}
body {
  background-color: #000;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; margin: 0;
  overflow: hidden;
}
.feedback-container {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  font-size: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
  padding: 30px; max-width: 400px;
}
.feedback-container strong {
  line-height: 20px;
}
.ratings-container {
  display: flex;
  margin: 20px 0;
}   
.rating {
  flex: 1;
  cursor: pointer;
  padding: 20px;
  margin: 10px 5px;
}
.rating:hover, .rating.active {
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.rating img {
  width: 40px;
}
.rating small {
  color: #555;
  display: inline-block;
  margin: 10px 0 0;
}
.rating:hover small,.rating.active small {
  color: #111;
}
.btn {
  background-color: #302d2b;
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 12px 30px;
  cursor: pointer;
}
.btn:focus {
outline: 0;
}
.btn:active {
transform: scale(0.98);
}
.fa-heart {
  color: red;
  font-size: 30px;
  margin-bottom: 10px;
}

JavaScript Code
Javascript would be doing the main work, it will be handling all the functionality of our Feedback Form. We have used External JavaScript to link, so make sure you name your file (script).js . You could also paste the source code in the Script tag.

const ratings = document.querySelectorAll('.rating')
const ratingsContainer = document.querySelector('.ratings-container')
const sendBtn = document.querySelector('#send')
const feedback = document.querySelector('#feedback')
let selectedRating = 'Satisfied'
ratingsContainer.addEventListener('click', (e) => {
    if(e.target.parentNode.classList.contains('rating') && e.target.nextElementSibling) {
        removeActive()
        e.target.parentNode.classList.add('active')
        selectedRating = e.target.nextElementSibling.innerHTML
    } else if(
        e.target.parentNode.classList.contains('rating') &&
        e.target.previousSibling &&
        e.target.previousElementSibling.nodeName === 'IMG'
    ) {
        removeActive()
        e.target.parentNode.classList.add('active')
        selectedRating = e.target.innerHTML
    }
})
sendBtn.addEventListener('click', (e) => {
    feedback.innerHTML = `
        <i class="fas fa-heart"></i>
        <strong>Thank You!</strong>
        <br>
        <strong>Feedback: ${selectedRating}</strong>
<p>We'll use your feedback to improve our customer support</p
})
function removeActive() {
    for(let i = 0; i < ratings.length; i++) {
        ratings[i].classList.remove('active')
    }
}

Congratulations! You have now successfully created our Simple Feedback Form using Html and Javascript.

My Website: codewithayan, see this to checkout all of my amazing Tutorials.

Dark Mode Toggle Button in JavaScript

Code with Ayan — Sun, 19 Jun 2022 00:08:55 +0000

Hey beautiful people, Today in this post we’ll learn How to Create a Dark Mode Toggle Button in JavaScript** with amazing design. To create it we are going to use pure CSS, HTML & Javascript. Hope you enjoy this post.

Adding a dark/light mode feature on a website has been on rising. You could have already seen them on different websites. This feature enhances quality and user satisfaction. Various websites like YouTube, and Facebook have introduced such dark mode features.

Let’s head to create it.

Demo
Click to watch demo!

Dark Mode Toggle Button in JavaScript (source code)

HTML Code
First, add HTML. Make sure it includes .html extension. For example PasswordGenerator.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" />
  </head>

  <div class="all">
    <div class="container">
        <input type="checkbox" id="toggle">
    </div>

    <p>
        Lorem30
    </p>
   </div>

    <script src="script.js"></script>
  </body>
</html>

CSS Code
Let's add some CSS.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    padding: 30px;
}
.all{
  width: 400px;
  margin: 40px auto;
}
.container{
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    position: relative;
}
#toggle{
    -webkit-appearance: none;
    appearance: none;
    height: 32px;
    width: 65px;
    background-color: #15181f;
    position: absolute;
    right: 0;
    border-radius: 20px;
    outline: none;
    cursor: pointer;
}
#toggle:after{
    content: "";
    position: absolute;
    height: 24px;
    width: 24px;
    background-color: #ffffff;
    top: 5px;
    left: 7px;
    border-radius: 50%;
}
p{
    font-family: "Open Sans",sans-serif;
    line-height: 35px;
    padding: 10px;
    text-align: justify;
    }
.dark-theme{
    background-color: #15181f;
    color: #e5e5e5;
}
.dark-theme #toggle{
    background-color: #ffffff;
}
.dark-theme #toggle:after{
    background-color: transparent;
    box-shadow: 10px 10px #15181f;
    top: -4px;
    left: 30px;
}

JavaScript Code
JavaScript would be doing the main work, it will change the theme when the toggle button will be clicked. We have linked the CSS codes of the dark mode added above in the switch.

    document.getElementById("toggle").addEventListener("click", function()
{
    document.getElementsByTagName('body')[0].classList.toggle("dark-theme");
});

Congratulations! You have now successfully created our Dark Mode Toggle Button in JavaScript.

I hope that you have enjoyed this tutorial! Please feel free to leave your comments & suggestions on how we can improve. So, next time we could bring more improved content for you.

My Instagram page: codewithayan, you could contact me here

Random Password Generator app in Javascript (Free source code)

Code with Ayan — Fri, 17 Jun 2022 19:13:53 +0000

Hey beautiful people, Today in this post we’ll learn How to Create a Random Password Generator app in Javascript with amazing design. To create it we are going to use simple CSS, HTML & Javascript and I haven't used any JQuery plugins or JavaScript libraries to create the Random Password Generator app in Javascript. I hope you enjoy this post.

Random Password Generator app is nowadays much used by many popular and different websites. You could have already seen them when creating an account on a platform. The password created using this app is going to be a very strong password, since it includes keyword combinations like numbers, symbols, uppercase, and lowercase alphabets. The password is going to be random and unique so it will not be an easy to guess. This prevents attacks from hackers and crackers.

I have used JavaScript's Math.floor and Math.random method to create the app. When generate button will be clicked. The different types of loops will create different passwords each time.

We will use HTML to create the structure of the app, CSS to design and style it and JavaScript to add functionality and other features of the app.

Demo
Below is how our JavaScript Password Generator looks like and how it works.

Now, as we have seen the demo so let's head to create this with HTML CSS & Javascript.

Random Password Generator in Javascript (Free source code)

HTML
First, add HTML. HTML is a markup language which describes the structure of the pages. Your file's name could be anything but makes sure it includes .html extension. For example PasswordGenerator.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" />
  </head>

  <body>
    <div class="box">
      <h2>Random Password Generater</h2>
      <input type="text" name="" placeholder="Password" id="password" readonly>

      <table>
        <th><div id="button" class="btn1"onclick="genPassword()">Generate</div></th>
        <th><a  id="button" class="btn2" onclick="copyPassword()">Copy</a></th>
      </table>
    </div>

    <script src="script.js"></script>
  </body>
</html>

CSS Code
Then, add CSS to our Feedback Form. CSS defines the design, layout and differences in display for different devices and screen sizes. External CSS is used to link with HTML so make sure it .css extension. For example PasswordGenerator.css. You could also use Internal CSS.

* {
    margin: 0;
    padding: 0;
    user-select: none; /*important*/
    box-sizing: border-box;
}
body {
    background-color: #FF8C00 ;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.box{
  background-color: white;
  padding-top: 30px;
  padding: 30px;
  margin-bottom: 12em;
}
.box h2{
  margin-bottom: 40px;
  text-align: center;
  font-size: 26px;
  color: rgb(219, 99, 0);
  font-family: sans-serif;
}
input {
  padding: 20px;
    user-select: none;
    height: 50px;
    width: 400px;
    border-radius: 6px;
    border: none;
    border: 2px solid #ff9411;
    outline: none;
    font-size: 22px;
}
input::placeholder{
  font-size: 23px;
} 
#button {
    font-family: sans-serif;
    font-size: 15px;

    margin-top: 40px;
    border: 2px solid #ff9411 ;
    width: 155px;
    height: 50px;
    text-align: center;
    background-color: #eb8a13;
    display: flex;
    color: rgb(255, 255, 255);
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 7px;
}
.btn2{
   margin-left: 85px
 }
#button:hover {
    color: white;
    background-color: #db7900
}

JavaScript Code
JavaScript is a programming language which helps in adding functionality to your Website. Javascript would be doing the main work, it will generate the code when generate button is clicked. In varchars, I have added different numbers, numbers, symbols, etc. These symbols and numbers associated with each other will create random passwords. Math.random() will help here. The password will show in the input box. Copy button is directly connected to the input. It will copy written text in input box.

We have used External JavaScript to link, so makes sure it includes .js extension like PasswordGenerator.js . You could also paste the source code in the Script tag.

function genPassword() {
        var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        var passwordLength = 12;
        var password = "";
        for (var i = 0; i <= passwordLength; i++) {
            var randomNumber = Math.floor(Math.random() * chars.length);
            password += chars.substring(randomNumber, randomNumber +1);
        }
        document.getElementById("password").value = password;
    }
    function copyPassword() {
      var copyText = document.getElementById("password");
      copyText.select();
      copyText.setSelectionRange(0, 999);
      document.execCommand("copy");
      alert("copied to clipboard")
    }

Congratulations! You have now successfully created our Random Password Generator app in Javascript

I hope that you have enjoyed this tutorial! Please feel free to leave your comments & suggestions on how we can improve. So, next time we could bring more improved content for you.

My Instagram page: codewithayan, you could contact me here