The pursuit of tidy code

Developer
Ali
Size
2,437 Kb
Views
48,576
  1. The pursuit of tidy code Previews
  2. The pursuit of tidy code HTML Codes
  3. The pursuit of tidy code CSS Codes
  4. The pursuit of tidy code JS Codes

How do I make an the pursuit of tidy code?

Uses [data-js] as a selectors.I'm using this in almost all of my projects now. Saves from creating 'js-selector' classes and keeps code clean.. What is a the pursuit of tidy code? How do you make a the pursuit of tidy code? This script and codes were developed by Ali on 07 August 2022, Sunday.

The pursuit of tidy code Previews
IQ Test

The pursuit of tidy code - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The pursuit of tidy code</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h2>The pursuit of tidy code</h2> <p>Uses [data-js] as a selector</p> <a href="#" class="btn" data-js="toggle-green">Click me</a> <p>I'm using this in almost all of my projects now. Saves from creating 'js-selector' classes and keeps code clean</p> <p>Working on a version that's not dependent on jQuery just now</p> <p>Credit due <a href="http://toddmotto.com/data-js-selectors-enhancing-html5-development-by-separating-css-from-javascript/" target="_blank">here</a>. Great concept.</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

The pursuit of tidy code - Script Codes CSS Codes

body { background: #f2f2f2; color: #666;
}
a { color: #666;
}
.container { width: 80%; margin: 3em auto; text-align: center;
}
.btn { padding:10px 20px; border-radius:5px; display:inline-block; text-decoration:none; background: #EFAB27; border: 1px solid transparent; color:#FFF; margin: 0 0 1em 0;
}
.btn:hover { border: 1px solid #EF8533; text-shadow: 1px 1px #EF6938; background: #efab27; background: linear-gradient(#efab27 0%, #fc981e 100%);
}
.green { background: #52CC8D; border: 1px solid transparent; text-shadow: 1px 1px #52BA8D;
}
.green:hover { border: 1px solid #39B54A; text-shadow: 1px 1px #04A04A; background: #52cc8d; background: linear-gradient(to bottom, #52cc8d 0%,#3bba6f 100%);
}

The pursuit of tidy code - Script Codes JS Codes

$.dataJs = function(el){ return $('[data-js=' + el + ']');
};
$.dataJs('toggle-green').on('click', function() { $(this).toggleClass('green');
});
docum
The pursuit of tidy code - Script Codes
The pursuit of tidy code - Script Codes
Home Page Home
Developer Ali
Username alistairtweedie
Uploaded August 07, 2022
Rating 3
Size 2,437 Kb
Views 48,576
Do you need developer help for The pursuit of tidy code?

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!

Ali (alistairtweedie) Script Codes
Name
Animated svg - Pintsize logo
Social buttons
Mobile first social buttons with no iframe
Off canvas slider concept
Responsive gallery
Ccs thunder cloud
Twitter buttons without the iframe
Colors
Sweet Ass Buttons
Cookie Fun
Create amazing captions 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!