#javascript projects

[divinector]

JavaScript word counter

[codenewbies]

Javascript Background Color Change

[ocean-of-code]

How to create a piano using JavaScript

Preview Piano : #https://oceanofcode.playcode.io/

[izicodes]

Sugary Scribbles | #8

Saturday 6th January 2024

IT'S BASICALLY WORKING (on larger screens)! My never-ending war on website responsiveness continues! I have a large screen and I stupidly only took into account of MY screen size. What I did do though is created a message for phone-table sizes because it just wouldn't make sense it working on really small devices - in my opinion~! But for now I will put this on hold because I am excited about my other project idea I came up with yesterday oops~!

This is my first project of the year and it's super adorable in my opinion! It paints, it erases, it deletes and it saves your artwork! Ticks all the boxes I made at the beginning of the project! Turned a simple 'Make a HTML painting webpage' into something more cuter and cool! Job well done! 😩🙌🏾💗

You can try it out (if you have a larger screen size), all that happens is the painting will be off the mouse direction a bit, sorry!

link to the Sugary-Scribbles web app! 🍡

Lastly, here is a cool drawing I made as I was testing the site~! I'm a better artist than this I swear, just not good using a mouse...

List of resources I used during the project

Figma - to plan the webpage

Canva: to make the header

Photopea: for further photo editing

RedKetchup: to colour pick quickly

CSS Animations: to add the zoom-in-n-out animation

MDN Canvas: to know what the element does properly

YouTube Tutorial: to get inspiration and extra help

Flaticon: for the icons and cursors

Html2canvas API: to turn the drawing into an image (tutorial)

That's all, have a nice day/night and happy coding! 🖤

[artmasiah]

Game Dev Blog 04: Collision Detection Cont.

01/09/2024

Solution!💾

I created a transform matrix that updates the (x,y) position of the character no matter where it moves on the screen ✅

As the red box updates so does the green box. I then use the green box to do the collision detection. See the video below:

To do:

create collision areas for interacting with piano and art wall🔲

Refactor code🔲

[jojotier]

canonically Egbert wouldn't be able to code in javascript because their ineptitude with stack modus implies that they wouldn't understand the relative path necessary to import ('require') modules of code to different files in the directory

[kawaoneechan]

I can't decide 🎵

Okay, let's have a good think about scripting languages that I might use in Project Special K. I wrote about this before, but really I'm just trolling for comments and suggestions.

Option 1 - Lua

Relatively easy to implement, especially with something like Sol on top.

Well known, often used for game scripts.

I have no earthly clue how to handle multiple objects running their own scripts simultaneously, let alone the whole "wait for some other object to signal back" that I described before.

Option 2 - JavaScript

Could be a nice challenge to implement, maybe with something like Duktape?

Well known, but not as often used for game scripts as Lua.

The third point is exactly the same as for Lua.

Option 3 - bespoke Lisp-like

Tricky to implement, but I've done it a bunch of times now to varying degrees.

Not as well known nowadays, I suppose, compared to JS and Lua.

I already know how to allow for cooperative multi-threading and waiting for other objects to finish, as described before. Just gotta implement the whole thing.

Option 4 - Event Flow

The script engine used in Animal Crossing New Horizons, Legend of Zelda Breath of the Wild and Tears of the Kingdom, and probably many other Switch games.

This option is a joke to make the list longer.

Obviously supports waiting for outside things.

Option 5 - Something else

Who knows, maybe one of you reading this has a better idea?

As a reminder of what I kept referring to, there would be several things running simultaneously like villagers, gift balloons, bugs, the hourly weather and chime thing, the player, and the UI. When you talk to a villager, they stop what they're doing and run a script. That script can then cause a dialogue box to appear by spawning in a new game object. The script should then sit and wait until the dialogue box is dismissed, all while the villager sits and waits until the script signals it's done, while the dialogue box and script can trigger animations to play on the villager and player alike... all while all these other objects still process in the background, and may themselves run scripts.

I'd rather not start on implementing something as in-depth as a script system, let alone with a feature such as that, without being certain it's not a very bad idea.

Doesn't need to be the best idea. Just not a very bad one.

[xiabablog]

@hezalife I wanted to make a post about this because my answer was longer than what I could put in a reply comment! The comment was about this post I made about the project ideas I have saved in my notes app on my phone!

