Mini projects built with HTML5, CSS & JavaScript. No frameworks or libraries

Overview

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

Comments
  • Update script.js

    Update script.js

    I added functionality to the navbar so it closes when the user clicks anywhere outside of the navbar. My code is messy, but it works and it does not leave unused event listeners on when we don't want them.

    opened by Novailoveyou 1
  • fixing the Caps-letter bug

    fixing the Caps-letter bug

    i found that user can't enter caps letter it will deal with it as wrong even if the letters are right so i fixed it by this way hope iam right

    i know its nothing but i hope i helped abit big fan from Egypt

    opened by Arigatouz 1
  • fix: e.keyCode -> e.key (e.keyCode deprecated)

    fix: e.keyCode -> e.key (e.keyCode deprecated)

    https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode Hangman project wasn't working properly for me, I searched why and saw that the keycode was deprecated, so I fixed the e.keyCode -> e.key.

    There was a problem with spaces in the file, I had to fix them. Relevant lines of code; 87,88,89,101,102

    opened by ktevfik 0
  • Changed min < 10 seconds to video.duration

    Changed min < 10 seconds to video.duration

    If you add another video longer than 10 mins without having to change the minutes in the conditional statement. It works for me, if not let me know as I am only a beginner Front-End Developer.

    opened by ghost 0
  • Fix password2 length validation

    Fix password2 length validation

    The last commit only compared password2 with password1, it didn't validate the length of password2; this fixes the issue of password2 length validation making it independent of password1.

    opened by abraarahmed 0
  • Fix input length validation bug

    Fix input length validation bug

    The last commit didn't validate the length of username or password; this fixes the issue of input length validation for username and password after confirming the data in the input field.

    opened by abraarahmed 0
  • fixed loading bug

    fixed loading bug

    Test in chrome(103.0.5060.114) and Edge(103.0.1264.71). The condition is always false because they are not exactly equal.

    Seems like this commit changed the condition.

    opened by MarybethGasman 0
  • fix for 1 seat

    fix for 1 seat

    I noticed that when there was 1 seat selected, the text said "seats" so I created a new span with ID "seats" and in script if the selectedSeatsCount is 1 the innerText will be "seat". Thank you

    opened by epavlusik 0
Owner
Brad Traversy
Full stack web developer and online instructor, specializiing in mostly JS, but also write Python, PHP and some other stuff.
Brad Traversy
4Web is a collection&creation of codebase, frameworks, libraries dedicated to web development 📦

?? You can also contribute to add / create your own collection in this repository Collection name Description ?? blinke

Raja Rakotonirina 5 Nov 14, 2022
A collection of scripts to build offline documentation for your favourite frameworks/libraries. Simply search, copy/paste the commands and enjoy.

Offline-docs A collection of scripts to build offline documentation for your favourite frameworks/libraries. Simply search, copy/paste the commands an

Naveen Namani 37 Dec 24, 2022
4WEB is a collection & creation of codebase, frameworks, libraries and various resources dedicated to web development 📦🌐

?? Vous pouvez également contribuer à ajouter/créer votre propre collection dans ce référentiel ... Table des matières ?? Codebase ?? NPM packages ??

Raja Rakotonirina 5 Nov 14, 2022
tooldb is a (soon) massive collection of frameworks and tools. It's build on Flowbite, Next.js, Tailwind CSS and uses Supabase.

tooldb is a (soon) massive collection of frameworks and tools. It's build on Flowbite, Next.js, Tailwind CSS and uses Supabase.

Julian Yaman 12 Jul 14, 2022
An extended table to integration with some of the most widely used CSS frameworks.

An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)

文翼 11.4k Dec 20, 2022
Fullstack Dynamic NFT Mini Game built using 💎 Diamond Standard [EIP 2535] 🏃‍♀️Players can use Hero NFT to battle against Thanos ⚔ Heroes can be Healed by staking their NFT 🛡

?? Fullstack Dynamic NFT Mini Game ?? ?? Using Diamond Standard Play On ?? ?? ⏩ http://diamond-dapp.vercel.app/ Project Description ?? Fullstack Dynam

Shiva Shanmuganathan 21 Dec 23, 2022
A Leaderboard app that pulls from a LeaderboardGameAPI and allows users to view recent scores and add more scores to the score board. Built with HTML5, CSS, JavaScript, and Webpack.

Leaderboard A Leaderboard app that pulls from a LeaderboardGameAPI and allows users to view recent scores and add more scores to the score board. Buil

Steven Ntakirutimana 5 Dec 21, 2022
A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mechanism to manipulate DOM elements

JavaScript Project to Manipulate DOM Elements DFlex A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mech

DFlex 1.5k Jan 8, 2023
Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript

Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript

Macaron 334 Dec 29, 2022
🥰 Mini world simulator is a terminal application made in JavaScript to control the world that is being generated.

Mini-world "Simulator" Mini world simulator is a terminal application made in JavaScript to control the world that is being generated. It has no other

Adrián 2 Mar 14, 2022
Olá, este repositório, é um mini-relatório do que eu aprendi através de cursos de JavaScript. Este repositório, muito provável que fique familiar com o que os professores ensinam .

About Project Olá pessoal, este repositório tem o objetivo de relatar meus aprendizados dos cursos que fiz sobre a linguagem JavaScript. Não só com o

Nior 6 Jul 10, 2022
Remix starter kit with Tailwind CSS family of libraries: Headless UI, Radix UI, VechaiUI, daisyUI, and more

Remix Tailwind Starter Kit Remix starter kit with Tailwind CSS v3 family of libraries. Example demo to combine the best Tailwind-related ecosystem suc

M Haidar Hanif 80 Dec 18, 2022
An users NodeJS API without packages libs or frameworks!

NodeJS Users API - Without Frameworks And Packages ?? Table of Contents About Getting Started Usage Built Using Authors ?? About Purpose of this proje

Nathan Cotrim Lemos 31 Feb 7, 2022
A CLI for generating starter files for different JS frameworks with tailwindCSS pre-installed

tailwindcsscli A CLI for generating starter files for different JS frameworks with tailwindCSS pre-installed Installation To install the CLI, run the

Kira 12 Sep 30, 2022
Create sticky element in flexbox sidebars. it can use in Vanilla JS and frameworks like Vue and React

js sticky side simple sticky side with js that can use in frameworks like vue and react. notes it can be used just in flexbox grids. target element sh

milad nazari 10 Mar 3, 2022
This is an educational project to make a To Do List web application without using JS frameworks

A simple ToDo list project made by JavaScript. One can add, edit and remove todos as well as marking them as completed.

Mostafa Ahangarha 6 Nov 26, 2022
Run REST APIs in Node.js applications frameworks (Express, Koa, Hapi and Fastify) on top of any Serverless Cloud.

?? Serverless Adapter Install | Usage | Support | Architecture | Credits Run REST APIs and other web applications using your existing Node.js applicat

Vinicius Lourenço 45 Jan 1, 2023
Examples and challenges of my video about Creating and testing a complete Node.js Rest API (Without frameworks)

Building a complete Node.js WebApi + testing with no frameworks Welcome, this repo is part of my youtube video about Creating and testing a complete N

Erick Wendel 120 Dec 23, 2022
A set of scripts to test markdown processing speeds in various site generators/frameworks

bench-framework-markdown A set of scripts to test markdown processing speeds in various site generators/frameworks. Read the blog post: Which Generato

Zach Leatherman 24 Nov 3, 2022