Portfolio page using React.js to render dynamic HTML

Overview

Meta-Portfolio

Portfolio page using React.js to render dynamic HTML

Version 1.0

Note

You are important.

Installation Instructions

No installation necessary.

1. Click on deployed link.
2. Type in the name of transaction and the amount.
3. Click Add or Subtract to complete budget app transaction.
4. Boom. It's that easy.

Acceptance Criteria

GIVEN a user is on Budget App without an internet connection
WHEN the user inputs a withdrawal or deposit
THEN that will be shown on the page, and added to their transaction history when their connection is back online.

Students have completed this project when:

Add functionality to our existing Budget Tracker application to allow for offline access and functionality.

The user will be able to add expenses and deposits to their budget with or without a connection. When entering transactions offline, they should populate the total when brought back online.

Offline Functionality:

- Enter deposits offline

- Enter expenses offline

When brought back online:

- Offline entries should be added to tracker.

User Story

AS AN avid traveller
I WANT to be able to track my withdrawals and deposits with or without a data/internet connection
SO THAT my account balance is accurate when I am traveling

Business Context

Giving users a fast and easy way to track their money is important, but allowing them to access that information anytime is even more important. Having offline functionality is paramount to our applications success.

Screenshot

React Portfolio Main Screen

Technologies Used

- React
- Javascript
- Bootstrap

Links

Credits

- Andrew Tran
- Lama Dev

Resources

- https://www.w3schools.com/
- https://developer.mozilla.org/en-US/
- https://choosealicense.com/
- https://www.stackoverflow.com
- https://www.youtube.com/watch?v=7WwtzsSHdpI&t=450s

License

Copyright (c) [2021] [Andrew Tran]

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
You might also like...

Render readable & responsive tables in the terminal

terminal-columns Readable tables for the terminal. Tables can be automatically responsive! Features Content wrapped to fit column width Column widths

Oct 28, 2022

Dokka plugin to render Mermaid graphics, from your code comments to your Dokka documentation.

Dokka plugin to render Mermaid graphics, from your code comments to your Dokka documentation.

Html Mermaid Dokka plugin Mermaid-Dokka MermaidJS 0.2.2 8.14.0 0.3.0 9.0.0 Step 1: install dependencies { dokkaPlugin("com.glureau:html-mermaid-dokk

Sep 16, 2022

A plugin for the Obsidian markdown note application, adding functionality to render markdown documents with multiple columns of text.

A plugin for the Obsidian markdown note application, adding functionality to render markdown documents with multiple columns of text.

Multi-Column Markdown Take your boring markdown document and add some columns to it! With Multi Column Markdown rather than limiting your document lay

Jan 2, 2023

Given a list of items, only render what's visible on the screen while allowing scrolling the whole list.

Solid Windowed Given a list of items, only render what's visible on the screen while allowing scrolling the whole list. A Solid component. See https:/

Dec 21, 2022

Svelte component to render markdown.

svelte-exmarkdown Svelte component to render markdown. Motivation svelte-markdown is a good component package. However, it is not extensible. You cann

Jan 6, 2023

Engine render, fps and I/O on terminal.

typesgine-ascii - Game ASCII engine for terminal About | technologies | Features | Examples | Functions | License đź““ About Typesgine is engine for cre

Jun 10, 2022

Render (GitHub Flavoured with syntax highlighting) Markdown, and generate CSS for each of GitHub’s themes.

render-gfm Render (GitHub Flavoured with syntax highlighting) Markdown, and generate CSS for each of GitHub’s themes. GitHub Repository npm Package Do

Oct 10, 2022

Detect browser, and render view according to the detected browser type.

react-browser-detector Detect browser, and render view according to the detected browser type. Installation To install, you can use npm or yarn: npm i

Jul 13, 2022

Render arbitrary Markdown content in Astro, optionally integrating with any existing configuration.

Astro Markdown Astro Markdown lets you render arbitrary Markdown content in Astro, optionally integrating with any existing configuration. --- import

Dec 22, 2022
Owner
Andrew Tran
Hello, I'm Andrew. Currently studying to be a full stack web developer through the SMU Bootcamp.
Andrew Tran
portfolio-project is a npm package to automatically update your projects section in your portfolio website. It will fetch the selected repositories directly from your GitHub account.

portfolio-project Those days of manually updating portfolio website after every new project made are gone ⚡ Yesss . . . you read that right. ?? portfo

Gaurav Gulati 15 Aug 3, 2021
My-portfolio - 🪶 My portfolio built with Remix, ChakraUI...

Welcome to Remix! Remix Docs Deployment After having run the create-remix command and selected "Vercel" as a deployment target, you only need to impor

jotyy 5 Oct 31, 2022
Website to present projects made by me and that are part of my personal portfolio. It was made using React, HTML y Scss (CSS).

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Portfolio JesĂşs Leal 0 Dec 23, 2021
dynamic-component-app is an angular application for dynamic component template creation

MyApp This project was generated with Angular CLI version 14.1.0. Development server Run ng serve for a dev server. Navigate to http://localhost:4200/

Aniket Muruskar 7 Aug 26, 2022
Responsive Portfolio Website Using Html, Css and JavaScript, With a beautiful user interface

Responsive Portfolio Website Alexa Watch it on youtube Responsive Portfolio Website Alexa Responsive Portfolio Website Using Html, Css and JavaScript,

Alex Axel Mucyo 1 Mar 11, 2022
The awesomebooks project is a simple list, but separated into 3 parts and given a retro feel. The main page is where we can add books, and on another page we can see the list, and remove items. There is also a "contact-us" page.

Awesome Books This is the restructured version of the famous awesome-books project! Here you can find JavaScript broken into modules, using import-exp

Matt Gombos 12 Nov 15, 2022
Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.

Gatsby Starter Portfolio: Cara Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Using the Gatsby Theme @lekoarts/gat

prashanth s 1 Dec 24, 2021
Minimalistic portfolio/photography site with masonry grid, page transitions and big images.

Gatsby Starter Portfolio: Emilia Minimalistic portfolio/photography site with masonry grid, page transitions and big images. Themeable with Theme UI.

Cryptob3auty 1 May 20, 2022
Full-Stack Web & Mobile Developer Portfolio (Landing Page only)

[DRAFT] Full-Stack Web & Mobile Developer Portfolio (Landing Page only) ?? Contact me at: LinkedIn My company's website Project Description ⚠️ Nothing

algife 1 Feb 7, 2022
Websheetjs - Lightweight JS library to render website sections with data from Google Spreadsheets

websheet.js Render website sections with lazy-loaded data from Google Spreadsheets It's lightweight, fast, free and open-source ! See how it works, fu

Pierre Avinain 29 Oct 4, 2022