본문 바로가기

컴퓨터/프로젝트

(6)
Calculator Historyx Calculator
계산기 웹 만들기(Calculator) 1. 소개 웹 사이트에서 간단한 계산기를 만들 것인데 후위 표기법으로 작동하는 계산기를 만들어 볼 것이다. 2. 코드 및 구현 See the Pen Calculator by fdoom (@fdoom) on CodePen. (구현) 3. 구현 과정 const data = ["(", ")", "C", "%", "7", "8", "9", "÷", "4", "5", "6", "×", "1", "2", "3", "-", '.', "0", "=", "+"]; 먼저 data라는 변수에 계산기 버튼의 요소들을 저장한다. window.onload = function () { for (let i = 0; i < data.length; i++) create(i); } 그리고 웹 페이지가 열릴 때 create라는 함수를 실행..
TTS (text-to-speech)을 이용한 간단한 웹 1. 소개 아래 주소에 있는 사이트에 흥미가 생겨 클론 코딩을 해보았다. 글과 사진이 있는 목록을 생성하고 그것들을 클릭하면 해당하는 언어의 목소리가 컴퓨터에서 출력되도록 만들어보았다. 그리고 입력한 텍스트를 말로 변환을 시켜준다. 아이디어 출처: vanillawebprojects.com/projects/speech-text-reader/ 해당 깃허브: github.com/bradtraversy/vanillawebprojects 2. 구현 기능 사진 및 글 목록 생성 소리 출력 이렇게 두 개의 기능만 구현했다. 3. 구현 방식 - 사진 및 글 목록 생성 const data = [ ["img/water.jpg", "목말라", "我渴了", "喉が渇いた", "I'm THIRSTY"], ["img/hungry...
무한 스크롤(Infinite Scrolling) 1. 소개 무한 스크롤이라는 주제로 사이트를 만들어볼 것이다. 말 그대로 계속해서 스크롤을 해야 하는 사이트이다. 깃허브에 있던 한 웹페이지를 보고 만들어보고 싶어서 만들어보았다. 참고한 사이트: vanillawebprojects.com/projects/infinite_scroll_blog/ 참고한 깃허브: github.com/bradtraversy/vanillawebprojects/tree/master/infinite_scroll_blog 2. 구현 기능 무작위 글 생성 생성된 글 출력 입력한 글 일치 여부 확인 스크롤 인식 맨 위로 올리는 버튼 이렇게 총 5가지 기능을 구현하였다. 3. 구현 방식 -무작위 글 생성 글 생성 방식은 Math.random을 이용하여 무작위 난수의 값을 받고 그것을 문자로..
To Do List To Do List Done List
To Do List(HTML, CSS, JavaScript) 만들기 1. 소개 우선 To do List는 해야 할 목록을 의미하는데 간단히 소개하자면 해야 할 일들을 목록으로 만들어서 이행했는지 안 했는지 확인하는 목적의 목록이다. 2. 구현 기능 종류 목록 추가 목록 변경 목록 삭제 목록 완료 크게 보면 이렇게 4개의 기능들이 존재한다. 물론 기능을 구현하면서 추가적으로 부수적인 기능들로 구현을 할 것이지만 크게 중요한 기능들은 위와 같다. 3. 구현 방식 - 목록 추가 목록을 추가하기 위해서는 그것을 입력할 목록의 입력이 필요하다. 그래서 input 태그를 이용하여 목록의 내용을 입력하고 appendChild()를 이용하여 원하는 지점에 글을 추가하였다. 그런데 글뿐만 아니라 목록에 있는 글의 완료와 삭제까지 하기 위해서 마찬가지로 appendChild()를 이용하여..