<!DOCTYPE html>
<html>

<head>
    <title>Document Object Model:30 Days Of JavaScript</title>
    <link href="https://fonts.googleapis.com/css?family=Lato:300, 400,400i,700,700i&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap" rel="stylesheet">
</head>

<body>

    <div class="wrapper">
        <h1>Asabeneh Yetayeh challenges in <span>2020</span></h1>
        <h2>30DaysOfJavaScript Challenge</h2>
        <p></p>
        <ul>
            <li>30DaysOfPython Challenge Done</li>
            <li>30DaysOfJavaScript Challenge Ongoing</li>
            <li>30DaysOfReact Challenge Coming</li>
            <li>30DaysOfReactNative Challenge Coming</li>
            <li>30DaysOfFullStack Challenge Coming</li>
            <li>30DaysOfDataAnalysis Challenge Coming</li>
            <li>30DaysOfMachineLearning Challenge Coming</li>
        </ul>
    </div>

    <script>
        const hexaColor = () => {
            const str = '0123456789abcdef'
            let hexa = '#'
            let index
            for (let i = 0; i < 6; i++) {
                index = Math.floor(Math.random() * str.length)
                hexa += str[index]
            }
            return hexa
        }

        const showDateTime = () => {
            const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
                'October', 'November', 'December'
            ]
            const now = new Date()
            const year = now.getFullYear()
            const month = months[now.getMonth()]
            const date = now.getDate()
            let hours = now.getHours()
            let minutes = now.getMinutes()
            let seconds = now.getSeconds()
            if (hours < 10) {
                hours = '0' + hours
            }
            if (minutes < 10) {
                minutes = '0' + minutes
            }
            if (seconds < 10) {
                seconds = '0' + seconds
            }

            const dateMonthYear = `${month} ${date}, ${year}`

            const time = hours + ':' + minutes
            const fullTime = dateMonthYear + ' ' + time
            return fullTime + `:${seconds}`
        }

        const wrapper = document.querySelector('.wrapper')
        const year = document.querySelector('span')
        const time = document.querySelector('p')
        wrapper.style.width = '50%'
        wrapper.style.margin = 'auto'
        const title = document.querySelector('h1')
        const subTitle = document.querySelector('h2')
        title.style.textAlign = 'center'
        title.style.fontFamily = 'Montserrat'
        title.style.fontWeight = 500

        subTitle.style.textAlign = 'center'
        subTitle.style.fontFamily = 'Montserrat'
        subTitle.style.fontWeight = 300
        subTitle.style.textDecoration = 'underline'


        time.style.textAlign = 'center'
        time.style.fontFamily = 'Montserrat'
        time.style.fontWeight = 400

        setInterval(() => {
            year.style.color = hexaColor()
            year.style.fontSize = '96px'
            year.style.fontWeight = 700;
            time.textContent = showDateTime()
            time.style.background = hexaColor()
            time.style.width = "25%"
            time.style.margin = 'auto'
            time.style.padding = '10px'

        }, 1000)



        const ul = document.querySelector('ul')
        const lists = document.querySelectorAll('li')
        for (const list of lists) {
            list.style.listStyle = 'none'
            list.style.padding = '25px'
            list.style.margin = '3px'
            list.style.fontFamily = 'Montserrat'
            list.style.fontWeight = 300;
            list.style.letterSpacing = '0.0625em'

            if (list.textContent.includes('Done')) {
                list.style.background = '#21bf73'
            } else if (list.textContent.includes('Ongoing')) {
                list.style.background = '#fddb3a'



            } else {
                list.style.background = '#fd5e53'

            }

        }
    </script>
</body>

</html>