#simple javascript projects

[divinector]

Stopwatch using HTML CSS and JavaScript Check out Divinector YouTube Channel For more

[codingflicks]

Javascript Calculator

[werewolf-kat]

I forgot to mention here, but a few days ago I’ve caved in and went to see what Mastodon’s like. I’m enjoying my stay on there so far! It’s chill, and I primarily got myself signed up for a game dev group. I love to see people be creative and passionate with their work!

You can find me existing as: WolfKat@peoplemaking.games

(I’ve abandoned Twitter many weeks ago at this point, and especially avoided merely landing on its home page due to certain disgusting gore/shock/trauma posts I heard were being pushed by its algorithm...)

[ttenvely]

ON MY YOUTH — THEME PAGE PACK

In the source link below, you will find three (3) various theme pages without javascript — for free! Almost everything can be adjusted (fonts, colors) with minimal editing and everything is labeled throughout. If you come across any issues or have any questions, feel free to message me!

FEATURES

gif pack page — a simple page to host your individual gif packs

multi-muse page — a page to show off all your muses in one place

gif pack masterlist page — a page to compile all of your gif projects

GUIDELINES

do not claim as your own

do not touch or remove any credits

do not use as a base code or take parts of this code

feel free to edit and have fun!

Please consider reblogging to help share my work!

[izicodes]

I've been itching to dive into something totally new and outside of my usual web dev comfort zone! After brainstorming for a while, I finally landed on a brilliant new project idea: building my very own desktop widget~! 

Now, full disclosure—I have zero idea where to even start when it comes to programming a widget, but that’s where the fun comes in, right? I’m all about learning new things (I have an addiction to studying so…)~!

In this post however, I’ll be sharing my initial ideas for the widget and brainstorming what tech stack might bring this amazing idea to life~! 

Prior knowledge on desktop widgets?

All I know is that they stick to the desktop area and some even always in front of the other windows. That’s all I know!

Widget Idea

So, the project idea I’ve chosen is something simple, just so I can get used to making widgets: a notepad. But, it’s not just any plain notepad widget—it’s going to have an aesthetic color scheme! (I know, pretty cool, right?) I really wanted to keep things basic for this first project.

The inspiration actually came from a Pinterest pin that I saved. I think the design is originally from a color palette generator website, but I want to take that concept and turn it into an actual desktop widget. Thus this project was born!

Tech Stack

Alright, I lied—I'm not entirely stepping out of my comfort zone for this one! I'll be using ReactJS, a technology I’m super comfortable with and absolutely love. But to keep things fresh and challenging, I’m diving into something new as well!

After researching (thank you, ChatGPT, Google, and YouTube), I found out there are plenty of ways to build a desktop application, or in this case, a widget. You can go with WinForms, WPF, Tauri (Rust), Qt, and others. But I wanted to stick closer to JavaScript—specifically something I could pair with ReactJS. So, ElectronJS seemed like the best fit.

For this project, my tech stack will be:

ReactJS (JavaScript)

ElectronJS (JavaScript)

SCSS (for those extra styling powers)

HTML (obviously)

Visual Studio Code (with a lovely brown theme 🧸)

Toward the end of the project, I’ll also explore how to package the widget so people can download and install it on their own computers, and how to store the notes locally!

Finally

As I post this I am going to start the project so I will soon post updates! (This is where I fail…!)

[pandappuccino]

PAGE CODE 01: PROJECT PROGRESS

[LIVE PREVIEW & DOWNLOAD]

I wanted to make a custom project tracking page for my blog to match the themes I was using, but nothing caught my eye, so I threw this together. It's a very simple code used to track project progress and summarize the projects themselves.

FEATURES:

Anchor links to directly scroll to a given project

