CodeSiri/Project

[MBTI👀] FE03. 결과 페이지 만들기

Dev다D 2021. 7. 14. 21:59
반응형

 

result.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta property="og:title" content="나의 개발 유형은?" />
    <meta property="og:image" content="" />
    <meta property="og:url" content="" />
    <meta property="og:description" content="나에게 꼭 맞는 개발 유형은 무엇일까?" />

    <title>나의 개발 유형 찾기</title>
    <link rel="stylesheet" tyle="text/css" href="css/reset.css">
    <link rel="stylesheet" tyle="text/css" href="css/result.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
    <section id="main_contents">
        <div class="warpper">
            <div class="result">
                <div class=titles>
                    <h3>보이지 않는 것을 보는 당신은!</h3>
                    <h1>프론트엔드 개발자</h1>
                </div>
                <div class=result_img>
                    <img src="img/프론트엔드.png" alt="frontend">
                </div>
            </div>
            <div class="result_explains">
                <div class="explain">
                    <h3 class="title">나와 맞는 개발 유형은 백엔드 개발자?!</h3>
                    <ul>
                        <li>hello world</li>
                        <li>hello world</li>
                        <li>hello world</li>
                    </ul>
                </div>
                <div class=explain>
                    <h3 class="title">나와 맞는 개발 유형은 백엔드 개발자?!</h3>
                    <ul>
                        <li>hello world</li>
                        <li>hello world</li>
                        <li>hello world</li>
                    </ul>
                </div>
                <div class=explain>
                    <h3 class="title">나와 맞는 개발 유형은 백엔드 개발자?!</h3>
                    <ul>
                        <li>hello world</li>
                        <li>hello world</li>
                        <li>hello world</li>
                    </ul>
                </div>
            </div>
            <div class="lectures">
                <h3 class="title">강의 추천</h3>
                <ul>
                    <li>
                        <a href="#" target="_blank">
                            <img src="img/lec_web_fullstack.png" 
                            alt="제주코딩베이스캠프 기본강좌">
                            <h3>python 부트캠프</h3>
                            <button type="button">강의 보러가기</button>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="share">
                <div class="url">
                    <button class="copy_btn" type="button">URL 복사하기</button>
                </div>
                <div class="facebook">
                    <button class="facebook_share" type="button">Facebook 공유하기</button>
                </div>
                <div class="kakao">
                    <button class="kakao_share" type="button">카카오톡 공유하기</button>
                </div>
            </div>
            <div class="buttons">
                <ul>
                    <li>
                        <h3>...이건 내가 아니야... 잘못된게 분명해!</h3>
                        <a href="#">
                            <button type="button">테스트 다시 하기</button>
                        </a>
                    </li>
                    <li>
                        <h3>다른 사람들은 어떤 유형일까?</h3>
                        <a href="#">
                            <button type="button">다른 결과 알아보기</button>
                        </a>
                    </li>
                    <li>
                        <h3>이런 테스트는 도대체 누가 만든거야? ^0^;;</h3>
                        <a href="#">
                            <button type="button" class="color">제주코딩베이스캠프</button>
                        </a>
                    </li>
                    <li>
                        <h3>나는 며칠 동안 훈련해야 전문가가 될까?</h3>
                        <a href="#">
                            <button type="button">1만 시간의 법칙</button>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="weniv">
                <a href="http://www.paullab.co.kr">
                        <img src="img/weniv_logo_black.png" alt="weniv">
                </a>
            </div>
        </div>
    </section>
    <script type="text/javascript" src="js/result.js"></script>
    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
</body>
</html>

 

result.css

@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NEXON Lv1 Gothic OTF';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #FAF1BE;
    color: #000;
    font-family: "NEXON Lv1 Gothic OTF";
}

button {
    font-family: 'NEXON Lv1 Gothic OTF';
    font-size: 20px;
    width: 400px;
    height: 50px;
    padding: 5px;
    border-style: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    background-color: #fff;
    color: #000;
}

button:hover {
    text-decoration: underline;
}

#main_contents {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin-top: 100px;
}

#main_contents .warpper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 600px;
    padding-bottom: 50px;
}

