Coder Social home page Coder Social logo

kevinroozrokh / covid-19-tracker Goto Github PK

View Code? Open in Web Editor NEW
1.0 2.0 0.0 20 KB

Covid-19 Tracker Challenge - CSS, HTML, JavaScript, Popper.js, Moment.js & Leaflet.js

Home Page: https://applied-well-308306.firebaseapp.com/

License: MIT License

JavaScript 57.74% HTML 27.26% CSS 15.00%
javascript css html popperjs momentjs leafletjs openstreetmap-api covid19-tracker covid-19 google-cloud firebase

covid-19-tracker's Introduction

covid-19-tracker

Covid-19-Tracker v1.00 - This app was coded using CSS, HTML, JavaScript, Popper.js, Moment.js & Leaflet.js


App is live at: https://applied-well-308306.firebaseapp.com/


How to:

To code a web app similar to the one at the domain https://applied-well-308306.firebaseapp.com/, using JavaScript, you can follow the following step-by-step guide:

  1. Set up the development environment:

    • Ensure you have a text editor or integrated development environment (IDE) to write your JavaScript code.
    • Create a new directory or project folder for your web app.
  2. Create an HTML file:

    • Inside your project folder, create an HTML file (e.g., index.html) and open it in your text editor.
    • Add the necessary HTML structure, including <html>, <head>, and <body> tags.
    • Include a <script> tag inside the <body> section to link your JavaScript file.
  3. Create a JavaScript file:

    • In the same project folder, create a JavaScript file (e.g., main.js) and open it in your text editor.
    • Write your JavaScript code inside this file.
  4. Fetch data or define variables:

    • If your web app requires fetching data from an external source, use the Fetch API or an AJAX library like Axios to make HTTP requests and retrieve the data.
    • Alternatively, define any variables or constants needed for your app's functionality.
  5. Manipulate the DOM:

    • Use JavaScript to select HTML elements from the DOM (Document Object Model) and manipulate them.
    • You can use methods like document.querySelector(), document.getElementById(), or document.getElementsByClassName() to select elements.
    • Modify element properties, such as changing text content, adding or removing classes, or updating attributes.
  6. Add event listeners:

    • Use JavaScript to attach event listeners to HTML elements.
    • Choose appropriate events based on your app's functionality (e.g., click, submit, input).
    • Assign a callback function to handle the event and perform the desired actions when the event occurs.
  7. Implement app logic:

    • Write JavaScript code to implement the core logic of your web app.
    • This may involve calculations, conditionals (if/else statements), loops (for/while), or other JavaScript constructs.
  8. Style the web app:

    • Use CSS to style your web app and make it visually appealing.
    • Create a CSS file (e.g., styles.css) and link it to your HTML file using a <link> tag in the <head> section.
    • Define CSS rules and styles for your HTML elements to control their appearance.
  9. Test and debug:

    • Open your HTML file in a web browser to test your web app's functionality.
    • Use the browser's developer tools (e.g., Chrome DevTools) to inspect elements, check for errors, and debug your JavaScript code if needed.
    • Test different scenarios and user interactions to ensure your app works as expected.
  10. Deploy the web app:

    • Once you are satisfied with your web app, you can deploy it to a web server or hosting platform.
    • Create an account with a hosting provider (e.g., Firebase, Netlify, GitHub Pages).
    • Follow the hosting provider's documentation to deploy your app, which typically involves uploading your HTML, JavaScript, and CSS files to the hosting service.
  11. Continuously maintain and update the app:

    • Monitor your web app for any reported issues or bugs.
    • Address and fix any identified problems promptly.
    • Implement new features or improvements based on user feedback or your own objectives.

Please note that the specific implementation details and functionality of the web app at the provided domain may not be fully covered in this general guide. It is recommended to review the actual codebase or any accompanying documentation for the web app to get a more accurate understanding of its implementation.


Coded by Kevin Roozrokh.

Portfolio: https://kevinroozrokh.github.io/

Github: https://github.com/KevinRoozrokh

Email: [email protected]


Kevin's Social Media Links:

Github Github.io Linkedin Facebook Instagram Twitter Reddit


Version notes//

Version 1.00 - Graph tooltips / popovers added with Popper.js. Map OpenStreetMap API added with Leaflet.js. Dates updated with Moment.js.

covid-19-tracker's People

Contributors

kevinroozrokh avatar

Stargazers

 avatar

Watchers

 avatar  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.