Friday, April 30, 2021

How to make full page tab using javascript.

How to make full page tab using javascript.

 



We have make a full page tab using javascript,HTML5 ,CSS3 .lightweight code and easy to learn....




Source code 

-------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
/* Set height of body and the document to 100% */
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial;
}
/* Style tab links */
.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
}
.tablink:hover {
  background-color: #777;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
}
#Home {background-color: red;}
#News {background-color: green;}
#Contact {background-color: blue;}
#About {background-color: orange;}
</style>
</head>
<body>
<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button>
<button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">About</button>
<div id="Home" class="tabcontent">
  <h3>Home</h3>
  <p>Home is where the heart is..</p>
</div>
<div id="News" class="tabcontent">
  <h3>News</h3>
  <p>Some news this fine day!</p> 
</div>
<div id="Contact" class="tabcontent">
  <h3>Contact</h3>
  <p>Get in touch, or swing by for a cup of coffee.</p>
</div>
<div id="About" class="tabcontent">
  <h3>About</h3>
  <p>Who we are and what we do.</p>
</div>
<script>
function openPage(pageName,elmnt,color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(pageName).style.display = "block";
  elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
   
</body>
</html> 


April 30, 2021 No Comment

Thursday, April 29, 2021

How to make to-do App using JAVASCRIPT, HTML5, CSS3.

How to make to-do App using JAVASCRIPT, HTML5, CSS3.

 



How to make to-do App using JAVASCRIPT ,HTML5, CSS3.

we have make a to-do Task app with current Time zone, using javascript. let's create and complete your daily tasks.


Source Code are here ..

CSS CODE

__________________

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif!important;
}
.banner>img {
    width: 100%;
}

p {
    font-size: 18px;
}

.banner01 {
    display: none;
}

.editBox {
    display: none;
}

.bannerContent,
.mainpage {
    padding: 10px;
    margin-bottom: 20px;
}

.logo>img{
width:20%;
padding:10px;
}
nav>ul{
padding:10px!Important;
}
.bannerContent{
padding:90px 0px;
}
.btnCustom {
    background-color: rgb(49 124 247);
    padding: 10px 40px;
    font-size: 30px;
    color: rgb(255 255 255);
    border: none;
    border-radius: 15px;
}
.list01{
display: flex;
    padding: 27px 10px;
    background: rgb(255 255 255);
    border-radius: 11px;
    margin: 21px -1px;
    box-shadow: 0px 0px 28px 14px #8080800f;
    position: relative;
z-index:1;

}
.list01:hover{
background: linear-gradient(135deg, rgb(35 189 184) 0%, rgb(56 121 255) 100%);
color:white;
transform: translateY(-7px);
transition:0.7s;
box-shadow: 0px 12px 48px -2px #3879ff42;
}
input{
padding: 5px;
    box-shadow: 0px 0px 5px 6px #80808017;
    border: none;
    border-radius: 61px
}
.del{
    margin: 0px 56px!important;
    font-size: 28px;
}
.ok{
    margin: -5px 0px;
font-size: 28px!important;
}
.fa-plus{
font-size: 28px!important;
}
.list01>span{
position: absolute;
right: 0px;
}
#date{
font-size: 19px;
    font-weight: 600;
    color: rgb(169 169 169);
}
.empty{
    font-size: 122px;
    text-align: center;
    margin: 0 auto;
    opacity: 0.2;
    position: absolute;
    right: 50px;
    left: 50px;
    top: 229px;
z-index:-1px
}
.trigger{
position: fixed;
    /* margin: 0 auto; */
    width: 100%;
    left: 0;
    bottom: 84px;
}

...................................................................................

INDEX.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>ToDo App</title>
    <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="wow_animate.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
</head>

<body>
   
    <section>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
    <div class="tags">
    <h2><strong>My Task</strong></h2>
<span id="date"></span>
</div>
                    <div class="mainpage">
                        <div class="list">
                            <p class="data"></p>
                        </div>
<div class="empty">
    <i class="fas fa-folder-open"></i>
</div>
                       <div class="trigger text-center">
        <input type="text" id="add" placeholder="Type Your Task...">
                            <a class="btn"><i class="fas fa-plus"></i></a>
   </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="app.js"></script>
   <script src="wow.js"></script>
    <script>
new WOW().init();
    </script>
</body>

</html>

................................................................................

JAVASCRIPT CODE


