CS Study/Projects (14) 썸네일형 리스트형 Project 14. Movie Application # 요약 우선, React JS 기반으로 코드는 작성되었습니다. 영화 정보 사이트의 json 파일(https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year)로 부터 평점 8.8이상의 영화들 20개를 첫 페이지에 나열합니다. 각각의 블록 마다 영화에 대한 요약 정보(제목, 개봉년도, 장르, 내용 요약)를 담고 있습니다. 제목을 클릭하면 영화에 대한 세부 정보들도 확인할 수 있습니다. # 프레임 설명 index.html --> index.js --> MovieApp.js --> Detail.js --> Home.js --> Movie.js --> : Rendering 1. index.html에 id가 'root'인 'div' element.. Project 13 : My Chrome #기능 1. 실시간 시간 표시 2. Log-In을 수행하면 username을 로컬 스토리지에 저장하고 Hello (username) 표시 3. To-do list 표시 4. 현재 위치의 날씨 안내 5. 랜덤 명언 하단에 출력 6. 랜덤 배경화면 출력 #구현 .hidden{ display : none; } body{ display : block; height: 100%; margin : 0; padding : 0; } #greeting,#clock{ font-family: 'Open Sans', sans-serif; } input{ background-color: transparent; border-color : transparent; border-bottom-color : white; height : 3.. Project 12 : Youtube Clone Coding Youtube Clone Coding flexbox 활용 Youtube 클론코딩 유튜브 사이트 따라 만들기(HTML+CSS 연습편, 웹 포트폴리오) | 프론트엔드 개발자 입문편: HTML, CSS, Javascript 조회수 0 싫어요 공유 save report 꾸물탕 123566 SUBSCRIBE Wanna go Dessert! Wanna go Beach! Let's go Beach!> /*비디오 상단*/ .navbar{ font-family: 'Oswald', sans-serif; font-size : 18px; display : flex; background-color: black; justify-content: space-between; color : white; } .navbar_logo{ di.. Project 11 : 숨어 있는 강아지 찾기 게임 숨어 있는 강아지 찾기 게임 #규칙 설명 1. 총 24개의 달걀 중 강아지가 숨은 달걀은 8개로 한다. 2. 게임 시작 메뉴를 누르면 게임이 진행된다. - 게임이 진행되면 게임 시작 메뉴를 보이지 않게 숨긴다. - 숨은 강아지를 가진 달걀의 위치를 10초 동안 보여주고 사용자가 기억하도록 한다. - 강아지를 찾는 시간은 20초이다. - 달걀을 클릭하여 숨은 강아지를 찾으면 강아지를 출력하고, 실패하면 실패 수가 증가된다. 3. 8개의 숨은 강아지를 모두 찾으면 승리하며 승리를 출력한다. 그리고 게임 시작 메뉴를 다시 보이게 하여 게임을 계속할 수 있도록 한다. 4. 20초의 시간이 다 되거나 틀린 개수를 5개 초과하면 실패로 끝나며, 찾지 못한 강아지를 출력한다. 이 경우에도 게임 시작 메뉴를 다시 보이.. Project 10 : MP3 구현 MP3 구현 1. play 버튼을 누르면 리스트의 처음부터 곡을 재생하기 시작한다. 2. 한 곡이 끝나면 자동으로 다음 곡을 재생하고 마지막 곡이 끝나면 처음부터 다시 시작한다. 3. next 버튼을 클릭하면 현재 곡을 중단하고 다음 곡으로 넘어간다. 4. 리스트에서 마우스로 선택해도 곡을 연주할 수 있다. built by HTML, CSS, Javascript 오디오 리스트 연속 재생 처음 play버튼을 누르면 리스트에 있는 곡이 연속하여 자동재생됩니다. 마우스로 다른 곡을 선택하면 곡이 바뀝니다. next버튼을 누르면 다음 곡으로 넘어갑니다. EmbraceableYou Strange EmbraceableYou 현재 연주되는 곡명이 보입니다. Project 9 : 단어장 만들기 단어장 만들기 1. 단어 저장 : 영어와 한글 단어 저장, 영어 단어가 이미 있으면 confirm() 창으로 물어본다. 2. 영단어 검색 : 영어 단어를 검색하여 한글 단어 출력, 영어 단어가 없으면 경고창을 출력한다. 3. 단어 삭제 : 영어 단어를 입력받고 아이템을 삭제하고, 영어 단어가 없으면 경고창을 출력한다. 4. 전체 보기 : 로컬 스토리지의 모든 단어를 출력하는 별도의 HTML 웹 페이지를 작성하고, 이 웹 페이지를 새 창에 출력한다. built by HTML, CSS, Javascript 나의 단어장 만들기 영어 한글 단어 저장영단어 검색 단어 삭제전체 보기 나의 단어장 모두 출력 Project 8 : 그림판 구현 그림판 구현 #기능 설명 1. 그림판에는 선만 그릴 수 있다. 2. 마우스 드래깅으로 그림을 그린다. 3. 마우스가 움직이는 동안 마우스 포인터의 좌표를 출력한다. 4. 그림판에는 마우스로 선택 가능한 16개의 색을 가진 팔레트와 컬러 다이얼로그를 출력하여 사용자로부터 색을 입력받는다. 그리고 그 오른편에는 현재 선택된 색을 표시한다. 5. 선의 굵기를 선택하는 기능을 둔다. built by HTML, CSS, Javascript 그림판입니다. 그림을 그려보세요 선굵기 table{ border : 1px solid lightgrey; background-color: rgba(211, 211, 211, 0.822); display : inline-block; } td{ width : 30px; height.. Project 7 : 상하좌우 키로 셀 이동하기 상하좌우 키로 셀 이동하기 상하좌우 키를 이용하여 셀의 배경색을 바꾸면서 3x3 표의 셀 사이를 이동한다. built by HTML, CSS, Javascript 상하좌우 키로 셀 이동하기 이전 1 2 다음
