Giter Club home page Giter Club logo

javascript-30-g5's Introduction

Your JavaScript 30 Project

This starter repository is written to take the javascript-30to the next level. It comes with a small application already coded. If you're familiar using this template then go ahead and delete all of the files in src/handlers, src/listeners and src/logic, then empty the data object in src/data.js and the id="user-interface" in the index.html. If it's your first time using this starter or you'd like to refresh, take some time to study and step through the example code before clearing it out to make room for your own project.

When you're ready to work on your own project you will also want to change the title of this README and remove these instructions. The Getting Started section of the README is already written for you.

...

Getting Started

This repository comes with some nice extras like testing, documentation and CI, but in it's heart it's just an HTML/CSS/JS website boilerplate.

Development

To run this project locally you will need to open index.html in your browser using a local server. LiveServer, http-server, study-lenses, or any other local static server will work.

Deployment

Push your changes, turn on GitHub pages, that's all!

When your project is deployed to GitHub pages there will be buttons rendered at the top of your page to validate your HTML, CSS, accessibility and spelling, plus a link back to the project repository.

Installing Dependencies

There are no dependencies needed to run the website, everything is prepared to work with vanilla JavaScript. However, if you want to run tests or if you want to generate documentation for your project you will need to install the development dependencies:

  • npm install

Documentation

To document your project you will need to write a JSDoc comment for each function in the /handlers, /listeners and /logic. You will also want to add an entry to the JSDoc in /data.js for each property you store in the object.

The JSDoc comments you write in the /src folder will be used to re-write the DOCS.md file each time you run npm run document from the root of your project.

Testing

After installing the dev dependencies you can start writing and running tests for your .js files. Careful! In this project starter you can only test code that does not use the DOM, so only the /logic functions will be testable. There are two options for running tests:

  • Individually: You can run the tests in a single .spec.js using the VSCode debugger. Open the spec file you want to run, open the debugger pane, select the "current .spec.js file" option, then start debugging!
  • All at Once: You can also run every .spec.js in the /src directory at the same time using npm run test. When you run the npm run test command all test results will be logged to the console, and a report file will be generated next to each spec file. These report files will be helpful when reviewing PRs to the main/master branch.

Continuous Integration

This repository comes with a GitHub Action to re-build the documentation and run all the tests whenever you push to master/main, and each time you open a PR to master/main. You don't need to do anything, it works!

Having this CI action means that your master branch will always have the most up-to-date documentation, and that you can easily check test results when reviewing Pull Requests.

...

javascript-30-g5's People

Contributors

bermarte avatar tahminarasoli avatar 22count22 avatar colevanderswands avatar businan avatar

Watchers

 avatar  avatar  avatar

javascript-30-g5's Issues

add leave.js file

Concern F

  • leave.js: handles leave function, this file imports global data from data.js.

create html

index HTML

  • create HTML
  • link evaluation
  • link init.js file

video data

  • add public folder for the video project

HTML and CSS

Concern A

  • index.html: is the home page of Stripe Follow Along Nav website.

Concern B

  • style.css: design of Stripe Follow Along Nav website.

initial files

Concern C

  • data.js: contains global data.

Concern D

  • init.js: imports enter-lis and leave-lis files to home page.

video html

video HTML

  • create HTML
  • link evaluation
  • link JS

localhost handlers

localhost handlers

  • add handlers for the localhost project
  • document the handlers using JsDoc
  • push to the branch after finish all localhost project

add enter.js file

Concern E

  • enter.js: handles handleEnter() function, this file imports global data from data.js.

planing

  • backlog
  • development strategy
  • README

localhost listeners

localhost listeners

  • add listeners for the localhost project
  • push to the branch after finished the localhost project

localhost data

  • add a public folder for the local storage data to read

add leave-lis.js file

Concern G

  • leave-lis.js: calls leave function, this file imports global data from data.jsand handleLeave function from leave.js.

video listeners

video listeners

  • add listeners for the video project
  • add the handlers to the listeners
  • document the listeners using JsDoc
  • add listeners for the video project
  • push to the branch
  • create a PR

video handlers

video handlers

  • add handlers for the video project
  • add UI and DOM elements to the handlers
  • document the handlers using JsDoc
  • push to the branch
  • create a PR

add enter-lis.js file

Concern H

  • enter-lis.js: calls handleEnter() function, this file imports global data from data.jsand handleEnter function from enter.js.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.