GustavoMatsunaga / dataStorageComponent

This website is a model created to represent a database with a storage component, it shows how much storage have been used and how much left.

Home Page:https://gustavomatsunaga.github.io/dataStorageComponent/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Welcome! πŸ‘‹

Language count badge Code size badge Code last commit

This website is a model created to represent a database with a storage component, it shows how much storage have been used and how much left.
You can checkout the demo here : Data Storage Component

Challenges! πŸ“Œ

This website was made using only HTML5, SASS and Javascript. The most dificult challenge was to make the input type range as close as the model. The input type range was made with a linear-gradient background, so it changes the color whenever the person drags the input.

Let's have fun! πŸš€

  • Building it to look as cloose as the design.
  • View the optimal layout for the component depending on their device's screen size (Responsive Web Design)
  • Use ID and classes in the elements
  • Use query selectors in Javascript
  • DOM manipulation with Javascript

Technologies! πŸ’»

  • HTML
  • SASS
  • JAVASCRIPT

Web Model

Desktop

Gif preview for the desktop Color Mark

Mobile

Credits 🌟

Designed by Gustavo Matsunaga! :octocat:

πŸ’Ž Linkedin

About

This website is a model created to represent a database with a storage component, it shows how much storage have been used and how much left.

https://gustavomatsunaga.github.io/dataStorageComponent/


Languages

Language:SCSS 72.4%Language:HTML 18.2%Language:JavaScript 9.4%