Social color-namer

Developer
David A.
Size
6,112 Kb
Views
8,096
  1. Social color-namer Previews
  2. Social color-namer HTML Codes
  3. Social color-namer CSS Codes
  4. Social color-namer JS Codes

How do I make an social color-namer?

What is a social color-namer? How do you make a social color-namer? This script and codes were developed by David A. on 05 January 2023, Thursday.

Social color-namer Previews
IQ Test

Social color-namer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>social color-namer</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Baptise a color</h1>
<div class="colors">
</div>
<a class="github-corner" href="//github.com/meodai/color-names" target="_blank" aria-label="View source on Github"> <svg width="80" height="80" viewbox="0 0 250 250" aria-hidden="true"> <path class="triange" d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path> <path class="octo-arm" d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" style="transform-origin: 130px 106px"></path> <path class="octo-body" d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"></path> </svg></a> <script src='https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.3.6/papaparse.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Social color-namer - Script Codes CSS Codes

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Space+Mono:400,700");
h1 { text-align: center; font-size: 4vw; padding: 2rem;
}
body, html, input { font-family: 'Space Mono', monospace;
}
.colors { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100vw; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.color { vertical-align: middle; margin: 1vw 2vw 2vw 1vw; padding-top: 30%; box-shadow: 0 0 0 4px #000, 1.5vw 1.75vw 0 0 #000;
}
.color strong { display: none;
}
.color a { display: none; background: #fff; color: #212121; text-decoration: none; padding: 0.75rem .75rem; line-height: 1; margin-top: 4px; position: relative;
}
.color a::after { content: "➽"; position: absolute; right: .75rem; font-size: 2rem; line-height: 0.5em; color: lime;
}
.color input.ok + a { display: -webkit-box; display: -ms-flexbox; display: flex;
}
input { margin: 0 -4px -4px; vertical-align: middle; background: white; border: none; box-shadow: inset 0 0 0 4px #212121; font-size: 1.5rem; padding: 0.25rem .75rem; display: block; width: auto; min-width: 0; -moz-appearance: none; appearance: none; -webkit-appearance: none; border-radius: none;
}
input.error { background: red;
}
input.ok { background: lime;
}
.github-corner { color: #000; position: fixed; top: 0; right: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: 333ms -webkit-transform cubic-bezier(0.7, 0.3, 0.25, 1.15) 1200ms; transition: 333ms -webkit-transform cubic-bezier(0.7, 0.3, 0.25, 1.15) 1200ms; transition: 333ms transform cubic-bezier(0.7, 0.3, 0.25, 1.15) 1200ms; transition: 333ms transform cubic-bezier(0.7, 0.3, 0.25, 1.15) 1200ms, 333ms -webkit-transform cubic-bezier(0.7, 0.3, 0.25, 1.15) 1200ms; will-change: transform;
}
.github-corner svg { width: 4rem; height: 4rem;
}
.github-corner path { -webkit-transition: 200ms fill linear; transition: 200ms fill linear; will-chrange: fill;
}
.github-corner .octo-arm,
.github-corner .octo-body { fill: #fff;
}
.github-corner .triange { fill: #212121;
}
.github-corner:hover .octo-arm { -webkit-animation: octocat-wave 560ms ease-in-out; animation: octocat-wave 560ms ease-in-out;
}
@-webkit-keyframes octocat-wave { 0%,100% { -webkit-transform: rotate(0); transform: rotate(0); } 20%,60% { -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } 40%,80% { -webkit-transform: rotate(10deg); transform: rotate(10deg); }
}
@keyframes octocat-wave { 0%,100% { -webkit-transform: rotate(0); transform: rotate(0); } 20%,60% { -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } 40%,80% { -webkit-transform: rotate(10deg); transform: rotate(10deg); }
}
@media (max-width: 500px) { .github-corner:hover .octo-arm { -webkit-animation: none; animation: none; } .github-corner .octo-arm { -webkit-animation: octocat-wave 560ms ease-in-out; animation: octocat-wave 560ms ease-in-out; }
}

Social color-namer - Script Codes JS Codes

'use strict';
var $colorsList = document.querySelector('.colors');
var xhr = new XMLHttpRequest();
var colorList = [];
var mergeSheet = undefined, emptyColors = undefined, emptyColorsHexes = [];
xhr.open('GET', 'https://docs.google.com/spreadsheets/d/e/2PACX-1vQube6Y0wHyEtJnjg0eU3N7VseoxVnD4L9uDqvWZdl_tzzrHDVN10IPP7cdFipX8j70atNMLfPCB0Q6/pub?gid=1188624475&single=true&output=csv');
xhr.onload = function (e) { if (xhr.status === 200) { mergeSheet = Papa.parse(xhr.responseText).data; emptyColors = mergeSheet.filter(function (col) { return !col[0]; }); emptyColors.forEach(function (col) { emptyColorsHexes.push(col[2]); }); generateColors(emptyColorsHexes); } else { console.log(xhr.status); }
};
xhr.send();
function generateColors(colors) { var colorsHTML = ''; colors.forEach(function (col) { if (col) { colorsHTML += '<div class="color" style="background-color:' + col + '"><strong>' + col + '</strong><input type="text" placeholder="name"></input><a href="#" target="_blank">Submit</a></div>'; } }); $colorsList.innerHTML = colorsHTML;
};
document.addEventListener('change', function (e) { if (e.target.tagName === 'INPUT') { if (e.target.value) { e.target.classList.add('ok'); e.target.classList.remove('error'); var hex = e.target.parentElement.querySelector('strong').innerHTML; e.target.parentElement.querySelector('a').setAttribute('href', 'https://twitter.com/intent/tweet?text=I have an awesome name for ' + escape(hex) + '
Social color-namer - Script Codes
Social color-namer - Script Codes
Home Page Home
Developer David A.
Username meodai
Uploaded January 05, 2023
Rating 3.5
Size 6,112 Kb
Views 8,096
Do you need developer help for Social color-namer?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

David A. (meodai) Script Codes
Name
Cymk logo generator
All the 16k color names from the color-name-list API
Cubehelix ticktack.js
Media Queries on Crack
Color Watch
Trippy perlin
Pseudo 3d css clouds
DOM explosions
Textmask over random clouds animation
Better Grrif Player
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!