steemcontest.com development update (Added expired contest page, added logo at navbar and change Contest Card display)

This is the second update report in the development of steemcontest.com. In this update, there are several updates that we will report. Among them: we have changed the appearance of the card that displays each contest, added a logo to the navbar and added a page to display the contest that has expired.

Change Contest Card display

Previously, the card to display the list of contests on steemcontest.com used a border. Now we have removed the border and replaced it with a shadow. So it looks more elegant now than before.

.contes{
    border: none!important;
    background: #fff;
    box-shadow: 0 4px 6px 0 rgba(0,0,0,.2);
}

Added expired contest page

on this page, you will see later contests that have expired or contests whose time has expired. With this, you can see the results of the contest and if you participate you can check it here.

To display a contest that has expired. We inserted the code to check if the contest's end time has passed the current time. Every contest that meets these requirements, the system will automatically change the status of the contest to "ended". Then to display on the "expired contest" page, we only need to filter the contests with "ended" status. Here's the code snippet and the results:

Code to check when the contest has ended:

checkEnd(){
        var db=firebase.firestore().collection('/contests')
        .orderBy('added', 'desc')
        .where("status","==", "paid");

        db.get().then(contest=>{
            contest.docs.forEach(s=>{
                var now=new Date();
                var inday=(s.data().end.toDate().getTime() - now.getTime() ) / (1000 * 3600 * 24)
                if(inday<=0){
                    var db=firebase.firestore().collection('/contests');
                    db.doc(s.data().id).update({
                        status:'ended'
                    })
                }
            })
        
        })
    }

code to display expired contest

getData(){
        var db=firebase.firestore().collection('/contests')
        .orderBy('end', 'desc')
        .where("status","==", "ended")

        db.get().then(contest=>{
            var dataall=[];
            contest.docs.forEach(s=>{
                var now=new Date();
                var inday=(s.data().end.toDate().getTime() - now.getTime() ) / (1000 * 3600 * 24)
                // console.log(s.data().end.toDate().getTime()- new Date.toDate().getTime())
                dataall.push({'prize':s.data().prize, 'end':inday, 'title':s.data().title, 'thumbnail':s.data().thumbnail, 'id':s.data().id, 'link':s.data().link, 'user':s.data().user, 'category':s.data().category})
            })
            this.setState({contests:dataall})
        
        })
    }

Added Steemcontest logo to navbar

few days ago, @arie.steem and @podanrj launched a logo for steemcontest.com. The logo is very cool, you can see it in @arie.steem's post

In addition to the logo, they have also launched a border for posts that you can use in your contest. please check the post to get it. For the first time, we are just trying to use the logo on the navbar and we will continue in other sections in the next update. Here's the before and after view of the logo.

Proof of work

You can check our commit here : https://github.com/sogatanco/steem-contest/commits/master

Can we get the program code from steemcontest.com ?

steemcontest.com is open source, so we provide every program code to the public. if you want to view, download, run our project on your local computer or you want to modify it. You can directly visit our github at: https://github.com/sogatanco/steem-contest

We really need your advice

In order to achieve the perfection of this project, we really hope for your suggestions. If you have an idea to add a feature on the steemcontest site, don't hesitate to contact us immediately. We really hope to make steemcontest.com more perfect in the future.

Kind Regards

@sogata / Steemcontest Dev

Our Other Project :

• Bank STEEM : STEEM / SBD exchange site with IDR (Indonesian Rupiah), and vice versa.
• Promosteem.Com :promosteem community tool to see the delegates and member status of the community