Hi everyone!

*I quite haven’t mastered how to add vs code and make it look all cool and stuff…

I’m going to do a semi-walk-through of a JavaScript Random Quote Generator.

I’m going to be using Visual Studio (VS).

The majority of the time, we’re gonna be in VS, and we’ll also head to the browser to check how it’s looking on it.

Ok, let’s get started.

We’re in VS right now.

In the project folder create a new file and call index.html

It’s called index.html because “The index.html page is the most common name used for the default page shown on a website if no other page is specified when a visitor requests the site. In other words, index.html is the name used for the homepage of the website.” — ThoughtCo.

In the index.html, type in ! and press tab.

This should autofill some boiler plate syntax:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8">

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0">

<title>Random Quote Generator!</title>

</head>

<body>

</body>

</html>

As seen above, the title has been changed to Random Quote Generator!

Now, we’re gonna add in some scripts tags to setup react.

The first set of script tags are CDN Links.

The React CDN scripts are from Reactjs’s CDN links

1. <script crossorigin src=”https://unpkg.com/react@17/umd/react.development.js"></script>

2. <script crossorigin src=”https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

Copy the CDN React script tags and in index.html, paste the two CDN React script tags within the head of the html.

The next script tag is from Babel

The Babel script is from Babel’s

1. Choose your tool (try CLI)

a. Prototyping

i. In the browser

2. Usage

a. With @babel/standalone

i. <script src=”https://unpkg.com/@babel/standalone/babel.min.js"></script>

Copy the Babel script tag and in index.html, paste the Babel script tag below the React script tags, within the head of the html.

React uses Babel to compile and then turn into regular javascript

This is a excerpt from Babel

“What is Babel?

Babel is a JavaScript compiler

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:

· Transform syntax

· Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js)

· Source code transformations (codemods)

· And more! (check out these videos for inspiration)

JSX and React

Babel can convert JSX syntax! Check out our React preset to get started. Use it together with the babel-sublime package to bring syntax highlighting to a whole new level.”

Next, the body in the index.html file needs a script tag of type/babel and also a src link to separate file.

In the index.html file, in the body section, type in the following:

<body>

<div id=”app”></div> <! — we’ll cover this line later on but be sure to add it as well →

<script type=”text/babel” src=”./index.js”></script>

</body>

Now we can use React within our script tags.

The ./ means index.js is within the current folder, which is within the project folder.

The next script tag we need to add is Bootstrap.

An excerpt from W3Schools about Bootstrap:

“Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.

Bootstrap 4 is the newest version of Bootstrap.” As of 2021–06–22.

The Bootstrap script is from GetBootstrap.

1. CSS

2. Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

a. <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel=”stylesheet” integrity=”sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x” crossorigin=”anonymous”>

And the last script tag we need is fontawesome

An excerpt from fontawesome.com about fontawesome:

“Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.”

The fontawesome script is from BootstrapCDN

1. Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

a. <link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" integrity=”undefined” crossorigin=”anonymous”>

This is what index.html should look like after all the script tags and div have been added to it:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8">

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0">

<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel=”stylesheet” integrity=”sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x” crossorigin=”anonymous”>

<link rel=”stylesheet” href=”./style.css”>

<script crossorigin src=”https://unpkg.com/react@17/umd/react.development.js"></script>

<script crossorigin src=”https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<script src=”https://unpkg.com/@babel/standalone/babel.min.js"></script>

<title>Random Quote Generator!</title>

</head>

<body>

<div id=”app”></div>

<script type=”text/babel” src=”./index.js”></script>

</body>

</html>

We need to create the index.js file

On the left side of VS, in the EXPLORER window, within the Project Folder, click on the New File icon and name it index.js

Ok, so let’s move to index.js and setup a function component.

An excerpt from W3Schools about components:

“React Components

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML via a render() function.

Components come in two types, Class components and Function components…

A Function component also returns HTML, and behaves pretty much the same way as a Class component…”

In index.js, type in the following and checkout the outcome on the browser

function App(){

return {

<div>How’s it going??</div>

}

}

ReactDOM.render(<App/>, document.getElementById(‘app’))

In the ReactDOM.render(<App/>, document.getElementById(‘app’)), the ‘app’ in document.getElementById(‘app’) is from earlier, when we typed it in the index.html file, in the body, above the script tag for text/babel.

If you have the Live Server extension (@ext:ritwickdey.liveserver) installed in VS, then on the left side of VS, in the EXPLORER window, within the Project Folder, RIGHT CLICK on index.html and select Open with Live Server

A browser window should pop open and display, “How’s it going??

Ok, so the setup is done.

Now let’s add in the code for the Random Quote Generator!

function App() {

const [quotes, setQuotes] = React.useState([])

const [randomQuote, setRandomQuote] = React.useState(“”)

const [color, setColor] = React.useState(“#fff”)

React.useEffect(() => {

async function fetchData() {

const response = await fetch (“https://type.fit/api/quotes")

const data = await response.json();

setQuotes(data);

let randIndex = Math.floor(Math.random() * data.length)

setRandomQuote(data[randIndex])

}

fetchData()

}, [])

const getNewQuote = () => {

const colors = [

“#73A857”, “BDBB99”, “#472E32”, “#FFC0CB”, “#DA70D6”, “#4169E1”, “#AFEEEE”, “#228B22”, “#FF6347”, “#DC143C”, “#FFA07A”,

“#C71585”, “#6B8E23”

];

let randIndex = Math.floor(Math.random() * quotes.length)

let randColorIndex = Math.floor(Math.random() * colors.length)

setRandomQuote(quotes[randIndex])

setColor(colors[randColorIndex])

}

return (

<div style={{backgroundColor: color, minHeight: “100vh”}}>

<div className=”contianer pt-5">

<div className=”jumbotron”>

<div className=”card”>

<div className=”card-header”>Quotable Quotes:</div>

<div className=”card-body”>

{randomQuote ? (

<>

<h5 className=”card-title”>- {randomQuote.author || “No Author” }</h5>

<p className=”card-text”> &quot;{randomQuote.text}&quot;</p>

</>

) : (

<h2>Loading…</h2>

)}

<div className=”row”>

<button onClick={getNewQuote} className=”btn btn-primary”>New Quote</button>

<a href={

“https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=" +

encodeURIComponent(

‘“‘ + randomQuote.text + ‘“‘ + randomQuote.author

)

} target=”_blank” className=”btn btn-warning”>

<i className=”fa fa-twitter”></i>

</a>

<a href={

“https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption=" +

encodeURIComponent(randomQuote.author) +

“&content=” +

encodeURIComponent(randomQuote.text) +

“&canonicalUrl=https%3A%2F%2fwww.tumblr.com%2Fbuttons&shareSource=tumblr_share_button"

} target=”_blank” className=”btn btn-danger”>

<i className=”fa fa-tumblr”></i>

</a>

</div>

</div>

</div>

</div>

</div>

</div>

);

}

ReactDOM.render(<App/>, document.getElementById(‘app’))

The random colors is from Quackit’s CSS Color Codes

The api quotes data is from Type.fit.

So, here it is.

Hello, I am a young enthusiastic Software Engineer. Looking forward to an opportunity to use my skills for mutual benefits and growth as well.