Skip to content

Instantly share code, notes, and snippets.

@brittanydionigi
Last active February 11, 2020 17:58
Show Gist options
  • Select an option

  • Save brittanydionigi/a74c66b0cf1b20bf4102341a4f0fd212 to your computer and use it in GitHub Desktop.

Select an option

Save brittanydionigi/a74c66b0cf1b20bf4102341a4f0fd212 to your computer and use it in GitHub Desktop.
<html>
<head>
<style type="text/css">
#main { padding: 100px; background-color: pink; }
.blue { background-color: blue !important; }
</style>
</head>
<body>
<div id="main">Lorem ipsum dolor!</div>
<script type="text/javascript">
function $(selector) {
let selectorType = selector.split('').shift();
let selectorName = selector.substr(1);
let DOMElement = selectDOMElement();
function selectDOMElement() {
if (selectorType === '#') {
return document.getElementById(selectorName);
} else {
return document.querySelectorAll(selectorName);
}
}
return {
addClass(className) {
DOMElement.classList.add(className);
},
removeClass(className) {
DOMElement.classList.remove(className);
},
hasClass(className) {
return DOMElement.classList.contains(className);
},
toggleClass(className) {
if (this.hasClass(className)) {
this.removeClass(className);
} else {
this.addClass(className);
}
}
}
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment