Gallery App with JS

Developer
Matt Brody
Size
2,453 Kb
Views
4,048
  1. Gallery App with JS Previews
  2. Gallery App with JS HTML Codes
  3. Gallery App with JS CSS Codes
  4. Gallery App with JS JS Codes

How do I make an gallery app with js?

What is a gallery app with js? How do you make a gallery app with js? This script and codes were developed by Matt Brody on 15 January 2023, Sunday.

Gallery App with JS Previews
IQ Test

Gallery App with JS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Gallery App with JS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head> <title>T-Shirt Gallery</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body> <div class="container"> <h1 class="headingTitle">T-Shirt Gallery</h1> <div id="shirts"></div> </div>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

Gallery App with JS - Script Codes CSS Codes

body { text-align: center;
}
.headingTitle { font-size: 70px;
}
.tshirt { margin: 20px 0;
}

Gallery App with JS - Script Codes JS Codes

function Shirt(name, size, color, stock, image) { this.name = name; this.size = size; this.color = color; this.stock = stock; this.image = image;
}
var shirtArray = []
var whitetee = new Shirt('White Tee', "medium", "white", 150, "http://codifyacademy.com/tshirt/img/whitetee.png")
var blacktee = new Shirt('Black Tee', "medium", "Black", 50, "http://codifyacademy.com/tshirt/img/blacktee.png")
var redtee = new Shirt('Red Tee', "large", "red", 20, "http://codifyacademy.com/tshirt/img/redtee.png")
var bluetee = new Shirt('Blue Tee', "small", "blue", 70, "http://codifyacademy.com/tshirt/img/bluetee.png")
var greentee = new Shirt('Green Tee', "large", "green", 55, "http://codifyacademy.com/tshirt/img/greentee.png")
var yellowtee = new Shirt('Yellow Tee', "medium", "yellow", 250, "http://codifyacademy.com/tshirt/img/yellowtee.png")
shirtArray.push(whitetee)
shirtArray.push(blacktee)
shirtArray.push(redtee)
shirtArray.push(bluetee)
shirtArray.push(greentee)
shirtArray.push(yellowtee)
for (i = 0; i < shirtArray.length; i++) { var tName = document.createTextNode(shirtArray[i].name) var tSize = document.createTextNode("Available size: " + shirtArray[i].size) var tColor = document.createTextNode("Color: " + shirtArray[i].color) var tStock = document.createTextNode("In stock: " + shirtArray[i].stock) var tButton = document.createTextNode("Buy Now!") var tImage = shirtArray[i].image var newCol = document.createElement("DIV") var newDiv = document.createElement("DIV") var nameH1 = document.createElement("H1") var sizeH4 = document.createElement("H4") var colorH4 = document.createElement("H4") var stockH4 = document.createElement("H4") var buyNow = document.createElement("BUTTON") var image = document.createElement("IMG") nameH1.appendChild(tName) sizeH4.appendChild(tSize) colorH4.appendChild(tColor) stockH4.appendChild(tStock) buyNow.appendChild(tButton) buyNow.className = "btn btn-primary btn-lg" image.src = tImage image.className = "img-responsive" newCol.className = "col-sm-4" newDiv.className = "tshirt shirtName" + i + " thumbnail" newDiv.appendChild(nameH1) newDiv.appendChild(image) newDiv.appendChild(sizeH4) newDiv.appendChild(colorH4) newDiv.appendChild(stockH4) newDiv.appendChild(buyNow) newCol.appendChild(newDiv) document.getElementById("shirts").appendChild(newCol)
}
Gallery App with JS - Script Codes
Gallery App with JS - Script Codes
Home Page Home
Developer Matt Brody
Username mattlbrody
Uploaded January 15, 2023
Rating 3
Size 2,453 Kb
Views 4,048
Do you need developer help for Gallery App with JS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Matt Brody (mattlbrody) Script Codes
Name
Instagram API
Simple Quiz App
JavaScript Survey
Book Finder API using ajax
To Do List
Zodiac App
Comment App
Sorting into teams with Fireworks
To Do List with Delete
Digital Clock
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!