We Changed to Concept of out project, Before we were making services similar with "Steezy.co" , in Korea version

But Since , "Class101" already launched the service with that, we will think of making "Everytime version of Dance"

To Do

1. Dynamic Replacement in Html page : Change html page without change in url > Create Tabs

I want to change html page, if I click "Video", "Mi Board", "Tu Board"...
but without change in url,
that is , I want to make Dynamic Replacement in Html page.

** Reference Link
https://www.youtube.com/watch?v=rSEgjpMZXIc

2.Scroll to specific element

Pb. Automatically moving to "Videos" tag

What I want is to stay in current scroll but, it is moving downward

The Reason is, I am using gref, which means, it is inevitable that screen moves to specific point,

Solution : event.preventDefault()

<script type="text/javascript">
        function onTabClick(event) {
        event.preventDefault()
           
        let activeTabs = document.querySelectorAll('.active');
        // deactivate existing active tab and panel
        activeTabs.forEach(function(tab) {
            tab.className = tab.className.replace('active', '').replace(' ','');
        });
        // activate new tab and panel
        event.target.parentElement.className += ' active';
        document.getElementById(event.target.href.split('#')[1]).className += ' active';

        console.log("Scroll working")
        window.scrollTo(0,0); 
    }
        const element = document.getElementById('nav-tab');
        element.addEventListener('click', onTabClick);
    </script>

3. Putting data Getting data from MongoDB and display through ejs

I want put name, .... specific infos related with this user.
That is, I want to put element into this ejs from the mongodb

router.get('/api/users/mypage', function( req , res){

    var x_auth = req.cookies.x_auth
    console.log('x_auth',x_auth)
    console.log("accessing to mypage")
    connection.db.collection("users", function(err, collection){
        collection.find({token:x_auth}).toArray(function(err, data){
            //검색 개수 보여주기
            // data는 collection에서 user , 혹은 dancer 정보를 받아오는 것이고, 그것을 mypageDancer 라는 router 에다가 넘겨주는 것이다 
            // 아래 코드를 통해, mypage.ejs 에서, mongodb에 있는 내용의 data 들을 value 값으로 넣어줄 수가 있는 것이다 
            
        res.render('mySpace',data[0])
        })   
    });
});