DEV Community: Code with Random

Simple weather API Project Javascript | Weather App Javascript

Code with Random — Mon, 09 May 2022 17:36:18 +0000

https://www.codewithrandom.com/2022/05/simple-weather-api-project.html

Learners, In this article we are going to design a very important and impressive project which is Simple weather API Project in Javascript with detailed functionality.

<div class="container">  
  <div class="title">  
   <h1 id="city"></h1>  
   <div id="graphic" class="weather-icon"></div>  
   <div id="description" class='important-info text'></div>  
   <div id="farenheit" class="temp-info"></div>  
   <div id="celsius" class="temp-info"></div>  
  </div>  
 </div>  
 <div class="description-container">  
  <div class="block-1">  
   <div class="text">  
    <span>Max</span>  
    <span id="max" class="important-info"> </span>  
   </div>  
   <div class="text">  
    <span>Min</span>  
   <span id="min" class='important-info'> </span>  
   </div>  
  </div>  
  <div class="block-2">  
   <div id="longitude" class=" text important-info">Lon: </div>  
   <div id="latitude" class="text important-info">Lat: </div>  
  </div>  
  <div class="block-3">  
   <div id="humidity" class="text important-info">Humidity: </div>  
   <div id="pressure" class="text important-info">Pressure: </div>  
   <div id="windSpeed" class="text important-info">Winds: </div>  
  </div>  
 </div>  
 <div class="container-button">  
    <div class="switch-button">  
     <span class="active"></span>  
     <button class="text switch-button-case left active-case">Celsius</button>  
     <button class="text switch-button-case right">Farenheit</button>  
    </div>  
 </div>  [read more](https://www.codewithrandom.com/2022/05/simple-weather-api-project.html)

Simple Footer Using HTML and CSS | Responsive Footer Html CSS

Code with Random — Mon, 09 May 2022 17:35:42 +0000

https://www.codewithrandom.com/2022/05/simple-footer-using-html-and-css.html
Learners, In this article we are going to design a section of the webpage that is an interactive, and impressive project which is a Simple footer

HTML SECTION

Here I’m not going to add a structure of the HTML file from scratch, I will just paste the body part, it is so because the body is the main part of our designing a browser.

We have the following part in the HTML section.

First, we have a footer that will enclose all other parts of the comment section.
Then we have three columns then we have an hr and below the hr, there is a copyright message and social link.
Go through the below code 👇 and run it in your IDE or where you used to design just HTML without CSS styling.

 <!DOCTYPE html>  
 <html>  
 <head>  
   <title>How to Create Responsive Footer in Html CSS and Bootstrap Create Professional Footer </title>  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">  
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />  
   <link rel="stylesheet" href="style.css">  
 </head>  
 <body>   
  <footer class="site-footer">  
   <div class="container">  
    <div class="row">  
     <div class="col-sm-12 col-md-6">  
      <h6>About</h6>  
      <p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>  
     </div>  
     <div class="col-6 col-md-3">  
      <h6>Categories</h6>  
      <ul class="footer-links ">  
       <li><a href="#">Website Design</a></li>  
       <li><a href="#">UI Design</a></li>  
       <li><a href="#">Web Development</a></li>  
       <li><a href="#">Video Editor</a></li>  
       <li><a href="#">Theme Creator</a></li>  
       <li><a href="#">Templates</a></li>  
      </ul>  
     </div>  
     <div class="col-6 col-md-3">  
      <h6>Quick Links</h6>  
      <ul class="footer-links">  
       <li><a href="#">About Us</a></li>  
       <li><a href="#">Contact Us</a></li>  
       <li><a href="#">Contribute</a></li>  
       <li><a href="#">Privacy Policy</a></li>  
       <li><a href="#">Sitemap</a></li>  
      </ul>  
     </div>  
    </div>  
    <hr class="small">  
   </div>  
   <div class="container">  
    <div class="row">  
     <div class="col-md-8 col-sm-6 col-12">  
      <p class="copyright-text">Copyright © 2020 All Rights Reserved by  
       <a href="#"><span class="logo">WBIFY.</span></a>  
      </p>  
     </div>  
     <div class="col-md-4 col-sm-6 col-12">  
      <ul class="social-icons">  
       <li><a class="facebook" href="#"><i class="fab fa-facebook-f"></i></a></li>  
       <li><a class="twitter" href="#"><i class="fab fa-twitter"></i></a></li>  
       <li><a class="dribbble" href="#"><i class="fab fa-dribbble"></i></a></li>  
       <li><a class="linkedin" href="#"><i class="fab fa-linkedin-in"></i></a></li>  
      </ul>  
     </div>  
    </div>  
   </div>  
  </footer>  
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>  
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>  
 </body>  
 </html>

Popup Registration Form Javascript | Create A Popup Form In Html

Code with Random — Sun, 08 May 2022 06:36:07 +0000

https://www.codewithrandom.com/2022/05/popup-registration-form-javascript.html

In this blog, we will learn how to create Popup Registration Form using Javascript. We use HTML, Css, and javascript for this Popup Registration Form Javascript. I hope you enjoy our blog so let's start with a basic HTML structure for the Popup Registration Form Javascript.

HTML Code

<script src="https://kit.fontawesome.com/f9275dded9.js" crossorigin="anonymous"></script>  
 <!--Trigger-->  
 <a class="login-trigger" href="#" data-target="#login" data-toggle="modal">Login/Register</a>  
 <div id="login" class="modal fade" role="dialog">  
  <div class="modal-dialog">  
   <div class="modal-content">  
    <div class="modal-body">  
     <button data-dismiss="modal" class="close">&times;</button>  
     <div class="container" id="container">  
                               <div class="form-container sign-up-container">  
                                    <form action="#">  
                                         <h1>Create Account</h1>  
                                         <div class="social-container">  
                                              <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>  
                                              <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>  
                                              <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>  
                                         </div>   
                                         <span>or use your email for registration</span>  
                                         <input type="text" placeholder="Name" />  
                                         <input type="email" placeholder="Email" />  
                                         <input type="password" placeholder="Password" />  
                                         <button>Sign Up</button>  
                                    </form>  
                               </div>  
                               <div class="form-container sign-in-container">  
                                    <form action="#">  
                                         <h1>Sign in</h1>  
                                         <div class="social-container">  
                                              <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>  
                                              <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>  
                                              <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>  
                                         </div>  
                                         <span>or use your account</span>  
                                         <input type="email" placeholder="Email" />  
                                         <input type="password" placeholder="Password" />  
                                         <a href="#">Forgot your password?</a>  
                                         <button>Sign In</button>  
                                    </form>  
                               </div>  
                               <div class="overlay-container">  
                                    <div class="overlay">  
                                         <div class="overlay-panel overlay-left">  
                                              <h1>Welcome Back!</h1>  
                                              <p>To keep connected with us please login with your personal info</p>  
                                              <button class="ghost" id="signIn">Sign In</button>  
                                         </div>  
                                         <div class="overlay-panel overlay-right">  
                                              <h1>Hello, Friend!</h1>  
                                              <p>Enter your personal details and start journey with us</p>  
                                              <button class="ghost" id="signUp">Sign Up</button>  
                                         </div>  
                                    </div>  
                               </div>  
                           </div>  
    </div>  
   </div>  
  </div>   
 </div>

How to Create a Navbar | Creating Navbar using HTML, CSS & JavaScript

Code with Random — Sat, 07 May 2022 13:22:42 +0000

https://www.codewithrandom.com/2022/05/How-to-Create-a-Navbar.html

Introduction:
Hello coders, welcome to codewithrandom. Today we'll look how to create a Navigation Bar or Navbar with the help of HTML, CSS and JavaScript. We as a Front-End Developer has a this tool named HTML, CSS & JavaScript. Through it we can make it creative and grab the attention of user interface. Before going to the code part let's see what is Navbar.

What is Navbar?
A Navigation Bar or Navbar is an element in the webpage or website. It contains links which redirect the user interface from one page to another. The tag wraps all the primary bars i.e., the main navigation of the website. It can be either vertical or horizontal.
Let us see the coding part of the Navbar.

HTML Code:

 <div class="navbar">  
  <div class="logo">  
   <h1>Codewithrandom</h1>  
  </div>  
  <div class="nav__links">  
   <a href="#home" class="active nav__link">Home</a>  
   <a href="#about" class="nav__link">About</a>  
   <a href="#contact" class="nav__link">Contact</a>  
  </div>  
 </div>  
 <div id="home" class="section">  
  <h1>Home</h1>  
 </div>  
 <div id="about" class="section">  
  <h1>About</h1>  
 </div>  
 <div id="contact" class="section">  
  <h1>Contact</h1>  
 </div>  
 <script src="main.js"></script>

In this HTML code we defined a

and called classes such as logo, navbar & nav_links. And describe the heading as Home, About, Contact. Let us look at the HTML output. Before writing CSS for Navbar.

HTML Output:

In this Output we have just code the HTML part and this how it looks like and let us write the CSS for navbar to look attractive.

CSS Code:

 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");  
 * {  
  padding: 0;  
  margin: 0;  
  box-sizing: border-box;  
  font-family: "Poppins", sans-serif;  
 }  
 body {  
  scr

Dictionary App using Javascript

Code with Random — Sun, 02 Jan 2022 18:49:41 +0000

Read the original article here or continue below

Hey, friends today we will see how to make this super interesting dictionary app. The demo video is at the bottom of the page.
Now first let's see the general method to use this project. When the page is loaded, you can enter any word and if it's available, the definition will pop-up. Sometimes, an example sentence would come too.
Now let's see the source codes:
HTML codes

<div class="wrapper">
        <header>English Dictionary</header>
        <div class="search">
          <input type="text" placeholder="Search a word" required spellcheck="false">
          <i class="fas fa-search"></i>
          <span class="material-icons">close</span>
        </div>
        <p class="info-text">Type any existing word and press enter to get meaning, example, synonyms, etc.</p>
        <ul>
          <li class="word">
            <div class="details">
              <p>__</p>
              <span>_ _</span>
            </div>
            <i class="fas fa-volume-up"></i>
          </li>
          <div class="content">
            <li class="meaning">
              <div class="details">
                <p>Meaning</p>
                <span>___</span>
              </div>
            </li>
            <li class="example">
              <div class="details">
                <p>Example</p>
                <span>___</span>
              </div>
            </li>
            <li class="synonyms">
              <div class="details">
                <p>Synonyms</p>
                <div class="list"></div>
              </div>
            </li>
          </div>
        </ul>
      </div>

The output would be:

CSS Codes

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: cyan;
}
::selection{
  color: #fff;
  background: cyan;
}
.wrapper{
  width: 420px;
  border-radius: 7px;
  background: #fff;
  padding: 25px 28px 45px;
  box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);
}
.wrapper header{
  font-size: 28px;
  font-weight: 500;
  text-align: center;
}
.wrapper .search{
  position: relative;
  margin: 35px 0 18px;
}
.search input{
  height: 53px;
  width: 100%;
  outline: none;
  font-size: 16px;
  border-radius: 5px;
  padding: 0 42px;
  border: 1px solid #999;
}
.search input:focus{
  padding: 0 41px;
  border: 2px solid cyan;
}
.search input::placeholder{
  color: #B8B8B8;
}
.search :where(i, span){
  position: absolute;
  top: 50%;
  color: #999;
  transform: translateY(-50%);
}
.search i{
  left: 18px;
  pointer-events: none;
  font-size: 16px;
}
.search input:focus ~ i{
  color: cyan;
}
.search span{
  right: 15px;
  cursor: pointer;
  font-size: 18px;
  display: none;
}
.search input:valid ~ span{
  display: block;
}
.wrapper .info-text{
  font-size: 13px;
  color: #9A9A9A;
  margin: -3px 0 -10px;
}
.wrapper.active .info-text{
  display: none;
}
.info-text span{
  font-weight: 500;
}
.wrapper ul{
  height: 0;
  opacity: 0;
  padding-right: 1px;
  overflow-y: hidden;
  transition: all 0.2s ease;
}
.wrapper.active ul{
  opacity: 1;
  height: 303px;
}
.wrapper ul li{
  display: flex;
  list-style: none;
  margin-bottom: 14px;
  align-items: center;
  padding-bottom: 17px;
  border-bottom: 1px solid #D9D9D9;
  justify-content: space-between;
}
ul li:last-child{
  margin-bottom: 0;
  border-bottom: 0;
  padding-bottom: 0;
}
ul .word p{
  font-size: 22px;
  font-weight: 500;
}
ul .word span{
  font-size: 12px;
  color: #989898;
}
ul .word i{
  color: #999;
  font-size: 15px;
  cursor: pointer;
}
ul .content{
  max-height: 215px;
  overflow-y: auto;
}
ul .content::-webkit-scrollbar{
  width: 0px;
}
.content li .details{
  padding-left: 10px;
  border-radius: 4px 0 0 4px;
  border-left: 3px solid cyan;
}
.content li p{
  font-size: 17px;
  font-weight: 500;
}
.content li span{
  font-size: 15px;
  color: #7E7E7E;
}
.content .synonyms .list{
  display: flex;
  flex-wrap: wrap;
}
.content .synonyms span{
  cursor: pointer;
  margin-right: 5px;
  text-decoration: underline;
}

