JavaScript is a programming language used to make websites interactive, dynamic, and smart that's reason many web-developers and seo expert says JavaScript is the brain of website.
Example :- alert("Hello! This is JavaScript.");
Because 90% of all websites use it. Without JavaScript, websites would be static and boring.
JavaScript (js) can do various jobs in website like
- Makes buttons work when you click them
- Shows pop-ups and alerts
- Changes text, images, or colors on a webpage
- Validates forms (like checking email format)
- Creates animations, sliders, games, etc.
- Powers modern web apps like YouTube, Facebook, Instagram, Gmail
Here I make using simple page using html, css and JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Single Page with JavaScript</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
h1 {
color: #333;
}
#box {
width: 200px;
height: 200px;
background-color: skyblue;
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
border-radius: 10px;
transition: 0.3s;
}
button {
padding: 10px 20px;
font-size: 16px;
border: none;
background-color: #008cff;
color: white;
border-radius: 6px;
cursor: pointer;
}
button:hover {
background-color: #005bbb;
}
</style>
</head>
<body>
<h1>JavaScript Single Page Example</h1>
<p>Click the button to change the color of the box:</p>
<button onclick="changeColor()">Change Color</button>
<div id="box">Box</div>
<script>
function changeColor() {
let box = document.getElementById("box");
// Generate random color
let color = "#" + Math.floor(Math.random()*16777215).toString(16);
box.style.backgroundColor = color;
}
</script>
</body>
</html>
Copy is code and run in your compiler , if you don't have any type of pc and laptop then I recommend sololean for best compiler in android in 2025.
Here we created full fledged food delivery website using HTML, CSS and JavaScript.
Html Portion *
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Food Delivery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Food Delivery</h1>
<nav>
<a href="index.html">Home</a>
<a href="menu.html">Menu</a>
<a href="cart.html">Cart</a>
</nav>
</header>
<section class="hero">
<h2>Fast Delivery • Fresh Food</h2>
<p>Your favourite meals delivered to your doorstep.</p>
<a href="menu.html" class="btn">Order Now</a>
</section>
</body>
</html>
CSS Portion *
body {
font-family: Arial, sans-serif;
margin: 0;
background: #fafafa;
}
header {
padding: 15px;
background: #ff4d4d;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
}
nav a {
text-decoration: none;
color: white;
margin: 0 10px;
}
.hero {
padding: 60px;
background: url('https://source.unsplash.com/1600x800/?food') center/cover;
color: white;
text-align: center;
}
.btn {
display: inline-block;
padding: 10px 20px;
background: #ff4d4d;
color: white;
text-decoration: none;
border-radius: 5px;
}
.menu-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
.card {
background: white;
padding: 15px;
border-radius: 10px;
box-shadow: 0 2px 8px #ddd;
text-align: center;
}
.card img {
width: 100%;
border-radius: 10px;
}
.cart-container {
padding: 20px;
}
.c
heckout-box {
text-align: center;
margin-top: 50px;
}
JavaScript Portion *
const menuItems = [
{ id: 1, name: "Pizza Margherita", price: 299, img: "https://source.unsplash.com/400x300/?pizza" },
{ id: 2, name: "Burger King Meal", price: 199, img: "https://source.unsplash.com/400x300/?burger" },
{ id: 3, name: "Pasta Alfredo", price: 249, img: "https://source.unsplash.com/400x300/?pasta" },
{ id: 4, name: "Chicken Biryani", price: 299, img: "https://source.unsplash.com/400x300/?biryani" }
];
function loadMenu() {
const menu = document.getElementById("menu");
if (!menu) return;
menu.innerHTML = menuItems.map(item => `
<div class="card">
<img src="${item.img}" alt="">
<h3>${item.name}</h3>
<p>₹${item.price}</p>
<button class="btn" onclick="addToCart(${item.id})">Add to Cart</button>
</div>
`).join("");
}
function addToCart(id) {
let cart = JSON.parse(localStorage.getItem("cart")) || [];
const item = menuItems.find(i => i.id === id);
cart.push(item);
localStorage.setItem("cart", JSON.stringify(cart));
alert("Added to Cart");
}
function loadCart() {
const cartTable = document.getElementById("cartTable");
if (!cartTable) return;
let cart = JSON.parse(localStorage.getItem("cart")) || [];
cartTable.innerHTML = `
<tr><th>Item</th><th>Price</th></tr>
${cart.map(item => `
<tr>
<td>${item.name}</td>
<td>₹${item.price}</td>
</tr>
`).join("")}
`;
}
function checkout() {
window.location.href = "checkout.html";
}
//
Run functions automatically
loadMenu();
loadCart();
Difference between javascript and jQuery with example
Many freshers believes that javascript and jQuery same but in reality both are different, yes it is true that jQuery is the library of javascript in simple language javascript is long code language while jQuery is short code language
Example
Hello world in JavaScript
<script>
document.write("Hello World");
</script>
Or
Hello world in jQuery
<script>
$("#text").text("Hello World");
</script>
.jpeg)
