Skip to content

Instantly share code, notes, and snippets.

Avatar
💻
JavaScripting

Angelos Chalaris Chalarangelo

💻
JavaScripting
View GitHub Profile
View copyToClipboard.js
const copyToClipboard = str => {
const el = document.createElement('textarea'); // Create a <textarea> element
el.value = str; // Set its value to the string that you want copied
el.setAttribute('readonly', ''); // Make it readonly to be tamper-proof
el.style.position = 'absolute';
el.style.left = '-9999px'; // Move outside the screen to make it invisible
document.body.appendChild(el); // Append the <textarea> element to the HTML document
const selected =
document.getSelection().rangeCount > 0 // Check if there is any content selected previously
? document.getSelection().getRangeAt(0) // Store selection if found
View copyToClipboard.js
const copyToClipboard = str => {
const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
View copyToClipboard.js
const copyToClipboard = str => {
const el = document.createElement('textarea');
el.value = str;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
};
@Chalarangelo
Chalarangelo / index.json
Created Nov 29, 2017
Metadata structure
View index.json
{
"lang": "en",
"title": "Index",
"stylesheets": ["./css/style.css"],
"scripts": ["./js/main.js"],
"charset": "utf-8",
"description": "This is a page",
"keywords": "page, sample",
"author": "None",
"favicon": "./images/favicon.png",
View card-basic-syntax.json
{'code': '&lt;div class="row"&gt;\r\n'
' &lt;div class="card"&gt;\r\n'
' &lt;div class="section"&gt;\r\n'
' &lt;h3&gt;Card Title&lt;/h3&gt;\r\n'
' &lt;p&gt;Card content...&lt;/p&gt;\r\n'
' &lt;/div&gt;\r\n'
' &lt;/div&gt;\r\n'
' &lt;div class="card"&gt;\r\n'
' &lt;div class="section"&gt;\r\n'
' &lt;h3&gt;Card Title&lt;/h3&gt;\r\n'
View App.jsx
<input type="search" className="searchBox" onChange={event => {
if(event.currentTarget.value) this.searchPost(event.currentTarget.value);
else this.viewAll();
}}/>
View reducer.js
const posts = (state = {data: [], selected: []}, action) => {
let posts = {data: [], selected: []};
switch(action.type){
case VIEW_ALL:
Object.assign(posts.data, state.data);
posts.selected = [];
return posts;
case SEARCH_POST:
Object.assign(posts.data, state.data);
let search = new JsSearch.Search('date-added');
View App.jsx
// Import necessary packages...
class App extends Component {
// Constructor and methods...
// Mounting the component causes an action
componentDidMount(){
fetch("https://jsonbin.io/b/59f721644ef213575c9f6531")
.then( response => response.json())
.then( data => {
let posts = {
View render.jsx
let posts = '', postLinks = '';
if(this.state.posts && this.state.posts.data){
posts = this.state.posts.data.map(post => {return <Post post={post} key={"post_"+post.id}/>;});
postLinks = this.state.posts.data.map(post => {return <a href={"#"+post.id} key={"post_link_"+post.id} className="button">{post.title}</a>})
}
View App.js
componentDidMount(){
fetch("https://jsonbin.io/b/59f721644ef213575c9f6531")
.then( response => response.json())
.then( data => { this.setState({posts: data})});
}