//ACCESS INPUT FIELD
var add = document.getElementById('add');
//ACCCESS BUTTON FOR ADD VALUES
var btn = document.querySelector('.btn').onclick = function() {
//CREATE BLANK ARREY 
    var arr = [];
//ADD INPUT VALUES IN BLANK ARREY BY PUSH METHOD
    arr.push(add.value);
    //console.log(arr);
    //add.value = "";
//CREATE LOOP FOR ADD DATA IN DATA CLASS IN  DIV
    for (var i in arr) {
//ACCESS DATA CLASS 
        document.querySelector('.data').innerHTML += `
            <div class="list01 wow animate bounceInUp">
<p class="para"><span class="list">${arr[i]}</span></p>
    <span class="del"><i class="far fa-trash-alt"></i></span>
                <span class="btn  ok"><i class="far fa-bookmark"></i></span>
<div>
`;
    }
//CREATE DELETE BUTTON 
    var del = document.getElementsByClassName('del');
//CREATE LOOP FOR DELETE BUTTON
    for (var i = 0; i < del.length; i++) {
//ADD ONCLICK FUNCTION FOR PER DELETE BUTTON
        del[i].addEventListener("click", function() {
//DELETE SPECIFIC BUTTON FOR DELETE TASK 
            this.parentElement.style.display = 'none';
        })
    }
//CREATE EDITER
    var para = document.getElementsByClassName('para');
//ACCCESS  ALL TASK BLOCKS 
    for (var i in para) {
//GIVE ONLCICK EVENT IN PER BLOCK CONTENT
        para[i].addEventListener('click', function() {
//GIVE CONDITION FOR CLICKED OR NOTCLICKED\
//CLICKED TRUE
            if (para[i].clicked = true) {
                this.contentEditable = true;
                this.style.border = "none";
            } else {//CLICKED FALSE
                this.contentEditable = false;
            }
        });
    }
}

//ADD DATE MONTHS AND DAYS
dat = ()=>{
var date = document.getElementById('date');
var d = new Date();
date.innerHTML+=d;
}
dat()

..................................................................................................................

Download Zip format of source code



April 29, 2021 No Comment
Make Your Own Ringtone Web App with full control using Javascript, HTML5 ,Css3.

Make Your Own Ringtone Web App with full control using Javascript, HTML5 ,Css3.


 

Make Your Own Ringtone Web App with full control using Javascript, HTML5 ,Css3.


we have make a ringtone music player using javascript.All controls is in music player like play,pause.

source code are here.

CSS CODE

______________________

*{
  margin:0px;
  padding:0px;
  box-sizeing:border-box;
}  
h3,h4,h5,h6{
padding:10px;
}
body{
font-family: 'Nunito', sans-serif!important;
    background-color: rgb(85 88 229);
    color: rgb(255 255 255);
}
.myNavItem>ul{
padding:10px;
}
nav{
padding:10px;
}
.searchBar{
padding:2rem;
}
input{
    border-radius: 37px!important;
}
header{
     background-image: linear-gradient(to right, rgb(218 34 255 / 20%), rgb(151 51 238 / 45%));
    color: rgb(255 255 255);
    position: sticky;
    top: 0px;
    z-index: 999999999;
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgb(255 255 255 / 49%);

}
nav{
text-align:center;
}
ul{
  list-style:none;

}
ul>li{
display:inline;
margin:10px 20px;
}
ul>li>a{
font-size:18px!important;
color:white;
}
audio{
padding: 15px 14px;
    text-align: center;
    position: relative;
    margin: 0 auto;
   display: none;
   
}
.cntrls>a{
margin: 10px;
    padding: 10px;
    font-size: 23px;
color:black;
cursor:pointer;
}
.main{
margin: 10px 20px;
padding: 10px;
background-color: rgb(92 123 231);
box-shadow: 0px 9px 47px 12px #8080801c;
border-radius: 17px;
}
.blur{
back-filter:blur(20px);
}
.rinImg{
    width: 100%!important;
    border-radius: 100%;
    object-fit: cover;
    height: 191px;
}
.anim{
animation:round 4s infinite;
}
.whatstapp {
    position: fixed;
    width: 6%!important;
    right: 10px;
    bottom: 39px;
}
.logo>img{
width: 132px;
    padding: 10px;
    margin-top: 2px;
}
footer{
border-top: 1px solid rgb(255 255 255 / 49%);
}
@media(max-width:1200px){
ul{
    display: inline-flex;
    width: 100%;
    overflow: scroll!important;
    scroll-behavior: smooth;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overflow: auto;
    scroll-snap-align: start;
    flex-shrink: 1;
    transform-origin: center center;
    scroll-snap-type: x mandatory;
    text-align: center;
}
ul>li{
display: inline;
    border: 1px solid rgb(211 211 211 / 0%);
    padding: 15px;
    margin: 10px 10px;
    box-shadow: 0 1px 3px rgb(36 39 44 / 15%);
    border-radius: 2px;
    line-height: 13px;
    box-shadow: 0px 25px 48px 23px #80808017;
    border-radius: 11px;
background-image: linear-gradient(to right, rgb(106, 17, 203) 0%, rgb(37, 117, 252) 100%);
}
ul>li>a{
line-height: 29px;
color:white;
}
.toneData{
display:flex;
}
.col-md-3{
display:flex;
}
h4{  
  padding: 10px 39px;
    margin: 0 auto;
    margin-left: 69px;
 }
.rinImg{
    width: 20%!important;
    border-radius: 100%;
    object-fit: cover;
    height: 74px;
    position: absolute;
   }
   .main {
    padding:15px;
    width: 100%;
}
   .col-md-6{
   width:50%;
   float:left;
   }
   .cntrls>a {
    padding: 20px;
    font-size: 23px;
    position: relative;
    margin: 0 auto;
    left: 31px;
}
.whatstapp{
position: fixed;
    width: 16%!important;
    right: 10px;
    bottom: 39px;
    }   
}