Now we add JavaScript for functionality.

JavaScript Codes

const wrapper = document.querySelector(".wrapper"),
searchInput = wrapper.querySelector("input"),
volume = wrapper.querySelector(".word i"),
infoText = wrapper.querySelector(".info-text"),
synonyms = wrapper.querySelector(".synonyms .list"),
removeIcon = wrapper.querySelector(".search span");
let audio;

function data(result, word){
    if(result.title){
        infoText.innerHTML = `Can't find the meaning of <span>"${word}"</span>. Please, try to search for another word.`;
    }else{
        wrapper.classList.add("active");
        let definitions = result[0].meanings[0].definitions[0],
        phontetics = `${result[0].meanings[0].partOfSpeech}  /${result[0].phonetics[0].text}/`;
        document.querySelector(".word p").innerText = result[0].word;
        document.querySelector(".word span").innerText = phontetics;
        document.querySelector(".meaning span").innerText = definitions.definition;
        document.querySelector(".example span").innerText = definitions.example;
        audio = new Audio("https:" + result[0].phonetics[0].audio);

        if(definitions.synonyms[0] == undefined){
            synonyms.parentElement.style.display = "none";
        }else{
            synonyms.parentElement.style.display = "block";
            synonyms.innerHTML = "";
            for (let i = 0; i < 5; i++) {
                let tag = `<span onclick="search('${definitions.synonyms[i]}')">${definitions.synonyms[i]},</span>`;
                tag = i == 4 ? tag = `<span onclick="search('${definitions.synonyms[i]}')">${definitions.synonyms[4]}</span>` : tag;
                synonyms.insertAdjacentHTML("beforeend", tag);
            }
        }
    }
}

