html, css 및 javascript로 On-This-Day 프로젝트를 만드세요!

6142 단어 cssjavascriptwikipediahtml
안녕하세요 코더 여러분! 이것은 나의 첫 번째 게시물이며 간단한 프로젝트로 쉽게 할 수 있습니다. 그래서 우리가 만들려는 것은 WikiPedia 기반 API를 사용하는 역사 프로젝트의 오늘입니다. 이것은 당신이 나중에 얻을 것입니다!



당신은 필요



우리는 간단한 경량 REST API를 사용할 것입니다. 위키백과로 만든 API로 검증된 내용이 확실합니다! 코딩을 시작할 수 있도록 다른 것은 없습니다.

https://github.com/harrify-apis/historyjs

1 단계



먼저 프로젝트에 대한 파일을 만들어야 합니다.
이름이 index.html , app.js 및 style.css 인 파일을 만듭니다.


2 단계



이제 본격적인 코딩을 시작해 볼까요? 늘 그렇듯이 index.html부터 시작합니다. 이제 메모장이나 원하는 텍스트 편집기에서 index.html 파일을 엽니다. 여기서는 Visual Studio Code을 사용하고 있습니다.

작성하려는 코드입니다.

<!DOCTYPE html>
<html>
    <head>
        <title>My wiki-project</title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <div class="title-bar">
             <h1>Today In History</h1>
        </div>
        <div class="root-div"></div>
    </body>
    <script src="app.js"></script> <!--APP.js file linked!-->
</html>

3단계



다음으로 필요에 따라 할 수 있는 css 스크립트를 작성할 것입니다. 코드는 여기에 있습니다! 기본적인 최소한의 사용자 인터페이스를 만들었습니다.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    transition: 0.4s;
}

body{
    padding-top: 120px;
    background-color: burlywood;
}

.wrap{
    display: flex;
    justify-content: center;
    width: 100%;
}

.title-bar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    display: flex;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.534);
    backdrop-filter: blur(10px); /*Less Browser Suppor*/
}

.root-div{
    width: 700px;
    padding: 30px;
    min-height: 100vh;
    margin-top: 20px;
}
.item{
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 4px 12px 40px 6px rgb(0 0 0 / 9%);
    margin-bottom: 20px;
    cursor: pointer;
}

.item:hover{
    transform: scale(1.1) rotate(5deg);
}

.item h1{
    font-size: 20px;
    line-height: 25px;
    color: #333333;
}

.item h4{
    font-size: 15px;
    margin-bottom: 15px;
    color: #2575fc;

}

a{
    text-decoration: none;
}

4단계



이제 우리는 중요하지만 가장 쉬운 부분으로 들어가고 있습니다! 예 javascirpt 부분입니다. 그래서 저는 __Javascript Fetch Api __을(를) 사용하여 Today in History API에서 콘텐츠를 가져왔습니다.

var api_type = "events"; //events | deaths | births

var today = new Date();//New date class
var year = today.getFullYear(); //Get fill year
var month = today.getMonth() + 1; //Get the month
var date = today.getDate();// Get the date
var root_div = document.querySelector(".root-div"); //Selecting the DOM
//Api url construction
var api = "https://cdn.jsdelivr.net/gh/harrify-apis/historyjs/" + api_type + "/" + month + "_" + date + ".json";

//Javascript fetch from json api
fetch(api).then(
    function(response){

        response.json().then(function(json) {

            json = json[api_type];
            const list = Object.values(json).map(post => `


            <a href="${post.wikipedia[0].wikipedia}" target="_blank">
                <div class="item">
                    <h4>${post.year} - ${year - post.year} years ago</h4>
                    <h1>${post.description}</h1>
                </div>
            </a>
            `);

            var html = list.join("");
            root_div.innerHTML = html;
        });
        //Mapping Json Response


    }
);

코드를 분해하자



따라서 이 상자 전체 텍스트를 읽는 것보다 훨씬 더 잘 이해할 수 있도록 코드를 분해하겠습니다 🤣

변하기 쉬운



today : JavaScript 날짜 클래스의 새 인스턴스를 만들었습니다.
year : 현재 연도로 설정했습니다.
월 : 현재 월로 설정했습니다.
date : 현재 날짜로 설정했습니다.
root_div : html을 삽입해야 하는 div로 설정했습니다.

API



"https://cdn.jsdelivr.net/gh/harrify-apis/historyjs/{type}/{month}_{date}.json";

여기서 우리는 교체
  • 1 {type} events 또는 birsth 또는 deaths
  • 2 {date} 오늘의 데이터로
  • 3 {month} 현재 달
    • 포함
  • 4 {year} 현재 연도
    • 포함

    api_type



    필요에 따라 API 유형을 설정할 수 있습니다. 세 가지 범주 중에서 선택할 수 있습니다.
  • events : 오늘 발생한 이벤트를 알려줍니다
    • .
  • deaths : 오늘 발생한 사망 정보를 얻을 수 있습니다
    • .
  • births : 이 날짜에 발생한 출생을 알려줍니다
    • .

    가져오기() 함수



    여기에서 이 자바스크립트 API를 사용하여 API에서 데이터json를 가져옵니다. json 데이터를 다운로드한 후 json을 html로 렌더링하고 html을 .root-div 요소에 삽입합니다. 이 모든 것이 이 세 개의 간단한 파일에서 이루어집니다! 원한다면 이 펜을 보세요. 아마도 이것이 도움이 될 것입니다!


    전체 소스 코드는 여기!






    결론



    이 게시물은 며칠 동안 찾고 있었기 때문에 방금 작성했습니다. 언젠가 내가 만들었고 누군가에게 도움이 되기를 바라며 이것을 공유하고 싶습니다. 이것은 dev.to의 첫 번째 게시물이며 이 페이지의 형식에 대해 죄송합니다 :)



    저를 찾아 무엇이든 물어보세요

    email , github , my works , ,

    독립 조수 함수의 장점과 단점 (laavel)
    구동 기호 링크 삭제 오류 - 변수 역할 영역 및 RtlInitUnicodeString 문제

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage