Write a website using pure JavaScript.

# javascript

# Web Site Writing Basics

Code The web site display page is written in javascript dom and decorated with css without using html.

Of course, building a website structure without using HTML directly, but using JavaScript DOM to create all the elements and decorate them with CSS can be done as follows:

Since you asked for code to create web pages without using HTML (meaning .html files with regular structure tags), I would assume that you have JavaScript and CSS files and will use JavaScript to create the entire infrastructure and link them to CSS.

Limitations: Usually, web browsers need an HTML file as a starting point to load JavaScript scripts and CSS stylesheets. However, the code below shows how JavaScript creates everything from the < body > tag down. You will need to run this script in a very basic HTML file (perhaps only the < script > tag) to make it work.

💻 JavaScript (DOM Manipulation)

Save this code as a file named script.js.

JavaScript

/ / Product information we will show

Const products = [

{id: 1, name: "classic t-shirt," price: 350, image: "tshirt.jpg"},

{id: 2, name: "Denim Jeans," price: 1200, image: "jeans .jpg"},

{id: 3, name: "sneaker," price: 890, image: "sneaker.jpg"},

{id: 4, name: "shoulder bag," price: 550, image: "bag.jpg"}

];

/ / Main function to create web pages

CreateProductPage () function {

Const body = document body;

/ / 1.Create a header (Header)

const header = document.createElements ('header');

Header.innerHTML = '< h1 > New Arrival Product < / h1 >';

Body. AppendChild (header);

/ / 2.Create the main container for the goods

const productContainer = document.createElements ('div');

productContainer.id = 'product-list';

Body .appendChild (productContainer);

/ / 3. Loop to create each Product Card

Products.forEach (product = > {

/ / Create a core element for each item.

const card = document.createElements ('div');

card .className = 'product-card';

card .setAttribute ('data-product-id', product.id);

/ / 3.1 Create a picture

const img = document.createElements ('img');

img.src = product.image; / / Suppose there is an image named after this in the same folder.

img.alt =;

Child card (img);

/ / 3.2 Create a Product Name

const name = document.createElements ('h2');

name.textContent =;

Child appendage card (name);

/ / 3.3 Create a price

const price = document.createElements ('p');

Price.className = 'price';

Price.textContent = '${product.price} baht';

Child appendage card (price);

/ / 3.4 Create an add button to the basket

const button = document.createElements ('button');

button.textContent = 'Add to the basket';

button.addEventListener ('click', () = > {

alert ('Add ${product.name} to the basket!');

});

Child card (button);

/ / Add the goods card to the main container.

ProductContainer. AppendChild (card);

});

/ / 4.Create a footer

const footer = document.createElements ('footer');

Footer.innerHTML = '< p > & copy; 2025 online store < / p >';

Body. AppendChild (footer);

}

/ / Call the function when the DOM load is complete.

document.addEventListener ('DOMContentLoaded', createProductPage);

/ / (for demonstration) Create a CSS link using DOM (usually in HTML).

const head = document.head;

const link = document.createElements ('link');

link.rel = 'stylesheet';

link.href = 'style.css'; / / Weld to CSS file

Head. AppendChild (link);

🎨 CSS (Styling)

Save this code as a file named style.css.

CSS

/ * Generally formatted * /

Body {

font-family: 'Arial', sans-serif;

Margins: 0;

Padding: 0;

Background-color:# f4f4f9;

Color:# 333;

Line-height: 1.6;

}

/ * Header * /

Header {

Background-color:# 007bff;

Color: white;

Padding: 20px 0;

Text-align: center;

box-shadow: 0 2px 4px rgba (0, 0, 0, 0.1);

}

Header h1 {

Margins: 0;

Font-size: 2.5em;

}

/ * Cargo item container * /

# product -list {

Display: flex; / * Flexible Cargo Arrangement * /

flex-wrap: wrap; / * New line up * /

Justify-content: center; / * arranged in the middle * /

padding: 20px;

Gap: 30px; / * Spacing between goods cards * /

}

/ * Each item card * /

.product-card {

Background-color: white;

border: 1x solid # ddd;

Border-radius: 8px;

box-shadow: 0 4px 8px rgba (0, 0, 0, 0.1);

padding: 15px;

width: 250px; / * Define fixed width * /

Text-align: center;

Transition: transform 0.2s;

}

.product-card: hover {

Transform: translateY (-5xpx); / * Slide up slightly when pointing * /

box-shadow: 0 6px 12px rgba (0, 0, 0, 0.15);

}

/ * Product picture * /

.product-card img {

width: 100%;

Height: auto;

Border-radius: 4px;

Margin-bottom: 10px;

}

/ * Product name * /

.product-card h2 {

Font-size: 1.4em;

Margins: 10px 0;

color: # 007bff;

}

/ * Price * /

.product-card .price {

Font-size: 1.2em;

Color: # e67e22; / * Orange for price * /

Font-weight: Bolt;

Margin-bottom: 15px;

}

/ * button * /

.product-card butt