.result {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.result h1 {
    font-size: 50px;
    font-family: "GmarketSansBold";
}

.result h3 {
    font-size: 17px;
    padding-bottom: 15px;
}

.result_img {
    width: 300px;
    height: 324px;
}

.result_img img {
    width: 100%;
    height: 100%;
}

.result_explains {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-bottom: 50px;
    line-height: 1.5;
}

.result_explains .explain {
    width: 400px;
    margin-bottom: 30px;
}

.result_explains .title {
    font-family: "GmarketSansBold";
    font-size: 20px;
    text-align: center;
    border-top: 3px solid #Ea7E7C;
    border-bottom: 3px solid #Ea7E7C;
    padding: 10px 0;
    margin-bottom: 20px;
}

.result_explains ul {
    padding: 0 20px;
    list-style-type: disc;
}

.result_explains li {
    padding-bottom: 15px;
}

.lectures {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 3px solid #ea7e7c;
    padding-bottom: 20px;
    margin-bottom: 50px;
}

.lectures .title {
    text-align: center;
    width: 400px;
    font-size: 30px;
    font-family: "GmarketSansBold";
    color: #ea7e7c;
    position: relative;
}

.lectures .title:before, .lectures .title:after {
    content: '';
    display: block;
    width: 120px;
    height: 3px;
    background-color: #Ea7E7C;
    position: absolute;
}

.lectures .title:before {
    left: 0;
    top: 50%;
}

.lectures .title:after {
    right: 0;
    top: 50%;
}

.lectures p {
    padding: 50px 0;
    line-height: 1.5;
}

.lectures ul {
    width: 400px;
}

.lectures li {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 30px;
}

.lectures a {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}

.lectures a:hover img {
    transform: scale(1.05);
}

.lecturesa:hover button {
    text-decoration: underline;
}

.lectures li img {
    width: 100%;
    height: auto;
    padding-bottom: 20px;
    transition: transform .5s;
}

.lectures li h3 {
    font-family: "GmarketSansBold";
    font-size: 17px;
    text-align: center;
    line-height: 1.5;
    padding: 0 10px 20px;
}

.lectures li button {
    background-color: #7F47DD;
    counter-reset: #fff;
}

.share {
    padding-bottom: 20px;
    margin-bottom: 50px;
    border-bottom: 3px solid #Ea7E7C;
}

.share button {
    margin-bottom: 30px;
}

.facebook_share {
    background-color: #3B5998;
    color: #fff;
}

.kakao_share {
    background-color: #f1d900;
}

.buttons {
    padding-bottom: 50px;
}

.buttons h3 {
    padding-bottom: 20px;
}

.buttons button {
    margin-bottom: 30px;
}

.color {
    background-color: #7F47DD;
    color: #fff;
}

.weniv {
    display: flex;
    justify-content: column;
    align-items: center;
}

.weniv a {
    width: 100px;
}

.weniv img {
    width: 100%;
    height: auto;
}

 

result.js

const copyBtn = document.querySelector('.copy_btn');
const facebookShare = document.querySelector('.facebook_share')
const kakaoShare = document.querySelector('.kakao_share');
kakaoShare.scrollIntoView('0eca368947901315930629e7662e8758');

$(function() {
    let url = window.location.href
    let img = $('.result_img img').attr('src');
    $("meta[property='og\\:url']").attr("content", url);
    $("meta[property='og\\:image']").attr("content", img);
});

function copyUrl() {
    let tmp = document.createElement('input');
    let url = window.location.href;

    document.body.appendChild(tmp);
    tmp.value = url;
    tmp.select();
    document.execCommand("copy");
    document.body.removeChild(tmp);

    alert("URL이 복사되었습니다.");
}

function sharefacebook() {
    let url = window.location.href;
    let facebook = 'http://www.facebook.com/sharer/sharer.php?u=';
    let link = facebook + url;
    window.open(link);
}

function sendLink() {
    let result_url = window.location.href;
    Kakao.Link.sendDefault({
        objectType: 'feed',
        content: {
            title: '나의 개발 유형은?',
            description: '나에게 꼭 맞는 개발 유형을 알아보자!!',
            imageUrl: 'https://mbit.weniv.co.kr/static/img/mbit_thumbnail.png',
            link: {
                mobileWebUrl: 'https://mbit.weniv.co.kr',
                webUrl: 'https://mbit.weniv.co.kr',
            },
        },
        social: {
            likeCount: 286,
            commentCount: 45,
            sharedCount: 845,
        },
        buttons: [
        {
            title: '결과 보러가기',
            link: {
                webUrl: result_url,
                mobileWebUrl: result_url,
            },
        },
        {
            title: '테스트 하러가기',
            link: {
                webUrl: 'https://mbit.weniv.co.kr',
                mobileWebUrl: 'https://mbit.weniv.co.kr',
            },
        },
        ],
    });
}

copyBtn.addEventListener('click', copyUrl);
facebookShare.addEventListener('click', sharefacebook);
kakaoShare.addEventListener('click', sendLink);
본 내용은 inflearn의 'MBTI' 강의를 참고하여 작성한 내용입니다.

 

반응형
저작자표시 비영리 동일조건

'CodeSiri > Project' 카테고리의 다른 글

[MBTI👀] FE02. 설문 페이지 만들기  (0) 2021.07.13
[MBTI👀] FE01. 메인 페이지 만들기  (0) 2021.07.13
[Googoos🕊] 05. Spring | 회원 관리자 페이지 - 회원 권한 관리 & 회고 | MyBatis, SpringMVC  (0) 2021.06.12
[Googoos🕊] 04. Spring | 회원가입 중복체크 | ajax, MyBatis  (0) 2021.06.11
[Googoos🕊] 03. Spring | login Session & Join  (0) 2021.05.26

'CodeSiri/Project'의 다른글

  • 현재글[MBTI👀] FE03. 결과 페이지 만들기

관련글

티스토리툴바