728x90

Click! 👉 https://dasolpark.github.io/Dasol_CSS_Web_And_Mobile_App_Design/

 

Colorful eCommers

lorem Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, consequatur maxime? Adipisci modi consectetur molestias quis debitis. Nam cupiditate odio sit, numquam sequi debitis necessitatibus. Amet doloremque sunt asperiores officiis. Lear more

dasolpark.github.io

Github 👉https://github.com/DasolPark/Dasol_CSS_Web_And_Mobile_App_Design

 

DasolPark/Dasol_CSS_Web_And_Mobile_App_Design

Flexbox, Grid, Postcss, CSSNext, CSS4, Parcel. Contribute to DasolPark/Dasol_CSS_Web_And_Mobile_App_Design development by creating an account on GitHub.

github.com

✨ 특징

Flexbox, CSS Grid, PostCSS, CSSNext, CSS4

💻 결과물
Website and Mobile App

Colorful eCommers Website
Meal Mobile App
New Mobile App 1
New Mobile App 2

 

Recipe Mobile App
Artistic Social Network Mobile App
Architecture Website
Artistic Blog Website

728x90

Click! 👉 https://dasolpark.github.io/Dasol_JS_Momentum_Clone/

 

Welcome to Momentum Clone

 

dasolpark.github.io

Github 👉 https://github.com/DasolPark/Dasol_JS_Momentum_Clone

 

DasolPark/Dasol_JS_Momentum_Clone

Let's make momentum clone with Vanilla JS. Contribute to DasolPark/Dasol_JS_Momentum_Clone development by creating an account on GitHub.

github.com

항상 이용하고 있는 Chrome Extension Momentum
HTML/CSS/JavaScript
를 사용하여 나만의 스타일로 재구성 해봤습니다.

🌳배경 이미지는 무작위로 생성되며, 😃본인의 이름을 저장할 수 있고, ⛅간단한 날씨 정보도 얻을 수 있습니다.
또한, 📑해야 할 일 목록을 작성하여 체크하거나 삭제하며 사용할 수 있습니다.

날씨 APIopenweathermap, 배경 이미지 APIunsplash를 이용하였으며
이름과 해야 할 일 데이터Local Storage에 저장하였습니다.

브라우저 앱이기 때문에, 노트북이나 데스크톱 브라우저에 최적화되어 있습니다.

첫 번째 화면,이름을 묻는 페이지

 

두 번째 화면, 사용자를 반겨주며 오늘 가장 중요한 일을 작성할 수 있습니다.
세 번째 화면, 사용자를 반겨주며 작성된 오늘 가장 중요한 일을 확인할 수 있습니다.
네 번째 화면, 오늘 가장 중요한 일을 완료 표시 할 수 있습니다.
다섯 번째 화면, 해야 할 일 목록을 작성할 수 있습니다.
여섯 번째 화면, 해야 할 일 목록을 완료 표시 또는 삭제할 수 있습니다.

728x90

💪

Click! 👉 https://github.com/DasolPark/Dasol_JS_WorkoutTimer

JavaScript와 반응형 CSS를 사용하여 데스크톱 또는 모바일에서 사용할 수 있는 운동 도우미 타이머 어플리케이션입니다.

📌운동 종목과 종목의 세트를 상세히 작성할 수 있으며, 각 세트별로 완료한 시간을 체크해줍니다.
💡운동 종목과 세트는 추가 또는 삭제가 가능하며, 운동을 완료하면 완료된 시간을 수정할 수 없습니다.

Date Object를 이용하여 현재 시간을 표시하도록 만들었으며, 브라우저 Local Storage에 닉네임을 저장할 수 있도록 했습니다.
스탑워치는 setTimeout()을 이용하여 시간이 계속 증가될 수 있도록 하였습니다.
또한, DOM을 이용하여 종목이나 세트 element가 추가되거나 삭제될 수 있도록 제작하였습니다.

시작 화면과 운동이 입력된 화면
운동 시간을 체크하며 진행되는 화면
데스크톱 전체 화면

 

  1. 익명 2021.01.14 00:09

    비밀댓글입니다

    • 익명 2021.02.08 20:24

      비밀댓글입니다

+ Recent posts