custom PayPal button html code

https://manajmnt-code.blogspot.com/2021/04/custom-paypal-button-html-code.html

I will share with you a professional PayPal button code in html and CSS with icon (font-awesome). look at this code below:
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <button style="font-style: italic;background: white;"><i class="fa fa-paypal" style="color: #012069;"></i><span style="color: #012069;"> pay</span><span style="color: #009cde;">pal</span></button> <button style="color: white ;background:#012069 ;" ><i class="fa fa-paypal"></i></button> html code for PayPal button with anchor
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <button style="font-style: italic;background: white;"><a href="#" style="text-decoration: none;" target="_blank"><i class="fa fa-paypal" style="color: #012069;vertical-align: middle;"></i><span style="color: #012069;"> pay</span><span style="color: #009cde;">pal</span></a></button> html code for PayPal button with custom style CSS
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <style> #paypalbtn{font-style: italic;background: white;border:0; box-shadow: 0 0 3px;padding: 0 7px 0px 7px;; border-radius:4px} i.fa.fa-paypal:hover {transform: rotate(360deg);transition: 0.5s;} </style> <button id="paypalbtn" ><a href="#" style="text-decoration: none;" target="_blank"><i class="fa fa-paypal" style="color: #012069;vertical-align: middle;"></i><span style="color: #012069;"> pay</span><span style="color: #009cde;">pal</span></a></button> Donate button PayPal html code
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <button style="font-style: italic;background: white;"><a href="#" style="text-decoration: none;" target="_blank"><i class="fa fa-paypal" style="color: #012069;vertical-align: middle;"></i><span style="color: #012069;"> pay</span><span style="color: #009cde;">pal</span></a></button>

CSS Framework_Front-End HTML web_fonts

Mami Mahfoud April 23, 2021

Open file from local system and save changes to file that opened

https://manajmnt-code.blogspot.com/2021/04/open-file-from-local-system-and-save.html

In this code we will be learn how to use The File System Access API to open file from local system and save changes to file that opened,
in this example we are try with txt file:

<button onclick="openfile()" title="Open txt file">Openfile</button> <button onclick="savefile()" title="Open txt file">Save file</button> <textarea id="editor" style="width: 100%; height: 200px;" placeholder="open file..."></textarea> <script> let editor = document.getElementById("editor"); const openfile = async () => { [fileHandle] = await window.showOpenFilePicker(); const file = await fileHandle.getFile(); const contents = await file.text(); editor.value = contents; } const savefile = async () => { const writable = await fileHandle.createWritable(); await writable.write(editor.value); await writable.close(); } </script>

to save changes with keybord event Ctrl + s add this code as follows:

window.addEventListener("keydown" , e => {
if (e.key === 's' && e.metaKey) {
    e.preventDefault();
    savefile();
}

});

return to first exemple:

let editor = document.getElementById("editor");

