[Udemy]20 Web Projects With Vanilla JavaScript -Project#6

유데미에서 Brad Traversy의 20 Web Projects With Vanilla JavaScript

를 하나씩 직접 코딩해보면서 정리하기 위한 글이다.

데모 페이지

My Landing Page (vanillawebprojects.com)

코드 링크

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"
            integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ="
            crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css">
    <title>My Landing Page</title>
</head>
<body>
<nav>
    <div class="logo">
        <img src="https://randomuser.me/api/portraits/men/76.jpg" alt="user"/>
    </div>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact Me</a></li>
    </ul>
</nav>
<header>
    <button id="toggle" class="toggle"><i class="fa fa-bars fa-2x"></i></button>
    <h1>My Landing Page</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, quibusdam?</p>
    <button class="cta-btn" id="open">Sign Up</button>
</header>
<div class="container">
    <h2>What is this landing page about?</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet cumque cupiditate delectus dolorem earum fugiat
        quaerat quas ut voluptatem voluptatum?
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, dolorum?</p
    >
    <h2>Tell Me More</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi beatae commodi consectetur cum dignissimos
        doloribus ea eius error esse eum ex facere ipsa ipsum magni maxime mollitia nemo nostrum nulla odio optio porro
        quae repudiandae rerum sapiente, vel voluptates.</p>
    <h2>Benefits</h2>
    <ul>
        <li>Lifetime Access</li>
        <li>30 Day Money Bank</li>
        <li>Tailored Customer Support</li>
    </ul>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A expedita in iusto maxime modi, placeat quaerat quasi!
        Est eum hic molestiae perferendis? Asperiores, at blanditiis expedita nemo numquam porro sequi tempora
        voluptatibus. Autem commodi cupiditate deserunt dignissimos doloremque earum, ex, fuga fugit, inventore
        laudantium neque placeat quod ratione repellendus saepe similique tempore! Aliquid facere mollitia nulla
        reprehenderit velit? Assumenda atque dolores earum eum facilis ipsum odio rem sint suscipit vero!</p>
    <!-- 모달 -->
    <div class="modal-container" id="modal">
        <div class="modal">
            <button class="close-btn" id="close">
                <i class="fa fa-times"></i>
            </button>
            <div class="modal-header">
                <h3>Sign Up</h3>
            </div>
            <div class="modal-content">
                <p>Register with us to get offers, support and more</p>
                <form action="" class="modal-form">
                    <div>
                        <label for="name">Name</label>
                        <input type="text" id="name" placeholder="Enter Name" class="form-input">
                    </div>
                    <div>
                        <label for="email">Email</label>
                        <input type="email" id="email" placeholder="Enter Email" class="form-input">
                    </div>
                    <div>
                        <label for="password">Password</label>
                        <input type="password" id="password" placeholder="Enter Password" class="form-input">
                    </div>
                    <div>
                        <label for="password2">Confirm Password</label>
                        <input type="password" id="password2" placeholder="Confirm Password" class="form-input">
                    </div>
                    <input type="submit" value="Submit" class="submit-btn">
                </form>
            </div>
        </div>
    </div>
</div>
<script src="script.js"></script>
</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

:root {
    --modal-duration: 1s;
    --primary-color: #30336b;
    --secondary-color: #be2edd;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Lato', sans-serif;
    margin: 0;
    transition: transform 0.3s ease;
}

body.show-nav {
    transform: translateX(200px);
}

nav {
    background-color: var(--primary-color);
    border-right: 2px solid rgba(200, 200, 200, 0.1);
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    z-index: 100;
    transform: translateX(-100%);
}

nav .logo {
    padding: 30px 0;
    text-align: center;
}

nav .logo img {
    height: 75px;
    width: 75px;
    border-radius: 50%;
}

nav ul {
    padding: 0;
    list-style-type: none;
    margin: 0;
}

nav ul li {
    border-bottom: 2px solid rgba(200, 200, 200, 0.1);
    padding: 20px;
}

nav ul li:first-of-type {
    border-top: 2px solid rgba(200, 200, 200, 0.1);
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

nav ul li a:hover {
    text-decoration: underline;
}

header {
    background-color: var(--primary-color);
    color: #fff;
    font-size: 130%;
    position: relative;
    padding: 40px 15px;
    text-align: center;
}

header h1 {
    margin: 0;
}

header p {
    margin: 30px 0;
}

button,
input[type='submit'] {
    background-color: var(--secondary-color);
    border: 0;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    padding: 8px 12px;
}

button:focus {
    outline: none;
}

.toggle {
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 20px;
    left: 20px;
}

.cta-btn {
    padding: 12px 30px;
    font-size: 20px;
}

.container {
    padding: 15px;
    margin: 0 auto;
    max-width: 100%;
    width: 800px;
}

.modal-container {
    background-color: rgba(0, 0, 0, 0.6);
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.modal-container.show-modal {
    display: block;
}

.modal {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    width: 400px;
    animation-name: modalopen;
    animation-duration: var(--modal-duration);
}

.modal-header {
    background: var(--primary-color);
    color: #fff;
    padding: 15px;
}

.modal-header h3 {
    margin: 0;
    border-bottom: 1px solid #333;
}

.modal-content {
    padding: 20px;
}

.modal-form div {
    margin: 15px 0;
}

.modal-form label {
    display: block;
    margin-bottom: 5px;
}

.modal-form .form-input {
    padding: 8px;
    width: 100%;
}

.close-btn {
    background: transparent;
    font-size: 25px;
    position: absolute;
    top: 0;
    right: 0;
}

@keyframes modalopen {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

script.js

const toggle = document.getElementById('toggle');
const close = document.getElementById('close');
const open = document.getElementById('open');
const modal = document.getElementById('modal');

toggle.addEventListener('click', () => {
    document.body.classList.toggle('show-nav');
});

open.addEventListener('click', () => modal.classList.add('show-modal'));

close.addEventListener('click', () => modal.classList.remove('show-modal'));

window.addEventListener('click', e =>
    e.target == modal ? modal.classList.remove('show-modal') : false
);

강의를 통해 배운 점(생각, 내용 정리)

모달 기능 작성 방법(HTML에서 모달 화면 구현, CSS에서 모달 창을 display:none;으로 놓고) Javascript에서 버튼 클릭 이벤트 시 (display:block;을 정의한 class를 )으로 추가해 준다.

window 객체에 이벤트를 적용하여 모달 창 밖을 선택할 경우 모달 창을 탈출하는 모달 창 로직을 알게 되었다.

CSS에서 keyframes를 사용하여 효과를 입히는 방법을 익힐 수 있었다.

'HTML&CSS&Javascript' 카테고리의 다른 글

[Udemy]20 Web Projects With Vanilla JavaScript -Project#8 (0)	2020.12.13
[Udemy]20 Web Projects With Vanilla JavaScript -Project#7 (0)	2020.12.11
[Udemy]20 Web Projects With Vanilla JavaScript -Project#5 (0)	2020.12.10
[Udemy]20 Web Projects With Vanilla JavaScript -Project#4 (0)	2020.12.09
[Udemy]20 Web Projects With Vanilla JavaScript -Project#3 (0)	2020.12.08

[Udemy]20 Web Projects With Vanilla JavaScript -Project#6

index.html

style.css

script.js

'HTML&CSS&Javascript' 카테고리의 다른 글

관련글

티스토리툴바