[Project] 크롬 화면 만들기
프로젝트 시작 : 24.02.05
프로젝트 내용 : 크롬 메인 화면 클론 코딩
사용 기술 : html5, css3, JavaScript, visual code
현재 시간 날짜
index.html
<!DOCTYPE html>
<html>
<head>
<title>newtab</title>
<meta charset="UTF-8" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div class="main-container">
<div class="main-wrapper">
<div class="today-info">
<div class="date" id="date">
<!-- 날짜&요일 -->
</div>
<div class="time" id="time">
<!-- 현재 시간 -->
</div>
</div>
<div class="search">
<input id = "search-input" placeholder="검색어를 입력하세요." autocomplete="off"/>
</div>
</div>
</div>
<script src="/js/clock.js"></script>
<script src="/js/search.js"></script>
</body>
</html>clock.js
//💡html에 있는 id가 date와 time인 요소를 찾아 변수에 할당
const dateElement = document.getElementById("date");
const timeElement = document.getElementById("time");
//💡10보다 작으면 숫자앞에 0을 붙이는 삼항 연산자 ex) 01월 01시
const modifyNumber = (number)=>{
return parseInt(number) < 10 ? "0"+number: number;
}
//💡현재 날짜 가져오기
const getNowDate = () => {
const nowDate = new Date(); //💡date객체는 자바스크립트 내장객체
const week = ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"];
let month = modifyNumber(nowDate.getMonth() + 1);
//💡date객체가 월을 표기할 때 1월을 0으로, 2월을 1로 나타내기 때문에 결과값 뒤에 +1을 해주어야함
let date = modifyNumber(nowDate.getDate());
let day = week[nowDate.getDay()];
//💡getDay 메서드는 일~토를 0~6 숫자로 나타내기 때문에 배열을 사용해야함
setNowDate(month, date, day);
//💡setNowDate에 담아주기
};
//💡받은 날짜를 dateElement에 set
const setNowDate = (month, date, day) => {
dateElement.textContent = `${month}월 ${date}일 ${day}`;
};
//💡현재 시간 가져오기
const getNowTime = () => {
const nowDate = new Date();
let hour = modifyNumber(nowDate.getHours());
let minute = modifyNumber(nowDate.getMinutes());
setNowTime(hour, minute);
};
//💡받은 시간을 timeElement에 set
const setNowTime = (hour, minute) => {
timeElement.textContent = `${hour} : ${minute}`;
};
getNowDate(); //페이지 로딩 시 현재 날짜를 가져와 표시
getNowTime(); //페이지 로딩 시 현재 시간을 가져와 표시
setInterval(getNowTime, 1000); //setInterval 내장 함수를 사용하여 페이지가 로드되지 않아도 자동으로 1초마다 로드 되게 하기👾 textContent는 프로퍼티, setter와 getter 모두 존재하는 접근자 프로퍼티로서 요소 노드의 텍스트와 모든 자손 노드의 텍스트를 모두 취득하거나 변경
검색 바
search.js
const searchInput = document.getElementById("search-input");
//검색 결과 페이지로 이동
const showSearchResult =()=>{
let searchWord = searchInput.value;
window.location.href=`https://www.google.co.kr/search?q=${searchWord}`
//💡Google 검색 결과 페이지의 URL에 검색어를 추가, 아래 그림 참고
searchWord="";
}
// 이벤트의 키 코드가 "Enter"인 경우에만 showSearchResult 함수를 호출
const enterKey = (event)=>{
if(event.code === "Enter"){
showSearchResult();
}
}
// 사용자가 엔터키를 누를 때만 검색 결과 페이지로 이동
searchInput.addEventListener("keypress",(event)=>{
enterKey(event);
})
명언 api
quote.js
const API_URL = "https://random-quote.hyobb.com/"
const quoteElement = document.getElementById("quote")
const quoteItem = localStorage.getItem("quote");
const nowDate = new Date();
const month = nowDate.getMonth()+1;
const date = nowDate.getDate();
//💡하루에 한 번씩 명언이 바뀌도록 설정하기
const setQuote = (result)=>{
let quote = {createDate: `${month} - ${date}`, quoteData:result}
localStorage.setItem("quote",JSON.stringify(quote));
//💡localStorage의 quote라는 키값의 데이터가 존재하고 데이터의 createDate값이 오늘 날짜가 동일하다면 getQuote함수 호출하지 않고
//💡그렇지 않을 경우면 getQuote함수호출
quoteElement.textContent = result;
}
const getQuote = async ()=>{
try{
const data = await fetch(API_URL).then((res)=>res.json())
//console.log(data);
const result = data[1].respond;
//💡배열의 0번쨰는 success의 result값이 1번째는 respond 명언 값이 담겨있음
//console.log(result);
setQuote(result);
}catch(err){
console.log(`err:${err}`);
setQuote("현재를 즐겨라! -죽은 시인의 사회");
//💡에러났을떄 보여줄 문구
}
}
//then 메서드로 결과값 json 메서드를 사용하여 자바스크립트 객체형태로 변환
//fetch 함수는 promise 객체를 반환하는 비동기 함수이기 때문에 앞에 await 작성해주고
//await 키워드는 async가 붙은 함수의 내부에서만 사용 가능하므로 async 작성
if(quoteItem){ //quote 아이템이 있다면
let{createDate, quoteData} = JSON.parse(quoteItem);
if(createDate === `${month}-${date}`){ //💡createDate가 오늘 날짜와 동일하다면
quoteElement.textContent = `"${quoteData}"`;
}
else {
getQuote();
}
} else {
getQuote();
}fetch 함수
fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환합니다. 반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외(error) 객체를 reject합니다.
localStorage
localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있습니다.
저장한 데이터는 세션간에 공유됩니다. 즉, 세션이 바뀌어도 저장한 데이터가 유지됩니다.
- setItem() - key, value 추가 (localStroage에 아이템을 추가하기 위한 함수)
window.localStorage.setItem(key, value)- getItem() - value 읽어 오기 (localStorage의 아이템을 읽기 위한 함수)
window.localStorage.getItem(key)- removeItem() - item 삭제
- clear() - 도메인 내의 localStorage 값 삭제
- length - 전체 item 갯수
- key() - index로 key값 찾기
JSON 내장객체
정의 : 이 객체는 자바스크립트 코드를 브라우저에서 실행하든 Node.js 런타임에서 실행하든 상관없이 전역(global)에서 접근이 가능합니다. JSON 내장 객체는 JavaScript 객체와 JSON 문자열 간의 상호 변환을 수행해주는 두 개의 메서드를 제공합니다.
JSON.parse()
JSON 문자열을 인자로 받고 결과값으로 JavaScript 객체를 반환
const str = `{
"name": "홍길동",
"age": 25,
"married": false,
"family": { "father": "홍판서", "mother": "춘섬" },
"hobbies": ["독서", "도술"],
"jobs": null
}`;
const obj = JSON.parse(str);
console.log(obj);
결과값
{
name: "홍길동",
age: 25,
married: false,
family: {
father: "홍판서",
mother: "춘섬"
},
hobbies: [
"독서",
"도술"
],
jobs: null
}JSON.stringify()
JavaScript 객체를 인자로 받고 JSON 문자열을 반환
const obj = {
name: "홍길동",
age: 25,
married: false,
family: {
father: "홍판서",
mother: "춘섬",
},
hobbies: ["독서", "도술"],
jobs: null,
};
const str = JSON.stringify(obj);
console.log(str);결과값
'{"name":"홍길동","age":25,"married":false,"family":{"father":"홍판서","mother":"춘섬"},"hobbies":["독서","도술"],"jobs":null}'현재 까지 결과물
나의 코딩 다이어리🖥️👾✨