Create Day 21 Ex 1

3 years ago · 341b8c3605
parent cf35af992c
commit 341b8c3605
1 changed files with 104 additions and 0 deletions
--- a/Solutions/Day
+++ b/Solutions/Day
@ -0,0 +1,104 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <title>JavaScript for Everyone:DOM</title>
  </head>
  <body>
    <div class="wrapper">
        <h1>Asabeneh Yetayeh challenges in 2020</h1>
        <h2>30DaysOfJavaScript Challenge</h2>
        <ul>
            <li>30DaysOfPython Challenge Done</li>
            <li>30DaysOfJavaScript Challenge Ongoing</li>
            <li>30DaysOfReact Challenge Coming</li>
            <li>30DaysOfFullStack Challenge Coming</li>
            <li>30DaysOfDataAnalysis Challenge Coming</li>
            <li>30DaysOfReactNative Challenge Coming</li>
            <li>30DaysOfMachineLearning Challenge Coming</li>
        </ul>
    </div>
    <script>
      // const h = document.querySelector('h1')
      // let q = h.textContent.substring(0,30)
      // let year = h.textContent.substring(30,35)
      // let h1 = document.createElement('span')
      // h1.textContent = q
      // let newyear = document.createElement('qwerty')
      // newyear.textContent = year
      // newyear.style.fontSize = '105px'
      // let newh1 = document.createElement('asd')
      // newh1.appendChild(h1)
      // newh1.appendChild(newyear)
      // document.querySelector('h1').replaceWith(newh1)
      const month= ["January","February","March","April","May","June","July",
            "August","September","October","November","December"];
      function randomColor() {
      var randomColor = Math.floor(Math.random()*16777215).toString(16);
      h1new.style.color = "#"+randomColor     
      }
      function color() {
        var randomColor = Math.floor(Math.random()*16777215).toString(16)
        div2.style.padding = '5px'
        div2.style.backgroundColor = '#'+randomColor 
      }
      const h = document.querySelector('h1')
      let check =  h.textContent.substring(0,30)
      let year = h.textContent.substring(30,35)
      let hah = h.textContent;
      h.innerText =  check 
      let h1new = document.createElement('qwerty')
      h1new.textContent = year
      h1new.style.fontSize = '106px'
      h.appendChild(h1new)
     setInterval(randomColor, 1000)
     h.style.textAlign = 'center'
     const li = document.querySelectorAll('li')
     const ul = document.querySelector('ul')
     ul.style.listStyleType = 'none'
     ul.remove()
     let date = document.createElement('date')
     const d = new Date()
     date.textContent = `${month[d.getMonth()]} 0${d.getDay()}, ${d.getFullYear()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`
     const newfkdiv = document.createElement('div')
     newfkdiv.style.display = 'flex'
     newfkdiv.style.justifyContent = 'center'
     const div2 = document.createElement('div')
     div2.innerHTML = date.outerHTML
     newfkdiv.appendChild(div2)
     console.log(newfkdiv)
     setInterval(color, 1000)
     document.body.appendChild(newfkdiv)
     const h2 = document.querySelector('h2')
     h2.style.textAlign = 'center'
     h2.style.textDecoration = 'underline'
     ul.style.display = 'flex'
     ul.style.flexDirection = 'column'
     ul.style.justifyContent = 'center'
     document.body.appendChild(ul)
     for (let i = 0 ; i<li.length;i++) {
      li[i].style.padding = '15px'
      li[i].style.textAlign = 'left'
      li[i].style.margin = '1px'
      if (li[i].textContent.includes('Done')) {
        li[i].style.backgroundColor = 'green'
      }
      else if (li[i].textContent.includes('Ongoing')) {
        li[i].style.backgroundColor = 'yellow'
      }
      else {
        li[i].style.backgroundColor = 'red'
      }
     }
    </script>
  </body>