/Mondrain-City

City-Data presented in a Mondrain way! Technologies used: HTML, CSS, Vue.js, Firebase

Primary LanguageJavaScriptOtherNOASSERTION

Mondrain City

Live Site: https://michelleamazinglin.github.io/Mondrain-City/

A Pen created on CodePen.io. Original URL: https://codepen.io/ml4567/pen/poRPNQx.

Overview

City-Data presented in a Mondrain way, Have fun creating a city together!

Screen Shot 2021-05-13 at 11 50 31 AM

Functionalities

  1. Users cam add an Apartment with a name, creates a blue block on canvas.
Screen Shot 2021-05-13 at 11 53 25 AM
  1. Users can add a Road with a name, creates a white block on canvas.
Screen Shot 2021-05-13 at 11 53 53 AM
  1. Users can choose between yellow or red light and add to canvas.
Screen Shot 2021-05-13 at 11 54 06 AM
  1. City data will show when click on each block.
Screen Shot 2021-05-13 at 11 57 00 AM
  1. A list of all data.
Screen Shot 2021-05-13 at 11 58 37 AM
  1. Users can delete data from the list.
Screen Shot 2021-05-13 at 11 59 12 AM

Tech used

  • HTML
  • CSS
  • Vue.js
  • Firebase