const openfile = async () => {
    [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  editor.value = contents;

}

const savefile = async () => {
 
  const writable = await fileHandle.createWritable();
  await writable.write(editor.value);
  await writable.close();
}
window.addEventListener("keydown" , e => {
if (e.key === 's' && e.metaKey) {
    e.preventDefault();
    savefile();
}

});

file-system-access_API Framework_Front-End

Mami Mahfoud April 09, 2021

Open text file and Save as html file in your local device using File System Access API

https://manajmnt-code.blogspot.com/2021/04/open-text-file-and-save-as-html-file-in.html

in this exemple you can open text file from your local files in textarea and saving as html file in your in local device using File System Access API
<button id="open"> open File</button> <button id="saveas"> save as</button> <textarea id="textarea" style="width:100%;height:300px">Free Online HTML editor autocomplete with CSS & JS</textarea> <script> document.getElementById("open").onclick = function() { openFile() } async function openFile() { let fileHandle; [fileHandle] = await window.showOpenFilePicker(); const file = await fileHandle.getFile(); const contents = await file.text(); document.getElementById("textarea").value = contents; } document.getElementById("saveas").onclick = function() { saveFile() } async function saveFile() { const opts = { types: [{ description: 'html file', accept: {'text/html': ['.html']}, }], }; const newHandle = await window.showSaveFilePicker(opts); const writableStream = await newHandle.createWritable(); var textarea =document.getElementById("textarea").value await writableStream.write(textarea); await writableStream.close(); } </script>

file-system-access_API Framework_Front-End

Mami Mahfoud April 08, 2021

How-to select & copy code from codemirror editor with button

https://manajmnt-code.blogspot.com/2021/04/how-to-select-copy-code-from-codemirror.html

I will be share with you how to select code in editor and copy it using javascript Method [ focus() ,execCommand("selectAll"), execCommand("copy") ]
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css"> <link rel="stylesheet" href="https://codemirror.net/doc/docs.css"> <script src="https://codemirror.net/lib/codemirror.js"></script> <script src="https://codemirror.net/mode/css/css.js"></script> <script src="https://codemirror.net/mode/xml/xml.js"></script> <script src="https://codemirror.net/mode/javascript/javascript.js"></script> <script src="https://codemirror.net/mode/css/css.js"></script> <script src="https://codemirror.net/mode/htmlmixed/htmlmixed.js"></script> <input type="file" onchange="localLoad(this.files);" /> <div class="editor"> </div> <script> var myCodeMirror = CodeMirror( document.getElementsByClassName('editor')[0], { mode: "text/html", value:"<p>mami</p>" }); var dd=document.createElement("button"); dd.innerHTML = "copy"; dd.style="position: absolute; top: 0; right: 0;" dd.onclick = function(){ myCodeMirror.focus(); myCodeMirror.execCommand("selectAll"); ; document.execCommand("copy"); }; document.getElementsByClassName("editor")[0].appendChild(dd); function localLoad(files) { if (files.length == 1) { document.title = escape(files[0].name); var reader = new FileReader(); reader.onload = function(e) { myCodeMirror.setValue(e.target.result); }; reader.readAsText(files[0]); } } </script>

code_mirror Framework_Front-End How-to JavaScript

Mami Mahfoud April 05, 2021

How to add recent posts for blogger using Owl carousel library [ source code ]

https://manajmnt-code.blogspot.com/2021/04/recent-post-for-blogger-using-owl.html

In this example we learn how to create slideshow for recent posts in blogger, we use carousel library to do this, it's best library to make amazing slider

<link href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css' rel='stylesheet' type='text/css'> <link href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css' rel='stylesheet' type='text/css'> <style> .owl-carousel .owl-item img { display: block; width: 100%; height: 40%; } .title-recpost{display:none} .item:hover .title-recpost{ display: flex; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; justify-content: center; align-items: center; color:white; transition: 0.5s; background: #0000008c; text-decoration:none;text-align: center; } .term{position:absolute; left: 4; border-radius: 3px; background:red; color:white; padding: 0 8px;} </style> <div class='owl-carousel recent-post'></div> <script style='display:none' type='text/javascript'> //<![CDATA[ function mycallback(json) { for (var i = 0; i < json.feed.entry.length; i++) { for (var j = 0; j < json.feed.entry[i].link.length; j++) { if (json.feed.entry[i].link[j].rel == 'alternate') { var postUrl = json.feed.entry[i].link[j].href; break;}} var postTitle = json.feed.entry[i].title.$t; var term= json.feed.entry[i].category[0].term; if (json.feed.entry[i].media$thumbnail != null){ var thumbnail= json.feed.entry[i].media$thumbnail.url.replace(/\/s72\-c\//,'/s300/'); var item = '<div class="item"><p class="term">'+term+'</p><img src='+ thumbnail +' /><a class="title-recpost" href=' + postUrl + '>' + postTitle + '</a></div>'; } else{ var item = '<div class="item"><p class="term">'+term+'</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSfffxqDrtATTSoqYBcQWW6Z0RJP1IMY7weebNype2rL16nk918VRuN8scyunDBIwW9zSe_62tTjjSYAbE_hDHTcGTl2RYItRUEkf-on8afHE_rlmsAwgYOAFjQe6Ecz8KyowC4UYjB-DR/s0/logo+manajmnt.png" /><a class="title-recpost" href=' + postUrl + '>' + postTitle + '</a></div>'; } var doc=document.createElement("div"); doc.className="item"; doc.innerHTML=item; document.getElementsByClassName('recent-post')[0].appendChild(doc) } } //]]> </script> <script id='rcp' src='https://sports-themexpose.blogspot.com/feeds/posts/summary?max-results=5&alt=json-in-script&callback=mycallback'></script> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script> <script type='text/javascript'> (function ($) { 'use strict'; $('.owl-carousel').owlCarousel({ loop:true, margin:10, nav:false, dots:false, autoplay:true, autoplayTimeout:1000, autoplayHoverPause:true, responsive:{ 0:{ items:1 }, 600:{ items:3 }, 1000:{ items:5 } } }) })(jQuery); </script>

blogger Framework_Front-End jquery Owl carousel

Mami Mahfoud April 02, 2021

Open text (.txt) from local file and show content in textarea [ source code & demo ]

https://manajmnt-code.blogspot.com/2021/03/open-text-file-and-show-content-in.html

In this example we are using file system API to open a text file from local files and show content into textarea tag
<button id="open"> open File</button> <textarea id="textarea" style="width:100%;height:300px">Free Online HTML editor autocomplete with CSS & JS</textarea> <script> document.getElementById("open").onclick = function() { openFile() } async function openFile() { let fileHandle; [fileHandle] = await window.showOpenFilePicker(); const file = await fileHandle.getFile(); const contents = await file.text(); document.getElementById("textarea").value = contents; } </script>

file-system-access_API Framework_Front-End

Mami Mahfoud March 28, 2021

Save textarea content to local file using file system access API [ demo & source code ]

https://manajmnt-code.blogspot.com/2021/03/save-content-from-textarea-using-file.html

<button id="saveas"> save as</button> <textarea id="textarea" style="width:100%;height:300px">Free Online HTML editor autocomplete with CSS & JS</textarea> <script> document.getElementById("saveas").onclick = function() { saveFile() } async function saveFile() { const opts = { types: [{ description: 'html file', accept: {'text/html': ['.html']}, }], }; const newHandle = await window.showSaveFilePicker(opts); // create a FileSystemWritableFileStream to write to const writableStream = await newHandle.createWritable(); var textarea =document.getElementById("textarea").value await writableStream.write(textarea); // close the file and write the contents to disk. await writableStream.close(); } </script>

in this example i will be share with you how to can save text inside textarea tag in your local files as html file using file system access API

file-system-access_API Framework_Front-End

Mami Mahfoud March 26, 2021