@keyframes round {
from{
    transform: rotate(0deg);
}
to{
transform: rotate(359deg);
}
}
......................................................................

INDEX.HTML CODE

___________________

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>R-Tune App</title>
     <link rel="icon" href="images/logo.png" type="image/gif" sizes="16x16">
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-2/css/all.min.css" integrity="sha512-61a6zi50gYXGgd/n9+ZT2/RKnXr6lkRoWlS88AjFdoUHaIDnyBAcoE0Vs/QDU3lK3nCcUowNDqmQ8WaV0yT4qw==" crossorigin="anonymous" />
 
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap" rel="stylesheet">

</head>
<body>
    <header>
    <div class="container">
    <div class="row">
    <div class="col-md-6">
    <div class="logo">
    <img src="images/logo.png">
</div>
</div>
  <div class="col-md-6">
    <div class="searchBar">
    <input type="Search" value="" placeholder="Search your movie name for ringtone" id="myInput"  name="" class="form-control">
</div>
</div>
</div>
</div>
</header>
<nav>
    <div class="container">
    <div class="row">
    <div class="col-md-12">
    <div class="myNavItem">
    <ul>
    <li>
    <a href="#album">Ringtones By Albums</a>
</li>   
<li>
   <a href="#movie">Ringtones By Movies</a>
</li>
<li>
   <a href="#theme">Ringtones By Themes</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<section class="movies" id="movie">
    <div class="container">
    <div class="row">
    <div class="col-md-12">
    <h1><strong>Movies Ringtone</strong></h1>
    <h3 class="total01">Total Ringtone: </h3>
</div>
</div>
</div>
</section>
<section class="albums" id="album">
    <div class="container">
    <div class="row">
    <div class="col-md-12">
  <h1><strong>Albums Ringtone</strong></h1>
    <h3 class="total02">Total Ringtone: </h3>
</div>
</div>
</div>
</section>
<section class="music" id="theme">
    <div class="container">
    <div class="row">
    <div class="col-md-12">
     <h1><strong>Themes Ringtone</strong></h1>
    <h3 class="total03">Total Ringtone: </h3>
</div>
</div>
</div>
</section>
<h2 class="default"><strong></strong></h2>
<footer>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="footer_content text-center">
                        <h1><strong>Download The Best Ringtones </strong></h1>
                        <p>Thanx for visit</p>
<span><strong>Made By Avenue Design (Ayushmann)</strong></span>
                    </div>
                </div>
            </div>
        </div>
    </footer>
<a href="whatsapp://send?text=download your favorite😍😍😍 ringtone❤️❤️ with Tone♪.  https://ansh709.github.io/PlayQuizApp/" data-action="share/whatsapp/share"><img src="images/whatsapp.png" class="whatstapp" id="wht"></a>

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


...................................................................................


JAVASCRIPT CODE

____________________________________

