https://github.com/alleycaaat/vanilla-js-projects
A collection of projects made with vanilla JavaScript.
https://github.com/alleycaaat/vanilla-js-projects
html5 javascript javascript-applications javascript-vanilla js scss scss-styles vanilla-js
Last synced: 6 months ago
JSON representation
A collection of projects made with vanilla JavaScript.
- Host: GitHub
- URL: https://github.com/alleycaaat/vanilla-js-projects
- Owner: alleycaaat
- Created: 2023-04-16T18:47:42.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-08-07T18:52:24.000Z (6 months ago)
- Last Synced: 2025-08-07T20:20:32.319Z (6 months ago)
- Topics: html5, javascript, javascript-applications, javascript-vanilla, js, scss, scss-styles, vanilla-js
- Language: JavaScript
- Homepage:
- Size: 1.18 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Vanilla JS Projects
This repo is composed of vanilla JavaScript projects. All projects were developed with JavaScript, SCSS and HTML5. The SCSS file is attached for easier viewing. To fork a project, it will need to be converted to CSS, or the environment will need a CSS preprocessor.
![last commit][last-commit]
![repo size][repo-size]
![main language][main-language]
## Project Previews, Links and Details
### Earth Day Countdown
[Working demo of the countdown](https://codepen.io/alleycaaat/full/BaqWwwP)
- timer updates every second to display how long until Earth Day, 22 April
- a forst of little trees is dynamically built on each render
- displayed message changes on Earth Day
- trees are built then appended to the parent element
- Math.random generates a height, z-index,0 margin and left values for each tree
- Colors are randomly selected from an array of 15 options
### Desktop Calculator
[Working demo of calculator](https://codepen.io/alleycaaat/full/ZEqBXWb)
- allows for keyboard use or mouseclicks
- on large screens, shows the calculation history on a slice of paper
- multiple switch case statements keep code cleaner
- hover effects mimic pressing down on a real button
- backspace to remove individual character from display
- AC button to clear calculator display
- ternary operator to add a zero before a decimal if the number is less than one
- original background image by [macrovector](https://www.freepik.com/free-vector/wood-vector-texture-template-pattern-seamless-material-hardwood-floor-natural-light-parquet-vector-illustration_11059494.htm#query=seamless%20wood%20texture&position=0&from_view=keyword&track=ais)
### tic-tac-toe
[Working demo of tic-tac-toe](https://codepen.io/alleycaaat/full/NWONQOK)
- user can hover over empty boxes to see potential moves
- gameboard built with for loops
- gameboard boxes have aria-labels of x and y coordinates
- dynamically displays winner at games end
- if no winner, winning message displays draw
- forEach loop, classList property and ternary operators utilized
### wordle
[Working demo of wordle](https://achulslander-wordle.netlify.app)
- users can play on screen or using their computer keyboard
- if a letter is in the answer but isn't in the right position, it is highlighted yellow
- a correct letter in the correct spot is highlighted purple
- after five guesses, tellers player if they have won or run out of guesses
- utilizes forEach and if/else loops
### Calculator
[Working demo of calculator](https://codepen.io/alleycaaat/full/zYmKQEz)
- allows for keyboard use
- switch case statements to keep code cleaner
- hover effects mimic pressing down on a real button
- backspace to remove individual character from display
- AC to clear everything
- ternary operator to add a zero before a decimal if the number is less than one
## Contact
AC Hulslander - [Send me a message](https://www.achulslander.com/#contact)
[![GitHub][github]](https://github.com/alleycaaat/)
[![linkedin][linkedin]][linkedin-url]
[![hashnode][hashnode]][hashnode-url]
[![discord][discord]][discord-url]
[![codepen][codepen]][codepen-url]
[issues-open]: https://img.shields.io/github/issues/alleycaaat/vanilla-JS-projects?color=blue&logo=github
[repo-size]: https://img.shields.io/github/repo-size/alleycaaat/vanilla-JS-projects?color=red&logo=github
[language-count]: https://img.shields.io/github/languages/count/alleycaaat/vanilla-JS-projects?color=orange&logo=github
[main-language]: https://img.shields.io/github/languages/top/alleycaaat/vanilla-JS-projects?color=yellow&logo=github
[last-commit]: https://img.shields.io/github/last-commit/alleycaaat/vanilla-JS-projects?logo=github
[linkedin]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://linkedin.com/in/achulslander
[github]: https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white
[codepen]: https://img.shields.io/badge/Codepen-000000?style=for-the-badge&logo=codepen&logoColor=white
[codepen-url]: https://codepen.io/alleycaaat
[hashnode]: https://img.shields.io/badge/Hashnode-2962FF?style=for-the-badge&logo=hashnode&logoColor=white
[hashnode-url]: https://hashnode.com/@alleycaaat
[discord]:https://img.shields.io/badge/Discord-7289DA?style=for-the-badge&logo=discord&logoColor=white
[discord-url]: https://discord.come/users/427569685366833174