function search(word){
    fetchApi(word);
    searchInput.value = word;
}

function fetchApi(word){
    wrapper.classList.remove("active");
    infoText.style.color = "#000";
    infoText.innerHTML = `Searching the meaning of <span>"${word}"</span>`;
    let url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`;
    fetch(url).then(response => response.json()).then(result => data(result, word)).catch(() =>{
        infoText.innerHTML = `Can't find the meaning of <span>"${word}"</span>. Please, try to search for another word.`;
    });
}

searchInput.addEventListener("keyup", e =>{
    let word = e.target.value.replace(/\s+/g, ' ');
    if(e.key == "Enter" && word){
        fetchApi(word);
    }
});

volume.addEventListener("click", ()=>{
    volume.style.color = "#4D59FB";
    audio.play();
    setTimeout(() =>{
        volume.style.color = "#999";
    }, 800);
});

removeIcon.addEventListener("click", ()=>{
    searchInput.value = "";
    searchInput.focus();
    wrapper.classList.remove("active");
    infoText.style.color = "#9A9A9A";
    infoText.innerHTML = "Type any existing word and press enter to get meaning, example, synonyms, etc.";
});

Log In / Sign Up using CSS

Code with Random — Sat, 01 Jan 2022 17:39:30 +0000

Read the original article here or continue below
Welcome to Code With Random blog. In this blog, we are going to learn that how to create a login / Sign Up. We are going to use HTML & CSS for Log In / Sign Up. Hope you will enjoy our blog so let's start with a basic HTML structure for the login / Sign Up.
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>Log In / Sign Up </title>  
   <link rel="stylesheet" href="style.css">  
  </head>  
  <body>  
   <div class="section">  
    <div class="container">  
     <div class="row full-height justify-content-center">  
      <div class="col-12 text-center align-self-center py-5">  
       <div class="section pb-5 pt-5 pt-sm-2 text-center">  
        <h6 class="mb-0 pb-3"><span>Log In </span><span>Sign Up</span></h6>  
           <input class="checkbox" type="checkbox" id="reg-log" name="reg-log"/>  
           <label for="reg-log"></label>  
        <div class="card-3d-wrap mx-auto">  
         <div class="card-3d-wrapper">  
          <div class="card-front">  
           <div class="center-wrap">  
            <div class="section text-center">  
             <h4 class="mb-4 pb-3">Log In</h4>  
             <div class="form-group">  
              <input type="email" name="logemail" class="form-style" placeholder="Your Email" id="logemail" autocomplete="off">  
              <i class="input-icon uil uil-at"></i>  
             </div>       
             <div class="form-group mt-2">  
              <input type="password" name="logpass" class="form-style" placeholder="Your Password" id="logpass" autocomplete="off">  
              <i class="input-icon uil uil-lock-alt"></i>  
             </div>  
             <a href="#" class="btn mt-4">submit</a>  
                    <p class="mb-0 mt-4 text-center"><a href="#0" class="link">Forgot your password?</a></p>  
              </div>  
             </div>  
            </div>  
          <div class="card-back">  
           <div class="center-wrap">  
            <div class="section text-center">  
             <h4 class="mb-4 pb-3">Sign Up</h4>  
             <div class="form-group">  
              <input type="text" name="logname" class="form-style" placeholder="Your Full Name" id="logname" autocomplete="off">  
              <i class="input-icon uil uil-user"></i>  
             </div>       
             <div class="form-group mt-2">  
              <input type="email" name="logemail" class="form-style" placeholder="Your Email" id="logemail" autocomplete="off">  
              <i class="input-icon uil uil-at"></i>  
             </div>       
             <div class="form-group mt-2">  
              <input type="password" name="logpass" class="form-style" placeholder="Your Password" id="logpass" autocomplete="off">  
              <i class="input-icon uil uil-lock-alt"></i>  
             </div>  
             <a href="#" class="btn mt-4">submit</a>  
              </div>  
             </div>  
            </div>  
           </div>  
          </div>  
         </div>  
        </div>  
       </div>  
     </div>  
   </div>  
  </body>  
 </html>