//START R-TONE APP
alert("Refrash the page after 15 min")
//CREATE OBJECT MOVIES
var ringtonsData =[{
   rName :"Kabir Singh Theme",
   rImg:"images/kabirsingh01.jpg",
   rAudio:"tones/kabir01.mp3",
   id01:"kabir01",
   id02:"movieimg01",
   evt:"playMusic(event,'kabir01','movieimg01')"
},{
   rName :"Kabir Singh flute",
   rImg:"images/kabir_flute.jpg",
   rAudio:"tones/kabir_singh_flute.mp3",
    id01:"kabir02",
    id02:"movieimg02",
    evt:"playMusic(event,'kabir02','movieimg02')"
},{
   rName :"Tujhe kitna Chahne",
   rImg:"images/tujheKitna.jpg",
   rAudio:"tones/tujhe_kitna_chahne.mp3",
   id01:"kabir03",
   id02:"movieimg03",
   evt:"playMusic(event,'kabir03','movieimg03')"
},{
   rName :"Tera Ban Jaunga",
   rImg:"images/terabanjaunga.jpg",
   rAudio:"tones/tera_ban_jauga.mp3",
    id01:"kabir04",
id02:"movieimg04",
   evt:"playMusic(event,'kabir04','movieimg04')"
},{
   rName :"Kaise Hua",
   rImg:"images/kaisehua.jpg",
   rAudio:"tones/kaise_hua_ringtone.mp3",
    id01:"kabir05",
   id02:"movieimg05",
   evt:"playMusic(event,'kabir05','movieimg05')"
},{
   rName :"Tere Bin Ab Na..",
   rImg:"images/terebinabna.jpg",
   rAudio:"tones/terebin.mp3",
    id01:"kabir06",
id02:"movieimg06",
   evt:"playMusic(event,'kabir06','movieimg06')"
},{
   rName :"Kaise Hua",
   rImg:"images/Kaisehua.jpg",
   rAudio:"tones/kaise_hua_ringtone.mp3",
    id01:"kabir07",
id02:"movieimg07",
   evt:"playMusic(event,'kabir07','movieimg07')"
},]



//CREATE OBJECT ALBUM 
var ringtonsAlbum =[{
   rName :"Vaaste (male)",
   rImg:"images/vaaste.png",
   rAudio:"tones/vaaste_love_song.mp3",
   id01:"album01",
   id02:'albumimg01',
   evt:"playMusic(event,'album01','albumimg01')"
},{
   rName :"Romantic Ringtone",
   rImg:"images/romantic.jpg",
   rAudio:"tones/romantic__ringtone.mp3",
    id01:"album02",
id02:'albumimg02',
   evt:"playMusic(event,'album02','albumimg02')"
},{
   rName :"Pal Pal Dil K Pass",
   rImg:"images/palpal.jpg",
   rAudio:"tones/pal_pal_dil_k_pass.mp3",
    id01:"album03",
id02:'albumimg03',
   evt:"playMusic(event,'album03','albumimg03')"
},{
   rName :"Meri Aashiqui",
   rImg:"images/meri_ashiqui.jpg",
   rAudio:"tones/meri_aashiqui.mp3",
    id01:"album04",
id02:'albumimg04',
   evt:"playMusic(event,'album04','albumimg04')"
},{
   rName :"Taaron ke Shehar",
   rImg:"images/tarokashahar.jpg",
   rAudio:"tones/taaron_ke_shehar.mp3",
    id01:"album05",
id02:'albumimg05',
   evt:"playMusic(event,'album05','albumimg05')"
},{
   rName :"Lut Gaye",
   rImg:"images/lut_gaye.jpg",
   rAudio:"tones/lut_gaye.mp3",
    id01:"album06",
id02:'albumimg06',
   evt:"playMusic(event,'album06','albumimg06')"
},]