Okay to answer the question, I get a bunch of ideas from literally everywhere. Here are some of the ways I come up with ideas:

Hobbies/interests I have and think of a way to make a web app/program/web page out of it. E.g. I like playing Minecraft, Pokemon, Stardew Valley, The Sims etc so I would thing of ideas around those games and create a programming project out of it.

Get the stereotypical “beginners” project ideas and expand on that. Calculator? How do I make it better, more advanced! To-do list? Don’t like basic, add more and more features to it. Text-based RPG console game? Make it more complex. Stuff like that.

Same with the other point above but add a theme to it. Hello Kitty version (my go-to theme since I started programming…)

I follow people on GitHub and Twitter that share their projects and I think of something similar or get inspiration from them and think “Okay, how do I make myself and better?” Sometimes not even better but how would I tackle that project myself.

What would make my life a little bit easier - I made TumblrTextTint generate the code needed for formatting colours in text for me. I coded it and I use it. Don’t care if someone in the past did it already, I sat down and coded my own one. It’s all experience and a good feeling in the end~!

Since I’m all for experimenting and gaining experience with programming, I also follow some tutorials on YouTube and from that’s programming blogs online. I don’t like following the instructions exactly, I like to add my own twist!

Get stuck? Use those online generators to give you a prompt on a theme or a whole idea for a next project.

I have a blog and I like to add pages and changes to the theme a bit so I make a whole ass project out of it. “Build a navigation page”, “Build an About Me page” etc.

Things I use a lot and create a project idea from it e.g. I have a lot of Tumblr-related project ideas because I use Tumblr a lot. Find something you use and do a lot and create an idea from it to work on.

Hope this answers your question!! Sorry, it’s a long post!

[anndcodes]

after a long time away from this tumblr due to a lot of things and personal problems, i hope i can post more often on here!

this is a signup project where i made a fictional coffee shop to use it for a sign up page, learned about form validation using css and javascript.

it even has a password visibility toggle icon and passwords validation!

[divinector]

How to Create To Do List With JavaScript

Check out divinector YouTube Channel for more

[adorejaeger]

From crude mock-ups in photoshop to a finished-enough something, the sculpting process in skinning kind of looks a little like this for me. Its responsive-ish, which is pretty cool for someone who doesn't really have an interest in responsive design.

See how the mark-up for it is done on my codepen here. Design inspired by this little thing I saw on pinterest.

[sandycodes]

day 8/100

life is just throwing me for an absolute loop these days, but im starting my adventure into javascript :) i didn't do a ton of coding today, but i learned about the history of javascript as well as 2 ways of running it in the browser, both in html files within the script tag and in an REPL (also one way of declaring a variable cause i think there are others but im not sure) <3

[izicodes]

Researching Old Web Designs

Wanting to get back to coding for myself and coding things I enjoy, I researched 'old web' / 'old internet' GUI designs and became more fascinated. I've always liked the aesthetic but took time to look more deeply into the design aesthetic!

I also decided to test for myself if I could recreate the graphical user interface (GUI) designs using HTML, CSS and JavaScript (mainly for any functionality I want to add to the design). The above gif is me demonstrating a fake Windows 2000 PowerShell design. Again, this was built using only HTML, CSS and JavaScript!

There have been 20 versions of the Windows operating system and I will be designing from version 10-12; Windows NT 4.0 (1996), Windows 98 (1998) and Windows 2000 (2000)!

Maybe at the end, I will combine all my designs into one place for others to view them! As I do this, I will continuously learn about the history of the internet and the Windows OS.

[faiza-the-hypertext]

Do you enjoy the format of 17776 or Homestuck?

Then maybe check out my hypertext fiction: FAIZA! https://www.faiza.rowanhahn.com/ FAIZA is a website that tells the sci-fi story of a journalist figuring out a case, and running into space gangs, intergalactic corporations, and pirates as she does. It's multimedia: including pictures, emails, articles, audio files (with transcripts), documents, a video, and more. FAIZA is based on older web aesthetics and has a lot of website to wander through, with several styles being explored throughout. (It's also a bit comedic so please enjoy that as well.) It works well on both desktop and mobile!

This project took so much time and I really love it! And I would be very happy if someone out there liked it too. Even if it's not for you I would appreciate a reblog just so I can find someone who might enjoy it. Ok, thanks for reading!