DOM Practice
let mybox = document.getElementById('box1')
mybox.style.backgroundColor = "red"
let myotherbox = document.getElementById('box1s')
myotherbox.style.fontSize = '44px'
let myotherbox1 = document.getElementById('box2')
myotherbox1.style.transform = 'scale(0.5)'
let myotherbox2 = document.getElementById('box2s')
myotherbox2.style.transform = 'scale(2)'
let mybox3 = document.getElementById('box3')
let newdiv = document.createElement('div')
let newclass = document.createAttribute('class')
newclass.value = "circle"
newdiv.setAttributeNode(newclass)
mybox3.appendChild(newdiv)
clearFinished = function(){
document.querySelectorAll('.done').forEach(chore =>{
document.querySelector('#box5 ul').removeChild(chore )
document.querySelector('#box5s ul').appendChild(chore )
})
}
clearFinished()
const addChore = () =>{
let li = document. createElement('li')
li.className = 'undone'
li.innerText = 'prepare dinner'
document.querySelector('#box5 ul').appendChild(li)
document.querySelector('#box5 ul').innerHTML += "<li class = 'undone'>Do things</li>"
}
addChore()
let mybox6 = document.getElementById('box6')
mybox6.innerText = mybox6.innerText.split('').reverse().join("")
let selectword = document.getElementById('box6s')
selectword.innerHTML = selectword.innerHTML.replace('keep', '<em>keep</em>')