Creating a Flash Card app part 2
Welcome back!!! So far we have built out our rails back end for our application. In this post we will create our user interface. If you haven’t done so already please check out part one to this app found at. https://vincentservio.medium.com/creating-a-flash-card-app-part1-8f2ad6954331post.
Many of the variables that we will be using will stem from that post.
Begin by Cd’ing into FastCard folder(or whatever you named your Flash Card parent folder). Enter
mkdir frontend_flashcards
than cd into that folder and enter the following commands
touch index.js index.html style.css
This will create our basic file structure to start our app. As we progress we will add and replace some of the variable names. Open folder in your IDE and head over to the HTML file to start our app. If you enter ! in your HTML file, it should generate some HTML mark up to get us started.
<!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>Document</title> </head> <body> </body></html>
Now that we have our HTML markup in place lets connect our other two files to our HTMl files. In the <head> tags place the following line of code to associate the css file that we created.
<link rel="stylesheet" href="style.css" />Next lets move on to the <body> tags. Here we are going to create a main <div> to operate on, and we will connect our Javascript file. The following lines of code will do so in that order. (Remember* As we progress through this project, try to keep our script tags at the bottom of the <body> tags.)
<div id="main"></div><script src="index.js"></script>
Now we can take a break from our HTML file for a bit and head on over to our index.js file.