Kinh nghiệm css, javascript – frontend

 $(document).ready(function(){
   var bxslider = $('.slider').bxSlider({
     touchEnabled: false,
     oneToOneTouch: false
     });

   JumpToSlide = function (slideNumber) {

     var slide = slideNumber - 1;

     bxslider.goToSlide(slide);

   };
 });


//xu ly click href not working
<a onclick="handleClick(this)" href="{{route("vn.searchJobCategoryFriendly", ["dich-thuat"]) }}">
function handleClick(obj) {
     let href = obj.getAttribute("href");
     window.location.href = href;
}

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

html {
    font-size: 62.5%;
    line-height: 1.6rem;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
}

.content-right__process-item-content {
    text-align: center;
    line-height: 4.7rem;
    font-size: 1.6rem;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />

<!-- html -->
<div class="content-right__header-item-notify-triagle-wrap">
  <div class="content-right__header-item-notify-triagle">

  </div>
</div>

/* css */
.content-right__header-item-notify-triagle-wrap {
    filter: drop-shadow( 0 0 5px rgba(50, 50, 0, 0.5));
    position: absolute;
    right: 25px;
    top: 23px;
    display: none;
}

.content-right__header-item-notify-triagle {
    position: absolute;
    /* top: 14px;
    right: 3px; */
    /* width: 2.2rem;
    height: 1.5rem; */
    /* background-color: orange;
    box-shadow: 0 0px 9px #ccc; */
    background-color: #6f64f8;
    color: #222;
    padding: 1rem 1rem 1rem 2rem;
    font: bold 32px system-ui;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

/*00110*/
#myDivId .myDivClass
{
    font-size: 20px;
}

/*00030*/
.a .b .c
{
    color: green;
}

/*00020*/
.a .b
{
    color: red;
}

white-space: break-spaces;

autocomplete='new-password'

word-break: break-word;

word-break: break-all;

１・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

var person = {
	name: "Hao",
  	age: 20,
}

let name = person.name;
let age = person.age;

//để ngắn gọn sử dụng Destructuring
let { name, age } = person;

//thay đổi tên biến
let { name: ten, age } = person

formatDate(date) {
  var d = new Date(date),
  month = '' + (d.getMonth() + 1),
  day = '' + d.getDate(),
  year = d.getFullYear();

  if (month.length < 2) 
    month = '0' + month;
  if (day.length < 2) 
    day = '0' + day;

  return [year, month, day].join('-');
}

formatDate(dateInput) {
  let day = this.formatNumberAddZero( dateInput.getDate() );
  let month = this.formatNumberAddZero( (dateInput.getMonth()+1) );
  let date = dateInput.getFullYear() + '-' + month + '-' + day;

  let hours = this.formatNumberAddZero(dateInput.getHours());
  let minutes = this.formatNumberAddZero(dateInput.getMinutes());
  var time = hours + ":" + minutes;
  var dateTime = date+'T'+time;
  return dateTime;
},
/**
  * format 1..9 =>01...09
*/
formatNumberAddZero(number) {
  if (number >= 10)
    return number;
  else {
    switch (number) {
      case 1: return '01';
      case 2: return '02';
      case 3: return '03';
      case 4: return '04';
      case 5: return '05';
      case 6: return '06';
      case 7: return '07';
      case 8: return '08';
      case 9: return '09';
    }
  }
}

<script>
		function countdownTimer(strDate, index) {
			const difference = +new Date(strDate) - +new Date();
			let remaining = "Time's up!";
			if (difference > 0) {
				const parts = {
				hours: Math.floor((difference / (1000 * 60 * 60))),
				minutes: Math.floor((difference / 1000 / 60) % 60),
				seconds: Math.floor((difference / 1000) % 60),
				};

				
				remaining = Object.keys(parts).map(part => {
				return `${parts[part]} ${part}`;
				}).join(" ");
			}
			console.log(remaining);

			let hour = '';
			let minute = '';
			let second = '';

			let arraySplitHour = remaining.split(' hours ');
			hour = addZeroToNumber(arraySplitHour[0]);

			let arraySplitMinute = arraySplitHour[1].split(' minutes ');
			minute = addZeroToNumber(arraySplitMinute[0]);

			let arraySplitSecond = arraySplitMinute[1].split(' second');
			second = addZeroToNumber(arraySplitSecond[0]);

			document.getElementById("hour-" + index).innerHTML 		= hour;
			document.getElementById("minute-" + index).innerHTML 	= minute;
			document.getElementById("second-" + index).innerHTML 	= second;
		}

		function addZeroToNumber( number ) {
			if ( number > 9 ) {
				return number
			} else {
				switch ( number ) {
					case '0': return '00';
					case '1': return '01';
					case '2': return '02';
					case '3': return '03';
					case '4': return '04';
					case '5': return '05';
					case '6': return '06';
					case '7': return '07';
					case '8': return '08';
					case '9': return '09';
				}
			}
		}

		$( document ).ready(function() {
			for(let i = 0; i < arrayTimeEventNotOver.length; i++) {
				countdownTimer(arrayTimeEventNotOver[i], i);
			}
			for(let i = 0; i < arrayTimeEventNotOver.length; i++) {
				setInterval(countdownTimer, 1000, arrayTimeEventNotOver[i], i);
			}
		});
</script>

element.style.setProperty("padding-top", '10px', "important");

ImageExist(url) 
{
    url = window.location.origin + url;

    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}

<p><input type="file"  accept="image/*" name="image" id="file"  onchange="loadFile(event)" style="display: none;"></p>
<p><label for="file" style="cursor: pointer;">Upload Image</label></p>
<p><img id="output" width="200" /></p>

<script>
var loadFile = function(event) {
	var image = document.getElementById('output');
	image.src = URL.createObjectURL(event.target.files[0]);
};
</script>

function phonenumber(inputtxt) {
  var phoneno = /(84|0[3|5|7|8|9])+([0-9]{8})\b/;
  if(inputtxt.match(phoneno)) {
    return true;
  }
  else {
    return false;
  }
}

window.history.pushState({ các biên cần lưu: giá trị }, '', url);

// bắt sự kiện ấn back trang về
window.onpopstate = function(event) {
  location.replace(document.location);
};

function toASCII(chars) {
    var ascii = '';
    for(var i=0, l=chars.length; i<l; i++) {
        var c = chars[i].charCodeAt(0);

        // make sure we only convert half-full width char
        if (c >= 0xFF00 && c <= 0xFFEF) {
           c = 0xFF & (c + 0x20);
        }

        ascii += String.fromCharCode(c);
    }

    return ascii;
}

// example
toASCII("ＡＢＣ"); // returns 'ABC' 0x41

<input type="file" name="background_image" id="background_image" accept="image/*" onchange="changeBackgroundImage(this)">
function changeBackgroundImage(inputFile) {
    var filePath = inputFile.value;
          
    // Allowing file type
    var allowedExtensions = 
            /(\.jpg|\.jpeg|\.png|\.gif)$/i;
        
    if (!allowedExtensions.exec(filePath)) {
        alert('File is not an image. Please choose another file!');
        inputFile.value = '';
    } 
}

<script src="/dist/maska.js"></script>

<input data-mask="##/##/####" class="masked">

$(document).ready(function () {

  Maska.create('.masked');
});

function numberGenerator() {
  // Local free variable that ends up within the closure
  var num = 1;
  function checkNumber() { 
    console.log(num);
  }
  num++;
  return checkNumber;
}

var number = numberGenerator();
number(); // 2

const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");

bar();
foo();
baz();

function getUp() {
  console.log('I am waking up');
}

function makeCoffee() {
  setTimeout(() => {
    console.log('Making coffee in 5 minutes');
  }, 0);
}

function haveBreakfast() {
  Promise.resolve().then(() => {
      console.log('I have my breakfast');
  });
}

makeCoffee();
haveBreakfast();
getUp();

async function getJSONAsync() {

  // The await keyword saves us from having to write a .then() block.
  let json = await axios.get('https://tutorialzine.com/misc/files/example.json');

  // The result of the GET request is available in the json variable.
  // We return it just like in a regular synchronous function.
  return json;
}

getJSONAsync().then( function(result) {
  // Do something with result.
});

function getJSON() {

  // To make the function blocking we manually create a Promise.
  return new Promise( function(resolve) {
    axios.get('https://tutorialzine.com/misc/files/example.json')
      .then( function(json) {

        // The data from the request is available in a .then block
        // We return the result using resolve.
        resolve(json);
      });
  });
}

getJSONAsync().then( function(result) {
  // Do something with result.
});

//capturing
window → document → table → tbody → tr → td

// bubling
td → tr→ tbody → table → document → window

addEventListener("click", handler, true)
/**
  * true => capturing
  * false => bubling (default)
*/

<body onclick="alert(`the bubbling doesn't reach here`)">
    <button onclick="event.stopPropagation()">Click me</button>
</body>

// sử dụng
let formData = cloneDeep(state2.form);

// thay vì
let formData = {...state2.form};