Time Scheduler App

-
I'm sharing the codes of Time Scheduler App , which are purely written in JS , some new functionality can be add by converting the codes in Object Oriented Paradigm and adding some Server side functionality with PHP.

Codes of Time Scheduler App-

 
<html>
<head>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<link href="css/bootstrap.min.css"rel="stylesheet">
<style type="text/css">
span#time{text-align:center;}
h1 { color:#a94442;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}
p#list{border-bottom-color:gray;}
</style>
</head>
<body id='body'>
<div class="col-md-4"></div>
<div class="col-md-4">
 <div id="todopan">
<center>
<h1>Time Scheduler</h1>
<span id='time'></span></center>
<input type="text" id="textin" class="form-control" placeholder="Your todo work.."/>
<input type="hidden" id="nooftask"/>
</div>
<div class="row">
        <div class="col-lg-12">
            <ul class="nav nav-pills nav-justified">
                <li><a href="ts.html">About TS</a></li> 
                <li><a href="http://realphpapplication.blogspot.com">&copy; Hitesh Saini</a></li>
            </ul>
        </div>
    </div>
</div>
 
</body>
<script>
var input= document.getElementById("textin");
    input.addEventListener("keypress",action);
setInterval(function(){document.getElementById("time").innerHTML=new Date();},1000);
 
function action(evt)
          {
            var p,val,tt; 
            if(evt.keyCode==13)
               {
                 if(input.value!='')
                     {
                       var val = prompt("Enter the minutes");
                           if(/[0-9]+/.exec(val))
                              {
                               p = document.createElement("p");
                 p.id="list";
                 //p.style="border:1px solid green";
                 document.getElementById("nooftask").value++;
                 p.innerHTML = "<h3><span class=\"badge\">#" +document.getElementById("nooftask").value + ".</span>   " +document.getElementById("textin").value+"</h3></li><p id='actionsicon'> is it complete ? <input type='checkbox' onclick='deleteit(this)'/> </p>";
                 document.getElementById("todopan").appendChild(p);
                             tt=  document.createElement("span");
                             tt.id=val;
                             
                             p.appendChild(tt);
                             remtime(tt);
                            
                              }else
                               alert("fill the hour input first!!"); 
                     }
                  else
                     alert("fill the note box first!!");
  
               }
          }
function deleteit(txt)
         {
              var audio = new Audio("hyfr.mp3");
                  audio.play(); 
                  var sure= confirm("have you really completed the task??");
                  if(sure) 
                  document.getElementById("todopan").removeChild(txt.parentElement.parentElement) ;     
                  document.getElementById("nooftask").value--;
                  //audio.stop(); 
          }
function deleteitbyforce(txt){
                  document.getElementById("todopan").removeChild(txt.parentElement) ;     
                  document.getElementById("nooftask").value--;      
        }
function rgba()
     {
      var r = parseInt(Math.random()*200);
      var g = parseInt(Math.random()*200);
      var b = parseInt(Math.random()*200);
      var a = Math.random()*10; 
      return ("rgba("+r+","+g+","+b+","+a+")");     
     }
function remtime(tm){
      var t=parseInt(tm.id);
      var time;
      var mins,hour,se,audio; 
      var sec =parseInt(t)*60;
      setInterval(function(){

                              hour= parseInt(sec/(60*60));
                              mins= parseInt((sec-hour*60*60)/60);
                              se = sec%60;
                              sec--; 
                              var remaining=  parseInt((sec/(t*60))*100); 
                              time = "Remaining Time: "+hour+":"+mins+":"+se; 
                               if(hour==0&&mins<5){
                                   
                                 if(sec==0)
                                 {
                                   //navigator.notification.vibrate( 5000 );   
                                  alert("you are gonna be looser");
                                  deleteitbyforce(tm);  
                                  
                                  }
                                 setInterval(function(){tm.style.color=rgba();tm.style.backgroundColor="white";},400);
                                 
                                 
                               tm.innerHTML=time+ "<div   class=\"progress\"><div id='prog' class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"2\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"min-width:2em;width:"+remaining+"%; color:black;\">"+remaining+"%</div></div>";
                                          
                                   }
                               else{
                               tm.innerHTML=time+ "<div   class=\"progress\"><div id='prog' class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"2\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"min-width:2em;width:"+remaining +"%; color:black;\">"+remaining+"%</div></div>";
                                    
                                    }
                            },1000);
                            }
</script>

</html>

I hope if you like my work do work on the codes and share the app. See App here

Comments

Post a Comment

Popular posts from this blog

ciphers continued--Vegerne Cipher and its application in php

-
Image
> 2.Vegerne Cipher- The Vigenère cipher is a method of encrypting alphabetic text by using a series of different Caesar ciphers based on the letters of a keyword. It is a simple form of polyalphabetic substitution. The Vigenère cipher has been reinvented many times. lets look at the image for vegerne ciphers  logic now i will make a function for encription by logic of vegerne cipher function vegerne_cipher($str,$str_passwd) { if(preg_match("/[^a-zA-Z]/", $str_passwd)) { return null; } else { $str_password=strtolower($str_passwd); $pass_arr=array(); $pass_arr_num=array(); $alpha=array('a'=>'1','b'=>'2','c'=>'3','d'=>'4','e'=>'5','f'=>'6','g'=>'7','h'=>'8','i'=>'9','j'=>'10','k'=>'11','l'=>'12','m'=...
Read more

Message Sending API (Unofficial) for Way2SMS [ PHP ]

-
Recently I looked through the website http://site24.way2sms.com/content/index.html  and mapped the parameter which were used used in get and post forms. By using the Curl library i was able to send messages through Command Line  for free . For mapping the get and post parameters , I used Developer Tools in Chrome . Below i'm sharing the snippets of my php library for way2sms  so that anyone could be able to send messages on mobile by using this easy to use API. Dependency : Account on Way2SMS Website <?php /** * Created by H$[Hitesh Saini] */ class Way2Sms { //user name of Way2Sms service public static $username ; // password of Way2Sms service public static $password ; //token public static $token; function __construct ($user , $pass) { Way2Sms :: $username = $user; Way2Sms :: $password = $pass; } function init () { $postData = '' ; $url = "http://site24.way2sms.com/Login1.action...
Read more

Working with Frameworks of PHP- The MVC structure

-
Image
To work with frameworks of PHP first we have to learn what exactly is the MVC structure and how it works.. MVC is the acronym of Model View Controller.its means it has three main parts .. 1.Model             2.View              3.Controller       Lets see working flowchart of  MVC Structure . MODEL : Models are the place where main logic and codes for manipulating the database are kept ... thus its the main part of any MVC application VIEW : view is place or directory where codes or templates to interact with users are put..     CONTROLLER : controllers are the place or directory where codes to control over data given by user, are put.. Many frameworks of php are available in the market in paid or free of cost.. But now I am starting with CodeIgniter  because it is easy for beginners and you will laern it with no efforts just in first attempt.. First you need to download ...
Read more