CSS 기초 공부 1주차(3)

Jquery, Fetch, JS를 활용한 웹페이지 만들기

function movies() {
  let page = $('#page').val();
  let url = `https://api.themoviedb.org/3/movie/popular=${page}`
  fetch(url).then(res => res.json()).then((data) => {
    let movies= data['results']
    for (let i=0; i<movies.length; i++) {
      let row = movies[i]
      let title = row['original_title']
      let rank = i
      let temp_html = `<li>${rank+1}. ${title}</li>`
      $('#movielists').append(temp_html)
    }
  });
} 
1) movies() 함수가 실행 될 때 url에 ${page} 값을 추가하여 
   입력한 page 값을 읽게 설정
2) data의 'result'(key값)을 변수로 선언하고 반복문을 사용
3) 함수가 실행될 때 제목과 순위를 movielists에 
   붙여주는 작업을 실행한다.

  function idCheck() {
  let id = $('#id').val()
  if (id.length < 8) {
    $('#id').css('color','red')![](https://velog.velcdn.com/images/ehdxka3/post/57429c05-4050-49a9-b63f-8a8aa04d3024/image.jpg)

  } else {
    $('#id').css('color','green')
  }
}
1) idCheck() 함수가 실행될 때 조건문을 사용하여 id의 길이를 확인
2) 조건을 충족하지 않으면 색깔을 조정해 로그인페이지에 
   활용되는 함수를 작성해보았다.
   
NetFlix 클론코딩

상단 메뉴, 오늘의 영화, Top 10, 추천영화 4구역으로 나누어 순서대로 작업한다

.gnb {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  padding: 20px;
}

.gnb>a {
  margin: 0px 40px;
  color: white;
}

.gnb>a:last-child {
  margin-right: auto;
  
상단 메뉴 css 작업

fetch(url).then(res => res.json()).then((data) => {
  let movies = data['results']

  // 오늘의 영화
  let rand = Math.floor(Math.random()*10)
  let today_movie = movies[rand]
  let today_img = base_url+today_movie['backdrop_path']
  let today_title = today_movie['title']

  $('#today').css('background-image',`url('${today_img}')`)
  $('#today > h1').text(today_title)
  
  // top 10 영화

  for (let i = 0; i <10; i++) {
    let top_movie = movies[i]
    let top_img = base_url+top_movie['poster_path']

    let temp_html = `<img width="200" src="${top_img}">`

    $('#top').append(temp_html)
  }

  // 추천영화
  for (let i = 0; i <10; i++) {
    let recommend_movie = movies[i]
    let recommend_img = base_url+recommend_movie['poster_path']

    let temp_html = `<img width="200" src="${recommend_img}">`
    if (recommend_movie['vote_average'] > 7.5) {               
      $('#recommend').append(temp_html)
    }
  }