I want to create countdown timer with user inputs in JavaScript(not jQuery or other techs).
HTML: https://codepen.io/anon/pen/LewOLe
<div class='countdown'>
<div class='times'><span class='inputData'>Hours: </span>
<input class='hours' type="number" min='0'/>
</div>
<div class='times'> <span class='inputData'>Minutes: </span>
<input class='mins' type="number" min='0' max='59' />
</div>
<div class='times'><span class='inputData'>Seconds: </span>
<input class='secs' type="number" min='0' max='59' />
</div>
<button class='countBtn'>START</button>
<div class='count'>
<span>00</span>
<span>00</span>
<span>00</span>
</div>
</div>
By using JS I want to take datas from inputs, click start and start counting in div class 'count'.
HELP :)
HTML
<div class='countdown'>
<div class='times'><span class='inputData'>Hours: </span>
<input id="inputHour" class='hours' type="number" min='0'/>
</div>
<div class='times'> <span class='inputData'>Minutes: </span>
<input id="inputMinutes" class='mins' type="number" min='0' max='59' />
</div>
<div class='times'><span class='inputData'>Seconds: </span>
<input id="inputSeconds" class='secs' type="number" min='0' max='59' />
</div>
<button class='countBtn' onclick="setTime();">START</button>
<div id="timer" class='count'>
<span id="hourCount"></span><span>:</span> <span id="minuteCount"></span><span>:</span> <span id="secondCount"></span>
</div>
</div>
Plain simple javascript
function setTime(){
var hour = document.getElementById("inputHour").value;
var minutes = document.getElementById("inputMinutes").value;
var seconds = document.getElementById("inputSeconds").value;
initiateTimer(hour, minutes, seconds);
}
function initiateTimer(hour,minutes,seconds){
document.getElementById('hourCount').innerHTML =hour;
document.getElementById('minuteCount').innerHTML =minutes;
document.getElementById('secondCount').innerHTML =seconds;
startTimer();
}
function startTimer() {
var h = parseInt(document.getElementById("hourCount").innerHTML);
var m = checkMinute(parseInt(document.getElementById("minuteCount").innerHTML));
var s = checkSecond((parseInt(document.getElementById("secondCount").innerHTML)) - 1);
if(s==59){m=m-1};
if(m==59&&s==58){h=h-1};
if(h<0){return 0;}
document.getElementById("hourCount").innerHTML = "";
document.getElementById("hourCount").innerHTML = h; document.getElementById("minuteCount").innerHTML = "";
document.getElementById("minuteCount").innerHTML = m;
document.getElementById("secondCount").innerHTML = "";
document.getElementById("secondCount").innerHTML = s;
setTimeout(startTimer, 1000);
}
function checkSecond(sec) {
if (sec < 10 && sec >= 0) {sec = "0" + sec};
if (sec < 0) {sec = "59"};
return sec;
}
function checkMinute(minute) {
if (minute < 0) {minute = "59"};
return minute;
}
This code might have some issues but it works greatly on your question requirements. :-)
Hope i helped. I am also new to javascript.
Yes i know that minute goes to -1 for a single second, any edit correcting it would be gladly accepted :-)
Codepen : https://codepen.io/anon/pen/GyVyeq
Related
I am new to AngularJS and trying to implement multi date time picker functionlity with one check box .
I am using multiple-date-picker
multiple-date-picker
and here I am trying to change the time of the date I have picked and want the two values(date with changes time and the check box value) in one new array
right now when I am trying to iterate the array I am getting and pushing the array value to the new array but nothing is working
below is the code
<div class="col-sm-9">
<div class="input-group">
<multiple-date-picker ng-model="myArrayOfDates"></multiple-date-picker>
</div>
</div>
<div class="form-group booking-groups" ng-repeat="m in myArrayOfDates">
<div class="col-sm-3 text-right">
<label>{{m| cmdate:'EEEE, d MMM yy' }} Time</label>
</div>
<div class="col-sm-5">
<div class="input-time" width="50%">
<div uib-timepicker ng-model="myArrayofTimes" ng-init="LoadTimes(m)" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian" required></div>
</div>
</div>
<div class="col-sm-4">
<div >
<div class="input-time" width="50%">
<label>Allow Multiround Booking</label>
<div><input type="checkbox" ng-model="checkboxModel"></div>
</div>
</div>
</div>
JavaScript:
$scope.myArrayOfDates = [];
$scope.myArrayofTimes = [];
$scope.checkboxModel = [{}];
$scope.myFinalArray=[];
$scope.LoadTimes = function (datentime) {
alert(datentime);
for (var i = 0; i < $scope.myArrayOfDates.length; i++) {
alert($scope.myArrayOfDates.length);
alert($scope.myArrayofTimes.length);
$scope.myArrayofTimes[i] = $scope.myArrayofDates[i];
$scope.myArrayofTimes[i] = datentime;
}
}
Please advice.
I'm not exactly sure what you want, but please see below findings.
Just check this for loop.
for (var i = 0; i < $scope.myArrayOfDates.length; i++) {
alert($scope.myArrayOfDates.length);
alert($scope.myArrayofTimes.length);
$scope.myArrayofTimes[i] = $scope.myArrayofDates[i];
$scope.myArrayofTimes[i] = datentime; //Something is wrong with this
}
You are first assigning value to $scope.myArrayofTimes[i]. And on the next step again overriding this value with datentime.
JS :
var populateRecord = function(data) {
var chunk = 40;
$scope.users = [];
console.log(data.length + "hi");
for (var i = 0; i < data.length; i += chunk) {
console.log("inside for");
// userCount++;
$scope.users.push(data.slice(i, i + chunk));
// console.log(temp);
}
console.log($scope.users)
};
HTML :
<div ng-repeat="record in users track by $index">
<div class="col-md-2 col-sm-2 col-xs-2">
<label>
<input type="checkbox" ng-model="isAllSelected" ng-change="userSelectedToggle()" ng-checked="isAllRecordSelected(record)">
</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="text-overflow">
<span ng-model="record.dispalyName">{{record.displayName}}</span>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<span ng-model="record.mobile"> {{record.mobile}}</span>
</div>
</div>
Output on console after 'populateRecord '
2 inside for
2[array(40) ,array(7)]
Now first I want to show 40 elements and after clicking on button ONLY second array should display on screen. Any solution ?
You just have to keep a counter and increment the index of users array by one on click of the button publish and store it in a new array which will be used for rendering the UI.
JS:
var counter=0;
$scope.sendBulkMessages=function(){
counter=counter +1;
//do your calculations with $scope.parent before assigning it to next 40 elements
$scope.parent=$scope.users[counter];
console.log($scope.parent);
}
Fiddle: http://jsfiddle.net/brtmzqLk/3/
I have a text box that show when I click on checkbox and I need to make an event on it that can make me bind it to object from DB
HTML:
<div ng-repeat="feture in featureEnumArray">
<input id="txtchkFet" type="checkbox" ng-model="feture.IsChecked" />
{{feture.DisplayText}}
<div ng-show="feture.IsChecked" >
<input class="form-control" type="text" ng-model="feture.Value" ng-change="getFeatureID(feture)" id="txtValue" placeholder="Type Feature Value" />
</div>
<div class="label label-danger" ng-show="feture.IsChecked && !feture.Value">
Type Value
</div>
</div>
And in Angular controller I did Like this :
$scope.getFeatureID = function (feture) {
if (feture.IsChecked) {
$scope.Planfeature = angular.copy(feture);
$scope.PlanFeatureTemp.FeatureID = $scope.Planfeature.ID;
$scope.PlanFeatureTemp.Value = $scope.Planfeature.Value;
$scope.Planfeature = [];
}
else {
var index = $scope.JAdminPlan.PlanFeatureValues.indexOf(feture);
$scope.JAdminPlan.PlanFeatureValues.splice(index, 1);
}
if (!$scope.$$phase) $scope.$apply();
};
I been wondering if someone fixed my issue. my code looks like this.
var app = angular.module('myApp', []);
app.controller('myCtrl',function($scope){
//Adding New Check# and Check amount Text Boxes
$scope.checks = [{checkNum1: '',checkAmt1:''}];
$scope.add = function() {
var newCheckNo = $scope.checks.length+1;
$scope.checks.push({['checkAmt'+newCheckNo]:''});
};
$scope.tot = function() {
return $scope.checks;
};
$scope.total = function() {
var value = "";
for(var i =0 ; i<=$scope.checks.length;i++ ){
value += $scope.checks.get('checkAmt1');
}
return value;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="col-md-12">
<div class="col-md-6">
<div ng-repeat="check in checks">
<div class="form-group">
<label>check Amount:</label>
<div class="col-md-5">
<input type="text" class="form-control" id="{{'id'+($index+1)}}" ng-model="check['checkAmt'+($index+1)]" maxlength="6" />
</div>
</div>
</div>
<button type="button"
ng-click="add()">Add More</button>
</div>
</div>
<div class="col-md-6">
<!--<p ng-repeat="check in checks">{{check['checkAmt'+($index+1)]}}</p>-->
</div>
<label>{{tot()}}</label>
<label>{{total()}}</label>
</div>
I am initializing $scope.checks = [{checkAmt1:''}];
and pushing the additional values on clicking Add Button (checkAmt2,checkAmt3,...so on). i want to add those values(checkAmt1+checkAmt2+...so on) dynamically by using {{total()}}. total() function is calling, i know logic inside the for loop is wrong. Please help me to fix the logic (or) Suggest me if any other way to add those values.
Thanks in advance.
Note: please refer the result in full page view.
first of all, it is not a proper way of using an array.
You can sum up column with same name and not dynamic name.
I think to make the entries distinct you have used in such manner. But it is not the good way and will make your operation on array complicated.
You can try to construct array in following way,
$scope.checks = [{id:'',checkNum: '',checkAmt:''}];
The complete changed code will look like
var app = angular.module('myApp', []);
app.controller('myCtrl',function($scope){
//Adding New Check# and Check amount Text Boxes
$scope.checks = [{id:'', checkAmt:''}];
$scope.add = function() {
var newCheckNo = $scope.checks.length+1;
$scope.checks.push({'id':newCheckNo ,'checkAmt':''});
};
$scope.tot = function() {
return $scope.checks;
};
$scope.total = function() {
var value = 0;
for(var i =0 ; i<$scope.checks.length;i++ ){
value += parseInt( $scope.checks[i].checkAmt);
}
return value;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="col-md-12">
<div class="col-md-6">
<div ng-repeat="check in checks">
<div class="form-group">
<label>check Amount:</label>
<div class="col-md-5">
<input type="text" class="form-control" id="{{'id'+($index+1)}}" ng-model="check['checkAmt']" maxlength="6" />
</div>
</div>
</div>
<button type="button"
ng-click="add()">Add More</button>
</div>
</div>
<div class="col-md-6">
<!--<p ng-repeat="check in checks">{{check['checkAmt']}}</p>-->
</div>
<label>{{tot()}}</label>
<label>{{total()}}</label>
</div>
I'm not sure why indeed you push into the array such objects, and not just numbers, but as you iterate over it - you can just access each value by index, then take the correct object's value:
for(var i =0 ; i<=$scope.checks.length;i++ ){
value += $scope.checks[i]['checkAmt' + i];
}
i got one sample app from net, which i tried to implement, but it doesn't seem to work, below is the code of app, please help me by fixing it and suggest me how can i make it more better. i am a newbie to Angular.
Jsfiddle : http://jsfiddle.net/eGzZg/
<div id="main" ng-controller="contactDetails">
<label>Name</label>
<input type="text" name="name" ng-model="newcontact.name"/>
<label>Email</label>
<input type="text" name="email" ng-model="newcontact.email"/>
<label>Phone No</label>
<input type="text" name="phno" ng-model="newcontact.phno"/>
<input type="hidden" ng-model="newcontact.id" />
<input type="button" value="Save" ng-click="saveContact()" />
<div id="table">
<div id="thead">
<span>Name</span>
<span>Email</span>
<span>Phone No</span>
<span>Action</span>
</div>
<div id="tbody" ng-repeat="contact in contacts">
<span> {{contact.name}} </span>
<span> {{contact.email}} </span>
<span> {{contact.phno}} </span>
<span> Edit</span>
<span> Delete</span>
</div>
</div>
</div>
<script>
var uid = 0;
function contactDetails($scope) {
//$scope.contacts = [{ id : null, 'name':null, 'phno':null }];
$scope.contacts = [
{ id:0, 'name': 'Viral',
'email':'hello#gmail.com',
'phno': '123-2343-44'
}
];
$scope.saveContact = function(){
alert('sd');
for( i in $scope.contacts){
if($scope.contacts[i].id == $scope.newcontact.id || ($scope.contacts[i].name == $scope.newcontact.name && $scope.contacts[i].phno == $scope.newcontact.phno)){
$scope.contacts[i] = $scope.newcontact;
}else{
$scope.contacts.id = ++uid;
$scope.contacts.push($scope.newcontact);
}
$scope.newcontact = {};
}
}
}
</script>
don't forget to actually include angular and also you forgot ng-app
<body ng-app>
here ya go
Just change $scope.contacts = [{ id : null, 'name':null, 'phno':null }];
to $scope.contacts = [];
Even if you set the properties of the contact elements to null, it still has a single element and thats why there is no text, but the buttons are appearing when the page is loaded.