자바스크립트 문법 2 - 브라우저에서의 자바스크립트 해답

 

* 연습과제 1

// 컨테이너 생성
const photoContainer = document.createElement('div')
photoContainer.id = 'photo-container'

// 컨테이너에 추가하기
for(let i=0; i<5; i++){
    // 사진리스트 생성하기
    const photoItem = document.createElement('div')
    photoItem.className = 'photo-item'

    const img = document.createElement('img')
    img.src = 'http://localhost:5500'
    img.alt = 'photo'

    photoItem.appendChild(img)

    photoContainer.appendChild(photoItem)
}

// HTML 문서에 생성한 DOM 마운트하기
const root = document.getElementById('root')
root.appendChild(photoContainer)

// 클래스명이 photo-item 인 img 요소 검색하기
const imgs = document.querySelectorAll('.photo-item img')
console.log(imgs[0].alt)

 

* 연습과제 2

const imgSrc = 'data:image/jpeg;base64,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'
// 네비게이션바 만들기

// 메뉴 만들기
const menu = document.createElement('div')
menu.id = 'menu'

for(let i=0;i<3;i++){
    const bar = document.createElement('div')
    bar.className = 'bar'
    menu.appendChild(bar)
}
console.log(menu)

// 스크린모드 만들기
const circleBtn = document.createElement('div')
circleBtn.id = 'circle-btn'
const screenMode = document.createElement('div')
screenMode.id = 'screen-mode'

screenMode.appendChild(circleBtn)
console.log(screenMode)

// 프로필 이미지 만들기
const img = document.createElement('img')
img.src = imgSrc
const profileMenu = document.createElement('div')
profileMenu.id = 'profile-menu'
profileMenu.appendChild(img)
console.log(profileMenu)

// 네비게이션바에 자식요소 추가하기
const nav = document.createElement('div')
nav.id = 'nav'
nav.append(menu, screenMode, profileMenu)
console.log(nav)

// 헤딩 만들기
const h1 = document.createElement('h1')
h1.innerText = 'My photo gallery'
const h4 = document.createElement('h4')
h4.innerText = 'my old memories from my life'

const heading = document.createElement('div')
heading.id = 'heading'
heading.append(h1, h4)

const input = document.createElement('input')
input.type = 'text'
input.placeholder = 'Search photo ...'

const search = document.createElement('div')
search.id = 'search'

search.appendChild(input)
console.log(search)

// 헤딩과 서치를 center 에 추가하기
const center = document.createElement('div')
center.id = 'center'
center.append(heading, search)

const title = document.createElement('div')
title.id = 'title'
title.appendChild(center)
console.log(title)

// 사진 리스트 만들기
const photoList = document.createElement('div')
photoList.id = 'photo-list'

for(let i=0;i<9;i++){
    const img = document.createElement('img')
    img.src = imgSrc
    const photoCard = document.createElement('div')
    photoCard.className = 'photo-card'
    photoCard.appendChild(img)

    const photoName = document.createElement('div')
    photoName.className = 'photo-name'
    photoName.innerText = '이름'

    const photoContainer = document.createElement('div')
    photoContainer.className = 'photo-container'

    photoContainer.append(photoCard, photoName)

    photoList.appendChild(photoContainer)
}
// 모달창 만들기
const header = document.createElement('div')
header.id = 'header'
header.innerText = 'Food Recipe'

const p = document.createElement('p')
p.innerText = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Error modi nesciunt facilis tempora qui temporibus, odio dolores reiciendis, quis voluptate ducimus quam. Voluptatum omnis, rem quam porro ipsam nam dolorum. Laudantium aliquam suscipit, nobis exercitationem neque inventore incidunt quos possimus numquam! Temporibus adipisci, illum in fuga earum magnam consequatur minima. Neque, labore esse tempora tenetur doloribus beatae. Facere, dolorum incidunt? Nulla facere earum fuga doloremque magni. Aspernatur excepturi ipsam commodi in ullam? Dolore, ipsa, a dignissimos, vel nulla alias accusantium qui voluptatibus officia minus est libero! Adipisci, fugit? Architecto, quia!'

const body = document.createElement('div')
body.id = 'body'

body.appendChild(p)

const button = document.createElement('button')
button.innerText = 'Close'

const footer = document.createElement('div')
footer.id = 'footer'
footer.appendChild(button)

const modalWindow = document.createElement('div')
modalWindow.className = 'modal-window'

modalWindow.append(header, body, footer)

// 바디에 nav, title, photoList, modalWindow 추가하기
document.body.append(nav, title, photoList, modalWindow)

 

* 연습과제 3~7

// 연습과제 3
const subHeading = document.querySelector('#heading h4')
subHeading.innerText = '내 인생의 좋은 추억들'

// 연습과제 4
const profileMenuSearched = document.getElementById('profile-menu')
const profileImg = profileMenuSearched.querySelector('img')
// console.log(profileImg)
profileImg.src = imgSrc

// 연습과제 5
const photoItem = document.querySelectorAll('.photo-card img')[2]
// console.log(photoItem)
photoItem.src = 'data:image/jpeg;base64,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'

// 연습과제 6
const photoNameSearched = document.querySelectorAll('.photo-name')[4]
// console.log(photoNameSearched)
photoNameSearched.innerText = 'sunrise'

// 연습과제 7
const modalWindowSearched = document.querySelector('.modal-window')
// modalWindowSearched.className = 'modal-window hide'
modalWindowSearched.classList.add('hide')