//CREATE OBJECT THEMES  
var ringtonstheme =[{
   rName :"Music Box Tone",
   rImg:"images/music_box.jpg",
   rAudio:"tones/music_box_tone.mp3",
   id01:"theme01",
   id02:'themeimg01',
   evt:"playMusic(event,'theme01','themeimg01')",
},{
   rName :"Soft Theme",
   rImg:"images/music_theme.jpg",
   rAudio:"tones/theme.mp3",
    id01:"theme02",
id02:'themeimg02',
   evt:"playMusic(event,'theme02','themeimg02')"
},{
   rName :"wkuk theme",
   rImg:"images/crop.jpg",
   rAudio:"tones/wkuk_theme_song.mp3",
    id01:"theme03",
id02:'themeimg03',
   evt:"playMusic(event,'theme03','themeimg03')"
},{
   rName :"Super Mario Theme",
   rImg:"images/super_mario_theme.jpg",
   rAudio:"tones/super_mario_theme.mp3",
    id01:"theme04",
id02:'themeimg04',
   evt:"playMusic(event,'theme04','themeimg04')"
},{
   rName :"Theme F Flm Ordinary",
   rImg:"images/romantic-theme-fz11.jpg",
   rAudio:"tones/theme_f_flm_ordinary.mp3",
    id01:"theme05",
id02:'themeimg05',
   evt:"playMusic(event,'theme05','themeimg05')"
},{
   rName :"Run Theme",
   rImg:"images/run.jpg",
   rAudio:"tones/run_theme.mp3",
    id01:"theme06",
id02:'themeimg06',
   evt:"playMusic(event,'theme06','themeimg06')"
},]












//SHOWING ITEMS LENGTH 
document.querySelector('.total01').innerHTML+=`
   ${ringtonsData.length}
`;
document.querySelector('.total02').innerHTML+=`
   ${ringtonsAlbum.length}
`;
document.querySelector('.total03').innerHTML+=`
   ${ringtonsAlbum.length}
`;

//INTRIGATION WITH JASON OBJECTS ADD VALUE 

//ADD VALUE IN MOVIES SECTION
for(var i in ringtonsData){
document.querySelector('.movies>.container>.row').innerHTML+=`
        
    <div class="col-md-3">
    <div class="main">
      <div class="toneData text-center">
   <img src="${ringtonsData[i].rImg}" class="rinImg" id="${ringtonsData[i].id02}">   
<h4>${ringtonsData[i].rName}</h4>
</div>
<div class="data">
    <audio src="${ringtonsData[i].rAudio}" class="audio" id="${ringtonsData[i].id01}" controls></audio>
</div> 
<div class="cntrls text-center">
<a class="pause" onclick="pauseSong()"><i class="fas fa-pause"></i></a>
<a class="play" onclick="${ringtonsData[i].evt}"><i class="fas fa-play"></i></a>
<a href="${ringtonsData[i].rAudio}" class="download" download><i class="far fa-arrow-alt-circle-down"></i></a>
</div>
</div>
</div>
`;
}


//ADD VALUE IN ALBUMS SECTION
for(var i in ringtonsAlbum){
document.querySelector('.albums>.container>.row').innerHTML+=`
        
    <div class="col-md-3">
    <div class="main">
      <div class="toneData text-center">
   <img src="${ringtonsAlbum[i].rImg}" class="rinImg"  id="${ringtonsAlbum[i].id02}">   
<h4>${ringtonsAlbum[i].rName}</h4>
</div>
<div class="data">
    <audio src="${ringtonsAlbum[i].rAudio}" class="audio" id="${ringtonsAlbum[i].id01}" controls></audio>
</div> 
<div class="cntrls text-center">
<a class="pause" onclick="pauseSong()"><i class="fas fa-pause"></i></a>
<a class="play" onclick="${ringtonsAlbum[i].evt}"><i class="fas fa-play"></i></a>
<a href="${ringtonsAlbum[i].rAudio}" class="download" download><i class="far fa-arrow-alt-circle-down"></i></a>
</div>
</div>
</div>
`;
}

//ADD VALUE IN THEMES SECTION
for(var i in ringtonstheme){
document.querySelector('.music>.container>.row').innerHTML+=`
        
<div class="col-md-3">
<div class="main">
  <div class="toneData text-center">
   <img src="${ringtonstheme[i].rImg}" class="rinImg"  id="${ringtonstheme[i].id02}">   
<h4>${ringtonstheme[i].rName}</h4>
</div>
<div class="data">
<audio src="${ringtonstheme[i].rAudio}" class="audio" id="${ringtonstheme[i].id01}" controls></audio>
</div> 
<div class="cntrls text-center">
<a class="pause" onclick="pauseSong()"><i class="fas fa-pause"></i></a>
<a class="play" onclick="${ringtonstheme[i].evt}"><i class="fas fa-play"></i></a>
<a href="${ringtonstheme[i].rAudio}" class="download" download><i class="far fa-arrow-alt-circle-down"></i></a>
</div>
</div>
</div>
`;
}

