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

저작자표시

'Project > Side-Project' 카테고리의 다른 글

[ReactJS] YouTube API를 이용한 비디오 검색 웹 앱  (0) 2020.02.21
[ReactJS] Unsplash API를 이용한 무료 이미지 검색 웹 앱  (0) 2020.02.19
[ReactJS] Navigator와 OpenWeatherMapAPI를 이용한 날씨 정보 페이지  (0) 2020.02.15
[JS] 로컬 스토리지를 이용해 '게시판' 만들어 보기  (0) 2020.01.25
[JS] 나만의 모멘텀 만들기(Momentum Clone) Side-Project  (2) 2020.01.23
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를 사용하여 나만의 스타일로 재구성 해봤습니다.

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

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

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

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

 

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

저작자표시

'Project > Side-Project' 카테고리의 다른 글

[CSS] 웹&모바일 앱 디자인(Web and Mobile Application Design)  (0) 2020.02.19
[ReactJS] Navigator와 OpenWeatherMapAPI를 이용한 날씨 정보 페이지  (0) 2020.02.15
[JS] 로컬 스토리지를 이용해 '게시판' 만들어 보기  (0) 2020.01.25
[CSS] 왓츠앱 디자인 패턴 복제하기(WhatsApp Design Clone) Side Project  (0) 2020.01.20
[JavaScript] 운동 관리 타이머(Workout Timer) Side Project  (2) 2020.01.16
728x90

💪

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

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

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

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

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

 

저작자표시

'Project > Side-Project' 카테고리의 다른 글

[CSS] 웹&모바일 앱 디자인(Web and Mobile Application Design)  (0) 2020.02.19
[ReactJS] Navigator와 OpenWeatherMapAPI를 이용한 날씨 정보 페이지  (0) 2020.02.15
[JS] 로컬 스토리지를 이용해 '게시판' 만들어 보기  (0) 2020.01.25
[JS] 나만의 모멘텀 만들기(Momentum Clone) Side-Project  (2) 2020.01.23
[CSS] 왓츠앱 디자인 패턴 복제하기(WhatsApp Design Clone) Side Project  (0) 2020.01.20

+ Recent posts

티스토리툴바