Coder Social home page Coder Social logo

project-1---city-landamarks's Introduction

Project-1---city-landamarks

City landmark API to know where to go on your travels

User Stories

  1. A user will be able to see a front modal page where a dropdown modal will show up to select city
  2. A user, once selected a city, will be able to see information on the main page related to the selected city and its main landmarks.
  3. User will be able to add a new city or edit a city content in the collection.
  4. A user will be able to create, edit and delete a landmark on the city selected.
  5. Each city will have a picture to show up a skyline of it as well as the landmark. CHALLENGES:
  6. Adding transitions to the pictures of each city (different pictures of each city)
  7. Users will be able to drop a comment of why they like a landmark so much
  8. User will be able to see current weather form the selected city.
  9. Map with pins of the landmarks.

User Stories (broken down)

1. A user will be able to see a front modal page where a dropdown modal will show up to select city

  • Create a modal pop up with a bootstrap modal dropdown with a selection of hardcoded cities
  • Modal to fade away after selection of the city

wireframe

2. A user selects a city and will be able to see information on the main page related to the selected city and its main landmarks.

  • Create HTML structure where city information will show up
  • HTML structure will load with a screen showing information about the selected city, including: .City Name .Short, fun description about the city .Location .Population .Size (sqm) .Image .Landmarks ..Landmark Name ..Address ..Why is it fun?

wireframe

3. User will be able to add a new city or edit a city content in the collection.

  • Create a bootstrap modal to show an input form with city information. The request is with same attributes as shown on Part 2 of the user stories.
  • A button to submit the information once completed: .If adding new city, information will show right after it is completed .If editing a city, information will be updated after submitting

wireframe

4. A user will be able to create, edit and delete a landmark on the city selected.

  • Create a modal box to show an input form asking for landmark information like the one displayed on PArt 2 of User Stories.
  • A button to submit the information once completed: .If adding new landmark, information will show right after it is completed .If editing a landmark, information will be updated after submitting .If deleting, the landmark with be removed from screen

wireframe

5. Each city will have a picture to show up a skyline of it as well as the landmark.

  • Pictures will be asked to be no less than 900 x 900 pixels for the city and 600 x 600 of a landmark

CHALLENGES

6. Adding transitions to the pictures of each city (different pictures of each city)

  • Pictures will automatically make transition from one to another on the city section

7. Users will be able to drop a comment of why they like a landmark so much

  • Create a "comment" form at the bottom of the page so people can say why they like a city so much

8. User will be able to see current weather form the selected city.

  • create an API connection to display current weather on the city displayed on screen

9. Map with pins of the landmarks.

  • Create an API connection to show the submitted landmarks on the a map

ERD and Database Models

Database Model and ERD

project-1---city-landamarks's People

Contributors

ghizmilth avatar jojobeth1 avatar

Watchers

James Cloos avatar  avatar  avatar

Forkers

jojobeth1

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.