There is all HTML code for the profile card. Now, you can see output without CSS, then we write CSS for the profile card.

OUTPUT

CSS code

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');  
 @import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css');  
 @import url('https://unicons.iconscout.com/release/v2.1.9/css/unicons.css');  
 body{  
      font-family: 'Poppins', sans-serif;  
      font-weight: 300;  
      font-size: 15px;  
      line-height: 1.7;  
      color: #c4c3ca;  
      background-color: #1f2029;  
      overflow-x: hidden;  
 }  
 a {  
      cursor: pointer;  
  transition: all 200ms linear;  
 }  
 a:hover {  
      text-decoration: none;  
 }  
 .link {  
  color: #c4c3ca;  
 }  
 .link:hover {  
  color: #ffeba7;  
 }  
 p {  
  font-weight: 500;  
  font-size: 14px;  
  line-height: 1.7;  
 }  
 h4 {  
  font-weight: 600;  
 }  
 h6 span{  
  padding: 0 20px;  
  text-transform: uppercase;  
  font-weight: 700;  
 }  
 .section{  
  position: relative;  
  width: 100%;  
  display: block;  
 }  
 .full-height{  
  min-height: 100vh;  
 }  


  position: absolute;  
  left: -9999px;  
 }  
 .checkbox:checked + label,  
 .checkbox:not(:checked) + label{  
  position: relative;  
  display: block;  
  text-align: center;  
  width: 60px;  
  height: 16px;  
  border-radius: 8px;  
  padding: 0;  
  margin: 10px auto;  
  cursor: pointer;  
  background-color: #ffeba7;  
 }  
 .checkbox:checked + label:before,  
 .checkbox:not(:checked) + label:before{  
  position: absolute;  
  display: block;  
  width: 36px;  
  height: 36px;  
  border-radius: 50%;  
  color: #ffeba7;  
  background-color: #102770;  
  font-family: 'unicons';  
  content: '\eb4f';  
  z-index: 20;  
  top: -10px;  
  left: -10px;  
  line-height: 36px;  
  text-align: center;  
  font-size: 24px;  
  transition: all 0.5s ease;  
 }  
 .checkbox:checked + label:before {  
  transform: translateX(44px) rotate(-270deg);  
 }  
 .card-3d-wrap {  
  position: relative;  
  width: 440px;  
  max-width: 100%;  
  height: 400px;  
  -webkit-transform-style: preserve-3d;  
  transform-style: preserve-3d;  
  perspective: 800px;  
  margin-top: 60px;  
 }  
 .card-3d-wrapper {  
  width: 100%;  
  height: 100%;  
  position:absolute;    
  top: 0;  
  left: 0;   
  -webkit-transform-style: preserve-3d;  
  transform-style: preserve-3d;  
  transition: all 600ms ease-out;   
 }  
 .card-front, .card-back {  
  width: 100%;  
  height: 100%;  
  background-color: #2a2b38;  
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat.svg');  
  background-position: bottom center;  
  background-repeat: no-repeat;  
  background-size: 300%;  
  position: absolute;  
  border-radius: 6px;  
  left: 0;  
  top: 0;  
  -webkit-transform-style: preserve-3d;  
  transform-style: preserve-3d;  
  -webkit-backface-visibility: hidden;  
  -moz-backface-visibility: hidden;  
  -o-backface-visibility: hidden;  
  backface-visibility: hidden;  
 }  
 .card-back {  
  transform: rotateY(180deg);  
 }  
 .checkbox:checked ~ .card-3d-wrap .card-3d-wrapper {  
  transform: rotateY(180deg);  
 }  
 .center-wrap{  
  position: absolute;  
  width: 100%;  
  padding: 0 35px;  
  top: 50%;  
  left: 0;  
  transform: translate3d(0, -50%, 35px) perspective(100px);  
  z-index: 20;  
  display: block;  
 }  
 .form-group{   
  position: relative;  
  display: block;  
   margin: 0;  
   padding: 0;  
 }  
 .form-style {  
  padding: 13px 20px;  
  padding-left: 55px;  
  height: 48px;  
  width: 100%;  
  font-weight: 500;  
  border-radius: 4px;  
  font-size: 14px;  
  line-height: 22px;  
  letter-spacing: 0.5px;  
  outline: none;  
  color: #c4c3ca;  
  background-color: #1f2029;  
  border: none;  
  -webkit-transition: all 200ms linear;  
  transition: all 200ms linear;  
  box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);  
 }  
 .form-style:focus,  
 .form-style:active {  
  border: none;  
  outline: none;  
  box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);  
 }  
 .input-icon {  
  position: absolute;  
  top: 0;  
  left: 18px;  
  height: 48px;  
  font-size: 24px;  
  line-height: 48px;  
  text-align: left;  
  color: #ffeba7;  
  -webkit-transition: all 200ms linear;  
   transition: all 200ms linear;  
 }  
 .form-group input:-ms-input-placeholder {  
  color: #c4c3ca;  
  opacity: 0.7;  
  -webkit-transition: all 200ms linear;  
   transition: all 200ms linear;  
 }  
 .form-group input::-moz-placeholder {  
  color: #c4c3ca;  
  opacity: 0.7;  
  -webkit-transition: all 200ms linear;  
   transition: all 200ms linear;  
 }  
 .form-group input:-moz-placeholder {  
  color: #c4c3ca;  
  opacity: 0.7;  
  -webkit-transition: all 200ms linear;  
   transition: all 200ms linear;  
 }  
 .form-group input::-webkit-input-placeholder {  
  color: #c4c3ca;  
  opacity: 0.7;  
  -webkit-transition: all 200ms linear;  
   transition: all 200ms linear;  
 }  
 .form-group input:focus:-ms-input-placeholder {  
  opacity: 0;  
  -webkit-transition: all 200ms linear;  
   transition: all 200ms linear;  
 }  
 .form-group input:focus::-moz-placeholder {  
  opacity: 0;  
  -webkit-transition: all 200ms linear;  
   transition: all 200ms linear;  
 }  
 .form-group input:focus:-moz-placeholder {  
  opacity: 0;  
  -webkit-transition: all 200ms linear;  
   transition: all 200ms linear;  
 }  
 .form-group input:focus::-webkit-input-placeholder {  
  opacity: 0;  
  -webkit-transition: all 200ms linear;  
   transition: all 200ms linear;  
 }  
 .btn{   
  border-radius: 4px;  
  height: 44px;  
  font-size: 13px;  
  font-weight: 600;  
  text-transform: uppercase;  
  -webkit-transition : all 200ms linear;  
  transition: all 200ms linear;  
  padding: 0 30px;  
  letter-spacing: 1px;  
  display: -webkit-inline-flex;  
  display: -ms-inline-flexbox;  
  display: inline-flex;  
  -webkit-align-items: center;  
  -moz-align-items: center;  
  -ms-align-items: center;  
  align-items: center;  
  -webkit-justify-content: center;  
  -moz-justify-content: center;  
  -ms-justify-content: center;  
  justify-content: center;  
  -ms-flex-pack: center;  
  text-align: center;  
  border: none;  
  background-color: #ffeba7;  
  color: #102770;  
  box-shadow: 0 8px 24px 0 rgba(255,235,167,.2);  
 }  
 .btn:active,  
 .btn:focus{   
  background-color: #102770;  
  color: #ffeba7;  
  box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);  
 }  
 .btn:hover{   
  background-color: #102770;  
  color: #ffeba7;  
  box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);  
 }

