Uber Interview Question
Front-end Software EngineersCountry: United States
Interview Type: Phone Interview
You can achieve this by using below code
<div id="sample">Sample</div>
<script>
function addClass(id){
var elt = document.getElementById(id);
for(let i =1 ; i<arguments.length ; i++){
elt.classList.add(arguments[i]);
}}
addClass('sample' , 'sample','sample_1', 'x');
</script>
Here you are using arguments which is an Array-like object accessible inside functions that contains the values of the arguments passed to that function. And classList.add to add class and classList.remove to remove class.
The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element.
Using classList is a convenient alternative to accessing an element's list of classes as a space-delimited string via element.className.
const addClass = (el, cls) => {
let classes = el.className.split(/\s+/).reduce((classes, cls) => {
classes[cls] = true;
return classes;
}, {});
if (!(cls in classes)) {
el.className = Object.keys(classes).join(' ') + ' ' + cls;
}
};
const removeClass = (el, cls) => {
let classes = el.className.split(/\s+/).reduce((classes, cls) => {
classes[cls] = true;
return classes;
}, {});
if (cls in classes) {
delete classes[cls];
el.className = Object.keys(classes).join(' ');
}
}
const myJquery = (el) => ({
addClass: (className) => {
el.classList.add(className);
return myJquery(el);
},
removeClass: (className) => {
el.classList.remove(className);
return myJquery(el);
}
});
const $ = (el) => myJquery(document.querySelector(el));
$('#container').addClass('blue').addClass('green').removeClass('blue');
<div id="sample">Sample</div>
- Pradanya February 06, 2019<script>
function addClass(id){
var elt = document.getElementById(id);
for(let i =1 ; i<arguments.length ; i++){
elt.classList.add(arguments[i]);
}}
addClass('sample' , 'sample','sample_1', 'x');
</script>