How to make fully responsive todo list using jQuery ?

Hello amazing people! Today I’m gonna share my todo list code here. Well this todo list is so basic there is no database connectivity its only the design but yeah you can add the items by clicking on the add button, edit them by clicking on the particular title and delete them by clicking on the trash icon which is in the right of all the titles.

Follow the link to see the output http://codepen.io/mukul6996/full/LNKoqx

Copy and paste the following code in one page and save it with the html extension.
And your output will look like this:-

mytodo

 

 

Click here to get Code

 

 

Instructions to use

To add items:- Click on the add button “+” on the top-right corner.

To edit items:- Click on the label/title and then start typing. Click any where on the screen to save the item you typed.

To delete  items:- Click on the delete button (looks like a trash icon) on the right corner of your particular item.

Share it if this is helpful ūüôā

On the web:- http://codepen.io/mukul6996/full/LNKoqx

How to change the background, text or a div color on real time with php, mysql, ajax and jQuery ?

Description:- Hello! In this lesson I’ll show you guys the logic with little example to how to change the background, text or a div color on real time with php, mysql, ajax and jQuery.
Maybe you guys have better logics to shorten my code. If you have then please comment below.

So for this lesson make the following files step by step:-
1. create database and name it “color”
2. create row in database(color) and name it colorname
3. Create 2 columns 
    (i) id
    (ii) colorcode
4. Download jQuery file
5. Create changebg.php
6. Create config.php
7. Create insertcolor.php

1. config.php

pdf of config file

2. changebg.php

pdf of changebg file

3. insertcolor.php

pdf of insertcolor file

*NOTE :- I’m providing you pdf files as my wordpress text editor is not working well copy and paste code and make the php files with the same name of files and then goto your browser after making database and then run the changebg.php file.
Live demo is available here

How to change the background color automatically with CSS3 animation ?

Description:- In this example I’m gonna show you guys how you can easily animate your background and texts without using WOW.js but using CSS3 animation properties.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>animation</title>
<style>
*{padding:0px; margin:0px;}
body{
 width:100%;
 background:rgba(51,51,51,1);
 position:relative;
 animation-name:demo;
 animation-direction:alternate reverse;
 animation-duration:10s;
 animation-iteration-count:infinite;
 animation-timing-function:linear;
}
@keyframes demo
{
    0%{background:rgba(51,51,51,1); height:1000px; left:0px; top:0px;}
    25%{background:rgba(0,102,153,1);left:0px;  top:0px;}
    50%{background:rgba(0,204,204,1); left:0px;top:0px;}
    75%{background:rgba(153,204,0,1); left:0px;  top:0px;}
    100%{background:rgba(51,51,51,1); left:0px; top:0px;}
    
}

.box > h1{font-family:Roboto; font-weight:300; font-size:36px; color:rgba(255,255,255,1);margin-left:500px;
margin-top:250px; animation:text .9s 1 ease alternate; position:relative; float:left; } 

@keyframes text
{
    0%{margin-left:0px;}
    25%{margin-left:500px; transform:rotate(0deg);}
    50%{margin-left:500px; transform:rotate(10deg);}
    75%{margin-left:500px; transform:rotate(-10deg);}
    100%{margin-left:500px; transform:rotate(0deg);}
}

.box2 > h1{font-family:Roboto; font-weight:300; font-size:26px; color:rgba(255,255,255,1);
 animation:sectext 3s 1 ease-in alternate; position:fixed; top:320px; margin-left:620px; opacity:1;} 

@keyframes sectext
{
    0%{opacity:0;}
    100%{opacity:1;}
}


</style>
</head>

<body>

<div class="box">
<h1>Keyframe Animation</h1>
</div>

<div class="box2">
<h1>By CSS3</h1>
</div>
</body>
</html>

 

How to make Vertical Drop-Down Navigation using HTML, CSS3 and jQuery ?

Description:- In today’s example I’m gonna show you how to make vertical drop-down navigation menu. You can use it in your site or in your admin dashboard like I did. So for this we need to download jquery file so go to http://code.jquery.com/jquery-1.11.3.min.js and download it and save it in your folder.

So, here is the finish product’s images in first image you can see only 5 menus with down arrow but after click on courses link it expands and the sub menus of courses will appear with the arrow facing to the upper direction.

pic1

pic2

Code is below just change the names of list items and use it or play with the colors or do whatever you want to do peeps.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Menu</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(e) {
$(".course-sub").click(function(e){
$(this).toggleClass("roll");
});
});

</script>
<style>
*{padding:0px; margin:0px;}
.nav{width:250px; background:rgba(51,51,51,1);}
.nav a{display:block;padding:10px 0px 10px 20px; text-decoration:none; border-bottom:1px dotted gray;color:#fff; letter-spacing:.2em; text-transform:uppercase; transition:all 0.3s linear;}
.nav a:hover{background:#dd0909;}
.nav li{list-style:none;}
.nav-ul ul{display:none;}
.nav-ul li.roll ul{display:block;}
.arrow:after{content:'\203A'; float:right; margin-right:20px; transform:rotate(90deg); font-size:20px;}
.nav li.tap .arrow:after{content:'\2039';}
.nav-ul ul a:before{content:'\203A'; margin-right:20px;}

</style>
</head>
<body>
<nav class="nav">
<ul class="nav-ul">
<li><a href="#">Home</a></li>
<li class="course-sub"><a href="#">Courses<span class="arrow"></span></a>
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>

</ul>


</nav>

</body>
</html>

*Note:- Don’t forget to include jQuery file.