Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: about 2 months ago
JSON representation

A collection of projects made with vanilla JavaScript.

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

![A little forest of trees sits atop a countdown to show how long until Earth Day](./assets/earth-day-countdown.png)



[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

![A calculator with aquamarine buttons and a screen displaying '43110'](./assets/desktop-calculator.png)



[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

![An tic-tac-toe board with a game in progress, a light grey circle shows a possible available move for the O's player to take](./assets/gameplay.png)



[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







### Calculator

![A calculator with aquamarine buttons and a screen displaying '43110'](./assets/js-calculator.png)



[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






(back to top)



## 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]

[![twitter][twitter]][twitter-url]




(back to top)



[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

[twitter]: https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white

[twitter-url]: https://twitter.com/achulslander

[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