Coder Social home page Coder Social logo

nishatsultana3538 / ufos Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 2.96 MB

Here I build a dynamic table using data stored in a JavaScript array. I have also create filters to make this table fully dynamic, meaning that it will react to user input, and then placed the table into an HTML file for easy viewing.

HTML 25.18% CSS 0.36% JavaScript 74.46%
css html javascript jumbotron

ufos's Introduction

UFOs

Overview of the UFO sighting: Filter UFO sightings on multiple criteria

Here I build a table using data stored in a JavaScript array. I have also create filters to make this table fully dynamic, meaning that it will react to user input, and then placed the table into an HTML file for easy viewing.

I have customized my webpage using Bootstrap, adding specific CSS components to the stylesheet such as applying a background color to the page , adding an image to the jumbotron and equipped my table with several fully functional filters that will allow users to interact with our visualizations.

Results:

Resources:

Software: HTML/CSS, JavaScript, BootStrap 4.0.0

UFO Website :

The website link deployed in github is https://nishatsultana3538.github.io/UFOs/

Using two javascript file app.js , data.js, one css file style.css and html file index.html I made the website to filter data for UFO sightings in different cities , shapes and time.

Below is how the website looks like

UFO_website

On ipad air

ipad_air

The website has 5 filter options to filter the data

filter_search

in where previous filter button

filter_button

was removed.

How to search in the UFO website :

Using different filter criteria we can get data depending on which filter options we use. We can also use one search field or multiple search field combined to narrow down the result. Using different date only in the Enter date search filed we can get data of different dates UFO sightings. Here are UFO sightings data for different dates.

1/10/2010

1/12/2010

Here is UFO sightings data for 1/10/2010 and only in California state:

CA-1/10/2010

Here is UFO sightings data for California state and triangle shape:

CA_triangle

Here is UFO sightings data for 1/12/2010 and only in California state and with fireball shape:

CA-1/12/2010_fireball

Summary:

Drawback of this webpage

  • One drawback of the webpage is that user don't know what parameter to use to filter the data. They have to look at the data to use a filter option.

  • Another drawback is that search area has some data already shown which seems confusing and also the search data need to be cleared to re-input again.

Two additional recommendations

  • Using a dropdown menu in the search option will be easier to choose from.

  • The search field need to be cleared after one search has done.

ufos's People

Contributors

nishatsultana3538 avatar

Stargazers

 avatar

Watchers

 avatar

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.