NumberLong("53093830353")

In this example below you will see how to do a NumberLong("53093830353") with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Arguro, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Arguro ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title> 53093830353</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="daylist">

  <h2>Lista<span class="current_time"></span></h2>
  <p>Todos dados</p>
  <p>Editar, dois cliques no texto.</p>
  <p>Remover, um clique no circulo</p>
  <input type="text" id="input" placeholder="Type here..." autofocus="autofocus" />
  <ul class="list"></ul>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Arguro/numberlong53093830353-VPxJLa */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: #333;
}

.daylist {
  width: 350px;
  min-height: 400px;
  padding: 10px 10px;
  //border: 2px solid lighten(#333333, 65);
  border-radius: 4px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 20px rgba(51, 51, 51, 0.20), 0 6px 6px rgba(0, 0, 0, 0.23);
}

h2 {
  text-align: center;
  font-size: 30px;
  margin-bottom: 5px;
}

.current_time {
  font-size: 10px;
  color: lighten(#333333, 40);
}

p {
  font-size: 16px;
  text-align: center;
  color: lighten(#333333, 40);
}

#input {
  width: 300px;
  height: 35px;
  border-radius: 4px;
  border: 2px solid lighten(#333333, 65);
  outline: none;
  display: block;
  margin: 20px auto;
  color: lighten(#333333, 5);
}

#input:focus {
  border: 2px solid lighten(#333333, 40);
}

.daylist .list {
  display: block;
  margin: 0 auto;
  font-size: 16px;
  width: 300px;
  list-style-position: inside;
}

.daylist .list .list_item {
  color: lighten(#333333, 12);
  padding: 10px 0px;
  border-bottom: 1px solid lighten(#333333, 65);
  position: relative;
}

.list_item_text {
  position: relative;
  outline: none;
  padding: 2px 4px;
  border: 2px solid transparent;
  margin-bottom: 3px;
  line-height: 1.5;
  margin-bottom: 2px;
}

.list_item_text::selection {
  background: #93aac5;
}

.list_item_text:focus {
  border: 2px solid lighten(#333333, 65);
  border-radius: 4px;
}

.list_item:hover {
  background: darken(#ffffff, 4)
}

.list_item time {
  font-size: 9px;
  color: lighten(#333333, 40);
}

/*Downloaded from https://www.codeseek.co/Arguro/numberlong53093830353-VPxJLa */
var current_time = document.querySelector(".current_time");
var input = document.getElementById("input");
var list = document.querySelector(".list");
var list_item = document.querySelector(".list_item");
var list_item_text = document.querySelector(".list_item_text");

var li;

input.addEventListener("keyup", function(e) {

  if (e.which == 13) {
    let d = new Date;
    let h = d.getHours();
    let m = d.getMinutes();
    let val = e.target.value;

    //Make minutes with 2 numbers
    if (m <= 9) {
      m = "0" + m;
    }
    //Make hours with 2 numbers
    if (h <= 9) {
      h = "0" + h;
    }

    li = document.createElement("LI");
    list.appendChild(li);
    li.classList.add("list_item");
    li.innerHTML = "<span class='list_item_text' autofocus='autofocus'>" + val + "</span>" + " " + "<time class='hour'>" + h + ":" + "</time>" + "<time class='minute'>" + m + "</time>";
    input.value = " ";

    //Set item for localStorage
    var lists = list.innerHTML;
    localStorage.setItem('lists', lists);
  }

}, false);

//Get item for localStorage
if (localStorage.getItem('lists')) {
  list.innerHTML = localStorage.getItem('lists')
}

//Double click to remove item
document.querySelector('body').addEventListener('dblclick', function(event) {
  //Double click on list_item to remove
  if (event.target.classList[0] === 'list_item') {
    event.target.remove();
    var lists = list.innerHTML;
    localStorage.setItem('lists', lists);
  }
  //Double click list_item_text to edit
  if (event.target.classList[0] === 'list_item_text') {
    event.target.contentEditable = true;
    //Click enter to complete edit
    event.target.addEventListener("keydown", function(e) {
      if (e.keyCode == 13) {
        var lists = list.innerHTML;
        localStorage.setItem('lists', lists);
        event.target.contentEditable = false;
      }
    }, false);

  }
});

function update_time() {

  var current_d = new Date;
  var current_h = current_d.getHours();
  var current_m = current_d.getMinutes();

  //Make with two numbers
  if (current_h <= 9) {
    current_h = "0" + current_h;
  }
  //Make with two numbers
  if (current_m <= 9) {
    current_m = "0" + current_m;
  }

  current_time.innerHTML = current_h + ":" + current_m;

  if (current_h > 22 && current_m > 58) {
    localStorage.clear();
    console.log("localStorage cleared!");
  }

}
setInterval(update_time, 500);

Comments