Now we have completed our CSS section, Here is our final updated output CSS.

Dictionary App using Javascript

Code with Random — Fri, 31 Dec 2021 18:29:00 +0000

Read below or visit the original article from here
Hey, friends today we will see how to make this super interesting dictionary app. The demo video is at the bottom of the page.
Now first let's see the general method to use this project. When the page is loaded, you can enter any word and if it's available, the definition will pop-up. Sometimes, an example sentence would come too.

Now let's see the source codes:

HTML Codes

<div class="wrapper">
<header>English Dictionary</header>
<div class="search">
<input type="text" placeholder="Search a word" required spellcheck="false">
          <i class="fas fa-search"></i>
          <span class="material-icons">close</span>
        </div>
        <p class="info-text">Type any existing word and press enter to get meaning, example, synonyms, etc.</p>
        <ul>
          <li class="word">
            <div class="details">
              <p>__</p>
              <span>_ _</span>
            </div>
            <i class="fas fa-volume-up"></i>
          </li>
          <div class="content">
            <li class="meaning">
              <div class="details">
                <p>Meaning</p>
                <span>___</span>
              </div>
            </li>
            <li class="example">
              <div class="details">
                <p>Example</p>
                <span>___</span>
              </div>
            </li>
            <li class="synonyms">
              <div class="details">
                <p>Synonyms</p>
                <div class="list"></div>
              </div>
            </li>
          </div>
        </ul>
      </div>

