21.08.26

🌱 REPOSITORIES

https://github.com/pyeonne/daegu-ai-school

https://github.com/pyeonne/portfolio

https://github.com/pyeonne/TIL

https://github.com/pyeonne/responsive-clock-ui

💻 PROJECT

1. Youtube clone coding

Top nav section

YouTubeホームページHTML構造の大きなフレームのみ作成

上端は3つのエリアをナビゲートし、そのエリア内の内容を作成する

レイアウト歪み防止のため#youtube-left-navエリア内#youtube-left-contentエリアを個別に作成

CSS様式採用

2. Responsive personal portfolio website

max-width: 350pxメディア照会作成

min-width: 568pxメディア照会作成

min-width: 1024pxメディア照会作成

マルチテーマ実現

デスクトップの全画面に多くの空白が表示されています.全画面のメディアクエリーを別途作成する必要があります.

3. Responsive analog clock

同態UIデザイン

JavaScriptでアナログクロックを実現

const hour = document.querySelector('#clock-hour');
const minutes = document.querySelector('#clock-minutes');
const seconds = document.querySelector('#clock-seconds');

const clock = () => {
    let date = new Date();
    let hh = date.getHours() * 30;
    let mm = date.getMinutes() * 6;
    let ss = date.getSeconds() * 6;

    // We add a rotation to the elements
    hour.style.transform = `rotateZ(${hh + mm / 12}deg)`;
    minutes.style.transform = `rotateZ(${mm}deg)`;
    seconds.style.transform = `rotateZ(${ss}deg)`;
};
setInterval(clock, 1000); // 1000 = 1s

💡 REVIEW

CSSでも立体設計ができることに気づいた.

勉強すればするほど、JavaScriptで実現できるものが多く感じられる.作り続けるときはよく使う関数を中心に熟知しておきましょう.

プログラマーはコード問題を解くことで実力を上げるべきである.