Giter Club home page Giter Club logo

javascripty's Introduction

Javascripty

Why I Built This:

I built this application to help those whore are new to the Javascript programming language better understand the foundational concepts of the language. The structure of the application helps users improve their vocublary which will help them improve their ability to speak to different concepts that encapsulate Javascript.

How To Study:

In your terminal enter the following commands:

git clone https://github.com/Dhanciles/javascripty

cd javascripty

npm install

npm install node-sass

npm start

Project Background:

This project was built during my time at Turing School of Software and Design, and this is my third project using React as my framework. Working on this project allowed me to solidify my knowledge in the core tools that React gives you, which allowed me to build a fast and interactive app that truly mimics the action of one using flash cards to study a subject.

Goals for This Project:

  • Utilize localStorage in a React app.
  • Stick to Reacts guidelines of writing modular code.
  • Implement a interface that makes the user's experience enjoyable.
  • Give new Javascript programmers a resource to help them get over the learning curve, whether in a boot camp, college studying computer science ot learning on their own.

Extensions

  • Add more data to my dataset, that would allow my user to filter through different concepts and narrow down the flash cards they would like to study.
  • Recently I discovered how to create a 3d card stack using CSS. During an intermission I plan on adding this to add more depth to the cards, so it really feels like your are moving through a deck of flash cards.

Landing Page

Applaction

javascripty's People

Contributors

drhanciles avatar

javascripty's Issues

Start Review

As a user of Javascripty I should be able to review flash cards on fundamental javascript concepts when I click the start review button.

Review Until Correct

As a user of Javascripty I should only be able to review incorrectly answered cards until I have answered all cards correctly.

Local Storage

In this app we want to use local storage to allow the incorrect answers to persist and the and the element that shows how many cards they answered correctly.

Add Hover State

Add hover state to all buttons on flash cards and buttons used to start and continue review sessions

Review Cards With Incorrect Answers

As a user of Javascripty after I reviewed all cards, my following review sessions should only allow me to review the cards that I answered incorrectly.

Submit Answer to Questions

As a user of Javascripty I should be able to submit answers to the questions presented in the flash card.

Display Correct Answers

As a user of Javascripty I should be able to see how many questions I answered correctly after reviewing all of the flash cards.

Render Correct Answers and Continue Review

After our user has completed their first review session of all 30 cards, we want a new element rendered that displays how many cards they answered correctly and a button that allows them to continue with their review session

Start New Session

As a user of Javascripty I should be able to review all of my cards in a new session after I have answered all cards correctly.

Set Up Components

Implement components that are needed for this app:

  • App(removed preinstalled code)

  • Card Container

  • Card

Install UUID

Implement uuid in all component files, to prevent react unique id error

Update README.md

Implement readme.md per examples of what a good read me looks like.

Review Next Card

As a user of Javascripty I should be able to review the next card in my deck after I submitted an answer to a flash card.

Style Post Review Pop Up

Implement layout and styling for element that will render after our user completes each review session.

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.