DEV Community: saxena uditanshu

Joe Schmoe API

saxena uditanshu — Sat, 15 Aug 2020 08:58:51 +0000

Joe Schmoes are colorful characters illustrated by Jon&Jess that can be used as profile picture placeholders for live websites or design mockups.

Let's explore there API and make something cool. So Fire up your PC and let's code. Check the API endpoint Here

How To

Step 1 - Open VsCode or any other text editor.
Step 2 - Create a file index.html

Include this external library in your html file https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css

<main>
  <div class="container border border-primary mt-5 px-2 py-2">
        <center>
        <h1>API DEMO, Enter Name To Get A Cool Profile Image</h1>

        <label for="name" class="bmd-label-floating">Input Your Name</label>
        <input type="text" class="form-control" id="name">
        <button class="btn btn-primary btn-raised">Submit</button>
        <br>
    <img src="https://placehold.it/120x120?text=profile" width="120" height="120" class="imgchange">
    </center>
</div>
</main>

Step 3 - Now create a style tag and put this code in it.

body {
font-family: "Avenir Next";
background-color: #daf7a6;
 }

Include jQuery in your html file https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
Step 4 - Now create Script tag and put this javaScript code. This is the main code which fetch image for you.

 $(document).ready(function(){
  $('button').click(function(){
   const name = $('#name').val();
   alert(name);
   $('.imgchange').attr('src',`https://joeschmoe.io/api/v1/${name}`);
   const b = $('.imgchange');
   console.log(b);
  });
 });

Step 5 - Now save your file and double click to open it in the browser. You will see something similar.
Check this working demo below

Now you can use this API anywhere you want.

We will be covering many topics related to Web Development and Data Science so stay updated with us.

NASA APOD API

saxena uditanshu — Fri, 14 Aug 2020 12:08:22 +0000

ASTRONOMY PICTURE OF THE DAY

Nasa has many cool set of API's to explore, check them out Here. Some of them are -

Astronomy Picture of the Day API
InSight: Mars Weather Service API
Mars Rover Photos

So today we are exploring APOD API. Check what I made from it Here

(You need a basic understanding of HTML CSS & JS for this)

How To

Get your API key from Here
Fire up you PC, let's code (don't put it on fire😅)
Open VsCode or another text editor.
Create a file named index.html and put this code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="Uditanshu saxena" />
    <meta name="theme-color" content="#faebd7" />
    <title>NASA APOD API</title>
    <link rel="stylesheet" href="style.css">
    <script src="apodapi.js"></script>
  </head>
  <body>
     <main>
      <h1 class="title">ASTRONOMY PICTURE OF THE DAY</h1>
      <img src="" id="bg"></img>
      <br />
      <p id="title"></p>
      <p id="date"></p>
      <h4 id="ale">A little explanation -</h4>
      <p id="exp"></p>
      <center>
       <button>
        <a id="dwnld" href="#">Download HD Image</a>
       </button>
      </center>
    </main>
  </body>
</html>

Now lets create style.css

body {
        margin: 0px;
        padding: 0px;
        font-family: monospace;
        background-color: antiquewhite;
        padding-bottom: 10px;
      }
      #bg {
        height: 100%;
        width: 100%;
      }
      .title {
        text-align: center;
      }

      #title {
        text-align: center;
        font-weight: 700;
        font-size: large;
        color: gray;
      }

      #date {
        font-weight: 500;
        color: brown;
      }

      #exp {
        font-weight: 500;
        font-size: 16px;
      }
      #ale{
        font-size: 18px;
        padding: 5px 15px 0px 15px;
        margin: 2px;
      }
      #title,
      #date,
      #exp{
        margin: 2px;
        padding: 5px 15px 5px 15px;
      }

      button, a{
          border : 0px;
          background-color:burlywood;
          color:white;
          padding:10px 12px 10px 12px;
          text-decoration: none;
      }

Now create a file apodapi.js
Put your api key after ?api_key= here . This is the code which is doing all the main stuff of fetching data and displaying it.

async function getImg() {
//fetching data
          "https://api.nasa.gov/planetary/apod?api_key=<put your api key here>";
        const response = await fetch(base_url);
        const data = await response.json(); //converting to JSON
        console.log(data);
//display data on frontend
        document.getElementById("date").textContent = "Date: " + data.date;
        document.getElementById("exp").textContent = data.explanation;
        document.getElementById("title").textContent = data.title;
        document.getElementById('bg').src = data.url;
        document.getElementById('dwnld').href = data.hdurl;
      }

      getImg();

Now save every file and click on your index.html to check how it works.

Yehe you have successfully implemented Nasa Apod API.

Fork the Code from my GITHUB

saxenaudit / Nasa_APOD_API

Simpe WebApp implementation of NASA APOD API

NASA ASTRONOMY PICTURE OF THE DAY API

Simpe WebApp implementation of NASA APOD API

#How to
step 1 - GET API KEY

Visit -> https://api.nasa.gov/
Register for an API Key
You can check several API's from Browse API tab

Now go to `index.html` and place your API KEY after `?api_key=` in the URL

ALL set, host this website on any platform or open in local browser!

DEMO

View on GitHub

JoeSchmoe API Demo

saxena uditanshu — Mon, 10 Aug 2020 13:28:37 +0000

Joe Schmoes are colorful characters illustrated by Jon&Jess that can be used as profile picture placeholders for live websites or design mock ups. official website

Check out it's implementation in my pen on codepen click

Reviewing the worst piece of code ever

saxena uditanshu — Sun, 09 Aug 2020 17:42:21 +0000

Checkout this post from Michele Riva. Link 🖱️. If you work with user authentication and backend.

