Muhammad Rifqi: July 2023

Sunday, July 30, 2023

Qrcode Scanner Javascript

<!DOCTYPE html>

<html>

<head>

<title>Qr Code Scanner</title>

</head>

<body>

</body>

// console.log(Html5QrcodeScanner);

let html5QrcodeScanner = new Html5QrcodeScanner(

"reader",

{ fps: 10, qrbox: { width: 250, height: 250 } },

/* verbose= */ false);

html5QrcodeScanner.render(onScanSuccess, onScanFailure);

function onScanSuccess(result){

document.getElementById("result").innerHTML=result;

html5QrcodeScanner.clear();

document.getElementById("reader").remove();

}

function onScanFailure(error){

document.getElementById("result").innerHTML=error;

}

</script>

</html>

Aplikasi Adzan Online

function now() {

const date = new Date();

const d = date.getDate();

const m = date.getMonth();

const y = date.getFullYear();

const h = date.getHours();

const mn = date.getMinutes();

const s = date.getSeconds();

const nd = new Date(Date.UTC(y, m, d, h, mn, s));

return nd.toLocaleString('id-ID', { timeZone: 'UTC' });

}

function setTime() {

const date = new Date('August 19, 1975 23:15:30');;

const d = date.setDate(30);

const m = date.setMonth(6);

const y = date.setFullYear(2023);

const h = date.setHours(15);

const mn = date.setMinutes(8);

const s = date.setSeconds(1);

const nd = new Date(Date.UTC(date.getFullYear(y), date.getMonth(m), date.getDate(d), date.getHours(h), date.getMinutes(mn), date.getSeconds(s)));

return nd.toLocaleString('id-ID', { timeZone: 'UTC' });

}

window.addEventListener("load", () => {

var text = "";

document.getElementById("set").innerText = setTime();

setInterval(function () {

document.getElementById("now").innerText = now();

if (now() >= setTime()) {

text = "OKE BRO";

document.getElementById("success").innerHTML = text

//disesuaikan dengan suara yang di inginkan

}else{

text = "GAGAL BRO";

document.getElementById("success").innerHTML = text

}

}, 500);

if (!navigator.getAutoplayPolicy) {

console.log("navigator.getAutoplayPolicy() not supported.");

} else {

console.log("navigator.getAutoplayPolicy() is supported.");

}

})

</script>

Saturday, July 29, 2023

Qrcode Vanilla Javascript

<html>

<head>

<title>

QRCODE

</title>

<style>

input,

button,

img {

padding: 10px;

}

</style>

</head>

<body>

<p><button id="generate">GENERATE</button></p>

<p><button id="download">DOWNLOAD</button></p>

</body>

const img = document.querySelector("#qrcodeimg");

const text = document.querySelector("#text");

const generate = document.querySelector("#generate");

const download = document.querySelector("#download");

generate.addEventListener("click",(e)=>{

const qr = `https://api.qrserver.com/v1/create-qr-code/?data=${text.value}&size=100x100`;

img.setAttribute('src',qr);

img.setAttribute('alt','qrcode-vanilla-js');

img.setAttribute('width', 100)

})

download.addEventListener("click", async (e) => {

const data = img.getAttribute('src');

const get = await fetch(data);

const blob = await get.blob();

const downloadLink = document.createElement("a");

downloadLink.href = URL.createObjectURL(blob);

downloadLink.download = 'qr.jpg';

downloadLink.click();

})

</script>

</html>

Geolocation Vanilla Javascript

<html>

<head>

<title>

GEO

</title>

</head>

<body>

<button>GET LOCATION</button>

</body>

const button = document.querySelector("button");

button.addEventListener("click", (e) => {

navigator.geolocation.getCurrentPosition(position => {

const { latitude, longitude } = position.coords;

console.log(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${latitude}&lon=${longitude}`)

const url = `https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${latitude}&lon=${longitude}`;

fetch(url)

.then(response => response.json())

.then((data) => { console.log(data) })

.catch((error) => {console.log(error)});

})

</script>

</html>

Simple Drag and Drop Javascript

<html>

<head>

<title>

DND

</title>

<style>

.div {

background-color: black;

width: 100px;

height: 100px;

position: absolute;

color: bisque;

cursor: move;

left: 35%;

top: 10%;

}

</style>

</head>

<body>

HALLLOW

</div>

</body>

const div = document.querySelector("div");

let offsetX, offsetY;

const move = (e) => {

console.log("move:",e.clientX - offsetX)

div.style.left = `${e.clientX - offsetX}px`;

div.style.top = `${e.clientY - offsetY}px`;

}

div.addEventListener("mousedown", (e) => {

console.log("mousedown:",e.clientX, div.offsetLeft)

offsetX = e.clientX - div.offsetLeft;

offsetY = e.clientY - div.offsetTop;

document.addEventListener("mousemove", move);

})

document.addEventListener("mouseup", () => {

document.removeEventListener("mousemove", move);

})

</script>

</html>

List Sample Api

Map : https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=-34.44076&lon=-58.70521

{lat}/{long}

Qrcode :

: <img src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&size=100x100" alt="" title="" />

Quote api

: http://api.quotable.io/random

Translate :

https://api.mymemory.translated.net/get?q=Hello%20World!&langpair=en|id

Friday, July 28, 2023

Copy Paste Image Javascript

window.addEventListener("paste",(event)=>{

const aaa = event.clipboardData.files;

if(aaa.length > 0){

const img = URL.createObjectURL(aaa[0]);

document.body.innerHTML = `<img src="${img}"" width="200">`;

}

})

</script>

Muhammad Rifqi

Sunday, July 30, 2023

Qrcode Scanner Javascript

Aplikasi Adzan Online

Saturday, July 29, 2023

Qrcode Vanilla Javascript

Geolocation Vanilla Javascript

Simple Drag and Drop Javascript

List Sample Api

Friday, July 28, 2023

Copy Paste Image Javascript

Set Cookie dan Remove Cookie dengan php vanilla.js

Report Abuse

Labels