CSS Codes

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: cyan;
}
::selection{
  color: #fff;
  background: cyan;
}
.wrapper{
  width: 420px;
  border-radius: 7px;
  background: #fff;
  padding: 25px 28px 45px;
  box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);
}
.wrapper header{
  font-size: 28px;
  font-weight: 500;
  text-align: center;
}
.wrapper .search{
  position: relative;
  margin: 35px 0 18px;
}
.search input{
  height: 53px;
  width: 100%;
  outline: none;
  font-size: 16px;
  border-radius: 5px;
  padding: 0 42px;
  border: 1px solid #999;
}
.search input:focus{
  padding: 0 41px;
  border: 2px solid cyan;
}
.search input::placeholder{
  color: #B8B8B8;
}
.search :where(i, span){
  position: absolute;
  top: 50%;
  color: #999;
  transform: translateY(-50%);
}
.search i{
  left: 18px;
  pointer-events: none;
  font-size: 16px;
}
.search input:focus ~ i{
  color: cyan;
}
.search span{
  right: 15px;
  cursor: pointer;
  font-size: 18px;
  display: none;
}
.search input:valid ~ span{
  display: block;
}
.wrapper .info-text{
  font-size: 13px;
  color: #9A9A9A;
  margin: -3px 0 -10px;
}
.wrapper.active .info-text{
  display: none;
}
.info-text span{
  font-weight: 500;
}
.wrapper ul{
  height: 0;
  opacity: 0;
  padding-right: 1px;
  overflow-y: hidden;
  transition: all 0.2s ease;
}
.wrapper.active ul{
  opacity: 1;
  height: 303px;
}
.wrapper ul li{
  display: flex;
  list-style: none;
  margin-bottom: 14px;
  align-items: center;
  padding-bottom: 17px;
  border-bottom: 1px solid #D9D9D9;
  justify-content: space-between;
}
ul li:last-child{
  margin-bottom: 0;
  border-bottom: 0;
  padding-bottom: 0;
}
ul .word p{
  font-size: 22px;
  font-weight: 500;
}
ul .word span{
  font-size: 12px;
  color: #989898;
}
ul .word i{
  color: #999;
  font-size: 15px;
  cursor: pointer;
}
ul .content{
  max-height: 215px;
  overflow-y: auto;
}
ul .content::-webkit-scrollbar{
  width: 0px;
}
.content li .details{
  padding-left: 10px;
  border-radius: 4px 0 0 4px;
  border-left: 3px solid cyan;
}
.content li p{
  font-size: 17px;
  font-weight: 500;
}
.content li span{
  font-size: 15px;
  color: #7E7E7E;
}
.content .synonyms .list{
  display: flex;
  flex-wrap: wrap;
}
.content .synonyms span{
  cursor: pointer;
  margin-right: 5px;
  text-decoration: underline;
}

