covid-tracker-js
ZeroOctave-Javascript-Projects
covid-tracker-js | ZeroOctave-Javascript-Projects | |
---|---|---|
1 | 2 | |
1 | 517 | |
- | 1.2% | |
0.0 | 3.5 | |
almost 3 years ago | 2 months ago | |
HTML | HTML | |
- | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
covid-tracker-js
-
COVID-19 Tracker 2021
Corona has made everyone suffer in various aspects, and I do hope it doesn't get any more worst of it. So, I've made an active COVID19 tracker for India 2021. The basic idea of making this project in the first place was to make it informative enough so that people know that how much of the population has been affected by covid-19 in 2021 too. Without any further ado let's begin with today's post. The website is hosted on Netlify but why netlify though? Comment down if you want to know about it, I will definitely add another post for that over here. COVID TRACKER 2021 This project looks a very simple one yet uses big concepts like how does fetch works in JavaScript this one question is one of the favorites' question for the recruiter to ask to any JavaScript Developer. First step open your code editor create one index.html file then proceed further with the steps given below: Step1: Let's begin with the html boiler plate Covid Tracker for India Step2: Next we need to create div sections for the container. In the image given below we can clearly see the div tags class names that are used to edit them in the CSS later: div section board is the child div of the container then comes the six different blocks which are named as follows: div section c: this is the div for telling the active cases div section cr: this is the div for telling the critical cases div section r: this is the div for telling the recovered cases div section ca: this is the div for telling the total cases div section d: this is the div for telling the total death cases div section t: this is the div for telling the total tests done The code for this using these divs in your index.html file: COVID -19 Cases in Active Cases //h5 tag is used for writing text in web page Total Cases Critical Cases Total Deaths Recovered Cases Total Testes Done The alignment of these div classes is done in the CSS section which you can get access via my GitHub. Step 3: Creating and editing the Script File(script.js). The main concept here is of fetching the data through an India Corona -tracker API. Syntax of using a fetch funtion n javascript is giving below: fetch('URL') .then(response => response.json()) .then(data => console.log(data)); What does fetch do and how does it works internally with your web browser? fetch is used for making AJAX(Asynchronous JavaScript XML) calls in JavaScript to store data. fetch sends an HTTP request to the server and we can get sure whether the request was successful or not via promises Below image displays how does it actually works diagrammatically: promise tells you whether the request was successful or not if it was successful then we can see the data on our web-page but if it wasn't then we will know there is some issue with our fetch and we can improvise that. Below is the promise's working shown diagrammatically: This is your code for Script.js file fetch("https://corona.lmao.ninja/v2/countries/India") .then((response) => { return response.json(); }) .then((data) => { console.log(data); document.getElementById("country").innerHTML = data.country; document.getElementById( "active" ).innerHTML = data.active.toLocaleString(); document.getElementById("cases").innerHTML = data.cases.toLocaleString(); document.getElementById( "critical" ).innerHTML = data.critical.toLocaleString(); document.getElementById("death").innerHTML = data.deaths.toLocaleString(); document.getElementById( "recovered" ).innerHTML = data.recovered.toLocaleString(); document.getElementById("tests").innerHTML = data.tests.toLocaleString(); document.getElementById("flag").src = data.countryInfo.flag; }); So as we discussed fetch, promise and how will the APIs work this will be the end of the post. Hope you liked it. For the icons I've used font-awesome which is a great site to use fav-icons from. Take care and keep coding💜
ZeroOctave-Javascript-Projects
-
GirlScript Summer of Code Learning And Experiences: From Contributor To Project Admin
GSSoC stands for Google GirlScript Summer of Code. As I mentioned earlier, GSSoC'21 acted as the starting step for my open source journey. After 1 year when another version of GSSoC came back, I decided to participate in my project this time. I filled out the registration form with my organization and project details and got selected as project admin. It's a 3-month long program currently going on, many new contributions are coming into our organization repository. ZeroOctave Javascript Projects is our project repository that is the part of GSSoC'22. Till now 200+ issues created and 200+ pull requests merged.
-
How NOT to contribute to Open Source on GitHub: Tips For Beginners
Don't make pull requests or raise issues without reading contributing guidelines of any projects. Always read the README.md file of projects where everything related to the project is written most of the time. Also, clone the project in your machine and go through every file once to understand its working.
What are some alternatives?
twitcord - If Twitter was owned by Discord - a mobile UI concept
Naruto-Shippuden - Naruto Anime Characters
html-css - Curso de HTML5 e CSS3
amazonprime-movieanimation - This repository contains my attempt to make an animation of a movie list in amazon prime.
Hacker_Man - Hacker-Themed Hangman Game made with React.
_traichu - A simple, semantic start page built with HTML, CSS, and a mouse-sized bit of JavaScript.
Coursify-hacktoberfest - A curated list of best free learning resources on the planet, made specifically for first time hackers!
Nebula - a stunning and sleek web proxy with support for hundreds of popular sites.
Random_Quote_Generator
css - Free And Open Source Responsive Modern CSS Framework
github-login-page - GitHub login page using HTML and CSS.
word-cloud-generator - D3 Word Cloud Generator