DEV Community

Cover image for Creating a JavaScript project for a single page application
Amereen
Amereen

Posted on

Creating a JavaScript project for a single page application

Before I began my first Single Page Application project in JavaScript, I had a limited understanding of what an SPA (Single Page Application) was and how much information could be accessed on a single page.Single page application development can be a pretty inventive process, a lot of thought goes into figuring out how to add functionality to build a project especially your first project. I was overwhelmed when I first started building my project, so I kept reading the instructions and making notes about ideas I wanted to incorporate. But the very first google search I did regarding my project was on (SPA) a "Single Page Application which is a web app that loads only a single web document and then updates the body content of that single document via JavaScript APIs such as XMLHttpRequest and Fetch when different content is to be shown."

Image description

So basically this means that there are no redirects to other pages and that you are working with just one HTML file. In order to style your project, you could have only one HTML file, one JS file, and one CSS file.

I first started building my basic HTML skeleton, I created div container which I use to append my contents(content stored in other tags) which I created a function for.

Image description

I then Created a function in my Js file, in that function I created new elements using the "document.createElement()"

Image description
In the function that I have created I append all the new elements created to my div container, using the .append() method.
I also, added "innerText" to the variable of my created elements as well as dot notations to refer to the content from my API.

Image description
There are numerous more forms of SPA that may be built. Even though working with a SPA can often be restrictive, there are ways to get around it and still have fun.

Top comments (0)