DEV Community: Harsh Vardhan Goswami

How i built a COVID-19 News Restful API

Harsh Vardhan Goswami — Sat, 04 Apr 2020 05:14:29 +0000

Hello beautiful people this is me harsh. I created a COVID-19 news Restful API using python flask and beautiful soap. I named it CORONEWS-19 API and it also got its own website and documentation.

Why i built it?

I created a website called gocorona.wtf with my friend Roshan Chokshi and in our website we have a news section where we display the COVID-19 news so we were using newsapi and that api has a limit of hits per user and all that free and paid service shit so i just came up with a idea that why not create our own api for delivering COVID-19 news. So i just opened Atom(Text Edito) i personally use and started building it and now i will explain how.

How i built it?

So this CORONEWS-19 API is built on top of flask(python framework for making web apps) and beautiful soup and now you guys be thinking that from where you getting news so thats where beautiful soup comes in. Building of this API includes few stages.

1.Gathering the data.
2.Structuring the data.
3.Providing the data as response to request.

Lets talk about how i got the news data.

So, for this task i have used beautiful soup to scrap news websites to gather the news it's kind a illegal thing to scrap any website without permission but hey we can give it a shot. From every website i have gathered news article title, feature image, link to the article.

Now it's time to structure the data we have got from beautiful soup.

So, as i have mentioned above that i have scraped news website so its time to arrange the data in a proper manner so for this i took a empty list and then i appended every news article i got from beautiful soup in a dictionary format with title,img,link of the article the output was something like this:

{
    "news":[
        {
            "img":"https://raw.githubusercontent.com/theuitown/COROAPIWEB/master/20200328_183732_0000.png",
            "link":"https://www.newsnation.in/world/news/trump-expands-role-of-us-army-in-fight-against-coronavirus-pandemic-257699.html",
            "title":"President Trump Expands Role Of US Army In Fight Against Coronavirus Pandemic"
        },
        {
            "img":"https://raw.githubusercontent.com/theuitown/COROAPIWEB/master/20200328_183732_0000.png",
            "link":"https://news.abplive.com/videos/news/india-china-observes-national-mourning-day-for-covid-19-victims-1189266",
            "title":"China observes national mourning day for COVID-19 victims"
        }
    ]
}

Now we got the data now its time to ready it for the users of the API.

For this task i choose flask and i created a python function which has all the code inside which at last returns the list of news articles and then i initialized a flask app and set an route '/' to a class which gives a list in form of json using flask function called jsonify. Those who wanna read the code here you go.

from flask import Flask
app = Flask(__name__)

@app.route('/')
def articles():
    r.append({'title':title,'img':img,
    'link':link})
    return news

This is how i made this API and now its time to host this api somewhere so that people can use it in their projects. So i choosed heroku for this task because it supports server based web apps and also its free to some extent.

You can see the response of this API by visiting this link Click Here.
You can read the small documentation of this api here https://coronews.iamharsh.design/

Thanks for reading this post ❤️. I really appreciate it man and you can also read my own blog website Electron Blog. With that being said this is me harsh and i am signing out and i will catch you guys in my next one.

GIT CLI CRASH COURSE

Harsh Vardhan Goswami — Sat, 07 Mar 2020 14:16:31 +0000

Hey folks, out there we all know about github and it is basically a git hosting site so now you must be wondering what is git? In simple words Git is a distributed version control system for tracking changes in source code during software development. Itis designed for coordinating work among programmers, but it can be used to track changes in any set of files.

Hey you can also read this full article on my blog website, i will be grateful to you if you visit it once 😊.

My Blog..

So now we must step further diving into git commands (GUI guys please stay away from this post).

1.git init

Utility: To initialise a git repo on your local machine in your current project directory.

2.git clone

Utility: This command is use to clone a git repo on to your local machine this could be your own repo hosted on GitHub or any other repo by some other cool developer just like me. Here you just have to replace with the url of that repo you want to clone or download.

3.git config

Utility: To config the git on your machine (mandatory) .
Syntax:

git config --global user.name "theuitown"
git config --global user.email "electronlabsdev@gmail.com"

4.git add

Utility: To save or add the changes you have made to the working directory this will not really take effect until you commit the changes.
Syntax:

"git add <file_name>" or "git add ." (to add all the files to repo)

5.git status

Utility: To check the status of the repo like what all changes you have made and what is added to repo and what not.

Create A Dark/Light Theme Switch with CSS/JS

Harsh Vardhan Goswami — Sun, 05 Jan 2020 12:28:31 +0000

Hey, folks out there so you must have seen dark mode options in most of the websites and if you haven't seen any of it then you can take a look at my portfolio website https://iamharsh.design/ . Now if you have already done that then you are eligible to think of implementing it in your websites without a much do let's get our hand dirty with some code. Wait I have a way to do that what you have to do is just open your code in any of your favorite text editor and follow my steps.

First thing first we will write some HTML shit to add a theme switcher button so that users can see where to click to change the theme of the website lets do it open your HTML file and add the following code into it.

<div class="theme-switch-wrapper">
       <label class="theme-switch" for="checkbox">
    <input type="checkbox" id="checkbox" />
    <div class="fas fa-moon moonboi fa-2x"></div>
  </label>
  </div>

Here we have added a moon icon using fontawesome library its free you can use it which acts as a theme switcher its upto your choice what you wanna use inplace of moon.

Now it might look ugly because it is only the skeleton so to make it handsome just open your CSS file and add the following code it's optional🖖(no it's not)

:root {
    --font-color: #424242;
    --bg-color: #fff;
}

[data-theme="dark"] {
    --font-color: #fff;
    --bg-color: #161625;
}

/*slider switch css */

  .theme-switch {
    display: inline-block;
    height: 34px;
    top:2rem;
    position: relative;
    width: 60px;
  }

  .theme-switch input {
    display:none;
  }

  .moonboi{font-size: 1rem;transition: .4s;}
  .moonboi::before{transition: .4s;}

Here in the above CSS shit, we have created two classes of color variables one is for light mode and one is for dark mode now after adding this what you have to do is add the variable name instead of color code wherever it is needed. Like say if you have to add color to text then you can use this like color: var(--font-color);

So here comes the main part the implementation of theme switch based on user's choice so in order to achieve it just add the following lines into your javascript code.


const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);

    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
    }
}

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark');
    }
    else {        document.documentElement.setAttribute('data-theme', 'light');
          localStorage.setItem('theme', 'light');
    }    
}

toggleSwitch.addEventListener('change', switchTheme, false);

After merging the shitty code written above into your code you can test your website and you will see a moon icon in order to test it just click on it and you will see that theme of the whole website will change with a beautiful transition.

Poor Man's Dark Mode

and if you are a lazy person like me then you can just add two lines of shit into css to get dark mode


@media (prefers-color-scheme: light) {
    body {
              background:#fff;
          color: #424242;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background: #161625;
                color:#fff;
    }
}

Now if you are using the poor man's dark mode method then add this into css and don't give any color or background color property to any element otherwise this method will not work otherwise choice is yours 🤣.

Back to the point

This is pretty much it so I must take leave now if you have any issue adding it to your website you can leave a comment or if you want to have a chat with me you can DM me on Instagram at any time i have nothing to do :).

TEXT GLITCH REVEAL ANIMATION..

Harsh Vardhan Goswami — Fri, 09 Aug 2019 15:23:57 +0000