Completed

I'm trying to learn - Need a single-page web app - Simple Requirements - HTML, CSS, Bootstrap 4, JavaScript, call to Web Service for JSON

Hi,

I am looking for some new friends who can code a web page. I am a total newbie. I'm trying to learn. I can't leave my house for a while, so I need to learn some new things.

I want to learn how to use Visual Studio Code to make a web app. I want to be able to open up VS Code, make an HTML page, use Bootstrap 4 for the CSS, layout a page with text boxes, other controls, grid, whatever makes sense..... then on click of a button call a JavaScript function that will go out to a Web Service, do a Get and bring back a JSON object to display records on the page.

Requirements:

1: Use Visual Studio Code with

a. Bootstrap 4 , Font Awesome (or show me a better one)

b. Live Server 5.6.1 (or show me a better one)

c. Prettier Now (or show me a better one)

d. JavaScript ES6 code snippets (or show me a better one)

2. HTML using Bootstrap for layout, controls, etc.

3. Separate .js file for JavaScript

4. HTML search button, on click it will call a JavaScript function

5. JavaScript function will call a web service that returns JSON

6. JavaScript will:

a. Use ajax? Use getJson? .... You show me.

b. Make an asynchronous call to the web service

c. Use Promise/Then syntax (I really want to learn promises.... show another way also if you want to)

7. Display the data back in the HTML

Your teaching/sample app will use a web service to search for MTG Cards. Search for one or more cards. Display one or more cards.

You can get sample JSON by calling the web service. I have also attached a sample here. You will see that this table has many columns. There is no need to use or show all columns. Just use a few of the columns that have data. Maybe try:

name

ability

color

set_code

flavor

mtg_card_id

number

etc.

This is the web service that you will call:

The web service is up and running. You can test the web service and get a JSON result with the following steps. I use Fiddler for this.

Perform a get to this URI:

[login to view URL]

Where "Dragon" is the parameter. The web service will return a JSON record for each MTG card where "Dragon" is a part of the Name. You can try any string that you want to search for. Change the string Dragon to any other string to change the search.

The body of the get is:

User-Agent: Fiddler

Authorization: Basic YWRtaW46YWRtaW4=

Host: [login to view URL]

Note that the Authorization is Basic.

YWRtaW46YWRtaW4= is the Base64 Encoded version of: admin:admin

If you want to get all records instead of passing a string, you can get the following:

[login to view URL]

or

[login to view URL]

I don't have much money. Can you do this in an hour? 4 hours? How long does this take?

You can make it look any way that you want... Just use VS Code so that I can install the same extensions and make it do everything that it needs to.

Already have 90% of this done already and you just want to charge me a small amount, get me started and become a connection?

I will hire multiple people for examples. Is this cheap enough so that I can do that?

Skills: CSS, Javascript, HTML, jQuery / Prototype, HTML5

About the Employer:
( 4 reviews ) Silver Lake, United States

Project ID: #24491814

Awarded to:

AashirTech

Hello, Here it is my pleasure to state that my Web development skills are very sharp and up to date with the knowledge of latest theme of Web designing and development. So that I am the best suitable candidate to ser More

$20 USD in 7 days
(0 Reviews)
0.0

3 freelancers are bidding on average $23 for this job

robchow88

Hello. I have read your job description and I can do it. I have worked as a full stack developer for 7+ years with many skills. Hope to work with you soon.

$40 USD in 7 days
(4 Reviews)
4.1
varshasinha299

-------------------------****************************--------------------------------------- Hi, I am an experienced full stack developer with years of experience developing several enterprise systems. I will provide More

$10 USD in 2 days
(2 Reviews)
1.6