Explore how you can build and setup these JavaScript applications and web site components. Perfect to practice and explore using JavaScript and get familiar with the Document Object Model. Extend your knowledge try the code and customize to suit your needs. Code is explained in a step by step approach to building the below example applications.
JavaScript mini applications
JavaScript Practice - Build 5 applications
Building 5 applications from scratch
Coin Toss Application - is it heads or tails
- Setting up HTML elements and selecting them using JavaScript
- Making elements interactive event listeners
- How to apply conditions for game logic
- Checking win conditions and game end function
- Selecting elements querySelector and querySelectorAll
- Manipulating HTML element content
- JavaScript Math random and Math floor methods
- Source Code included
Magic 8 Ball - find out the answer to your questions
- Element manipulation and selection
- JavaScript DOM Document Object Model
- Interaction with event listeners
- Math.floor() Math.random()
- Random response content
Combination Cracker - can you guess the combo lock
- JavaScript dynamically create elements
- Select and add interactive content
- Variables and objects for scoring
- Math.random() make it unpredictable
- Setting element attributes
- Adding and removing element classes
- Adding to element object data
- Win conditions and game end functions
- Element color updates and manipulation
- Element selection
- Game logic and building sequence
Word Scramble - guess the word
- JavaScript arrays - randomize array contents
- Element selection and manipulation of DOM content
- Interactive event listeners
- Dynamic class updates
- Element object data
- JavaScript Math random and Math methods
Countdown Timer - Pick a date and see how much time is left with a dynamically updating counter
- Select and update elements on the page
- Explore using JavaScript methods like Math, Date, setInterval, clearInterval
- Make it interactive add event listeners
- Dynamic values with querySelector
- Loops of objects
Rock Paper Scissors Game
- Select elements from HTML - Document Object Model
- Loop add event listeners to all matching elements
- Use functions to execute blocks of code at key points within the gameplay
- JavaScript Math - to generate random values
- If else statements to check winner and play game
- Game logic to determine winner
- Update and manipulate elements
Ultimate Dice Game
- Use querySelector to select elements
- Array to build dice visually
- Random to create random values
- Create elements on the fly using JavaScript
- Remove elements using JavaScript
- Traverse elements
- Set element attributes adding removing classes
- Apply game logic and flow
Pattern matching game
- Use of JavaScript to setup game board grid
- JavaScript array to build game board
- querySelector for element selection from HTML elements
- adding interaction with event listeners
- Element manipulation and updating
- Adding to arrays
- Updating element style
- Use of JavaSCript methods setTimeout(), appendChild(), toString()
- Use of conditions for game logic
- Game source code review and tweaking
Perfect course to learn more about JavaScript and how to apply JavaScript in real world applications.
Practice JavaScript while building fun interactive and dynamic min applications with JavaScript
Text area character counter
- Events handlers
- Keyboard events
- Element manipulation
Text scroll box
- Word scrolling
- Mouse events
Fun with Elements
- Clone elements
- create and remove elements
- animate elements
- draw elements
- attaching drag and more
Click Counter - only JavaScript
Build a click counter that outputs a functional click counting application using only JavaScript NO HTML :)
- interactive elements
- creating elements on the fly
- DOM - element manipulation
Image Gallery Image modal popup window - Dynamic JavaScript
Click an image, any image and it will popup within the larger modal. Use JavaScript to get image source of the clicked image and utilize it in the modal output.
- Element selection
- Element object data - dynamically use it in code
- Update element contents setting attributes
- Create interaction with event listeners
- Dynamic Content updating DOM elements with new content data.
Play Hangman - Word guessing Game
All generated dynamically using JavaScript, including user letters for selection, applying game logic for win conditions, creating elements and interactive content on the fly.
- Arrays and objects for data use and dynamic gameplay
- Creating interactive elements with event listeners
- Removing clickable items
- Creating elements on the fly from data
- Applying game logic to determine win conditions
- Using JavaScript methods to enhance gameplay
- Outputting content with DOM element manipulation
- Conditions and logic statements to provide effective game experience
Modal Popup component code using JavaScript
Add dialog's to your site for light-boxes, user notifications, or completely custom content.
- Event listeners and inactive content
- Element selection and manipulation
- Updating element attributes
Carousel Image slideshow Animated slideshow with JavaScript
A slideshow for cycling through a series of content images and captions. Including controls to navigate to images.
- Dynamic updates with content
- Animated with interactive indicators
- Load as many images as you want
- JavaScript methods for intervals and automatic movement.
Star Rating click and hover effects on Stars - Cool star rating application
Hover and click star selection for user interaction and ratings systems
- Element selection and manipulation
- Event listeners
- DOM interaction
- Element classes and manipulation
- Applying conditions and logic statements
Learn practice JavaScript Have fun while building three mini projects from scratch
Project #1
JavaScript Accordion click and open elements
- JavaScript element selection
- Adding event listeners to element with a class
- Use of JavaScript methods like nextElementSibling and classList
- Manipulate element classes with JavaScript
Project #2
JavaScript Game - Box chaser
- JavaScript element selection and manipulation
- Use of JavaScript Math and Math random
- Key event listeners for arrow keys
- DOMContentLoaded - listener
- Building a grid dynamically with JavaScript
- Handling key presses and moving element
- Adding and removing element classes dynamically
- Updating element style values using JavaScript
- Using objects and Arrays to contain element content
- Creating elements and adding them to the html dynamically
- Applying game logic and scoring of game
- Game play win check
Project #3
JavaScript Tooltip maker
- JavaScript element selection and manipulation
- Adding event listeners mouseover and mouseout
- Updating element style values
- Select event object data
- Setting intervals to run code
- Updating element inner content
JavaScript is excellent at creating amazing interactive applications - forms are used everywhere and learning how to utilize form content with interactive JavaScript is what this course is all about. See the code in action in a real world application how you can apply JavaScript to your own projects to edit form content, update content visually making better user experiences.
Project #1 - Copy to clipboard using JavaScript exercise
- Add event listeners for user interaction
- Copy command using JavaScript
- Element contents and values
- Element selection and manipulation
Project #2 - Copy to clipboard using JavaScript exercise
- Create a table dynamically using JavaScript from an array
- Create elements with JavaScript
- Apply element style and attributes
- Adding interaction with Event listeners\
- Element values and selection
- Array updates and removal of items
- Update element contents add input field for updating
- Create elements with JavaScript
- Building of output and updates using JavaScript
Project #3 - Placeholder image path generator JavaScript string builder
- Select and use element input values
- Dynamically generator contents
- Formulate and clean string values to match format
- Element selection and manipulation
