👩🏼‍💻바닐라 JS로 크롬 앱 만들기 :#6.0~6.2

change up·2023년 6월 13일

노마드코더 클론코딩

목록 보기

10/13

첫 배포사이트..! 아래의 링크를 클릭하시면 됩니다.
https://sohwakyeong.github.io/hwakyeong/
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">
    <link rel = "stylesheet" href="css/app.css">
    <title>Momentum</title>
</head>
<body>
    <form class="hidden" id="login-form">
    <input type="text" />
    <button id="button">Log In</button>
    </form>
    <h2 id ="clock">00:00:00</h2>
    <h1 id="greeting" class="hidden"></h1>
    <div id="quote">
        <span></span>
        <span></span>
    </div>
    <script src="js/clock.js"></script>
    <script src="js/greeting.js"></script>
    <script src="js/quotes.js"></script>
    <script src="js/background.js"></script>
    

</body>
</html>

Java Script(Math.random을 이용해서 array 안에 element에 접근하기.)

/*quotes:명언자판기 만들기.*/
const quotes = [
{
quote: "나는 실패한 적이 없어. 단지 10,000번 도전해보고 어떤 것이 동작하지 않는지 알 뿐이지.",
author:"<슬램덩크>",
},
{
quote: "마음이 진정되면 그 소리를 들을 수 있다.",
author: "<센과 치히로의 행방불명>",
},
{
quote: "상처는 상쾌하다. 그건 나를 강하게 만들어준다",
author: "<도라에몽>",
},
{
quote: "꿈은 흔들릴 수 있지만, 포기하면 결코 이루어질 수 없다.",
author: "<너의 이름은>",
},
{
quote: "인생은 한 방! 두 번 다시는 없어!",
author: "<일상>",
},
{
quote: "미래에 대한 고민은 지금 재능을 묻는 것이다.",
author: "<하이큐>",
},
{
quote: "마음에 불이 있어야 불이 번지는 법이지!",
author: "<귀멸의 칼날>",
},
{
quote: "가장 중요한 건 네 안의 힘이다.",
author: "<나루토>",
},
{
quote: "우리는 혼자가 아니야, 언제나 옆에 네가 있다는 걸 알아.",
author: "<반지의 제왕>",
},
{
quote: "마음이 움직여야 운명도 움직인다.",
author: "<풀메탈 알케미스트>",
}
]

const quote = document.querySelector('#quote span:first-child');
const author = document.querySelector('#quote span:last-child');

const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];

quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;
//randomness(무작위성): array 안에 element에 접근하기.
//console.log(quotes[10 - 1]); 마지막 요소에 접근 .
/*Math.random():between 0 ~ 1.
  Math.round():반올림
  Math.ceil():올림
  Math.floor():내림*/

Java Script(자바스크립트로 html의 img요소 추가하기)

const images = [
    "pochako1.jpg",
    "pochako2.jpg",
    "pochako3.jpg"
];

const chosenImage = images[Math.floor(Math.random() * images.length)];


const bgImage = document.createElement("img");

bgImage.src = `img/${chosenImage}`;

document.body.appendChild(bgImage);

//append 는 가장 뒤 , prepend는 가장 위에 온다.

.hidden {
    display: none;
}

#quote span {
    font-weight: bold;
}
#quote {
    position: absolute;
    top: 900px;
    left: 800px;
}

#greeting
{
    position: absolute;
    top: 200px;
    left: 900px;
}

#clock
{
    position: absolute;
    top: 800px;
    left: 950px;
}
//따라만 하니 , 재미가 없어서 css로 꾸몄는데 별로한건 없지만 뿌듯하다..!

오늘 깃허브에서 처음으로 pages기능을 이용해서 사이트 배포를 완성했다..!
404 오류를 만났지만 , index.html로 바꿔서 극복 ..!

change up

새싹이

이전 포스트

👩🏼‍💻바닐라 JS로 크롬 앱 만들기 :#5.1-5.3

다음 포스트

👩🏼‍💻바닐라 JS로 크롬 앱 만들기 :#6.0~6.2

노마드코더 클론코딩

👩🏼‍💻바닐라 JS로 크롬 앱 만들기 :#5.1-5.3

👩🏼‍💻바닐라 JS로 크롬 앱 만들기 :#7.0~7.2

0개의 댓글