과제

makeobject.js

var healthObj = { showHealth : function() {
		console.log(this.name + "-" + this.lastTime)  
 	}
}

function makeObject(obj,proto){

    Object.keys(obj).forEach(function(key){ 
		obj[key] = {
			value : obj[key]
		}
    });
    return Object.create(proto, obj);
}

var myHealth = makeObject({
	'name' : "달리기",
	'lastTime' : "23:10"
}, healthObj);

sliding.js

document.addEventListener('DOMContentLoaded', function(event) {
    console.log('DOM fully loaded and parsed');

    const circleArr = ['s1','s2','s3','s4','s5','s6','s7','s8','s9','s10','s11','s12'];
    const screen = new slidingScreen('circleBox',circleArr,'slidesPrev','slidesNext');

});


class slidingScreen{

	constructor(container,circleArr,prevButton,nextButton){
		this.container = container;
		this.circleArr = circleArr;
		this.prevButton = prevButton;
		this.nextButton = nextButton;
		this.init();
	}

	init(){
		this.container = document.getElementById(this.container);
		this.prevButton = document.getElementById(this.prevButton);
		this.nextButton = document.getElementById(this.nextButton);
		this.setSwitchScreen();
		this.setNextSlideButton();
		this.setPrevSlideButton();
	}

	setSwitchScreen(){
        this.container.addEventListener("click",function(e) {
            if(e.srcElement.nodeName ==="A"){
				this.removeSelect();
                e.target.classList.add('selectedCircle');
				this.addSelect('selectedCircle');
            }
        }.bind(this));
	}

	setNextSlideButton(){
		this.nextButton.addEventListener('click',function (e) {
            const beforeEle = this.removeSelect();

            let index=this.circleArr.indexOf(beforeEle.getAttribute('name'))
            if(index==11) index=0
            else index = index +1;
            document.getElementsByClassName('c'+(index+1))[0].classList.add('selectedCircle');
            this.addSelect('selectedCircle')
        }.bind(this));
	}

	setPrevSlideButton(){
        this.prevButton.addEventListener('click',function (e) {
            const beforeEle = this.removeSelect();
            let index=this.circleArr.indexOf(beforeEle.getAttribute('name'))
            if(index==0) index=11
            else index = index -1;
			document.getElementsByClassName('c'+(index+1))[0].classList.add('selectedCircle');
            this.addSelect('selectedCircle')


        }.bind(this));
	}


	removeSelect(){
		const ele = document.getElementsByClassName("selectedCircle")[0];
		ele.classList.remove("selectedCircle");
		ele.style.backgroundColor='white';
		const eleName = ele.getAttribute('name')
		this.setScreenAnimation(eleName,1)

		return ele;
	}

	addSelect(className){
		const ele = document.getElementsByClassName(className)[0];
		ele.style.backgroundColor='skyblue';
		const eleName=ele.getAttribute('name')
		this.setScreenAnimation(eleName,0)
	}

	setScreenAnimation(classname,value){
    	const element= document.getElementsByClassName(classname)[0];
        let count =0;
        const func = () => {
            if(count === 51) return;
            if(value == 1) element.style.opacity=1-count*0.02; //fadein , 1
			else element.style.opacity=count*0.02; // fadeout , 0
            count++;
            requestAnimationFrame(func);
        }
        requestAnimationFrame(func);
        element.style.opacity = 1-value;
	}
}