Tag: javascript

Codepen – React JS making Bootstrap Components

Below is a simple React app to show how Twitter Bootstrap components can be broken down into components with props passed between functions. The Start button with dropdown, and the modal window, are meant to evoke a desktop OS – it’s like having a tiny and totally ineffective computer!

Also, check out the essay worth of Javscript code it takes to make… this…

EJS Malpractice

Depicted below:

Personal web project. This is coded in EJS, a server-side template. Select options populated from a database (MongoDB). The Build button runs a function that matches the names in the select values to their respective objects, and pulls the background values to build the real-working link in the Go button.

“Separation of concerns” denied

Another web app mutation: “Planner”

Personal web project

https://github.com/anaida07/MEVN-boilerplate and bootstrap-vue

Also v-calendar, learn more: NPM  Official web site

Planner

Imports data from a Javascript file. (MongoDB integration forthcoming)

The calendar’s highlighted borders are from the same data as the events list. Hard to see in this screenshot, but the event titles turn into calendar popovers.

The black dot is today’s date generated by Date().get stuff, learn more: W3 Schools

‘Edit’ and ‘Delete’ buttons don’t work yet.  The ‘Add’ section doesn’t work yet.

Also to-do: event list to include inline style interpolation of color from data.

I may add other features to taste (event sorting, reminders, all-day checkbox for add, hours-of-day timeline)

Recent web app mutation “Jobby”

Personal web project

https://github.com/anaida07/MEVN-boilerplate and bootstrap-vue

Jobby makes it a little easier to search for jobs.

Imports data from 2 Javascript files.

Suggest

Purpose is to create surprise suggestions, let the computer make some choices.

Those three buttons labels and hrefs are built from segments selected at random from the data files.

Query

Build a custom href based on selects.

The ‘Build’ button is a bandaid. It plays the method again, bc the href build is a step behind and I haven’t figured that out yet.

Dashboard

Just builds buttons for some homepages.

Loops loops loops loops loops

MEVN with chart

Personal project.

Depicted: MEVN stack web app on Windows. MEVN stands for MongoDB (NoSQL database), Express (app framework/back-end), Vue (single-page app/front-end), Node.js (server/package manager).

I hacked up this MEVN boilerplate: https://github.com/anaida07/MEVN-boilerplate

The boilerplate comes with CRUD ops built-in already. My changes include some items renamed, nav links, addition of a chart, and this thing which tells time.

Includes MongoDB, node, express, vue, axios, vue-chartjs, vue-moment.