Create QR code generator using javascript

Code with Random — Thu, 30 Dec 2021 13:58:18 +0000

Read the original article here or continue below
In this blog, we learn that how we create a QR code generator javascript. We use HTML, Css, and javascript for this QR code generator javascript. Hope you enjoy our blog so let's start with a basic HTML structure for a QR code generator javascript.
HTML code

<body>  
  <section class="heading">  
   <div class="title">QRcodes</div>  
   <div class="sub-title">Generate QRCode for anything!</div>  
  </section>  
  <section class="user-input">  
   <label for="input_text">Type something...</label>  
   <input type="text" name="input_text" id="input_text" autocomplete="off">  
   <button class="button" type="submit">Generate QR Code</button>  
  </section>  
  <div class="qr-code" style="display: none;"></div>  
 </body>

There is all HTML code for the QR code generator javascript. Now, you can see output without CSS, then we write css & javascript for QR code generator javascript.

Output

CSS code

:root {  
       font-size: 62.5%;  
 }  
  * {  
       margin: 0;  
       padding: 0;  
       box-sizing: border-box;  
       text-size-adjust: none;  
       -webkit-text-size-adjust: none;  
 }  
  button:hover {  
       cursor: pointer;  
 }  
  body {  
       display: flex;  
       flex-direction: column;  
       align-items: center;  
       background-color: #eae6e5;  
 }  
  .heading {  
       margin: 3rem 0 5rem 0;  
 }  
  .title, .sub-title {  
       font-size: 4rem;  
       text-align: center;  
       font-family: "Poppins", sans-serif;  
       color: #12130f;  
 }  
  .sub-title {  
       font-size: 1.5rem;  
       color: #8f8073;  
 }  
  .user-input {  
       display: flex;  
       flex-direction: column;  
       align-items: center;  
       width: 100%;  
 }  
  .user-input label {  
       text-align: center;  
       font-size: 1.5rem;  
       font-family: "Poppins", sans-serif;  
 }  
  .user-input input {  
       width: 80%;  
       max-width: 35rem;  
       font-family: "Poppins", sans-serif;  
       outline: none;  
       border: none;  
       border-radius: 0.5rem;  
       background-color: #9b8774 ad;  
       text-align: center;  
       padding: 0.7rem 1rem;  
       margin: 1rem 1rem 2rem 1rem;  
 }  
  .button {  
       outline: none;  
       border: none;  
       border-radius: 0.5rem;  
       padding: 0.7rem 1rem;  
       margin-bottom: 3rem;  
       background-color: #5b9279 9d;  
       color: #12130f;  
       font-family: "Poppins", sans-serif;  
 }  
  .qr-code {  
       border-top: 0.5rem solid #8f8073;  
       border-right: 0.5rem solid #8f8073;  
       border-bottom: 1rem solid #8f8073;  
       border-radius: 0.5rem;  
       border-bottom-left-radius: 0.5rem;  
       border-bottom-right-radius: 0.5rem;  
       border-left: 0.5rem solid #8f8073;  
       background-color: #8f8073;  
 }  
  .qr-code button {  
       display: flex;  
       justify-content: center;  
       background-color: #8f8073;  
       font-family: "Poppins", sans-serif;  
       color: #eae6e5;  
       border: none;  
       outline: none;  
       width: 100%;  
       height: 100%;  
       margin-top: 1rem;  
 }  
  .qr-code button a {  
       width: 100%;  
       height: 100%;  
       text-decoration: none;  
       color: #eae6e5;  
 }

Now we have completed our CSS section, Here is our updated output CSS.
output

use this link in javascript as a CDN link