Cappuccicons font (as a direct stylesheet instead of JavaScript, so you don't need to contact support to use the code)

Straightfoward layout

IMPORTANT NOTES:

The tracking progress bars can be styled, but the styling will only show in Google Chrome or other Webkit-based browsers; Firefox doesn't have the functionality for it yet. Default style in Firefox is shown in the first image; Chrome/Webkit styling is in the second image.

Colors are changed through the variables in the ::root section of the CSS.

The theme was made to loosely match the Anemone theme by Seyche (the theme I'm using at the time of posting this).

[elkement]

Cubed Oscillations 5-8-11

Back to 3D Lissajous structures!

More and less: More oscillations, more curves. No projecting lines shown, no cubes. Less educational, more mysterious, more confusing, more artefacts and Moiré effects.

Rainbow-y sin(5t)/sin(8t)/sin(11t) "built from" its projections to the three co-ordinate planes - 2D Lissajous figures. Showing the same structure from four different viewing angles.

Created with javascript/threejs, no AI.

While harmonic oscillations and the spectral colors have relevance in physics, this combination has not. However, I wanted to combine rainbow colors with white, making the aesthetics feel like my freehand drawings of dispersion prism: White lines and rainbows. Usually I have a vague idea, then start coding / changing parameters. in 90% of experiments I do not like the first attempt, at all. Sometimes I shelve the whole idea after hours of trying. In this case the result was what I had hoped for.

I have swapped the order of colors: The heart is read, the periphery is violet... so if some "particle on a Lissajous trajectory" had something to do with the energy of these photos, at least the more energetic should result in a larger "radius". I was thinking to make the radius dependent on the square root of the frequency or something ... but decided against as this is only "inspired by physics" anyway.

My main motivation is to use rather simple functions, and a simple representation (lines, no "effects") and create something unexpected by using an unfamiliar point of view.

[divinector]

Text To Speech Converter JavaScript Check out Divinector YouTube Channel for more  

[fujocoded]

Funding FujoCoded: Stretch Goals!

It’s time! With our first goal met (🎉 thank you!), let’s talk about stretch goals. We have quite a few planned, so we're going to go through them one by one and explain what they are and why we chose them!

Before we go down the list, here's something fun:

Sticker Unlock: At 45 backers, we also unlocked one more sticker!

The goal of our campaign is to cover business expenses most of all. The unlocked content is an extra token of gratitude for your support that also helps us meet our own targets! 

With that said, let's get to our stretch goals...

$4,000: "That's Why I Ship On Company Time" Ao3 Sticker

At $4,000 we'll unlock one more sticker design that you can add to your collection! 

Our first version of this "shipping" sticker features VSCode and a terminal, but there's more than one type of shipping... here's to the other one!

$5,000: "Using NPM with Javascript" Article

Next up, we have our first article. Our plan is to add an Articles section to @fujowebdev where we'll collect simple, free guides to help beginners get past the roadblocks we see them encounter!

This first one will cover the basics of NPM, a core element of modern JavaScript!

"How do I install this JavaScript library? How do I run this open source JavaScript project? How can I get started creating my blog using a tool like @astrodotbuild?" are some of the most common questions we get in our Fandom Coders server. 

Let's give *everyone* the answer!

$6,000: Offering Website Art Prints

Next up, we'll turn the excellent art on our website into prints! These will be (probably) 8x10-sized art prints that will look amazing without breaking the bank. Full specs soon!

...and speaking of the site, you have tried moving the windows, right?

$7,000: "Catching Up With Terminal" Article

Next, another common issue for beginner developers: how to start learning how to handle the Terminal.

This will require some research to determine the major roadblocks, which is how our project operates: active learning from those going through it all!

$8,000: "Crucial Confrontations" Article

And last (for now), something very dear to us: an article extracting some wisdom from the book "Crucial Confrontations": https://www.amazon.com/Crucial-Confrontations-Resolving-Promises-Expectations/dp/0071446524

This may seem like an unusual choice, but it highlights how our teaching goals go beyond programming to cover collaboration!

After years of working within our community, we repeatedly found that developing effective communication and confrontation skills helps our collaborators thrive. Unfortunately, the world doesn't teach us how to effectively (but kindly) hold each other accountable.

Some of our most involved collaborators have read this book and found the tools within it transformative. Given this experience, we deeply believe that making some of this wisdom easily accessible (without having to read the full book) will allow all of us to collaborate better!

If we can reach $8,000, this will enable us to test this hypothesis and learn how teaching soft skills beyond programming influences what we're able to achieve! It's a bold idea, but we're excited to see how it turns out in practice.

Help us make it there!

And that's all...for now!

If you want to hop on Twitch right now, you can join us as we put some extra polish on our shiny new FujoCoded website.

And remember, you can back our campaign here to help us achieve these goals and more:

[macleod]

Musing on remaking the browser (and internet) as we know it.

HTML+CSS is by far the best 'component' library there is, but JS really tends to be the main cause of bogging down the entire thing and drowning out the performance gains.

The idea is something along these lines (this ended up being far longer than initially intended):

HTML Viewer, directly from a plain HTML source, I've even considered using a headless browser, taking a 'photo' of the webpage, and then laying out a bitmap onto it, might not be needed, but could be cool and useful.

Once a user, or a function 'clicks' or focuses on a section of the bitmap, then the embedded language uses this is as a target selector to manipulate the data of the HTML viewer source, directly without page loads. Similar to an SPA but, without JS, similar to 'hot-wire', but again without JavaScript.

a separate database built into the 'browser' similar to indexdb, but likely something more similar and powerful such as SQLite with permission guards for applications (think OAuth, running locally).

This would obviously change the dynamic properties of a 'browser', and would make it more akin to an enhanced PDF editor with dynamic input (pop-ups instead of dynamic forms, etc.). But, I am starting to believe the problem and performance issue of the browser is less the sandbox (which this would enhance), but because we've forced a data language into what should be a static component library with targeted source changes.

This is a difficulty that we're seeing the weight of, we only have two major browser types, two engines. There have been so many attempts to recreate them, but they are all attempts at recreating the worst parts of a rendering agent that combines and forces the merger of highly volatile dynamic data into static components.

They have said for years that no one can 'make a new browser rendering engine' because of how many variables and issues and decades of bad choices and changes from the infancy of development.

Gopher, and the similar, are interesting projects, but they lack in several regards: data entry, minimal schematic support for modern HTML and CSS capabilities, and they are attempting to recreate an entire protocol. The protocol we have for file and web transfer is excellent, despite its shortcomings, but it is highly stable, reproducible, and effective.

If we were to remove 'dynamic' capabilities, such as forms, or text boxes, and all that JavaScript entails, the HTML viewer would be minimal for performance. The embedded language on top would hold the data separately from the process—rendering inputs to be sanitized and standardized. If the browser fails, your data would be backed up, you would have a complete revision history of all data ever processed, and you would have. This is likely the path forward for something akin to the Solid Project, where you own your data.

Every 'browser' becomes your own personal data temple or silo, and every web page becomes 'server-side' generated and modified with targeted manipulation or key:values from the integrated (stateful) database by your locally running browser.

When you go to someone else's website, most of which is just static content anyway, you get the HTML source, and the source for a/any(?) scripting language that would use the values from the browser overlay tracker for targeting to rewrite and submit specific HTML components.

The manipulator overlay would be an entirely separate process, with a simple message transfer between the two. This entirely separates your data into a stateful persistent object (no more losing your form data as you type due to a reload, or failure, or anything else, with full history) and your dynamic script, if a site needs it (most don't), would be in its own process. There would be a message transfer queue, likely using the built-in database with @\tagged hooks for event dispatches.

You would be able to have fully sandboxed, extremely performant, websites, while owning your own data. The browser as a server HTML renderer, the webpage as an “image” (sort of), and an 'overlay' selector for an embedded image to submit changes to individual HTML components.

If you were to separate it into three extremely slim, minimal, processes, with an integrated database with OAuth style permission switches. You would have just created a new browser, and a new way for the web to work, using virtually no memory, enhancing security, and with far less complexity. In a way, this would turn the web into a 'native' application.

You also would have quite a bit of backwards compatibility to the pre-NewWeb.

You should own your data, websites should be static, data should be dynamic, and browsers should be performant.

Just some musing on the topic, I'm working on something similar, but not exactly in regard to this—so maybe I'll spend some time and add it to the ever-growing projects list.

[kafus]

last night i sat down to work on my PCNY project again and i realized that i somehow forgot to implement marking a pokemon as seen or caught in the pokedex into my save editing code, so i went to go do that. i forgot how exactly that data was stored in the save file though, so i had to look up documentation on that on bulbapedia, and also reference my first attempt at implementing the same thing in my trader code.

back when i made my trader, for some reason i was working with hexadecimal and binary with values represented as strings...? it was my first time working directly with hex and i remember trying to look up how to do so in javascript and getting information on parseInt() and whatnot, so i guess i just assumed i had to work with strings...? i don't know, don't ask, i don't remember. the code for that tool is a mess as a result and i'd love to go back and redo it sometime with my new save editing code in play (and then i want to add features like swapping mail...! but that'll be a long time from now, probably)

anyway on top of all these values being strings, i also didn't really have an understanding of bitwise operators, which was a problem because pokedex seen/caught data is stored in bit arrays. to mark a pokemon as seen or caught, you have to flip a specific bit corresponding to the pokemon's national dex number to 1. since i was already working with strings, and i didn't understand bitwise operators, my code for that... looked like this

it... it works, but. um. yeah

now i just calculate the byte offset and the positioning of the bit that needs to be flipped (i need bitPos for something else later which is why i have it as a separate variable instead of putting num % 8 into the bitFlip line) and shift 1 that many times to the left, and then i go to that byte in the save data and do a simple OR ( | ) operation on it and the bitshifted 1, and that's it.

something i previously wrote a whole function for simplified down to two lines of code pretty much. suffice to say i have a better understanding of this now

[manonamora-if]

Hello person of the internet,

It is me again, your totally legit supplier of very good assets {100% GOOD!!! NO BUGS!!!}. I am back with another template for you! [Definitely not a SugarCube rip-off of the Chapbook base UI] This whole affair is still scam free and no bug included! Download another funky folder to make your projects even more greater! A simple template, still in exchange for nothing {YES, THIS IS STILL 100% FREE!!!} but your love and adoration for my help. What a steal! 

I PRESENT TO YOU THE...

One Page Template!

A 100% GOOD QUALITY template that you can download {YES OR FREE!!!} and share to your heart’s content!

ENJOY!!!

The One Page Template Pack includes:

HTML ready-to-use file

Open Dyslexic Font 

.tw, .js and .css file for Tweego

Annotated passages, stylesheet and javascript

Mobile adapted (Portrait, min-width: 315px)

Template made on Twine (v 2.5.1)/Tweego with Sugarcube (v 2.36.1). Any use with other version may break some UI aspects (you may need to adjust those manually). It is recommended you create a new project and copy-paste the template's elements inside (Twine) or generate a new ifid (Tweego).

Note: the file only download does not come with the Open Dyslexic Font, you will need to download it and incorporate it separately.

If you do use this asset pack for a project, please tag me so I can see what you've done (also credit me so other find this template)!

If you have any question about or any issue with the template, send me an ask ! 

Consider rating and sharing this asset pack too! THANK YOU <3

Disclaimer:

The graphics and written presentation of this asset packs are meant to be a joke. This is obviously not a scam. The files are basic HTML/.tw/.js/.css files running on Twine/Sugarcube and have been tested for bugs.  They are completely editable and free to use. I will never require you to pay for those. 

[izicodes]

Mini React.js Tips #1 | Resources ✨

I thought why not share my React.js (JavaScript library) notes I made when I was studying! I will start from the very beginning with the basics and random notes I made along the way~!

Up first is what you'll need to know to start any basic simple React (+ Vite) project~! 💻

What you'll need:

node.js installed >> click

coding editor - I love Visual Studio Code >> click

basic knowledge of how to use the Terminal

What does the default React project look like?

Step-by-Step Guide

[ 1 ] Create a New Folder: The new folder on your computer e.g. in Desktop, Documents, wherever that will serve as the home for your entire React project.

[ 2 ] Open in your coding editor (will be using VSCode here): Launch Visual Studio Code and navigate to the newly created folder. I normally 'right-click > show more options > Open with Code' on the folder in the File Explorer (Windows).

[ 3 ] Access the Terminal: Open the integrated terminal in your coding editor. On VSCode, it's at the very top, and click 'New Terminal' and it should pop up at the bottom of the editor.

[ 4 ] Create the actual React project: Type the following command to initialize a new React project using Vite, a powerful build tool:

npm create vite@latest

[ 5 ] Name Your Project: Provide a name for your project when prompted.

[ 6 ] Select 'React' as the Framework: Navigate through the options using the arrow keys on your keyboard and choose 'React'.

[ 7 ] Choose JavaScript Variant: Opt for the 'JavaScript' variant when prompted. This is the programming language you'll be using for your React application.

[ 8 ] Navigate to Project Folder: Move into the newly created project folder using the following command:

cd [your project name]

[ 9 ] Install Dependencies: Execute the command below to install the necessary dependencies for your React project (it might take a while):

npm install

[ 10 ] Run the Development Server: Start your development server with the command (the 'Local' link):

npm run dev

[ 11 ] Preview Your Project: Open the link provided in your terminal in your web browser. You're now ready to witness your React project in action!

Congratulations! You've successfully created your first React default project! You can look around the project structure like the folders and files already created for you!

BroCode's 'React Full Course for Free' 2024 >> click

React Official Website >> click

Stay tuned for the other posts I will make on this series #mini react tips~!

[anndcodes]

day 21/100

i finished the first javascript project that consist in making a simple console rock-paper-scissors game that the user plays with the computer for 5 rounds and in the end it shows the final winner (the one with more points).

although it was simple, it was still a bit difficult and i struggled a lot, to be honest, but i'm glad that i finished and it's working pretty well.

i used functions, conditionals, methods to return random values, and case-insensitive inputs.

[anyhs-themes]

HIATUS (en)

What about my themes? I'm not taking commissions anymore, but all my themes will continue to be available for now, however I'm no longer updating them, so use them at your own risk!

Where to find me? You can still find me on my personal blog (@anyhsalinas). And if you have a theme/HTML/CSS/JavaScript related question for me, as long as it's a simple question I might have time to help you, so send it to my personal blog (here) ONLY. Don't even try to ask about these things on my other social medias where the focus is not coding, please, otherwise I'll block you (I had people doing this before and I get very annoying by that, respect my spaces, please).

Why I'm quitting?

One of the biggest reasons why I loved Tumblr was the ability to customize our blogs however we wanted and turn it into our own space with our own style. And that's why I started making themes for myself and for other people. But over the last years Tumblr has kinda neglected this feature of the platform:

Clicking on a blog through the dashboard now takes you to a default dashboard-like page (this) and not to the customized version of the blog (this), which turned customizing your blog into something pointless because we take a long time customizing our theme only so that it might never even be seen by anyone;

This change also made it possible for people to send me messages without even seeing the rules for messaging me first;

And let's not forget the fact that now we need to contact Tumblr's staff to ask and wait for their permission in order to use JavaScript in custom pages, which makes things so unnecessarily more difficult for people who want to use our custom pages (they say it's for safety reasons, but it's still possible to use scripts on the main theme, so what's the point?).

Let's talk about writing posts as well:

We can no longer use basic HTML codes on posts which made it impossible for me to post tutorials (since it blocks the codes I'm trying to teach) -- which made me need to create a blog on Blogger to post my tutorials there, and have to simultaneously take care of two blogs on the exact same topics, which is kind of annoying;

Also the new post editor has been very buggy for me. Sometimes when I try to copy a portion of the text I'm writting it just won't copy no matter what. Sometimes it will duplicate paragraphs on its own for no reason...

Tumblr has also made some bad decisions (in my opinion at least) over the years of what kind of content to allow in the platform which caused serious problems to the platform itself (as you might have seen in the news around that time), but even before that also caused a big change in its community and the majority of the blogs I loved (the meme, poetry and fandom blogs of shows and bands I like) moved to Twitter (I still refuse to call it "X", lol) and other social medias. So most of what I loved about this platform is gone forever and the only things still keeping me here are the things I have saved in my blogs, my liked posts and drafts (mostly custom content and mods that I found here for The Sims, lol).

I haven't been using Tumblr regularly in... years, actually. Only sometimes I pass by. And I no longer enjoy developing themes for this platform because now, after all these changes, it has turned into something kinda pointless. Also, I've been busy with other projects that are bringing me more joy at the moment, such as my Youtube channels and crafting. So I'm leaving behind this part of my life... I don't like saying this is an end because I can always change my mind. But unless Tumblr goes back to making our custom theme as the main page of our blogs (instead of that default dashboard-like boring page), I don't think I'll go back to making themes for this platform.

But thank you all for your support in this blog and for using my codes through all of these years! Wish you all the best. 💕

— Anyh's Themes (2013 - 2024)

[astridvalencia]

How to Learn Programming?

Learning to code can be a rewarding and empowering journey. Here are some steps to help you get started:

Define Your Purpose:

Understand why you want to learn to code. Whether it's for a career change, personal projects, or just for fun, having a clear goal will guide your learning path.

Choose a Programming Language:

Select a language based on your goals. For beginners, languages like Python, JavaScript, or Ruby are often recommended due to their readability and versatility.

Start with the Basics:

Familiarize yourself with fundamental concepts such as variables, data types, loops, and conditional statements. Online platforms like Codecademy, Khan Academy, or freeCodeCamp offer interactive lessons.

Practice Regularly:

Coding is a skill that improves with practice. Set aside dedicated time each day or week to code and reinforce what you've learned.

Build Simple Projects:

Apply your knowledge by working on small projects. This helps you gain hands-on experience and keeps you motivated.

Read Code:

Study existing code, whether it's open-source projects or examples in documentation. This helps you understand different coding styles and best practices.

Ask for Help:

Don't hesitate to ask questions on forums like Stack Overflow or Reddit when you encounter difficulties. Learning from others and getting feedback is crucial.

Join Coding Communities:

Engage with the coding community to stay motivated and learn from others. Platforms like GitHub, Stack Overflow, and coding forums provide opportunities to connect with fellow learners and experienced developers.

Explore Specializations:

As you gain more experience, explore different areas like web development, data science, machine learning, or mobile app development. Specializing can open up more opportunities and align with your interests.

Read Documentation:

Learn to navigate documentation for programming languages and libraries. It's a crucial skill for developers, as it helps you understand how to use different tools and resources effectively.

Stay Updated:

The tech industry evolves rapidly. Follow coding blogs, subscribe to newsletters, and stay informed about new developments and best practices.

Build a Portfolio:

Showcase your projects on platforms like GitHub to create a portfolio. It demonstrates your skills to potential employers or collaborators.

Remember, learning to code is a continuous process, and it's okay to face challenges along the way. Stay persistent, break down complex problems, and celebrate small victories.