Github pages practice
Creating a website to advertise my work. Excuse my typos and feel free to give feedback!
This website is purposefully designed for chrome web browser. Excuse ugliness while on other browsers. Thank you! <3 <3 <3
-Kiananaik
Name: Kiki N.G.D.
Type: User
Company: [email protected]
Bio: Hi! My name is Kiana, but you can call me Kiki. I'm a Physicist currently working towards becoming a front & back end web developer. Feel free to contact me!
Location: katy, texas
biography for class
CSS and Bootstrap Homework: Responsive Portfolio for class homework.
First interactive calendar
I made another one cuz I didn't want to delete the first userDirectory...
fitness tracker hw
A glance at new or existing games for users to rate according to preference.
just hw 9 for now
hw 21
boo
Team Practicing using Express.js
Github pages practice
Business Website
competitive snake game
# Node Express Handlebars ### Overview In this assignment, you'll create a burger logger with MySQL, Node, Express, Handlebars and a homemade ORM (yum!). Be sure to follow the MVC design pattern; use Node and MySQL to query and route data in your app, and Handlebars to generate your HTML. ### Read This When trying to connect remotely to your Heroku database on an open network such as a coffee shop, library, or even your University WiFi, it will be blocked. If you are experiencing a Heroku connection error, this could be why. ### Important * **This assignment must be deployed.** Be sure to utilize the [MYSQL Heroku Deployment Guide](../../04-Supplemental/MySQLHerokuDeploymentProcess.pdf) in order to deploy your assignment. ### Before You Begin * Eat-Da-Burger! is a restaurant app that lets users input the names of burgers they'd like to eat. * Whenever a user submits a burger's name, your app will display the burger on the left side of the page -- waiting to be devoured. * Each burger in the waiting area also has a `Devour it!` button. When the user clicks it, the burger will move to the right side of the page. * Your app will store every burger in a database, whether devoured or not. * [Check out this video of the app for a run-through of how it works](https://youtu.be/msvdn95x9OM). ### Commits Having an active and healthy commit history on GitHub is important for your future job search. It is also extremely important for making sure your work is saved in your repository. If something breaks, committing often ensures you are able to go back to a working version of your code. * Committing often is a signal to employers that you are actively working on your code and learning. * We use the mantra “commit early and often.” This means that when you write code that works, add it and commit it! * Numerous commits allow you to see how your app is progressing and give you a point to revert to if anything goes wrong. * Be clear and descriptive in your commit messaging. * When writing a commit message, avoid vague messages like "fixed." Be descriptive so that you and anyone else looking at your repository knows what happened with each commit. * We would like you to have well over 200 commits by graduation, so commit early and often! ### Submission on BCS * **This assignment must be deployed.** * Please submit both the deployed Heroku link to your homework AND the link to the Github Repository! ## Instructions #### App Setup 1. Create a GitHub repo called `burger` and clone it to your computer. 2. Make a package.json file by running `npm init` from the command line. 3. Install the Express npm package: `npm install express`. 4. Create a server.js file. 5. Install the Handlebars npm package: `npm install express-handlebars`. 6. Install MySQL npm package: `npm install mysql`. 7. Require the following npm packages inside of the server.js file: * express #### DB Setup 1. Inside your `burger` directory, create a folder named `db`. 2. In the `db` folder, create a file named `schema.sql`. Write SQL queries this file that do the following: * Create the `burgers_db`. * Switch to or use the `burgers_db`. * Create a `burgers` table with these fields: * **id**: an auto incrementing int that serves as the primary key. * **burger_name**: a string. * **devoured**: a boolean. 3. Still in the `db` folder, create a `seeds.sql` file. In this file, write insert queries to populate the `burgers` table with at least three entries. 4. Run the `schema.sql` and `seeds.sql` files into the mysql server from the command line 5. Now you're going to run these SQL files. * Make sure you're in the `db` folder of your app. * Start MySQL command line tool and login: `mysql -u root -p`. * With the `mysql>` command line tool running, enter the command `source schema.sql`. This will run your schema file and all of the queries in it -- in other words, you'll be creating your database. * Now insert the entries you defined in `seeds.sql` by running the file: `source seeds.sql`. * Close out of the MySQL command line tool: `exit`. #### Config Setup 1. Inside your `burger` directory, create a folder named `config`. 2. Create a `connection.js` file inside `config` directory. * Inside the `connection.js` file, setup the code to connect Node to MySQL. * Export the connection. 3. Create an `orm.js` file inside `config` directory. * Import (require) `connection.js` into `orm.js` * In the `orm.js` file, create the methods that will execute the necessary MySQL commands in the controllers. These are the methods you will need to use in order to retrieve and store data in your database. * `selectAll()` * `insertOne()` * `updateOne()` * Export the ORM object in `module.exports`. #### Model setup * Inside your `burger` directory, create a folder named `models`. * In `models`, make a `burger.js` file. * Inside `burger.js`, import `orm.js` into `burger.js` * Also inside `burger.js`, create the code that will call the ORM functions using burger specific input for the ORM. * Export at the end of the `burger.js` file. #### Controller setup 1. Inside your `burger` directory, create a folder named `controllers`. 2. In `controllers`, create the `burgers_controller.js` file. 3. Inside the `burgers_controller.js` file, import the following: * Express * `burger.js` 4. Create the `router` for the app, and export the `router` at the end of your file. #### View setup 1. Inside your `burger` directory, create a folder named `views`. * Create the `index.handlebars` file inside `views` directory. * Create the `layouts` directory inside `views` directory. * Create the `main.handlebars` file inside `layouts` directory. * Setup the `main.handlebars` file so it's able to be used by Handlebars. * Setup the `index.handlebars` to have the template that Handlebars can render onto. * Create a button in `index.handlebars` that will submit the user input into the database. #### Directory structure All the recommended files and directories from the steps above should look like the following structure: ``` . ├── config │ ├── connection.js │ └── orm.js │ ├── controllers │ └── burgers_controller.js │ ├── db │ ├── schema.sql │ └── seeds.sql │ ├── models │ └── burger.js │ ├── node_modules │ ├── package.json │ ├── public │ └── assets │ ├── css │ │ └── burger_style.css │ └── img │ └── burger.png │ │ ├── server.js │ └── views ├── index.handlebars └── layouts └── main.handlebars ``` ### Reminder: Submission on BCS * Please submit both the deployed Heroku link to your homework AND the link to the Github Repository! - - - ### Minimum Requirements Attempt to complete homework assignment as described in instructions. If unable to complete certain portions, please pseudocode these portions to describe what remains to be completed. Hosting on Heroku and adding a README.md are required for this homework. In addition, add this homework to your portfolio, more information can be found below. - - - ### Hosting on Heroku Now that we have a backend to our applications, we use Heroku for hosting. Please note that while **Heroku is free**, it will request credit card information if you have more than 5 applications at a time or are adding a database. Please see [Heroku’s Account Verification Information](https://devcenter.heroku.com/articles/account-verification) for more details. - - - ### Create a README.md Add a `README.md` to your repository describing the project. Here are some resources for creating your `README.md`. Here are some resources to help you along the way: * [About READMEs](https://help.github.com/articles/about-readmes/) * [Mastering Markdown](https://guides.github.com/features/mastering-markdown/) - - - ### Add To Your Portfolio After completing the homework please add the piece to your portfolio. Make sure to add a link to your updated portfolio in the comments section of your homework so the TAs can easily ensure you completed this step when they are grading the assignment. To receive an 'A' on any assignment, you must link to it from your portfolio. - - - ### One More Thing This is a really tough homework assignment, but we want you to put in your best effort to finish it. If you have any questions about this project or the material we have covered, please post them in the community channels in slack so that your fellow developers can help you! If you're still having trouble, you can come to office hours for assistance from your instructor and TAs. ### Reminder When trying to connect remotely to your Heroku database on an open network such as a coffee shop, library, or even your University WiFi, it will be blocked. If you are experiencing a Heroku connection error, this could be why. **Good Luck!**
Creating personalized node.js example assignment
# Unit 11 Express Homework: Note Taker ## Description Create an application that can be used to write, save, and delete notes. This application will use an express backend and save and retrieve note data from a JSON file. * The application frontend has already been created, it's your job to build the backend and connect the two. * The following HTML routes should be created: * GET `/notes` - Should return the `notes.html` file. * GET `*` - Should return the `index.html` file * The application should have a `db.json` file on the backend that will be used to store and retrieve notes using the `fs` module. * The following API routes should be created: * GET `/api/notes` - Should read the `db.json` file and return all saved notes as JSON. * POST `/api/notes` - Should recieve a new note to save on the request body, add it to the `db.json` file, and then return the new note to the client. * DELETE `/api/notes/:id` - Should recieve a query paramter containing the id of a note to delete. This means you'll need to find a way to give each note a unique `id` when it's saved. In order to delete a note, you'll need to read all notes from the `db.json` file, remove the note with the given `id` property, and then rewrite the notes to the `db.json` file. ## User Story AS A user, I want to be able to write and save notes I WANT to be able to delete notes I've written before SO THAT I can organize my thoughts and keep track of tasks I need to complete ## Business Context For users that need to keep track of a lot of information, it's easy to forget or be unable to recall something important. Being able to take persistent notes allows users to have written information available when needed. ## Acceptance Criteria Application should allow users to create and save notes. Application should allow users to view previously saved notes. Application should allow users to delete previously saved notes. - - - ## Commit Early and Often One of the most important skills to master as a web developer is version control. Building the habit of committing via Git is important for two reasons: * Your commit history is a signal to employers that you are actively working on projects and learning new skills. * Your commit history allows you to revert your codebase in the event that you need to return to a previous state. Follow these guidelines for committing: * Make single-purpose commits for related changes to ensure a clean, manageable history. If you are fixing two issues, make two commits. * Write descriptive, meaningful commit messages so that you and anyone else looking at your repository can easily understand its history. * Don't commit half-done work, for the sake of your collaborators (and your future self!). * Test your application before you commit to ensure functionality at every step in the development process. We would like you to have well over 200 commits by graduation, so commit early and often! ## Submission on BCS You are required to submit the following: * The URL of the deployed application * The URL of the GitHub repository - - - © 2019 Trilogy Education Services, a 2U, Inc. brand. All Rights Reserved.
An application that generates a random password based on user-selected criteria. This app will run in the browser and feature dynamically updated HTML and CSS powered by JavaScript code.
hw 18
First quiz style javascript I've ever written.
hw 20
first repository
# Unit 14: Full-Stack ## Overview In the previous unit, we modularized our applications following the MVC paradigm and integrated a custom ORM into the Model layer. Like all things in software development, when we find ourselves repeating a task, we look for programmatic solutions. Because the implementation of object-relational mapping is a common task in full-stack web development, third-party libraries emerged to do the heavy-lifting for us. In this unit we will integrate Sequelize, a popular Node.js ORM, into our newly modularized applications. ## Key Topics * Sequelize * sequelize-cli * CRUD * Models * Validations * Associations ## Comprehension Check You will be employer-ready if you can answer the following questions: 1. What is a Model? 2. What are two approaches to using Sequelize in a full-stack web application? 3. How does one perform joins using Sequelize? ## Learning Objectives You will be employer-competitive if you are able to: * Configure a full-stack web application to use the Sequelize ORM library * Define models that POST data using validations * Define models that GET data using validations * Implement CRUD methods using Sequelize * Implement Sequelize associations to join one or more tables * Configure Heroku for deployment of an application using Sequelize ## Homework: Reverse Engineer * In this assignment, you will reverse engineer the starter code provided and create a tutorial for the code. Begin inspecting the code to get an understanding of each file's responsibility. Then, in a Google Doc, write a tutorial explaining *every* file and its purpose. ## Helpful Links * [Sequelize Queries](http://docs.sequelizejs.com/en/latest/docs/querying/) * [Sequelize Associations Part 1](http://docs.sequelizejs.com/en/latest/docs/associations/) * [Sequelize Association Part 2](http://docs.sequelizejs.com/en/latest/api/associations/) * [Sequelize Migrations](http://docs.sequelizejs.com/en/latest/docs/migrations/) * [bcrypt (NPM)](https://www.npmjs.com/package/bcrypt)
Template Engine
As long as the parameters of rooms are known, users can create a virtual box to resemble the space. Users then choose parameters of shapes, from a list of predetermined shapes, and insert "drag and droppable" versions into the virtual room. Once the item exists in the space it will be added to a list on a side panel.
hw 19
Weather Dashboard
coming soon...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.