Create your first Android/iOS app.

saxena uditanshu — Wed, 24 Jun 2020 09:47:29 +0000

In the last post, I wrote about Flutter basics & how to install flutter in your system. If you didn't install Flutter please follow the steps given in the link here Install Flutter, Official site.

Step 1. Install Flutter ✔

I assume you installed flutter successfully in your system. I will be using windows 10 in this article. The steps will be the same for Linux & Mac Os. To check all things are ready just fire up your command prompt, terminal and type this command.

Flutter doctor

You should see something similar

If the output is similar we are good to go, if there is some problem flutter will give the description & how to resolve it.

Step 2. Install VsCode ✔

Visit the link to download & install VsCode Install

It's the best IDE for coding.

IntelliSense - syntax highlighting and autocomplete with IntelliSense.

Debug code right from the editor.

Connect your Git or GitLab account & collaborate with team members.

Installed VsCode Cool! Now let's go ahead.

Step 3. Create New Flutter Project. ✔

Navigate to the folder/directory where you want to create the flutter project, for example- CD Desktop to navigate to Desktop.
In your CMD/terminal type this command.

 flutter create HelloWorld

Here, HelloWorld is the name of your project
Now Flutter will start installing files needed for our project. You should see something similar in the end.

Step 4. Setup VsCode for Flutter Development.✔

Open VsCode.
Click View > Command Palette
Type “install”, and select Extensions: Install Extensions.
Type “flutter” in the extensions search field, select Flutter in the list, and click Install. This also installs the required Dart plugin.

Yehee! You just setup VsCode successfully.

Step 5. Create a Virtual Device. ✔

Open Android Studio.
Open AVD Manager from Settings & click create virtual device.
Select device type & android version.
click next & launch device.

Yehee! you successfully created your virtual android device. Now back to VsCode.

Step 6. Code a Hello World App.✔

Open VsCode.
Goto Files > Open Folder >
Select Flutter project folder which we created above 'Hello World'.
Something similar will open.
Click lib>main.dart
'Main.dart' will open in code editor.
Now press F5 or from above toolbar Run > Start Debugging & select the virtual android device we created.

Everything should be fine if you followed the steps correctly, Now an virtual device will show on your screen.
Wait a few minutes for the app to be built and installed to the virtual device.
WoW! You created your first android/ios app.

I will explain the code in next post, as you see the post is too long and sorry if you find some mistakes here.

DEF CON DC9111

saxena uditanshu — Wed, 24 Jun 2020 07:01:39 +0000

Got the chance to attend Def con DC9111 0x03.

Hi, I am new to dev.to & I will write about Flutter.

saxena uditanshu — Sun, 21 Jun 2020 18:35:37 +0000

I will write about how to create Android/iOS native apps with Flutter SDK.

What is flutter ?

saxena uditanshu — Sun, 21 Jun 2020 05:59:18 +0000

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

Flutter uses Google’s Dart programming language & it's very easy to learn. Flutter will help you create beautiful, fast apps, with a productive, extensible, and open development model.

Want to write your first android / iOS app?

How to install Flutter?

1- Installing Flutter, Official Flutter Website
2- Visit the link & follow the simple steps.

Let's see our Hello World app in flutter.

What do you think how many lines of code is needed to make a basic app like that?

Code for above app.

import 'package:flutter/material.dart';

void main() => runApp(new HelloWorldApp());

class HelloWorldApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Material(
        child: new Center(
          child: new Text("Hello world!", style: TextStyle(fontSize: 32.0),),
        ),
      ),
    );
  }
}

Looks Easy right! Flutter is very easy to learn.

Widgets - In simple words everything you see in flutter app is a widget, example - in the above app we have a text widget.

Another Example App-

With just Code < 300 lines, we can create the above app with beautiful UI & animations.

DEV Community: saxena uditanshu

Joe Schmoe API

Joe Schmoes are colorful characters illustrated by Jon&Jess that can be used as profile picture placeholders for live websites or design mockups.

How To

NASA APOD API

ASTRONOMY PICTURE OF THE DAY

How To

Yehe you have successfully implemented Nasa Apod API.

Fork the Code from my GITHUB

saxenaudit / Nasa_APOD_API

Simpe WebApp implementation of NASA APOD API

NASA ASTRONOMY PICTURE OF THE DAY API

Now go to index.html and place your API KEY after ?api_key= in the URL

DEMO

JoeSchmoe API Demo

Reviewing the worst piece of code ever

Create your first Android/iOS app.

Step 1. Install Flutter ✔

You should see something similar

If the output is similar we are good to go, if there is some problem flutter will give the description & how to resolve it.

Step 2. Install VsCode ✔

Installed VsCode Cool! Now let's go ahead.

Step 3. Create New Flutter Project. ✔

Step 4. Setup VsCode for Flutter Development.✔

Yehee! You just setup VsCode successfully.

Step 5. Create a Virtual Device. ✔

Yehee! you successfully created your virtual android device. Now back to VsCode.

Step 6. Code a Hello World App.✔

I will explain the code in next post, as you see the post is too long and sorry if you find some mistakes here.

DEF CON DC9111

Hi, I am new to dev.to & I will write about Flutter.

What is flutter ?

Want to write your first android / iOS app?

How to install Flutter?

Let's see our Hello World app in flutter.

What do you think how many lines of code is needed to make a basic app like that?

Code for above app.

Looks Easy right! Flutter is very easy to learn.

Another Example App-

In the next post I will be writing about app development with flutter having simple codes. I will start with a basic text widget.

#FlutterBasics

Now go to `index.html` and place your API KEY after `?api_key=` in the URL