Whyutils

Developer
Yvan Dumont
Size
3,752 Kb
Views
10,120
  1. Whyutils Previews
  2. Whyutils HTML Codes
  3. Whyutils CSS Codes
  4. Whyutils JS Codes

How do I make an whyutils?

Stuff I expect from the get go for fast prototyping. No pretentions. No warranty. You can use at your own risk.. What is a whyutils? How do you make a whyutils? This script and codes were developed by Yvan Dumont on 08 December 2022, Thursday.

Whyutils Previews
IQ Test

Whyutils - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>whyutils</title> <link href="https://fonts.googleapis.com/css?family=Montserrat|Open Sans" rel="stylesheet"> <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> <header> <h1> WhyUtils </h1> <div class="sub-title"> You don't need 'em; So why use 'em? </div>
</header>
<main> <ul class="reasons"> <li class="reasons--item"> Not for production, barely for prototyping. </li> <li class="reasons--item"> It extends the DOM: javascript stays concsise. </li> <li class="reasons--item"> Isn't extending the DOM bad? </li> <li class="reasons--item"> Yes, but it's faster.™ </li> </ul>
</main> <script src="js/index.js"></script>
</body>
</html>

Whyutils - Script Codes CSS Codes

body { background: -webkit-linear-gradient(right, #414345, #232526); background: linear-gradient(to left, #414345, #232526); font-family: 'Montserrat'; color: white;
}
header { text-align: center;
}
h1 { padding: 2em 2em 0.5em; font-size: 26px;
}
.sub-title { font-size: 14px; margin-bottom: 2em;
}
main { max-width: 800px; margin: auto; font-family: 'Open Sans';
}
.reasons { display: inline-block; max-width: 100%; margin: 0 auto; list-style: decimal; padding-left: 2em;
}
.reasons--item:not(:first-child) { margin-top: 1em;
}

Whyutils - Script Codes JS Codes

console.log('whyUtils');
// DOM 'Element' utilities
(function(el){ 'use strict'; var ep = el.prototype; ep.hasClass = function(className){ return this.classList.contains(className); }; ep.addClass = function(className){ return this.classList.add(className); }; ep.removeClass = function(className){ return this.classList.remove(className); }; ep.toggleClass = function(className){ var hasClass = this.classList.contains(className); if(hasClass){ this.classList.remove(className); return; } this.classList.add(className); }; ep.find = function(selector){ return this.querySelector(selector); }; ep.findAll = function(selector){ return this.querySelectorAll(selector); }; ep.empty = function(){ while (this.firstChild) { this.removeChild(this.firstChild); }; }; ep.datasetExtend = function(){ var merge = function (source, obj) { for (var prop in obj) { source.dataset[prop] = obj[prop]; } }; for (var i = 0; i < arguments.length; i++) { var obj = arguments[i]; merge(this, obj); } }
})(HTMLElement);
// 'window' utilities
(function(w){ 'use strict'; w.$ = function(selector){ return document.querySelector(selector); }; w.$$ = function(selector){ return document.querySelectorAll(selector); }; w.$ce = function(tag, attributes){ var newElement = document.createElement(tag); for(var prop in attributes){ newElement.setAttribute(prop, attributes[prop]); } return newElement; };
})(window);
// pure utilities
(function($){ 'use strict'; var p = $.prototype; $.extend = function () { // From gomakethings.com/vanilla-javascript-version-of-jquery-extend/ var extended = {}, deep = false, i = 0, length = arguments.length; if (Object.prototype.toString.call( arguments[0] ) === '[object Boolean]' ) { deep = arguments[0]; i++; } var merge = function (obj) { for ( var prop in obj ) { if ( Object.prototype.hasOwnProperty.call( obj, prop ) ) { // If deep merge and property is an object, merge properties if ( deep && Object.prototype.toString.call(obj[prop]) === '[object Object]' ) { extended[prop] = $.extend(true, extended[prop], obj[prop]); } else { extended[prop] = obj[prop]; } } } }; for ( ; i < length; i++ ) { var obj = arguments[i]; merge(obj); } return extended; };
})(window.$);
(function(m){ m.getRandomArbitrary = function(min, max) { return parseInt(Math.random() * (max - min) + min); }
})(Math);
(function(c){ c.px = function(value, semiColon) { var result = value + 'px'; result = result + (!!semiColon ? ';' : ''); return result; }
})(window.CSS = window.CSS || {});
Whyutils - Script Codes
Whyutils - Script Codes
Home Page Home
Developer Yvan Dumont
Username LeYvan
Uploaded December 08, 2022
Rating 3
Size 3,752 Kb
Views 10,120
Do you need developer help for Whyutils?

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!

Yvan Dumont (LeYvan) Script Codes
Name
Drive-Space-Info
Tile Map Test
Prodjask-Vue Exercice
A Pen by Yvan Dumont
Create amazing video scripts 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!