//https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js 
let btn = document.querySelector(".button");  
 btn.addEventListener("click", () => {  
  let user_input = document.querySelector("#input_text");  
  if (user_input.value != "") {  
   if (document.querySelector(".qr-code").childElementCount == 0) {  
    generate(user_input);  
   } else {  
    document.querySelector(".qr-code").innerHTML = "";  
    generate(user_input);  
   }  
  } else {  
   document.querySelector(".qr-code").style = "display: none";  
   console.log("not valid input");  
  }  
 });  
 function generate(user_input) {  
  document.querySelector(".qr-code").style = "";  
  var qrcode = new QRCode(document.querySelector(".qr-code"), {  
   text: `${user_input.value}`,  
   width: 180, //128  
   height: 180,  
   colorDark: "#000000",  
   colorLight: "#ffffff",  
   correctLevel: QRCode.CorrectLevel.H  
  });  
  console.log(qrcode);  
  let download = document.createElement("button");  
  document.querySelector(".qr-code").appendChild(download);  
  let download_link = document.createElement("a");  
  download_link.setAttribute("download", "qr_code_linq.png");  
  download_link.innerText = "Download";  
  download.appendChild(download_link);  
  if (document.querySelector(".qr-code img").getAttribute("src") == null) {  
   setTimeout(() => {  
    download_link.setAttribute(  
     "href",  
     `${document.querySelector("canvas").toDataURL()}`  
    );  
   }, 300);  
  } else {  
   setTimeout(() => {  
    download_link.setAttribute(  
     "href",  
     `${document.querySelector(".qr-code img").getAttribute("src")}`  
    );  
   }, 300);  
  }  
 }

Create Clock progress bar style Clock using html css javascript

Code with Random — Tue, 28 Dec 2021 16:52:31 +0000

In this blog, we learn that how we create a Clock progress bar. We use HTML, Css, and javascript for this Clock progress bar. Hope you enjoy our blog so let's start with a basic HTML structure for a Clock progress bar.

HTML code
<div id="clock" class="progress-clock"> <button class="progress-clock__time-date" data-group="d" type="button"> <small data-unit="w">Sunday</small><br> <span data-unit="mo">January</span> <span data-unit="d">1</span> </button>

How to Create Contact Form using HTML and CSS

Code with Random — Fri, 24 Dec 2021 17:49:55 +0000

Today we are going to create a contact form but first, let me introduce what exactly a contact form is.
A contact form is a short web-based form published on a website. Any visitor can fill out the form and submit it to send a message to the site owner.
Publishing a contact form makes it easy for new customers to get in touch.

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>
      <link rel="stylesheet" href="style.css" />

Create Google Clone using html css javascript | Google Clone code

Code with Random — Fri, 24 Dec 2021 07:30:25 +0000

In this blog, we learn that how we create a Google Clone. We use HTML, Css, and javascript for this Google Clone. Hope you enjoy our blog so let's start with a basic HTML structure for a Google Clone.

HTML code

  <ul class="nav nav-pills">  
   <li><a target='_blank' href="https://accounts.google.com/ServiceLogin?hl=en&passive=true&continue=https://www.google.co.uk/%3Fgws_rd%3Dssl" class="colorfix"><button class="btn" role="button">Sign in</button></a></li>  
   <li>  
    <a target='_blank' title="Google apps" class="firstsbuttons" href="#"><img class="quad" src="#" height="22" width="22"></a>  
   </li>  
   <li><a target='_blank' class="firstsbuttons" href="#">Images</a></li>  
   <li><a target='_blank' class="firstsbuttons" href="https://mail.google.com/mail/?tab=wm">Gmail</a></li>  
  </ul>  
  <div class="page">  
   <img class="logo" src="https://www.google.it/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">  
   <br><input id="searchme" class="search" title="Search" type="text"><br>  
   <div class="Bcontainer">  
    <div class="button left">Google Search</div>  
    <div class="button right">I'm Feeling Lucky</div>  
   </div>  
  </div>  
  <footer class="nav nav-tabs">  
   <ul class="bottomone rightone">  
    <li><a target="blank" href="#">Settings</a></li>  
    <li><a target="blank" href="#">Terms</a></li>  
    <li><a target="blank" href="#">Privacy</a></li>  
   </ul>  
   <ul class="leftone bottomone">  
    <li><a target="blank" href="#">About</a></li>  
    <li><a target="blank" href="#">Business</a></li>  
    <li><a target="blank" href="#">Advertising</a></li>  
   </ul>  
  </footer>  
 </body>

There is all HTML code for the Google Clone. Now, you can see output without CSS, then we write css & javascript for Google Clone read more

Reverse countdown javascript | countdown on card using html css javascript

Code with Random — Thu, 23 Dec 2021 14:05:23 +0000

In this blog, we learn that how we create a Reverse countdown. We use HTML, Css, and javascript for this Reverse countdown. Hope you enjoy our blog so let's start with a basic HTML structure for a Reverse countdown.

HTML code

<div class="card"> <div class="number"></div> </div>

There is all HTML code for the Reverse countdown. Now, you can see output without CSS, then we write css & javascript for Reverse countdow read more