Giter VIP home page Giter VIP logo

js30-vanntile's Introduction

JavaScript30

Wes Bos' (@wesbos) JavaScript 30 Day Challenge. This is a plain vanilla JavaScript exercise, without any libraries, transpilers or frameworks. I have a README for each day when I have added custom functionality, that you can check below.

My own implementations can be found here.

Check the course at https://JavaScript30.com

I have beautified the HTML and CSS using atom-beautify and linted the JavaScript using JavaScript Standard Style.

Some Concepts learned

  • Using methods and properties from the following Web APIs and interfaces
    • MouseEvent, HTMLMediaElement, Fullscreen, WebStorage, Navigator, Geolocation, Canvas, Web Speech
  • Document Object Model Node List
  • ES6 Promises, template literals, array spreading, destructuring parameters, typed arrays, arrow function
  • transitioned event
  • use of the data attribute for custom element data
  • RegEx string filter
  • parent-children event delegation
  • JSON.stringify()
  • local servers (through npm packages)
  • and others

Table of contents

  1. JavaScript Drum Kit and my notes
  2. JS + CSS Clock
  3. CSS Variables
  4. Array Cardio, Day 1
  5. Flex Panel Gallery and my notes
  6. Type Ahead and my notes
  7. Array Cardio, Day 2
  8. Fun with HTML5 Canvas
  9. Dev Tools Domination
  10. Hold Shift and Check Checkboxes and my notes
  11. Custom Video Player and my notes
  12. Key Sequence Detection
  13. Slide in on Scroll
  14. JavaScript References vs. Copying
  15. LocalStorage and my notes
  16. Mouse Move Shadow
  17. Sort Without Articles
  18. Adding Up Times with Reduce
  19. Webcam Fun and my notes
  20. Speech Detection (not working in browsers for now)
  21. Geolocation and my notes
  22. Follow Along Link Highlighter
  23. Speech Synthesis and my notes
  24. Sticky Nav
  25. Event Capture, Propagation, Bubbling, and Once
  26. Stripe Follow Along Nav and my notes
  27. Click and Drag
  28. Video Speed Controller
  29. Countdown Timer
  30. Whack A Mole

20+ Web Projects With Vanilla JavaScript

This is the main repository for all of the projects in the course.

# Project Live Demo
01 Form Validator Live Demo
02 Movie Seat Booking Live Demo
03 Custom Video Player Live Demo
04 Exchange Rate Calculator Live Demo
05 DOM Array Methods Project Live Demo
06 Menu Slider & Modal Live Demo
07 Hangman Game Live Demo
08 Mealfinder App Live Demo
09 Expense Tracker Live Demo
10 Music Player Live Demo
11 Infinite Scrolling Live Demo
12 Typing Game Live Demo
13 Speech Text Reader Live Demo
14 Memory Cards Live Demo
15 LyricsSearch App Live Demo
16 Relaxer App Live Demo
17 Breakout Game Live Demo
18 New Year Countdown Live Demo
19 Sortable List Live Demo
20 Speak Number Guessing Game Live Demo

NOTE ON PULL REQUESTS: All of these projects are part of the course. While I do appreciate people trying to make some things prettier or adding new features, we are only accepting pull requests and looking at issues for bug fixes so that the code stays inline with the course

js30-vanntile's People

Contributors

alexbaumgertner avatar apopitich avatar arilfrankel avatar beausmith avatar claudiopro avatar danascript avatar dap6000 avatar dimabory avatar elamoscicka avatar ememme avatar endormi avatar imgbotapp avatar joshua-scott avatar missmatsuko avatar msbit avatar nadgerz avatar nadiarasul avatar onebree avatar palashmon avatar piotrberebecki avatar samdec11 avatar snopeks avatar soyaine avatar tamouse avatar uvacoder avatar vanntile avatar venikman avatar wesbos avatar wispproxy avatar yhabib avatar

Watchers

 avatar

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.