//CODE FOR PLAY SONG
playMusic=(evt,playrRigtone,circle)=>{
var audio  = document.querySelector('audio');
    var play = document.querySelector('.play');
for(var i in play){
}
document.getElementById(playrRigtone).play();
document.getElementById(circle).classList.add('anim');
//CODE FOR PAUSE SONG
pauseSong = () => {
    var audio = document.getElementsByClassName('audio');
    for (var i in audio) {
        audio[i].pause();
  document.getElementById(circle).classList.remove('anim');
      }
   }
}


//SEARCH FILTER WITH FULL SECTION
var input = document.getElementById('myInput').onkeyup = function(){
var i,input,filter,section,txtValue;
input =  document.getElementById('myInput');
     filter = input.value.toUpperCase();
section = document.querySelectorAll('section');
for(var i in section){
if(section[i]){
txtValue =  section[i].textContent;
             if(txtValue.toUpperCase().indexOf(filter) > -1){
section[i].style.display = ""; 
document.querySelector('.default').innerHTML=`Nothing Items founds`;
}
else{
section[i].style.display = "none";
document.querySelector('.default').innerHTML=`Nothing Items founds`;
}  
}
}
}

__________________________________________________

DOWNLOAD ZIP FORMAT OF SOURCE CODE






April 29, 2021 No Comment
How to make sign Up form using javascript with password validation.

How to make sign Up form using javascript with password validation.

 


How to make sign Up form using javascript with password validation.


I have made a signup form using JAVASCRIPT, HTML5 and CSS3. 

with password validation..

source code here ..


Css...

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

body {
    padding: 40px;
    line-height: 30px;
}

input {
    margin: 20px 0px;
}

form {
    width: 30%;
    margin: 0 auto;
    padding: 10px;
    background: rgb(255 255 255);
    border-radius: 10px;
    box-shadow: 0px 8px 63px 32px #a9a9a917;
}
.loginform{
display:none;
}
.correct {
    color: green;
}

.incorrect {
    color: red;
}

..................................................................................

INDEX.HTML

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <form action="" class="sginupform">
        <h1>Sgin Up</h1>
        <div class="form-group">
            <input type="text" placeholder="Type Your Name" id="name" class="form-control">
            <input type="text" placeholder="Type Your Email" id="email" class="form-control">
            <input type="password" placeholder="Type Your password" id="pass" class="form-control">
            <a class="btn btn-success">SginUp</a>
        </div>
    </form>

    <form action="" class="loginform">
        <h1>Log In </h1>
        <p class="info"></p>
        <input type="text" placeholder="Type Your Email" id="logemail" class="form-control">
        <input type="password" name="" id="logpass" class="form-control" required="required" placeholder="Type Your Pass.." title="">
        <a class="btn btn-success login">LogIn</a>
    </form>

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

</html>

....................................................................................

javaScript..


//FORM EMAIL PASSWORD SUBMITAION 
var btn = document.querySelector('.btn').addEventListener('click', function() {
    //CREATE BLANK ARREY
    var data = [];

    //ACCESS NAME VALUE
    var name = document.getElementById('name').value;
    //ACCESS EMAIL VALUE
    var email = document.getElementById('email').value;
    //ACCESS PASS VALUE
    var pass = document.getElementById('pass').value;
    //console.log(name);

    //ADD VALUES IN ARREY OBJECTS
    data.push({ name: name, email: email, pass: pass });

    document.querySelector('.sginupform').style.display = "none";
    document.querySelector('.loginform').style.display = "block";

    //CREATE LOOP FOR ACCESS ALL PROPERTIES OF ARREY OBJECTS
    for (var i in data) {
        //ACCESS LOGIN BUTTON AND ADD ONCLICK EVENT
        var login = document.querySelector('.login').addEventListener("click", () => {
            //ACCESS LOGIN PASS VALUE
            var logpass = document.getElementById('logpass').value;
            //ACCESS LOGIN EMAIL VALUE
            var logemail = document.getElementById('logemail').value;
            //GIVE CONDITIONS FOR MATCH IPUT LOGIN INPUT VALUES TO ARREY VALUE
            if (logemail == data[i].email && logpass == data[i].pass) {
                document.querySelector('.info').innerHTML = "<p class='correct'>Your Are LogIn Successfully</p>";
            } else {
                document.querySelector('.info').innerHTML = "<p class='incorrect'>Your Email or Password is inccorect</p>";
            }
        });
    }
});
...................................


April 29, 2021 No Comment