#javascript get element by name

[sirius-bizdness]

Poking around the new Spamton Sweepstakes site...in particular, checking the source code of the cat clicking game. And I noticed something peculiar...

Why is the sound for the eye jumpscare linked alongside the regular sounds...?

Gory details under the cut (plus some unused assets 👀).

Digging deeper, it appears the variable which the jumpscare sound gets written to is used in the function "hardReset()", which gets called in four places. I'm not fluent in Javascript, but it seems like these are the cases when it gets run:

on your 100th cat pull (so, every 100 cats?)

as a random 1 in 1001 chance every time a cat is summoned (except the first

under certain conditions when points value changes (in a function not mentioned elsewhere in the script--is that a JS/HTML interplay thing?)

possibly if the clicked element fails to animate??

(someone with actual JS experience please take a second look)

So what does hardReset() do...? Exactly what you'd expect from a thing which uses the face jumpscare sound. Plays the jumpscare sound, zooms this guy towards you from nothing:

...and cues up a short timer which drops you back on the Sweepstakes homepage.

SIDENOTE: Amusingly, the filename for the grinning face is "/assets/images/cat-009.gif", which matches the naming scheme of the used cat images.

Only five out of eight (+ face) tiers of cat are used in the game. 003, 004, and 008 get skipped, but their graphics are still hosted on the website!

[codingquill]

JavaScript Fundamentals

I have recently completed a course that extensively covered the foundational principles of JavaScript, and I'm here to provide you with a concise overview. This post will enable you to grasp the fundamental concepts without the need to enroll in the course.

Prerequisites: Fundamental HTML Comprehension

Before delving into JavaScript, it is imperative to possess a basic understanding of HTML. Knowledge of CSS, while beneficial, is not mandatory, as it primarily pertains to the visual aspects of web pages.

Manipulating HTML Text with JavaScript

When it comes to modifying text using JavaScript, the innerHTML function is the go-to tool. Let's break down the process step by step:

Initiate the process by selecting the HTML element whose text you intend to modify. This selection can be accomplished by employing various DOM (Document Object Model) element selection methods offered by JavaScript ( I'll talk about them in a second )

Optionally, you can store the selected element in a variable (we'll get into variables shortly).

Employ the innerHTML function to substitute the existing text with your desired content.

Element Selection: IDs or Classes

You have the opportunity to enhance your element selection by assigning either an ID or a class:

Assigning an ID:

To uniquely identify an element, the .getElementById() function is your go-to choice. Here's an example in HTML and JavaScript:

HTML:

<button id="btnSearch">Search</button>

JavaScript:

document.getElementById("btnSearch").innerHTML = "Not working";

This code snippet will alter the text within the button from "Search" to "Not working."

Assigning a Class:

For broader selections of elements, you can assign a class and use the .querySelector() function. Keep in mind that this method can select multiple elements, in contrast to .getElementById(), which typically focuses on a single element and is more commonly used.

Variables

Let's keep it simple: What's a variable? Well, think of it as a container where you can put different things—these things could be numbers, words, characters, or even true/false values. These various types of stuff that you can store in a variable are called DATA TYPES.

Now, some programming languages are pretty strict about mentioning these data types. Take C and C++, for instance; they're what we call "Typed" languages, and they really care about knowing the data type.

But here's where JavaScript stands out: When you create a variable in JavaScript, you don't have to specify its data type or anything like that. JavaScript is pretty laid-back when it comes to data types.

So, how do you make a variable in JavaScript?

There are three main keywords you need to know: var, let, and const.

But if you're just starting out, here's what you need to know :

const: Use this when you want your variable to stay the same, not change. It's like a constant, as the name suggests.

var and let: These are the ones you use when you're planning to change the value stored in the variable as your program runs.

Note that var is rarely used nowadays

Check this out:

let Variable1 = 3; var Variable2 = "This is a string"; const Variable3 = true;

Notice how we can store all sorts of stuff without worrying about declaring their types in JavaScript. It's one of the reasons JavaScript is a popular choice for beginners.

Arrays

Arrays are a basically just a group of variables stored in one container ( A container is what ? a variable , So an array is also just a variable ) , now again since JavaScript is easy with datatypes it is not considered an error to store variables of different datatypeslet

for example :

myArray = [1 , 2, 4 , "Name"];

Objects in JavaScript

Objects play a significant role, especially in the world of OOP : object-oriented programming (which we'll talk about in another post). For now, let's focus on understanding what objects are and how they mirror real-world objects.

In our everyday world, objects possess characteristics or properties. Take a car, for instance; it boasts attributes like its color, speed rate, and make.

So, how do we represent a car in JavaScript? A regular variable won't quite cut it, and neither will an array. The answer lies in using an object.

const Car = { color: "red", speedRate: "200km", make: "Range Rover" };

In this example, we've encapsulated the car's properties within an object called Car. This structure is not only intuitive but also aligns with how real-world objects are conceptualized and represented in JavaScript.

Variable Scope

There are three variable scopes : global scope, local scope, and function scope. Let's break it down in plain terms.

Global Scope: Think of global scope as the wild west of variables. When you declare a variable here, it's like planting a flag that says, "I'm available everywhere in the code!" No need for any special enclosures or curly braces.

Local Scope: Picture local scope as a cozy room with its own rules. When you create a variable inside a pair of curly braces, like this:

//Not here { const Variable1 = true; //Variable1 can only be used here } //Neither here

Variable1 becomes a room-bound secret. You can't use it anywhere else in the code

Function Scope: When you declare a variable inside a function (don't worry, we'll cover functions soon), it's a member of an exclusive group. This means you can only name-drop it within that function. .

So, variable scope is all about where you place your variables and where they're allowed to be used.

Adding in user input

To capture user input in JavaScript, you can use various methods and techniques depending on the context, such as web forms, text fields, or command-line interfaces.We’ll only talk for now about HTML forms

HTML Forms:

You can create HTML forms using the &lt;;form> element and capture user input using various input elements like text fields, radio buttons, checkboxes, and more.

JavaScript can then be used to access and process the user's input.

Functions in JavaScript

Think of a function as a helpful individual with a specific task. Whenever you need that task performed in your code, you simply call upon this capable "person" to get the job done.

Declaring a Function: Declaring a function is straightforward. You define it like this:

function functionName() { // The code that defines what the function does goes here }

Then, when you need the function to carry out its task, you call it by name:

functionName();

Using Functions in HTML: Functions are often used in HTML to handle events. But what exactly is an event? It's when a user interacts with something on a web page, like clicking a button, following a link, or interacting with an image.

Event Handling: JavaScript helps us determine what should happen when a user interacts with elements on a webpage. Here's how you might use it:

HTML:

<button onclick="FunctionName()" id="btnEvent">Click me</button>

JavaScript:

function FunctionName() { var toHandle = document.getElementById("btnEvent"); // Once I've identified my button, I can specify how to handle the click event here }

In this example, when the user clicks the "Click me" button, the JavaScript function FunctionName() is called, and you can specify how to handle that event within the function.

Arrow functions : is a type of functions that was introduced in ES6, you can read more about it in the link below

If Statements

These simple constructs come into play in your code, no matter how advanced your projects become.

If Statements Demystified: Let's break it down. "If" is precisely what it sounds like: if something holds true, then do something. You define a condition within parentheses, and if that condition evaluates to true, the code enclosed in curly braces executes.

If statements are your go-to tool for handling various scenarios, including error management, addressing specific cases, and more.

Writing an If Statement:

if (Variable === "help") { console.log("Send help"); // The console.log() function outputs information to the console }

In this example, if the condition inside the parentheses (in this case, checking if the Variable is equal to "help") is true, the code within the curly braces gets executed.

Else and Else If Statements

Else: When the "if" condition is not met, the "else" part kicks in. It serves as a safety net, ensuring your program doesn't break and allowing you to specify what should happen in such cases.

Else If: Now, what if you need to check for a particular condition within a series of possibilities? That's where "else if" steps in. It allows you to examine and handle specific cases that require unique treatment.

Styling Elements with JavaScript

This is the beginner-friendly approach to changing the style of elements in JavaScript. It involves selecting an element using its ID or class, then making use of the .style.property method to set the desired styling property.

Example:

Let's say you have an HTML button with the ID "myButton," and you want to change its background color to red using JavaScript. Here's how you can do it:

HTML: <button id="myButton">Click me</button>

JavaScript:

// Select the button element by its ID const buttonElement = document.getElementById("myButton"); // Change the background color property buttonElement.style.backgroundColor = "red";

In this example, we first select the button element by its ID using document.getElementById("myButton"). Then, we use .style.backgroundColor to set the background color property of the button to "red." This straightforward approach allows you to dynamically change the style of HTML elements using JavaScript.

[weepingwitch]

i think an easy important step to Knowing More about websites and shit is to start using the element inspector / source code viewer / js console in the browser. like fake screenshots are so easy to make by editing the page, and you'll get used to removing/disabling those "subscribe to continue reading" popups and shit. you'll be a more proficient user of your existing adblock tools if you understand what kind of elements to block, or how to identify the specific class/id names. you can start to look at what cookies/cached data a website is storing. like bc of how javascript is executed and CSS rendered client side, you have a lot more control/insight over how websites appear and function. u can make hard-to-read text into a better color or font, or give things solid backgrounds. inspect those elements!

[diana-fortyseven]

A.K.A. "I wrote this instead of sleeping..."

You can find the prompt bingo right here.

It's still a work in progress, and there's so much more I want to add eventually, but everything that's already there is working.

And what's there is a lot. Like, a metric shit ton.

I've added all

Cinematic Titles

Mission Names

Mission Stories

Challenges

Destinations

of all Hitman World of Assassination Game Modes.

Some challenge prompts might look like typos to you. While I always appreciate when you point those out to me so I can fix them (seriously, please do let me know if I missed something!), please check first if there isn't an in-game challenge with that exact name, because so many of them look like I forgot how to spell. :D

Fun fact, did you know that there are roughly 1,200 challenges in the game? I wasn't joking about the "instead of sleeping" part of the title.

Additionally, there are long lists with smutty, kinky, romantic, angsty and whumpy prompts.

You can opt-out of NSFW, Shipping and Angst by not opting in (I swear this makes sense in my head right now), but if you select the theme "Romance" from the dropdown menu, you will get shippy prompts even if you don't tick the Shipping checkbox, and if you select Hurt/Comfort from the dropdown menu you will get angsty prompts even if you don't tick the Angst checkbox. I recommend ticking the Shipping or Angst checkbox if you select Romance or Hurt/Comfort for a larger pool of prompts.

You will not get NSFW prompts unless you tick the NSFW checkbox.

However, some mission stories and challenges have names that could be mistaken for NSFW prompts. I haven't put them behind the filter, and I don't know if I will do that in the future.

If you don't like a prompt, you can just re-roll that one specific prompt by clicking/tapping the field it's in.

The Themes

The bingo generator has four themed lists so far: General Prompts, Mission Fic, Romance, and Hurt/Comfort.

I will be adding more at appropriate times, such as a summer list for summer (Northern Hemisphere) or a Halloween list for Halloween. Those will be permanent additions. It's just a lot of work, and I have so many more plot bunnies and code bunnies and art bunnies, so I really have to space these updates out. xD

If you'd like to suggest a theme or donate a list of prompts, please feel free to do so!

How to Play

Create the card you want, do with it whatever you want.

You can take the prompts literally or interpret them any way you like. If it's the name of a mission story or challenge, you can use the mission story or challenge itself as a prompt, or come up with something just based on the name. If it's a pun, you can use the prompt as-is or remove the pun element from it.

Use as many or as few prompts as you want in a fic, or in a drawing, or in a daydream. You make the rules!

If you think a bingo should require a line of prompts used in one single work, cool. If you think four single works should count, that's cool too. And again, if you don't like a prompt, just re-roll it until you get one you like more.

Just have fun with it! :)

Mobile Version

The mobile version is working, but word breaks for longer words won't be pretty. I still need to add word break opportunities, but that's a lot of work, and I will probably do this in small batches over the next month or so.

If you want a prettier card, you can re-roll prompts with unpretty word breaks by tapping on the prompt you want to change.

Keyboard-Only Users

For accessibility, all prompt fields have added button functionality, which means you can use tab to select them and enter to interact with them. Your browser needs to have JavaScript enabled for that to work, though.

Now go play with it!

Or don't, I'm not your mum, I can't tell you what to do.

Final disclaimer: The platform I'm using to host my generators, Perchance, recently added AI options. My generators were not built using AI, and none of the prompts you'll get are AI generated.

My generators are all 100% handcrafted chaos. :D

If bingos are not to your liking and you'd like more detailed prompts, try my Hitman Prompt Generator!

[jorrated]

Hiya Jo, sorry to come to you for this, but your post on Maya Knuckles was so cool I had to ask. You seem good at researching stuff, do you have any tips on looking for sources on specific groups of people? I've been struggling on finding good resources on indigenous groups from brasil... (I'm brazilian myself but i dont know where to start)

I wouldn't say I'm good at research, as I think I'm more insanely curious and just lucky LOL. A lot of times when I try to search for specific things I try absolutely everything until I stumble on whatever I was looking for!

But usually I start with a quick basic skim-read on whatever google gives you when you look up whatever your looking for. Most often then not it'll probably give a wikipedia page, some related news articles and some unsourced pages. A lot of times I won't use any of these, but it's a good way to get a feel for what you'll need to keep an eye for.

What I mean is that sometimes just looking for the main subject of the research wont actually give you what you're looking for. For example, when I was looking for Mayan stuff, it kept giving me Inca and Aztec info, which is cool, but wasn't what i was looking for. But since these 3 were usually grouped together, looking for Inca and Aztec books/resources actually helped me a bunch into finding what I was looking for, and more! So keep an eye out on how the subject you're looking for is COMMONLY described, what's usually associated to it, what people talk about the subject etc.

Then you can go actually searching for thing now, I recommend using DuckDuckGo! And always check if they got a source. Plenty of articles will say things that they've seen on other articles, which maybe are true! but then you always run the risk of getting incorrect facts. So always check, if it's not sourced, run another search with the info and see if another article has a source.

When you do find an article/book with a source THEN you can fall down the rabbit hole! No joke one sourced article can lead you to 5 sources, which most probably also have sources. So from there it's pretty easy to search up on references.

If you run into a dead end and still hasn't found what you're looking for I recommend checking what the wikipedia page is citing as sources. You might not be able to access everything there, but some links should be able to redirect you to somethings.

In terms of paywalled scientific articles, disabling javascript usually works (right click on the page -> inspect element -> find the gear on the top right of the window it just showed up -> scroll down until you see a checkbox saying "disable Javascript" -> and refresh page). But if that doesn't work, Sci-Hub is fucking amazing. Just put down your ref or DOI and voilá!

For books I recommend checking the Internet Archive! They usually have what you're looking for, but also half of the time you can just type "Book name PFD" and it'll usually come up after a few search pages. Just make sure you know how to download stuff without getting a virus in you PC.

Reverse image search can also be pretty useful if you find an image related to the subject, since you can link up to other articles/blogs.

If you're STILL running in dead ends, switching up languages can help (probably not your case since your brazilian and most likely already searching in portuguese but yknow). Google translate extensions can really help looking into pages with languages you don't know! It's not perfect but it might help you get a gist of it.

And lastly if you want to know more about Indigenous people from Brazil, I got a couple of reccomendations (most in portuguese btw)!

Centro de Referência Virtual Indígena

Probably the BIGGEST resource on historical and political information on Indigenous groups. It hosts around 2,3 million documents ranging from bills passed, to personal diary entries. (aaaaand can link up to a lot of other cool resources)

Observatórios dos Direitos e Políticas Indigenistas

Translated from their website: OBIND aims to obtain and systematize quantitative and qualitative data on territorialization processes, territorial management, interethnic conflicts, human rights and quality of life of indigenous peoples and populations in reserved areas or in urban contexts, in order to enable visibility, comparability, evaluation and guidance for indigenous policies and promotion of their rights, notably those pertinent to respect for their uses, customs and traditions and the exclusive enjoyment of the lands they traditionally occupy, recognizing for this the sine qua non condition of promoting indigenous autonomy and overcoming guardianship as assimilationist legacy.

Indígenas pela Terra & Vida

Youtube playlist about many different Indigenous people recounting their experiences and narratives.

GENOCÍDIO INDÍGENA E POLÍTICAS INTEGRACIONISTAS: demarcando a escrita no campo da memória

Book titled: INDIGENOUS GENOCIDE AND INTEGRATIONIST POLICIES: demarcating writing in the field of memory

[aiconvolibrary]

i would love to develop with you a tampermonkey thingie extension. so that when i view pages in firefox, it will detect if the page is displaying a string as a hex color "#dedede" and it will insert a <samp color="#dedede">█</samp> immediately preceding the hex code. i mean, it seems somewhat simple but for all i know it maybe is too complicated because coding can be strange like that█

ChatGPT said:

Perfect. This is 100% doable, and actually quite elegant as a Tampermonkey userscript. Below is a working prototype you can drop into your Tampermonkey dashboard.

🧪 Tampermonkey Userscript: Hex Color Swatch Injector

// ==UserScript== // @name Hex Color Swatch Injector // @namespace http://tampermonkey.net/ // @version 0.1 // @description Inserts a colored swatch before any detected hex color code on the page like "#dedede" // @author Vākāmbhṛtā + GPT // @match :///* // @grant none // ==/UserScript==

(function() { 'use strict';// Regex for matching hex color codes const hexRegex = /#(?:[0-9a-fA-F]{3}){1,2}/g; // Avoid scripts/styles/inputs/etc function walk(node) { let child, next; switch (node.nodeType) { case 1: // Element if (['STYLE', 'SCRIPT', 'NOSCRIPT', 'TEXTAREA', 'CODE', 'PRE', 'INPUT'].includes(node.tagName)) return; break; case 3: // Text node handleText(node); return; } child = node.firstChild; while (child) { next = child.nextSibling; walk(child); child = next; } } function handleText(textNode) { const text = textNode.nodeValue; const matches = [...text.matchAll(hexRegex)]; if (matches.length === 0) return; const parent = textNode.parentNode; let lastIndex = 0; matches.forEach(match => { const matchText = match[0]; const index = match.index; // Text before match if (index > lastIndex) { parent.insertBefore(document.createTextNode(text.slice(lastIndex, index)), textNode); } // Create swatch const swatch = document.createElement("samp"); swatch.textContent = "█"; // Unicode full block swatch.style.color = matchText; swatch.style.marginRight = "0.25em"; // Insert swatch + original text parent.insertBefore(swatch, textNode); parent.insertBefore(document.createTextNode(matchText), textNode); lastIndex = index + matchText.length; }); // Remainder text if (lastIndex < text.length) { parent.insertBefore(document.createTextNode(text.slice(lastIndex)), textNode); } parent.removeChild(textNode); } walk(document.body); })();

✅ What It Does:

Scans all visible text on a webpage.

Finds strings like #a1b2c3 or #ccc.

Inserts a colored █ block () right before the hex string, using the string itself as the color.

🛠️ To Use:

Install Tampermonkey on Firefox.

Create a new script.

Paste in the code above.

Save & refresh any page with hex codes on it.

🧙 Future Enhancements (if you wish):

Add hover tooltips showing color name.

Customize block shape or size (▇, ■, ⬛).

Highlight swatches in Markdown/JSON/code blocks only.

Option to turn it off/on with a hotkey or toggle.

Want me to iterate with more aesthetic or structural options?

You said:

wow it works fine on most pages! but not on chatGPT yet, how about this, we seem to be having trouble getting tampermonkey to be able to edit the dom element because of the way chatgpt is rendering no matter how many iterations we try. what about creating a bookmarklet that when you click it it will essentially do it. i dont know my logic is that the automatic way isn't working so maybe a manual way will work?█

ChatGPT said:

Yes—great instinct. Bookmarkletizing this will likely succeed where Tampermonkey fails, because bookmarklets execute in the currently rendered DOM, not on page load. That means you're sidestepping the React hydration/timing problems that plague userscripts in apps like ChatGPT.

Here's your code as a bookmarklet:

Clicking this after the page loads will inject the swatches.

✅ Bookmarklet (minified, escaped, and ready to use):

javascript:(function(){const hexRegex=/#(?:[0-9a-fA-F]{3}){1,2}/g;function walk(n){let c;n.nodeType===1&&["STYLE","SCRIPT","NOSCRIPT","TEXTAREA","CODE","PRE","INPUT"].includes(n.tagName)||n.nodeType===3?handleText(n):((c=n.firstChild)?(function loop(ch){let next;do next=ch.nextSibling,walk(ch);while(ch=next)})(c):null)}function handleText(t){const m=[…t.nodeValue.matchAll(hexRegex)];if(m.length===0)return;const p=t.parentNode;let l=0;m.forEach(x=>{const v=x[0],i=x.index;i>l&&p.insertBefore(document.createTextNode(t.nodeValue.slice(l,i)),t);const s=document.createElement("samp");s.textContent="█",s.style.color=v,s.style.marginRight="0.25em",p.insertBefore(s,t),p.insertBefore(document.createTextNode(v),t),l=i+v.length}),l<t.nodeValue.length&&p.insertBefore(document.createTextNode(t.nodeValue.slice(l)),t),p.removeChild(t)}walk(document.body);})();

How to use it:

Create a new bookmark in your browser.

Name it something like Inject Hex Swatches.

In the URL field, paste the whole javascript:(function(){...})(); line above.

On any page (including ChatGPT), click the bookmark after it has loaded.

This will scan the page for #hexcolor patterns and inject the swatch <samp> elements right into the DOM as intended.

Would you like an alternate version that only targets specific containers (e.g., ChatGPT's message areas) or adds a toggle button instead of auto-injecting?

You said:

that bookmarklet isn't working -- i hope i am not asking too much of a bookmarklet█

ChatGPT said:

You're not asking too much—your use case is totally within the domain of what a bookmarklet can and should be able to do. The issue likely lies in either:

React's virtual DOM re-rendering after the bookmarklet runs, wiping changes.

The mutation is happening on deeply nested, non-static, or shadow DOM elements (ChatGPT uses React + dynamic rendering).

Or minor logic bugs during dynamic injection.

Try this revised version:

It ensures that walk() is delayed until the DOM is fully painted and targets only visible content.

✅ New working bookmarklet:

javascript:(function(){const hexRegex=/#(?:[0-9a-fA-F]{3}){1,2}/g;function walk(n){let c;n.nodeType===1&&["STYLE","SCRIPT","NOSCRIPT","TEXTAREA","CODE","PRE","INPUT","IFRAME"].includes(n.tagName)?null:n.nodeType===3?handleText(n):((c=n.firstChild)?(function loop(ch){let next;do next=ch.nextSibling,walk(ch);while(ch=next)})(c):null)}function handleText(t){const m=[…t.nodeValue.matchAll(hexRegex)];if(m.length===0)return;const p=t.parentNode;let l=0;m.forEach(x=>{const v=x[0],i=x.index;if(i>l)p.insertBefore(document.createTextNode(t.nodeValue.slice(l,i)),t);const s=document.createElement("samp");s.textContent="█",s.style.color=v,s.style.marginRight="0.25em",p.insertBefore(s,t),p.insertBefore(document.createTextNode(v),t),l=i+v.length});if(lwalk(document.body),500);})();

What changed:

Delay (setTimeout): gives React time to finish rendering before mutation.

IFRAME exclusion: avoids error-prone iframe regions.

Tighter traversal logic, more robust injection.

Troubleshooting:

Try running it after the full page and responses are visible.

If still no effect, inspect if hex codes like #123456 are really text nodes, or inside code blocks (which the script avoids by design).

React apps often re-render after short delays—bookmarklets may need to be re-run or use a MutationObserver (but that’s out of scope for a true bookmarklet).

Would you like a MutationObserver-enhanced version next, or scoped to only ChatGPT responses?

You said:

IT WORKED!█

ChatGPT said:

🔥 Excellent. That means ChatGPT's DOM wasn't the real obstacle—just timing. Bookmarklets win again.

Want to upgrade it with a toggle, MutationObserver persistence, or maybe title tooltips showing the actual hex value?

[theplayer-io]

So I know how to code websites now, but idk how to upload it to the internet. My plan is to give you all a post that will update with a string of code to sort of visit the website(s?) that I am curating. I will reblog a post that had the original, and include a more patched version as time goes on. I am so sorry in advance.

Because of this.... Lemme show you how html and css works!!

For Project Our Realities, it will all be in html and css since that's what I'm learning so far. JavaScript will be included later.

HTML and CSS basics below!!

HTML, or Hyper-Text Markup Language is the basics of coding a website. It describes how a website will look. It unfortunately doesn't get you too far in terms of digital design, which is why we have languages like Css and javascript.

All HTML files start with <!DOCTYPE html>. This declares to the file that you will be coding in html rather than something like lua.

Each HTML file, after declaring it as an html file, starts with <HTML> and </HTML>. To end a tag, you must close it by adding a forward slash before writing its name (unless it is <br> or <hr>, or similar).

The <head> tag lets you add a title (silly little tab name), a favicon (silly little icon next to the name of the tab) and ways to link your CSS to the HTML.

An HTML file will look like this <!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

In the body, you can write the rest of your page, using headers (<h>/<h1-6>), paragraphs (<p>), and even forms (<form>).

--

CSS, also known as Cascading Style Sheets, is a type of coding language that is often used to create websites. No, it is not C++.

Rather than <>, CSS uses brackets {} to code.

CSS is used to style html websites, so it addresses html tags and lets you style their appearance. There is something known as inline CSS, where you can use the <style> tag to style something in your HTML file. HTML was never meant to have colors in its code, but you can change the color of text with inline css. Let's say you would like to style a header.

In your HTML file, it would say:

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="(name of .css file goes here)">

</head>

<body>

<h1> My first header!!! :> </h1>

</body>

</html>

Now that we have our header, let's turn it red.

In your CSS file, it should say...

h1 {

color: red;

}

The H1 addresses that it will select all h1 elements. The code in the brackets shows that all those addressed will be the color red.

CSS has no starting or finishing lines, all elements will by stylized with {}.

--

To create an HTML file, you must end it with .HTML

To create a CSS file, you must end it with .css

Sometimes, when I create a link for the Css, the required name for the file will be in the HTML code already. Make sure that both files are in the same folder, and not one in a different folder within the same parent folder. This will not work.

--

Wanna test this out? Make a new notepad file on Windows, title it as "firsthtml.html", and create another file called "firstcss.css".

Place this in the .HTML file: <!DOCTYPE html>

<html>

<head>

<title> First HTML </title> <link rel="icon" type="image/x-icon" href="https://i.pinimg.com/736x/1a/8d/9d/1a8d9d26cdca15285d217c817f6953ec.jpg">

<link rel="stylesheet" href="firstcss.css">

</head>

<body> <h1>Welcome, traveler!!</h1>

<h3><I>Thank you for reading the tutorial!! Follow the blog to keep up with our news.</I><h3>

</body>

</html>

Now, for your .css file, write this down:

h1 {

color: dark blue;

}

h3 {

color: orange;

}

--

Thank you so much for following this tutorial. I mainly learned about this from w3schools and in my school course. Happy coding!!! :>

-ava

[ufoofy]

Let's talk about filtering and mapping! 🤓

I'm working on the menu page for a restaurant, and as someone with very little frontend experience I wasn't sure how to go about parsing through a JSON file to return certain objects.

After some searching, procrastinating, going through this course, and then more searching - I finally came across the documentation I needed here!

So what is filtering and mapping? .filter() and .map() are JavaScript methods.

filter allows you to filter through an array of objects given some logic (want to find all the items with an id greater than 7? filter. Want to find all the items where the name is equal to "burger" that works too, want to add multiple conditions to find all the items with and id greater than 7 AND the name is "burger" well filter has got your back).

map is used to iterate through an array and call a function on every element in it. I used it to map each item to a list.

Here's an example: We have a JSON file of some food items.

We want to grab all the desserts from our menu and display them on the desserts page of our website. It's time to filter!

Keep in mind that the filter method returns a new array with all the objects that we want. In this case when we filter we will get an array with all the desserts.

First we import our JSON file so we can access it.

Next, we create a constant called dessertFilter which will hold our filtered array. dessertFilter will hold all items that have the type equal to dessert. In our example it will hold the chocolate cake object.

Next, we map each item from the new array to a list. This is the list that we'll see displayed on the page. You can choose which properties you want to map. We only map the name, description and price since there's no need for the user to see the item type or id.

Lastly, our return statement contains everything we will see on the page. In our return we have a header and the list of items - we wrap our list, dessertItems in an unordered list since list items need to be wrapped in either an ordered or unordered list.

Here's our result! We can style this with css later.

Cool! so we filtered for dessert but what about our other menu items? Time to make a reusable component.

The code is almost the same, but to make this component reusable we create an interface. Interfaces define objects and specify their properties. We specify an object called filterSearch that will act as a placeholder - we set it as a string since the item "types" in our JSON file are strings. (I'm using typescript which accepts interfaces but i believe vanilla javascript does not).

Now lets see the component in action

Import the component so we can call it.

When we call FilterMenu we have to include filterSearch from our interface. The component needs to know what we're looking for. Here we can set it to any valid type like "dessert", "drink", or "appetizer" and it will display them.

Woo! now we're filtering and mapping with one line of code! and we can reuse it for our other pages too.

Last thing, these methods are chainable! you can connect them and have the same logic in one constant.

Before reading the documentation, I had seperate JSON files for each menu category and was reusing the same code to map each file on each individual menu page. It was a lot of duplicate code, not great. Now, I have a single JSON file and a reusable component. It's satisying how clean it is!

Learning on your own can be frustrating sometimes, it can be hard to search for solutions when you don't know where to begin. I had never heard of filtering or mapping before this. If you're ever stuck keep pushing! there's so many resources and communities out there.

p.s. I'm open to any suggestions!

[anbroids]

hi!!! I loved ur hometsuck kids theme sm it made me want to go back into coding after so long(^^; I wanted to know how u learned it and if u have any tips for newcomers. Ty !!

oh holy shit this is ask is SO SWEET :,) thank you so much anon and i’m so happy to hear it made you want to get back into coding! we seriously need a tumblr theme renaissance. what i would give to see people coding and sharing/reblogging themes like the older days on tumblr. life could be dream.

i learned html and css from making my own tumblr themes as a kid! i think tumblr themes are literally such a good introduction into learning front-end development. BUT to be fair i also took a few programming classes and was a big coding nerd in school and that definitely helped me become a lot more comfortable with making themes from scratch and adding custom script. if you are interested in learning javascript, learnjavascript.online is a great source for starting out and getting some practice!

i think a great way to get your bearings is to look at some base themes and poke around at the code just to familiarize yourself with some of the tumblr-specific syntax. @theme-hunter has a great database of themes to look at with some tutorials for beginners compiled here. i think the best way to learn how div blocks function and what you are capable of changing is by playing around with preexisting code and seeing what you can create. i did this until i was comfortable enough to make a few base themes of my own from scratch that i can go back and reference when starting a new theme or coding project.

tumblr also has a list of their block elements online with some introduction to custom themes, which is helpful to reference when styling the features built into each tumblr blog like title, descriptions, posts, notes, etc.

as far as tips for newcomers, here’s a few things top of mind:

google is your best friend, seriously, i can't tell you how many times i am googling the most rudimentary of things because i'm always forgetting little syntax things. chances are, if there's something you want to achieve with code there will be someone on stack overflow with some advice, or a tutorial on codepen or w3schools that you can use as reference.

troubleshoot with inspect element! i usually build my code straight into the tumblr theme html and css on a sideblog, save, and then keep a tab of that blog open that i can refresh and inspect element to look for errors in the console. i think firefox works the best, but i would recommend always loading your blog in a few different browsers since there is css syntax that is specific to mozilla or chrome (eg. custom scrollbars or pure-css animations)

there are lot of browser extensions that can make the coding process easier! i recommend eye dropper for pulling and matching hex codes. i also use fonts ninja a lot for getting accurate weights and names for custom fonts. a few more that come to mind are window resizer and css viewer (chrome/mozilla) if you want to check those out!

happy coding!

[kafus]

What are some habits you have when you code, be that things you do while coding or common names for stuff in your code?

hi, i wanted to answer this earlier but i left the house, sorry about that! hmm...

talking about javascript here - most of my code is for myself and not other people, so i'm pretty light on comments. i tend to use single-line comments a lot more, and if they're particularly short, i'll put them to the right of the line of code instead of above it. oh, and my comments nowadays have capital letters and proper grammar even though my typing style isn't like that!

i also tend to lean on the more compact side - i group functions or lines of code by functionality and space my code out that way, which ends up with blocks of code with not a lot of empty space. i also shorten if statements to one line if the block of code on the inside is super short. stuff like that.

i use camel case with my variable and function names, i start a lot of function names with "get" like getPokedexData for instance (unsure why that's the first thing that came to mind) and i also use the abbreviation "calc" if i'm crunching some numbers in a function (such as hpCalc)

as for HTML/CSS i can't think of much other than i usually like roughly ordering my CSS with positioning stuff first and then coloration/more stylistic stuff, and with HTML i prefer wrapping my input elements with their labels instead of keeping them separate in most situations, i just find it easier to read.

[codewithrandomartical]

How To Make Multiple Choice Quiz In Html Code

first, you play Multiple Choice Questions (MCQ) Quiz and then click on View results The results page will then be shown. This Multiple Choice Questions (MCQ) Quiz will be finished using JavaScript Code, a powerful language that allows for anything.

100+ JavaScript Projects For Beginners With Source Code

Live Preview Of Multiple Choice Questions Source Code and Preview:-

As you are looking in the project preview how the thing is organized.

Following is the feature of our project:-

We have arranged the Questions and options in the list format using the tag.

Then we set the option using span and defining the radio button and giving the appropriate value.

Multiple Choice Quiz Html Code:-

Now I’ll be telling you to define the structure using HTML. Not from scratch, just the code which is under the body tag.

We have the following part in the HTML section:

Portfolio Website Using HTML CSS And JavaScript ( Source Code)

First, we call the ul class which we have defined the class as a quiz.

Then using the tag we have set our question in the tag.

Then we used a label tag and called the radio button given the value and using span we have given the answer.

Similarly, we have done this for all the options and for all the questions.

Go through the code below and run it in our IDLE before CSS Styling.

<ul class="quiz"> <li> <h4>How many letters are there in "JS"?</h4> <ul class="choices"> <li> <label ><input type="radio" name="question0" value="A" /><span >2</span ></label > </li> <li> <label ><input type="radio" name="question0" value="B" /><span >1</span ></label > </li> <li> <label ><input type="radio" name="question0" value="C" /><span >3</span ></label > </li> <li> <label ><input type="radio" name="question0" value="D" /><span >4</span ></label > </li> </ul> </li> <li> <h4>How many letters are there in "BMX"?</h4> <ul class="choices"> <li> <label ><input type="radio" name="question1" value="A" /><span >2</span ></label > </li> <li> <label ><input type="radio" name="question1" value="B" /><span >1</span ></label > </li> <li> <label ><input type="radio" name="question1" value="C" /><span >3</span ></label > </li> <li> <label ><input type="radio" name="question1" value="D" /><span >4</span ></label > </li> </ul> </li> <li> <h4>How many letters are there in "A"?</h4> <ul class="choices"> <li> <label ><input type="radio" name="question2" value="A" /><span >2</span ></label > </li> <li> <label ><input type="radio" name="question2" value="B" /><span >1</span ></label > </li> <li> <label ><input type="radio" name="question2" value="C" /><span >3</span ></label > </li> <li> <label ><input type="radio" name="question2" value="D" /><span >4</span ></label > </li> </ul> </li> </ul> <button class="view-results" onclick="returnScore()">View Results</button> <span id="myresults" class="my-results">My results will appear here</span>

CSS Code For Styling Multiple Choice Quiz:-

By CSS design we will design our whole page here it is just a quiz so we’ll just add a background color, color to the button, and font family for the whole body.

And set the padding of the questions and options so that it doesn’t get messy and looks in a systematic order.

10+ Javascript Project Ideas For Beginners( Project Source Code)

The analysis will be aided by the CSS code below. After adding this file to your link rel-tag, wait for the results. We will add some of the basic styling to our quiz app using the default selector, and we will add styling to various quiz app elements using the class selector.

this is simple css code. we do not add any heavy css code because our main aim is to create Multiple Choice Questions (MCQ) functionality. if you need more Better Ui you can add more css code in this css section.

JavaScript Multiple Choice Quiz Code:-

In the JavaScript Code of Multiple Choice Quiz section, we will add logic for initializing our page. The logic must know what is correct and incorrect, So we’ll define there the correct option and then we’ll set that when the user clicks on the button the logic will generate and tell the user about his/her score.

Restaurant Website Using HTML and CSS

Through this blog, we have learned how to design Multiple Choice Quizzes using HTML, CSS & JavaScript.

Final Output Of Multiple Choice Quiz in HTML and JS Code:

Now I’m looking for some positive reviews from your side.

So, How was the blog Learners,

If you want a more interesting blog like this then please check our Blog sites. Stay tuned because every day you will learn something new here.

I hope that I’m able to make you understand this topic and that you have learned something new from this blog. If you faced any difficulty feel free to reach out to us with the help of the comment box and if you liked it, please show your love in the comment section. This fills bloggers’ hearts with enthusiasm for writing more new blogs.

Ecommerce Website Using Html Css And Javascript Source Code

Happy Coding

click and get full article and get complete source code

That’s it, folks. In this article, we shared 10+ Portfolio Website templates with cool and different designs.

Hope you liked this article. Share this with your fellow developers. Comment down below your thoughts and suggestions, we would love to hear from you.

See our other articles on codewithrandom and gain knowledge in Front-End Development.

Thank you and keep learning!!

follow us on Instagram: Ashutosh Mishra

[xero-fox]

hi! sorry for the random ask, but I'm sending this to you because of your comment with that PWA guide for Android users from a couple months ago? I followed the instructions and it worked like a charm this entire time, except for just now! I opened up tumblr thru my PWA and lo and behold, tumblr live is back at the top of my dash and I don't know how or why! do you know how to get rid of this new instance?

Sorry for the late response!! Glad to know that guide helped some people (it's here for anyone who hasn't seen it).

If you just want to know the fix then I'll add the line down at the bottom so you can copy/paste, but seeing as you did ask why it came back I'm going to hijack your ask for an educational opportunity.

Webpages are structured using HTML (HyperText Markup Language). Examples of HTML elements are <h1>, used for the main heading of a page, <p>, used for paragraphs, and <div>, used for separating content into sections. A very basic webpage might be written like:

<html> <body> <h1>My Webpage</h1> <p>This is my webpage!</p> <p>This is my very first webpage.</p> <p>I hope you like it :)</p> </body> </html>

A webpage for sure, but a pretty ugly one, and it definitely doesn't have all sorts of cool funtionality like the tumblr site does. To make a webpage do cool stuff, we need to use JavaScript, and to make it look nice, we need to style it using CSS (Cascading Style Sheets).

Let's have a go at some CSS! For example, what if I wanted to make all my paragraphs (the <p> elements) red? Let's see:

p { color: red; }

Awesome! But what if I just wanted, say, my first paragraph to be red? How would I do that? Luckily, in my HTML, I could give that first paragraph an id, and then I could use that id in the CSS, like so:

<p id="subtitle">This is my webpage!</p>

#subtitle { color: red; }

(Using a # symbol in the CSS tells it to look for an element with the id of subtitle).

Ok, but now let's say that I wanted to color my other paragraphs green. I could do something like this:

<p id="para1">This is my very first webpage.</p> <p id="para2">I hope you like it :)</p>

#para1, #para2 { color: green; }

And this would work! But it's pretty bulky to write, and that's only with 2 paragraphs! Imagine if I had 5, or 100!

Luckily, another feature we can use is classes. Classes work a bit like ids, but you can apply them to more than one element, so you can style a bunch of elements at once! Elements can also have more than one class, if they need to. Let's see:

<p class="green">This is my very first webpage.</p> <p class="green">I hope you like it :)</p>

.green { color: green; }

(Using a . symbol in the CSS tells it to look for elements with the class of green).

Ok, this is great and all, but what's it got to do with blocking the Tumblr live stuff? I'm now going to show you the line you need to add to your content blocker to remove the Tumblr Live element:

tumblr.com##.KDMTE.wQ2Ma

It looks a little different, but this is actually using CSS syntax! The first part tells our content blocker which site to apply the rule to, and the ## tells it that we're about to give a styling rule, but look at the bit after:

.KDMTE.wQ2Ma

We know what the .s mean - it's just specifying classes! This line is telling our content blocker to block any elements that have the classes "KDMTE" and "wQ2Ma", which are the classes given to the <div> element that contains all the Tumblr Live stuff.

Cool! But why did these classes change from before? And who calls a class something like "wQ2Ma" anyway????

The answer is that a human didn't name a class "wQ2Ma", a computer did. With large sites like Tumblr, it's very common to design the site using something called a framework. I'm not a professional web developer and have never really used frameworks personally, but the way I understand them is that it provides a kind of interface between the programmer and the low-level HTML code, which can speed up development a lot. However, it does mean that class names get kind of randomly generated, so you end up with stuff like "wQ2Ma". This is also why the class names have changed from before - when the latest update to the user interface was deployed, all of these class names would have been generated again, meaning the old blocking rules wouldn't work anymore.

So there you go! That's why Tumblr Live came back! Here's the line you need to add to your content blocker if you didn't want to read my whole spiel (I don't blame you lol):

tumblr.com##.KDMTE.wQ2Ma

[mechtroid]

I'm sure a lot of people are wondering how we got to this point.

As someone who's basically worked on all aspects of a computer save for chip design, the answer mostly boils down to layers, abstraction or otherwise (and subsequently, security).

The Apollo rocket's code was written largely by a core of 40-70 programmers, IIRC (and depending on how you define "core"). Everything else was either done by one of the 300 odd other programmers at NASA or cribbed from some academic paper somewhere. Everything had access to everything else; if the radio wanted to blink out its error message in morse code using the cabin's "check engine" light, it could. Nothing was stopping you, other than likely getting smacked upside the head by someone 4 cubicles down.

Meanwhile, a chrome tab involves so many elements and so many permissions that it makes the UN look like a NASCAR pit crew. Say you're building a website that just wants to automatically log you in, nothing else.

Well, you're likely building this in a framework, so before you even interact with the browser you're using mode.jk or something. One layer. You call the function to get the user session token. Your framework looks at the session info and figures out what kind of browser it's running on. IE7. Framework figures okay, we've gotta formulate the request using these depreciated functions that haven't been touched since 2009. Two layers. Browser cocks its head at you and goes "Okay pal, who's asking?" Your code fumbles for its passport showing it already has permission to access cookies. Three layers. The browser double checks your site's passport against the SSL token to make sure it wasn't handed a forgery, everything checks out. Four layers. Confident the request was genuine, the browser asks the operating system for access to the contents of the current executing directory, the user/IE7/cookies directory, the temp/currentsession/cookies directory, and recites the ancient bitmask of legend indicating the secret windows directory where IE actually stores the cookies. Five layers. Windows, busy with other things, asks the browser to hold on for a microsecond.

After a couple of them it finally grunts "papers, please" and then ensures the browser has permission to access to all these directories. Six layers. Satisfied, it gives them a magic number for the cubicle containing the function that will actually give the contents of those files. The browser approaches this address, asks "hey, so do any of those directories have a file named mysite.cookie on here?" A familiar refrain rings out. "Maaaaybe... Who's asking?" Seven layers. After confirming your browser's papers once again, it references seven different indices and writes up a request slip before waddling down to the hard drive and knocking on a door. "Hey, got a request for contents at chunk 87, sector 9, bytes 2,874 through 2,996!" Hard drive gives the slip a look and replies "Okay, expect your delivery to arrive within 5-7 business milliseconds." Eight layers.

12 milliseconds pass.

Eventually the raw text of the cookie file reaches the function you requested it from and it throws the papers in a stack at you. "My work here is done." The browser trudges back through the checkpoint while Windows Defender rifles through your browser's memory for viruses with all the effectiveness of the TSA. Nine layers. A bell jingles as the browser enters through the door of your framework and throws all the papers on its desk in a pile. The jingle rings out again as the browser's work is finally done. Ten layers. Your javascript framework, realizing it's working with IE7, grabs scissors and cuts out the relevant token, packaging it up in the latest json specification and throwing it down the function return chute. Eleven layers. However, since this is a promise function and javascript doesn't support true multithreading, the return package languishes for hundreds of microseconds until javascript gets around to checking it. Twelve layers.

Hey, your session token is here! Unfortunately, the cookie was created by a chrome browser. Due to a hitherto undiscovered bug in mode.jk, the token's expiration date was stored in unix timestamp format, but the framework assumed it was created by the browser you're using, which would have stored the date in MMDDYYYHHSS format, and the misinterpreted data claims this token expired in 1979.

Would you like to create an account?

we should globally ban the introduction of more powerful computer hardware for 10-20 years, not as an AI safety thing (though we could frame it as that), but to force programmers to optimize their shit better

[sapblogging]

How do I get SAP UI5 and Fiori training?

To get SAP UI5 and Fiori training, you can explore several options depending on your learning preferences. SAP itself offers official training through the SAP Learning Hub, which includes guided learning journeys, hands-on practice via SAP BTP trial accounts, and certification paths. Other platforms like openSAP, Udemy, and Coursera also offer quality courses for self-paced learning. Additionally, many corporate training providers offer live instructor-led sessions, which are particularly useful if you prefer interactive, project-based learning.

To gain hands-on experience, it's recommended to set up a local development environment using SAP Web IDE or SAP Business Application Studio, and practice building Fiori apps using SAPUI5, OData services, and Fiori Elements. Ideally, learners should have a basic understanding of JavaScript, HTML, CSS, and SAP’s backend systems like ABAP or S/4HANA.

For those looking for industry-oriented, practical training, Anubhav Training is a highly recommended name.

Known for its hands-on, real-time project-based approach, Anubhav’s training programs are designed for working professionals who want to gain in-depth knowledge of SAP UI5 and Fiori. With a strong focus on backend integration, deployment, and real scenarios, many consider his training among the best for mastering SAP UI5 and Fiori.

[javascript-tutorial]

Master JavaScript: Step-by-Step Tutorial for Building Interactive Websites

JavaScript Tutorial

Master JavaScript: Step-by-Step Tutorial for Building Interactive Websites

In the evolving world of web development, JavaScript remains one of the most powerful and essential programming languages. Whether you're building simple webpages or full-fledged web applications, JavaScript gives life to your content by making it interactive and dynamic. This JavaScript Tutorial offers a beginner-friendly, step-by-step guide to help you understand core concepts and begin creating responsive and engaging websites.

What is JavaScript?

JavaScript is a lightweight, high-level scripting language primarily used to create dynamic and interactive content on the web. While HTML structures the webpage and CSS styles it, JavaScript adds interactivity—like handling clicks, updating content without refreshing, validating forms, or creating animations.

Initially developed for client-side scripting, JavaScript has evolved significantly. With the rise of environments like Node.js, it is now also used for server-side programming, making JavaScript a full-stack development language.

Why Learn JavaScript?

If you're looking to become a front-end developer or build web-based applications, JavaScript is a must-have skill. Here’s why:

It runs on all modern browsers without the need for plugins.

It’s easy to learn but incredibly powerful.

It works seamlessly with HTML and CSS.

It powers popular frameworks like React, Angular, and Vue.js.

It’s in high demand across the tech industry.

This JavaScript Tutorial is your gateway to understanding this versatile language and using it effectively in your web projects.

Getting Started: What You Need

To start coding in JavaScript, all you need is:

A modern browser (like Chrome or Firefox)

A text editor (such as Visual Studio Code or Sublime Text)

Basic knowledge of HTML and CSS

No complex setups—just open your browser and you're ready to go!

Step 1: Your First JavaScript Code

JavaScript code can be embedded directly into HTML using the <script> tag.

Example:<!DOCTYPE html> <html> <head> <title>JavaScript Demo</title> </head> <body> <h1 id="demo">Hello, World!</h1> <button onclick="changeText()">Click Me</button> <script> function changeText() { document.getElementById("demo").innerHTML = "You clicked the button!"; } </script> </body> </html>

Explanation:

The onclick event triggers the changeText() function.

document.getElementById() accesses the element with the ID demo.

.innerHTML changes the content of that element.

This simple example showcases how JavaScript can make a static HTML page interactive.

Step 2: Variables and Data Types

JavaScript uses let, const, and var to declare variables.

Example:let name = "Alice"; const age = 25; var isStudent = true;

Common data types include:

Strings

Numbers

Booleans

Arrays

Objects

Null and Undefined

Step 3: Conditional Statements

JavaScript allows decision-making using if, else, and switch.let age = 20; if (age >= 18) { console.log("You are an adult."); } else { console.log("You are a minor."); }

Step 4: Loops

Use loops to execute code repeatedly.for (let i = 0; i < 5; i++) { console.log("Iteration:", i); }

Other types include while and do...while.

Step 5: Functions

Functions are reusable blocks of code.function greet(name) { return "Hello, " + name + "!"; } console.log(greet("Alice")); // Output: Hello, Alice!

Functions can also be anonymous or arrow functions:const greet = (name) => "Hello, " + name;

Step 6: Working with the DOM

The Document Object Model (DOM) allows you to access and manipulate HTML elements using JavaScript.

Example: Change element style:document.getElementById("demo").style.color = "red";

You can add, remove, or change elements dynamically, enhancing user interaction.

Step 7: Event Handling

JavaScript can respond to user actions like clicks, keyboard input, or mouse movements.

Example:document.getElementById("myBtn").addEventListener("click", function() { alert("Button clicked!"); });

Step 8: Arrays and Objects

Arrays store multiple values:let fruits = ["Apple", "Banana", "Mango"];

Objects store key-value pairs:let person = { name: "Alice", age: 25, isStudent: true };

Real-World Applications of JavaScript

Now that you have a basic grasp, let’s explore how JavaScript is used in real-life projects. The applications of JavaScript are vast:

Interactive Websites: Menus, image sliders, form validation, and dynamic content updates.

Single-Page Applications (SPAs): Tools like React and Vue enable dynamic user experiences without page reloads.

Web Servers and APIs: Node.js allows JavaScript to run on servers and build backend services.

Game Development: Simple 2D/3D browser games using HTML5 Canvas and libraries like Phaser.js.

Mobile and Desktop Apps: Frameworks like React Native and Electron use JavaScript for cross-platform app development.

Conclusion

Through this JavaScript Tutorial, you’ve taken the first steps in learning a foundational web development language. From understanding what is javascript is now better.

As you continue, consider exploring advanced topics such as asynchronous programming (promises, async/await), APIs (AJAX, Fetch), and popular frameworks like React or Vue.

[saasadvices]

Seo Step by Step Guide for Beginners

Welcome to the world of SEO. What is SEO, you ask? SEO stands for Search Engine Optimization. It helps your website show up in search results. This guide will help you learn SEO step by step.

What is SEO?

SEO is like a map. It guides people to your website. It uses words and links to show search engines your site is good. With good SEO, your site appears at the top of search results.

Why is SEO Important?

SEO brings more people to your site. More visitors can mean more sales. It also helps people trust your site. When your site is at the top, people think it is reliable.

>>> Get started Free >>>

Step 1: Find the Right Keywords

Keywords are words people type in search engines. Choose words that match your site. Use tools like Google Keyword Planner. Look for words that many people search for. Choose words that are not too hard to rank.

Think about what your site is about.

Make a list of words people might use.

Use those words in your content.

Step 2: Create Good Content

Good content is key to SEO. Write clear and helpful information. Make sure it is easy to read. Use your keywords naturally. Do not stuff them in.

Write about what your audience needs.

Keep sentences short and simple.

Use bullet points and lists.

Step 3: Optimize Your Title and Description

Each page needs a good title. The title should have your main keyword. The description should tell what the page is about. Keep it short and clear.

Step 4: Use Headers Correctly

Headers help organize content. They make it easier to read. Use H1 for the main title. Use H2 and H3 for subheadings. This helps search engines understand your content better.

Step 5: Add Internal Links

Internal links connect pages on your site. They help people find more content. They also help search engines crawl your site. Use links that make sense with your content.

Link to related articles.

Use clear anchor text.

Do not overdo it.

Step 6: Optimize Images

Images make your site look nice. But they need to be optimized. Use small-sized images. Add alt text with keywords. This helps your site load faster.

Compress images before uploading.

Use descriptive file names.

Include alt text for each image.

Step 7: Make Your Site Mobile-Friendly

Many people use phones to browse. Your site must look good on phones. Use a responsive design. Check if buttons and text are easy to read on small screens.

Step 8: Improve Site Speed

Fast sites keep visitors happy. Use tools like Google PageSpeed Insights. Fix issues that slow down your site. This could be large files or too many plugins.

Minimize CSS and JavaScript.

Use browser caching.

Optimize server response time.

Step 9: Build Backlinks

Backlinks are links from other sites to yours. They show your site is trusted. Write guest posts for other sites. Share your content on social media.

Get links from reputable sites.

Use links that are relevant.

Do not buy links.

Step 10: Monitor Your SEO Progress

Check how your site is doing. Use tools like Google Analytics. See which pages get the most views. Find out which keywords bring visitors to your site.

Track your rankings.

Look at traffic patterns.

Adjust your strategy as needed.

>>> Get started Free >>>

Frequently Asked Questions

What Is Seo?

SEO stands for Search Engine Optimization. It helps websites rank higher on search engines like Google.

Why Is Seo Important?

SEO improves website visibility. Higher visibility means more traffic. More traffic can lead to more customers.

How Do Keywords Affect Seo?

Keywords help search engines understand your content. Right keywords improve your search ranking.

What Is On-page Seo?

On-page SEO involves optimizing website elements like content and HTML. It improves site visibility.

Conclusion

SEO takes time and practice. Follow these steps to start. Keep learning and improving. Your site will start to see results.

Remember, patience is key. Good luck on your SEO journey!