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:
-
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.
-
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.
-
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.
-
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.
-
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(), ordocument.getElementsByClassName()to select elements. - Modify element properties, such as changing text content, adding or removing classes, or updating attributes.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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: KevRooz@Outlook.com
Kevin's Social Media Links:
Version notes//
Version 1.00 - Graph tooltips / popovers added with Popper.js. Map OpenStreetMap API added with Leaflet.js. Dates updated with Moment.js.