Data

Tools

Indexes

Applications

Experiments

Awesome

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

https://github.com/explosion-scratch/projects

This is some javascript stuff I've been working on.
https://github.com/explosion-scratch/projects

cool javascript scratch

Last synced: 8 months ago
JSON representation

This is some javascript stuff I've been working on.

Awesome Lists containing this project

README 

          
# Welcome!



Hi there! This is the part of [my website](https://explosion-scratch.github.io) with all of my JavaScript projects! Some of them are listed below:



- [Scratch API](https://explosion-scratch.github.io/api.html)

  This was something I made to try out jQuery. It gets the data of a specified user from Lefty's API.

- [Find and Replace](https://explosion-scratch.github.io/find_and_replace.html)

  A simple find and replace javscript app I made.

- [Email verify](https://explosion-scratch.github.io/email_verify.html)

  A simple thing I made to verify that emails are actually possible emails.

- [Some buttons I made that are super fun to click.](buttons.html)

  Seriously. Test them out, it's super fun to click them, especially super fast lol



- [A cool HTML parser](html_parser.html)

  This parses HTML and you can also put inline styles and inline code! (It also keeps it when reloading using localstorage)



- [Note-Taker](notetaking.html)

  A note-taking web app I made that stores your notes in cookies



- [Random background generator](random_image.html)

  This generates random background images using unsplash images' API.



- [A Clock](clock.html)

  A cool JS clock that I made. (My first JS project)

- [Input styling test](https://explosion-scratch.github.io/input.html)

  A Test for some nice input styles.

- [BBCode parser!](https://explosion-scratch.github.io/to_bbcode.html)

  This was hard to make.

# All the other projects I didn't make 6 months ago:

# 
Projects Directory


Hi there! Welcome to my projects directory! Here I list all my projects along with the links! I'll do my best to keep this updated! :)



# Javascript 



## Canvas particle systems:

### Gooey text

![gooey](https://user-images.githubusercontent.com/61319150/120940002-85851f00-c6e0-11eb-8d93-d3fad8569a74.gif)



A gooey text effect using SVG filters on canvas.



Code link: https://codesandbox.io/s/gmb05

Project link: https://gmb05.csb.app



### Water fountain

![why_does_ffmpeg_take_so_long](https://user-images.githubusercontent.com/61319150/120940023-a5b4de00-c6e0-11eb-8873-763680c94a91.gif)



A fun water fountain to splash your mouse in!



Project link: https://3pch1.csb.app

Code link: https://codesandbox.io/s/3pch1



### Drip, drip, drip

![drip_effect](https://user-images.githubusercontent.com/61319150/120940115-3390c900-c6e1-11eb-9a00-1b299c209aee.gif)

When you draw, your drawings will drip away!



Project link: https://x2d6s.csb.app/

Code link: https://codesandbox.io/s/x2d6s



### Dizzying but fun!

![canvas_mouse_fx](https://user-images.githubusercontent.com/61319150/120940620-cc284880-c6e3-11eb-8660-b1c59ca980ce.gif)



An experiment using mouse velocities to set the particle velocities, creating for a very interesting effect!



Project link: https://gomot.csb.app/

Code link: https://codesandbox.io/s/gomot/



### A cool text effect! (Perfect for intros?)

![canvas_text](https://user-images.githubusercontent.com/61319150/120908589-595e9500-c631-11eb-9a24-aff4eb417ed8.gif)

![explosion_text_fx](https://user-images.githubusercontent.com/61319150/120924584-0bca4280-c69a-11eb-81ff-928778f48455.gif)



A super cool project using canvas' `getImageData` to scan text, then creating particles to form that text and having those interact  with the mouse and each other.



Code link: https://codesandbox.io/s/competent-galileo-o3dgp

Project link: https://o3dgp.csb.app



### Particles with the Pythagorean theorem!

![Particles](https://user-images.githubusercontent.com/61319150/120908592-5e234900-c631-11eb-80c5-02a72314a0cc.gif)



A satisfying particles effect I made for fun.



Code link: https://replit.com/@ExplosionScratc/Sci-fi-canvas-particles-effect

Project link: https://sci-fi-canvas-particles-effect.explosionscratc.repl.co/



### Image reveal rain

![rain2](https://user-images.githubusercontent.com/61319150/120908689-5f08aa80-c632-11eb-915f-d1865f2fe633.gif)



Using canvas' `getImageData` method, I get the pixels of the image, then I set particles color based on that. Making a super cool end result!



Code link: https://replit.com/@ExplosionScratc/canvas-particles

Project link: https://canvas-particles.explosionscratc.repl.co



### Random particle effect

![scratch_particle_effect](https://user-images.githubusercontent.com/61319150/120908759-549ae080-c633-11eb-9a0f-8199826269e5.gif)



Random particles effect I did as an experiment, interesting 'physics'

Code link: https://codesandbox.io/s/epicness-yrr5v

Project link: https://yrr5v.csb.app



### URL Shortener:



![slight](https://user-images.githubusercontent.com/61319150/120924505-b2faaa00-c699-11eb-86ff-96dedca5d41e.gif)

A URL shortener I made that doesn't track, supports custom ID's, and is super fast and user friendly! Made in Node.js, Vue.js and tailwind.css



Code link: https://slight.gq/__repl

Project link: https://slight.gq



### Bookmarklet maker:

![output](https://user-images.githubusercontent.com/61319150/120908701-7fd10000-c632-11eb-9784-759991921ef3.gif)

Creating a bookmarklet no longer requires coding knowledge!

Code link: https://codesandbox.io/s/competent-snowflake-qzlxp?file=/script.js

Project link: https://qzlxp.csb.app



### Bijou.js

![bijou logo](https://bijou.js.org/bijou.png)



Bijou.js – A comprehensive library of JavaScript snippets, super easy to use and super helpful! 😃 



### Prompt/alert engine

![image](https://user-images.githubusercontent.com/61319150/103492249-264c7700-4def-11eb-8146-c349e28a6235.png)



A comprehensive alert and prompt engine that looks amazing! Easy to use, supports callbacks, promises and more! 



Code link: https://codesandbox.io/s/popup-modal-with-prompt-trqhj



Project link: https://trqhj.csb.app



### Send me an email with client side JS!

![image](https://user-images.githubusercontent.com/61319150/103492332-bee2f700-4def-11eb-8c3c-768fece1cba4.png)

An easy way to send me an email using EmailJS! It works really well! 👍🏻 



Code link: https://codesandbox.io/s/send-me-an-email-working-v3j0b



Project link: https://v3j0b.csb.app



### Screen recorder

![image](https://user-images.githubusercontent.com/61319150/103492295-7fb4a600-4def-11eb-8291-42a05a034ab7.png)



A super simple screen recorder supporting recording a tab, window, or even your whole desktop!



Code link: https://codesandbox.io/s/screen-recorder-wjon6



Project link: https://wjon6.csb.app/



### Javascript Mousemove effect

![image](https://user-images.githubusercontent.com/61319150/103492381-2305bb00-4df0-11eb-8736-47bc283e151e.png)

A super cool mousemove effect using canvas!



Code link: https://codesandbox.io/s/mouse-effect-particles-7snyo



Project link: https://7snyo.csb.app



### Code editor

![code_editor](https://user-images.githubusercontent.com/61319150/120940382-9e8ecf80-c6e2-11eb-895c-ef5a8b834703.gif)

Code link: https://codesandbox.io/s/fpek0

Project link: https://fpek0.csb.app/

### OCR

![image](https://user-images.githubusercontent.com/61319150/103551942-bbdc1b00-4e70-11eb-8950-835bbbe2f8a8.png)



This converts an image into a searchable PDF using Tesseract.js!



Code link: https://codesandbox.io/s/ocr-uoji2



Project link: https://uoji2.csb.app



# NodeJS

### Notes app with GitHub auth

![image](https://user-images.githubusercontent.com/61319150/113602909-e02ecb80-9608-11eb-9852-ffc227a70ae6.png)



An easy to use notes app supporting markdown, code snippets, public and private notes, user profiles and more!

Link: https://notes.explosionscratc.repl.co

Code: https://notes.explosionscratc.repl.co/__repl

### Google-like search engine

![image](https://user-images.githubusercontent.com/61319150/113602099-ce005d80-9607-11eb-8ce6-bb377e209e7e.png)



A google-like search engine that uses a backend nodejs server to get "Did you mean" suggestions, search results, definitions of words, and quick answers to questions. Works without reloading the page every time, and unlike google, is completely anonymous and free. No advertisements, tracking, but I did add some beautiful graphics!



Project link: https://google.explosionscratc.repl.co

Code link: https://google.explosionscratc.repl.co/__repl



### Discord unblocker

![image](https://user-images.githubusercontent.com/61319150/113601766-60543180-9607-11eb-89ae-0e137120965b.png)



I made a website that uses discord.js through a bot to send messages to my discord server. It supports channel selection, markdown, images and much more!



Link: https://discordunblock.explosionscratc.repl.co/

Code: https://discordunblock.explosionscratc.repl.co/__repl

NOTE: You need to know the password to use it, so you can't use it rn, sorry. Email me if you want to use it. 



### Grammar checker

![image](https://user-images.githubusercontent.com/61319150/103491923-1469d480-4ded-11eb-94fd-ac68f2582a9b.png)



This is a comprehensive grammar checker supporting passive language, hard to read sentences, dictionary lookup of words and more! Try it out!



Code link: https://codesandbox.io/s/grammar-checker-working-dwvzq



Project link: https://dwvzq.csb.app



### Translate API

An easy to use API for translating text, detecting its language and more! Supports translation to and from every language! I also made bookmarklets to use it with Duolingo to get the answer right just by clicking it! Email me if you want them! (explosionscratch@gmail.com).

Code link: https://codesandbox.io/s/translate-api-t6iuc

Project link: https://t6iuc.sse.codesandbox.io?q=Bonjour&to=Spanish (This link will translate "Bonjour" (Hello in French) to Spanish)

### Code Beautifier

![image](https://user-images.githubusercontent.com/61319150/103492058-0799b080-4dee-11eb-8546-854ca3e6673e.png)



This beautifies many code languages and gives a nice, simple output!



Code link: https://codesandbox.io/s/code-prettier-049x8



Project link: https://049x8.csb.app



### Collaborative rich text editor using [Socket.io](https://socket.io)

![image](https://user-images.githubusercontent.com/61319150/103492202-d968a080-4dee-11eb-8d6c-6559a4b59410.png)



This is a rich text editor supporting collaboration! It uses Socket.io as the framework for this! 

Code link: https://codesandbox.io/s/collab-text-editor-working-d7qk7

Project link: https://d7qk7.csb.app

### Scratch redirect API

Simply redirects you to the oldest, most relevant scratch forum topic! (https://ngzq0.sse.codesandbox.io?q=Cloud%20Variables)



Code link: https://codesandbox.io/s/scratch-duplicate-redirect-tool-ngzq0



Project link: https://ngzq0.sse.codesandbox.io/



### YouTube downloader

![image](https://user-images.githubusercontent.com/61319150/103492480-c9ea5700-4df0-11eb-9360-4f437a9c32dc.png)



Supports downloading any video on YouTube at any resolution or filetype! This is my most popular project as of writing and has ~480 views!



Code link: https://codesandbox.io/s/youtube-4n8hm



Project link: https://4n8hm.csb.app



 ### URL Shortener

![image](https://user-images.githubusercontent.com/61319150/103492695-46316a00-4df2-11eb-812c-962d86a05a95.png)



Code link: https://codesandbox.io/s/gallant-golick-zru1d



Project link: https://zru1d.csb.app



# HTML/CSS



### Calculator

![calculator](https://user-images.githubusercontent.com/61319150/120908772-97f54f00-c633-11eb-9e41-1ab32a8af6d2.gif)



A beautiful calculator I made with the help of a YouTube tutorial, it works smoothly, and amazingly! It is one of the few coding projects that I actually use regularly!



Code link: https://codesandbox.io/s/calculator-jqigu



Project link: https://jqigu.csb.app



### Loading Animation

![loading](https://user-images.githubusercontent.com/61319150/120908794-d7bc3680-c633-11eb-8068-c2b594d47575.gif)



A slick loading animation that I made with CSS ::before and ::after elements!



Code link: https://codesandbox.io/s/loading-thing-ek1di



Project link: https://ek1di.csb.app



# Discord bots:

YouTube bot:

![disc_bot](https://user-images.githubusercontent.com/61319150/120015667-3553e180-bfa9-11eb-9eb0-986b7a8d5275.gif)



Google bot:

![google_bot](https://user-images.githubusercontent.com/61319150/120017117-16eee580-bfab-11eb-900e-e899a0000c7a.gif)