The purpose of this project was to complete a simple, 2-page website challenge, built in the form of a personal blog which will showcase dynamically rendering content and explore working with and manipulating the DOM and web browser through local storage and Javascript.
This website has multiple benefits: allowing for the user of the website to add input data to the site on a landing page containing a form with labels and inputs for username, blog title, and blog content. This text content will then be saved in local storage while simultaneously being displayed on the front end of the browser webpage.
The way that the Javascript code works in this project is for it to ultimately be inserted and appended to parts of the HTML file, allowing for new content to be displayed on the front end on a separate posts webpage that the user will be redirected to (after data is collected on the landing page).
Additionally, the website will have a light and dark mode feature, enabling the user to toggle between each of those modes: choice between the theme for a light mode or the theme for a dark mode. The user will clearly and easily see this upon interacting with the website.
This project helped me learn more of vanilla Javascript basics. This includes utilizing Javascript as a toolset for manipulating objects in the HTML document and browser window/ DOM. Additionally, it further helped me practice creating Javascript functions and how those functions can be used to program with Javascript in a way that is potentially useful. Although much more in-depth compared to past projects so far, this was an engaging and valuable experience, as I learned much more about working with the browser's local storage using Javascript.
This webpage (with updated code) is deployed and ready to be viewed. Use DevTools and Inspect on a web browser in order to view the Javascript updates (as well as HTML or CSS code of the page, if interested), when viewing in a web browser such as Chrome.
As far as usage goes, the user can start by inputting data into the form's input fields that are on the main page of the site. After inputting the appropriate data for "Title, Content, and Username", click the "Save" button in order to start the process of collecting, storing, retrieving and appending the data into the HTML files. This new post data that the user has inputted and created will then be displayed on the front end of the browser webpage, inserted unto the Blog Posts page in a list format. This page acts as a sort of archive, archiving and listing these blog posts that the user has created locally.
The browser will continue to save and display the data on the page, as it is stored in the browser's local storage memory. Even if the user were to refresh the page and browser, the listed data will still be there. However a "delete" button feature has also been added for quick deletion of a post (and its corresponding data in the dev tools console).
Code used on this webpage/project can be found at:
https://github.com/apurificato/personal-blog
Deployed/live webpage:
https://apurificato.github.io/personal-blog
This webpage has a form with inputs for data retrieval/collection and a save button that triggers an event, which starts a programming process that results in displaying newly created "post" data on a Blog Posts page. That information is collected, stored, and displayed in the browser dev tools console, as well as inserted into the Undefined List HTML element (in the page's HTML document) and displayed on the front end of the webpage (in the browser window).
Project created by Anthony Purificato as part of a Rutgers Coding Bootcamp Assignment to further learn the benefits and importance of using Javascript to write functions and in manipulating the DOM, browser window, and HTML with Javascript programming and object methods.
Inspiration for the Code was obtained from Rutgers Coding Bootcamp during class meeting times, taught by instructor JD Tadlock, accessible by Rutgers Coding Bootcamp students, although it has been refactored extensively to become a unique and individualized project.
See the license included in this project's repository, as this repo utilizes an MIT license.