Sir, My code is working properly in blogger but it is not working in wordpress. I'm a beginner so please help to resolve the issue. Please make some necessary changes to make it functional.
<style>
.button {
background-image: linear-gradient(to right, #0066ff, #00a1ff, #00c6eb, #00e087, #a8eb12);
border: 1px solid black;
color: white;
font-family: Arial;
font-size: small;
text-decoration: none;
padding: 3px;
}
.techly360{
background-image: linear-gradient(to right, #0066ff, #00a1ff, #00c6eb, #00e087, #a8eb12);
color: white;
}
</style>
<div style="text-align: center;">
Download File
<button id="btn" class="techly360">Click to Download</button>
<script>
var downloadButton = document.getElementById("download");
var counter = 10;
var newElement = document.createElement("p");
newElement.innerHTML = "10 sec";
var id;
downloadButton.parentNode.replaceChild(newElement, downloadButton);
function startDownload() {
this.style.display = 'none';
id = setInterval(function () {
counter--;
if (counter < 0) {
newElement.parentNode.replaceChild(downloadButton, newElement);
clearInterval(id);
} else {
newElement.innerHTML = +counter.toString() + " second.";
}
}, 1000);
};
var clickbtn = document.getElementById("btn");
clickbtn.onclick = startDownload;
</script>
var downloadButton = document.getElementById("download");
var counter = 10;
var newElement = document.createElement("p");
newElement.innerHTML = "10 sec";
var id;
downloadButton.parentNode.replaceChild(newElement, downloadButton);
function startDownload() {
this.style.display = 'none';
id = setInterval(function () {
counter--;
if (counter < 0) {
newElement.parentNode.replaceChild(downloadButton, newElement);
clearInterval(id);
} else {
newElement.innerHTML = +counter.toString() + " second.";
}
}, 1000);
};
var clickbtn = document.getElementById("btn");
clickbtn.onclick = startDownload;
.button {
background-image: linear-gradient(to right, #0066ff, #00a1ff, #00c6eb, #00e087, #a8eb12);
border: 1px solid black;
color: white;
font-family: Arial;
font-size: small;
text-decoration: none;
padding: 3px;
}
.techly360{
background-image: linear-gradient(to right, #0066ff, #00a1ff, #00c6eb, #00e087, #a8eb12);
color: white;
}
<div style="text-align: center;">
Download File
<button id="btn" class="techly360">Click to Download</button>
The structure of work in WordPress is different. if you use this code as a html file it's work true. like this:
https://file.io/4a0F1OL14avi
but in wordpress you need to seperate codes. (like as image)
1-copy html code in post content
2-copy style and script in header.php (in root of the theme) before
enter image description here
Related
--- UPDATED QUESTION ---
Thanks for all the answers. I wrote the JS code to delete the parent div when clicking its corresponding button in my JS PRACTICE!!!
However, the same JS code does not work in my real JS project where all the parent div are created dynamically. The complete code can be found below.
There is no error but the JS code just does not work. Any ideas?
BELOW IS THE SIMPLIFIED **REAL JS PROJECT ** COMPLETE CODE
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Upload Imgs</title>
<style type="text/css">
.container {
width: 100%;
}
.display-area {
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
img {
max-width: 100%;
}
.image-preview {
width: 80%;
min-height: 300px;
border: 2px dashed #dddddd;
display: block;
/*default text*/
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #cccccc;
}
.newbtns {
border: 0;
background: lightgrey;
text-shadow: 1px 1px 1px white;
border: 1px solid #999;
position: absolute;
display: block;
}
</style>
</head>
<body>
<div class="container">
<div id='inputFiles'><input type="file" class="file" name="image_uploads" accept="image/png, image/jpeg, image/jpg"
multiple></div>
<div class="display-area" id='imgDisplay'>
</div>
<div id="defaultContent">
<p>No images</p>
</div>
<button type="button" value="Reload page" onclick="window.location.reload()">Reload Page</button>
</div>
</div>
</body>
<script>
var input = document.querySelector('input');
var uploadBox = document.getElementById('uploadBox');
var defaultContent = document.getElementById('defaultContent');
var imgDisplay = document.getElementById('imgDisplay')
//upload & preview
input.addEventListener('change', function () {
var imgFiles = input.files;
defaultContent.style.display = 'none';
for (var i = 0; i < imgFiles.length; i++) {
var imgDiv = document.createElement('div');
imgDiv.className = 'imgBox';
imgDiv.id = 'box' + i;
imgDiv.style.width = "20%";
var images = document.createElement('img');
images.src = URL.createObjectURL(imgFiles[i]);
var newbtn = document.createElement("button");
newbtn.type = "button";
newbtn.className = "newbtns";
newbtn.innerHTML = "X";
newbtn.style.color = "orange";
newbtn.style.background = 'red';
newbtn.id = 'newbtn' + i;
imgDiv.appendChild(newbtn);
imgDiv.appendChild(images);
imgDisplay.appendChild(imgDiv);
}
});
allButtons = document.getElementsByTagName('button');
for (var n = 0; n < allButtons.length; n++) {
if (allButtons[n].getAttribute('id') === 'newbtn' + n) {
allButtons[n].onclick = function () {
this.parentNode.parentNode.removeChild(this.parentNode);
}
} else { };
}
</script>
</html>
you can do something like this:
const buttonOne = document.getElementById('btn1');
const buttonTwo = document.getElementById('btn2');
buttonOne.addEventListener("click", () => deleteElementAndThisChildNodes('box1'))
buttonTwo.addEventListener("click", () => deleteElementAndThisChildNodes('box2'))
function deleteElementAndThisChildNodes(parentId) {
document.getElementById(parentId).remove()
}
To each of your button elements add onclick="DeleteParent(this)" then outside of your dynamic divs include the following:
<script type="text/javascript">
function DeleteParent(button){
button.parentElement.remove();
}
</script>
You can do this:
const display = document.getElementById("imgdisplayarea");
display.addEventListener("click", e => {
if(e.target.tagName === 'BUTTON'){
//if an element within a display div for a button, remove your father
e.target.parentNode.remove();
}
});
Here is a very simple example that works exactly how you want it (based on your question):
function disable() {
document.getElementById("demo").style.display = "none";
}
<div id="demo">
<button onclick="disable()">
Click Me
</button>
<h3>
This is part of the div
</h3>
</div>
Hello and thanks for stopping by.
I have one main problem with my app.
I think the mouseout and mouseover event listeners are firing like crazy when I put my cursor over the trashcan icon and I don't know why. It gets all glitchy and can't click on it correctly.
Any advice?
https://codepen.io/Dali213/pen/ExjLMdG?editors=0110
const ul = document.querySelector("ul");
//initialisation
const arr = ["learn how to use GitHub.", "learn how to use GitHub.", "learn how to use GitHub."];
for (let i = 0; i < arr.length; i++) {
addToDo(arr[i]);
}
function addToDo(text) {
const li = document.createElement("li");
const p = document.createElement("p");
p.textContent = text;
li.append(p);
li.addEventListener("click", lineThrough);
li.addEventListener("mouseover", addTrashCan);
li.addEventListener("mouseout", removeTrashCan);
ul.append(li);
}
//add rubish icon+delete function
function del() {
const li = this.closest("li");
li.removeEventListener("click", lineThrough);
li.removeEventListener("mouseover", addTrashCan);
li.removeEventListener("mouseout", removeTrashCan);
li.remove();
}
function addTrashCan() {
const trashCan = document.createElement("i");
trashCan.classList.add("far", "fa-trash-alt", "trash-can");
trashCan.addEventListener("click", del);
this.prepend(trashCan);
}
function removeTrashCan() {
const trashCan = this.querySelector("i");
trashCan.removeEventListener("click", del);
trashCan.remove();
}
Second question, at first my pseudo element ::first-letter was working correctly now it isn't.
When I look at the styles applied with the developper tool, it still seems applied though... Why?
Any advice on my code is more than welcome.
Thank you for your time.
You could prepend the trash can in the beginning itself and show/hide based on mouseout or mouseover events instead of creating the element each time:
.hidden {
display: none !important;
}
function addTrashCan() {
this.querySelector('i').classList.remove('hidden')
}
function removeTrashCan() {
this.querySelector('i').classList.add('hidden')
}
function addToDo(text) {
const li = document.createElement("li");
const p = document.createElement("p");
const trashCan = document.createElement("i");
trashCan.classList.add("far", "fa-trash-alt", "trash-can", "hidden");
trashCan.addEventListener("click", del);
li.prepend(trashCan);
p.textContent = text;
li.append(p);
li.addEventListener("click", lineThrough);
li.addEventListener("mouseover", addTrashCan);
li.addEventListener("mouseout", removeTrashCan);
ul.append(li);
}
const ul = document.querySelector("ul");
const input = document.querySelector("input");
//initialisation
const arr = ["learn how to use GitHub.", "learn how to use GitHub.", "learn how to use GitHub."];
for (let i = 0; i < arr.length; i++) {
addToDo(arr[i]);
}
function addToDo(text) {
const li = document.createElement("li");
const p = document.createElement("p");
const trashCan = document.createElement("i");
trashCan.classList.add("far", "fa-trash-alt", "trash-can", 'hidden');
trashCan.addEventListener("click", del);
li.prepend(trashCan);
p.textContent = text;
li.append(p);
li.addEventListener("click", lineThrough);
li.addEventListener("mouseover", addTrashCan);
li.addEventListener("mouseout", removeTrashCan);
ul.append(li);
}
//hide the input
function hideInput() {
input.classList.toggle("hidden");
}
//add task to the list
function enter() {
if (event.keyCode === 13) addToDo(this.value);
}
//line-through on click
function lineThrough() {
this.querySelector("p").classList.toggle("line-through");
}
//add rubish icon+delete function
function del() {
const li = this.closest("li");
li.removeEventListener("click", lineThrough);
li.removeEventListener("mouseover", addTrashCan);
li.removeEventListener("mouseout", removeTrashCan);
li.remove();
}
function addTrashCan() {
/*const trashCan = document.createElement("i");
trashCan.classList.add("far", "fa-trash-alt", "trash-can");
trashCan.addEventListener("click", del);
this.prepend(trashCan);*/
console.log('in');
this.querySelector('i').classList.remove('hidden')
}
function removeTrashCan() {
/*const trashCan = this.querySelector("i");
trashCan.removeEventListener("click", del);
trashCan.remove();*/
console.log('out');
this.querySelector('i').classList.add('hidden')
}
//listeners
document.querySelector(".display").onclick = hideInput;
input.onkeyup = enter;
* {
padding: 0px;
margin: 0px;
}
body {
background: linear-gradient(90deg, #18b7e4, #e8e9be);
}
.container {
background-color: aliceblue;
min-width: 270px;
max-width: 270px;
margin: 80px auto 0px;
}
.head {
padding: 5px 10px;
display: flex;
justify-content: space-between;
background-color: #2072b5;
color: #ffffff;
}
.display,
i {
cursor: pointer;
}
input {
border: 2px solid #2072b5;
width: 246px;
padding: 5px 10px;
}
.hidden {
display: none !important;
}
ul {
list-style: none;
}
p {
display: inline;
padding: 2px 5px;
}
p::first-letter {
text-transform: capitalize;
}
li:nth-of-type(odd) {
background-color: #f7f5f7;
}
li:nth-of-type(even) {
background-color: #ffffff;
}
.line-through {
text-decoration: line-through;
opacity: 0.7;
}
.trash-can {
background-color: red;
color: #ffffff;
padding: 2px 5px;
}
li {
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<title>to-do list</title>
<link rel="stylesheet" href="main.css" />
<script src="https://kit.fontawesome.com/fe178342de.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="head">
<h1>TO-DO LIST</h1>
<h1 class="display">+</h1>
</div>
<input type="text" placeholder="Add New Todo" />
<ul></ul>
</div>
<script src="main.js"></script>
</body>
</html>
Edit:
To fix the ::first-letter pseudo element, issue you could add the following css:
li {
display: flex;
}
I'm trying to add font size increment+decrement functionality to my website and yeah, I did it.
Now the fact is when user click on increase button, the font size increasing continuously and the same thing happens to decrease button.
But I don't want this. I want when someone click on increase button, the font size will increase only once... and same for the decrease button.
JSFiddle link here
And heere is the code I'm working with.
This is the markup
<div id="settings">
<button class="resetFont clean-gray">Reset Font Size</button>
<button class="increaseFont clean-gray">Increase Font Size</button>
<button class="decreaseFont clean-gray">Decrease Font Size</button>
</div>
<br>
<br>
<div>
<h2>
This is a test heading
</h2>
<p>
This is a test paragraph
</p>
</div>
And this is the script
var defaultFontSize = $('html').css('font-size');
$(".resetFont").click(function () {
$('html').css('font-size', defaultFontSize);
});
$(".increaseFont").click(function () {
var fontSize = getFontSize();
var newFontSize = fontSize + 1;
setFontSize(newFontSize);
return false;
});
$(".decreaseFont").click(function () {
var fontSize = getFontSize();
var newFontSize = fontSize - 1;
setFontSize(newFontSize);
return false;
});
function getFontSize() {
var currentSize = $("html").css("font-size");
var currentSizeNumber = parseFloat(currentSize, 12);
if (currentSizeNumber > 24) {
currentSizeNumber = 24;
}
if (currentSizeNumber < 10) {
currentSizeNumber = 10;
}
return currentSizeNumber;
}
function setFontSize(size) {
$("html").css("font-size", size);
$(".actualSize").html(size);
}
You can update the increase/decrease button code like below
$(".increaseFont").click(function () {
var newFontSize = parseFloat(defaultFontSize) + 1;
setFontSize(newFontSize);
return false;
});
$(".decreaseFont").click(function () {
var newFontSize = parseFloat(defaultFontSize) - 1;
setFontSize(newFontSize);
return false;
});
js fiddle link
Hope it will help you.
Cache the minimum and maximum size you want to the text to go:
const minSize = parseFloat(defaultFontSize, 12) - 1;
const maxSize = parseFloat(defaultFontSize, 12) + 1;
And then check to see if the new decreased/increased size stays within those bounds:
// in the increasefont click handler
if (newFontSize <= maxSize) setFontSize(newFontSize);
// in the decreasefont click handler
if (newFontSize >= minSize) setFontSize(newFontSize);
Demo
You can disable the buttons when max or min font size is reached. Just ensure to reset them when the font size is reset.
const defaultFontSize = 12;
let actualFontSize = defaultFontSize;
setFontSize(defaultFontSize);
$(".resetFont").click(function() {
setFontSize(defaultFontSize);
$(".decreaseFont").removeAttr('disabled');
$(".increaseFont").removeAttr('disabled');
});
$(".increaseFont").click(function() {
actualFontSize += 1;
setFontSize(actualFontSize);
if (actualFontSize > defaultFontSize) {
$(this).attr('disabled','disabled');
$(".decreaseFont").removeAttr('disabled');
}
return false;
});
$(".decreaseFont").click(function() {
actualFontSize -= 1;
setFontSize(actualFontSize);
if (actualFontSize < defaultFontSize) {
$(this).attr('disabled','disabled');
$(".increaseFont").removeAttr('disabled');
}
return false;
});
function setFontSize(size) {
$("html").css("font-size", size + "px");
$(".actualSize").html(size);
}
body {
width: 80%;
margin: 0 auto;
}
#settings {
padding-right: 1.250em;
padding-top: 0.750em;
}
button.clean-gray {
background-color: #eeeeee;
border: #ccc solid 1px;
border-bottom: 1px solid #bbb;
border-radius: 3px;
color: #333;
font-family: 'Segoe UI', arial, helvetica, sans-serif;
font-weight: bold;
font-size: 0.875em;
text-align: center;
text-shadow: 0 1px 0 #eee;
}
button.clean-gray:hover {
background-color: #dddddd;
border: #bbb solid 1px;
border-bottom: 1px solid #999;
cursor: pointer;
text-shadow: 0 1px 0 #ddd;
}
button.clean-gray:active {
border: #aaa solid 1px;
border-bottom: 1px solid #888;
box-shadow: 0 0 5px 2px #aaaaaa inset, 0 1px 0 0 #eeeeee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="settings">
<button class="resetFont clean-gray">Reset Font Size</button>
<button class="increaseFont clean-gray">Increase Font Size</button>
<button class="decreaseFont clean-gray">Decrease Font Size</button>
</div>
<br>
<br>
<div>
<h2>
This is a test heading
</h2>
<p>
This is a test paragraph
</p>
</div>
So I made a bunch of divs stacked on each other, and I want each div to change its background color whenever its hover, but that's not what happens
When I hover an item its background color should change to green,
but it doesn't work even that I wrote div.oldiv:hover{background-color: #48FF0D;}
The problem is probably in CSS code.
Here is a snippet :
body{
background-color: #48FF0D;
}
#bigdiv {
height: 90%;
width: 100%;
}
.oldiv {
height: 0.390625%;
width: 100%;}
div.oldiv:hover{
background-color: #48FF0D;
}
#bigdiv2 {
height: 0;
width: 100%;
}
.btn {
border: none;
color: white;
padding: 14px 28px;
cursor: pointer;
}
.uptodown {
background-color: #e7e7e7;
color: black;
}
.uptodown:hover {
background: #ddd;
}
.l{
float: right;
}
<body>
<script>
var b = "",k = "",a,q,d;
for(a = 0;a<=256;a++){
d =" <div id=\"du\" class=\"oldiv\" style=\"background-color: rgb("+a+","+a+","+a+");\"></div>";
q =" <div id=\"du\" class=\"oldiv\" style=\"background-color:rgb("+(256-a)+","+(256-a)+","+(256-a)+");\"></div>";
b = b+"\n"+d;
k = k+"\n"+q;
}
window.onload = function (){
document.getElementById("bigdiv").innerHTML = b;
document.getElementById("bigdiv2").innerHTML = k;
}
function utd(a){
var bigdiv = document.getElementById("bigdiv");
var bigdiv2 = document.getElementById("bigdiv2");
if(a == 0){
bigdiv.style.height = "0";
bigdiv2.style.height= "90%";
}else{
bigdiv.style.height = "90%";
bigdiv2.style.height= "0";
}
}
</script>
<div id="bigdiv">
</div>
<div id="bigdiv2">
</div>
<div>
<button class="btn uptodown" onclick="utd(0)">white to black</button>
<button class="btn uptodown l" onclick="utd(1)">black to white</button>
</div>
</body>
Don't word about all the Javascript, its just to generate elements and adding them to HTML
I have no idea what the purpose of this code is, but I think I have fixed it..... Whatever it is :P
Your #bigdiv and #bigdiv2 percentage height were not working because the height of the document wasn't 100%. So I just added html, body {height:100%;} to fix that.
/* code added START */
html, body {
height:100%;
}
div.oldiv:hover {
background-color: #48FF0D!important;
}
/* code added END */
body{
background-color: #48FF0D;
}
#bigdiv {
height: 90%;
width: 100%;
}
.oldiv {
height: 0.390625%;
width: 100%;
}
/* div.oldiv:hover{background-color: #48FF0D;} */
#bigdiv2 {
height: 0;
width: 100%;
}
.btn {
border: none;
color: white;
padding: 14px 28px;
cursor: pointer;
}
.uptodown {
background-color: #e7e7e7;
color: black;
}
.uptodown:hover {
background: #ddd;
}
.l {
float: right;
}
<script>
var b = "",k = "",a,q,d;
for(a = 0;a<=256;a++){
d =" <div id=\"du\" class=\"oldiv\" style=\"background-color: rgb("+a+","+a+","+a+");\"></div>";
q =" <div id=\"du\" class=\"oldiv\" style=\"background-color:rgb("+(256-a)+","+(256-a)+","+(256-a)+");\"></div>";
b = b+"\n"+d;
k = k+"\n"+q;
}
function utd(a) {
var bigdiv = document.getElementById("bigdiv");
var bigdiv2 = document.getElementById("bigdiv2");
if(a == 0) {
bigdiv.style.height = "0";
bigdiv2.style.height= "90%";
} else {
bigdiv.style.height = "90%";
bigdiv2.style.height= "0";
}
}
</script>
<div id="bigdiv">
<script>document.write(b);</script>
</div>
<div id="bigdiv2">
<script>document.write(k);</script>
</div>
<div>
<button class="btn uptodown" onclick="utd(0)">white to black</button>
<button class="btn uptodown l" onclick="utd(1)">black to white</button>
</div>
Well, there is no use of Javascript here. I'm not able to understand what problem you're facing but refer here : https://www.w3schools.com/cssref/sel_hover.asp
CSS already has property of hover and can be used like element:hover {your properties inside like whatever event has to be happened on hover}. There is no need to use JS here. Hope this helps.
UPDATE:
I would also suggest you to follow good practice of writing JS code and CSS code in a separate file not in a HTML file.
In my stop watch history table , it shows history of start time, end time, length, time between.
But if I refresh browser then previous value gone . I need previous data will remain for next time , data will store in local storage.
Thanks for any help.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
<script type="text/javascript">
function PadDigits(n, totalDigits)
{
n = n.toString();
var pd = '';
if (totalDigits > n.length)
{
for (i=0; i < (totalDigits-n.length); i++)
{
pd += '0';
}
}
return pd + n.toString();
}
var lastEndTime = null;
var starttime = null;
var endtime = null;
function startTimer()
{
date = new Date();
starttime = date;
if(lastEndTime == null)
{
$('#history').html('');
}
$('#action').html('<img src="pause.png"><br>Stop Timer');
}
function stopTimer()
{
$('#action').html('<img src="play.png"><br>Start Timer');
date = new Date();
endtime = date;
addRowToTable(starttime,endtime,lastEndTime);
lastEndTime = endtime;
endtime = null;
starttime = null;
}
function addRowToTable(starttime,endtime,lastEndTime)
{
formattedStart = PadDigits(starttime.getHours(),2)+':'+PadDigits(starttime.getMinutes(),2)+":"+PadDigits(starttime.getSeconds(),2);
formattedEnd = PadDigits(endtime.getHours(),2)+':'+PadDigits(endtime.getMinutes(),2)+":"+PadDigits(endtime.getSeconds(),2);
seconds = parseInt((endtime.getTime() - starttime.getTime())/1000);
lengthMinutes = parseInt(seconds/60);
lengthSeconds = parseInt(seconds%60);
lengthFormatted = PadDigits(lengthMinutes,2)+":"+PadDigits(lengthSeconds,2);
if(lastEndTime == null)
{
timeBetweenFormatted = "N/A";
}
else
{
timeBetween = parseInt((starttime.getTime() - lastEndTime.getTime())/1000);
timeBetweenMinutes = parseInt(timeBetween/60);
timeBetweenSeconds = parseInt(timeBetween%60);
timeBetweenFormatted = PadDigits(timeBetweenMinutes,2)+":"+PadDigits(timeBetweenSeconds,2);
}
$('#history').prepend('<tr><td>'+formattedStart+'</td><td>'+formattedEnd+'</td><td>'+lengthFormatted+'</td><td>'+timeBetweenFormatted+'</td></tr>')
}
function toggleTimer()
{
if (starttime == null)
{
startTimer();
}
else
{
stopTimer();
}
}
$(document).ready(function(){
$('#action').click(function(kevent){
toggleTimer();
});
$(document).keypress(function(kevent){
$('#action').click();
});
});
</script>
<style type="text/css">
body, body *{
font-family: Helvetica;
}
body{
margin:0px;
}
table.data-table
{
width: 100%;
background-color: #FFFFFF;
font-size: 11px ;
border: 0px;
border-collapse: collapse;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
table.data-table thead
{
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
table.data-table thead th
{
background: #DDDDDD url(data-table-header.png) repeat-x top;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(248, 248, 248)), color-stop(0.5, rgb(248, 248, 248)), color-stop(0.5, rgb(233, 233, 233)), to(rgb(233, 233, 233))) content-box padding-box;
text-align: left;
padding-left: 2px;
}
table.data-table tr:nth-child(2n)
{
background-color: #ECF3FE;
}
table.data-table tr:odd
{
background-color: #ECF3FE;
}
table.data-table td
{
padding-left: 2px;
}
table.data-table tbody
{
overflow-y: auto;
}
#action
{
border: 0px;
background: transparent;
}
</style>
</head>
<body>
<button type="button" id="action"><img src="play.png"><br>Start Timer</button><br>
<div>
<table class="data-table">
<thead>
<tr>
<th>Start Time</th>
<th>End Time</th>
<th>Length</th>
<th>Time Between</th>
</tr>
</thead>
<tbody id="history">
</tbody>
</table>
</div>
</body>
</html>
you can use cookies which will be the easiest and simplest solution
check this
http://www.w3schools.com/js/js_cookies.asp
If you have to store all the previous values in a local storage you can store array of objects in to a local storage variable and than access it on page load.
The objective is to store the data into local storage once a lap is completed. And on browser refresh it has to check for stored laps, if any are stored it has to update them on html before proceeding. This will help you to achieve it.
var rows = new Array();
var lastEndTime = null;
var starttime = null;
var endtime = null;
function stopTimer()
{
// Your code
addRowToTable(starttime,endtime,lastEndTime);
addRowToLocalStorage(starttime,endtime,lastEndTime);
}
// This will update your local storage data with all time laps
function addRowToLocalStorage(starttime, endtime, lastendtime)
{
var row = {
'startTime' : starttime,
'endtime' : endtime,
'lastendtime' : lastendtime
};
rows.push(row);
localStorage.setItem("savedData", JSON.stringify(rows));
}
// Onpage load, update all your local storage data to html
$(function(){
var historyLaps = JSON.parse(localStorage.getItem("savedData"));
$.each(historyLaps, function(lap) {
addRowToTable(lap.starttime, lap.endtime, lap.lastEndTime);
});
});
// Deletes the local data. You can keep a rest button in html and tie it to this.
function clearStorage(){
localStorage.removeItem('savedData');
}
This is untested code and probably might not work as expected. But, this will get you started. I hope this will help you.