100JSProjects
LearnProjectsExplore all projects
100JS_WORKSPACE/Build · Learn · Repeat
100JSProjects

Practical HTML, CSS, and JavaScript projects designed to help you turn concepts into real skills—one build at a time.

01Explore

./All projects./Learning guides./About./Contact./Privacy

02Resources

./GitHub repository./Support the project

© 2026 100 JS Projects. Built for developers.

TermsCookiesContact
JS//Projects/Random Photos

Random PhotosHTML, CSS & JavaScript Project

HTML5CSS3JavaScript
View Source CodeLive Demo
Random Photos project previewTry Live Demo
What you'll build

Random Photos

Our project involves creating a random image feed that displays six images from "Lorem Pixel" website. The images are randomly selected and refresh with each page refresh. We also have a button at the bottom of the page to add new random images. To achieve this, we'll use JavaScript to fetch images from the "Lorem Pixel" API and manipulate the DOM to display them on the website. Additionally, we'll apply some CSS to style the images and the button. This project is an excellent opportunity to learn about fetching data from APIs, manipulating the DOM, and styling images in web development.

HTML
— Structure
CSS
— Design
JavaScript
— Logic
Complete project files

Build It from the Source Code

Create these three files, copy the code into each one, then open index.html with Live Server.

Project structure
random-photos/
├── index.html
├── style.css
└── index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Random Photos</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="image-container">
      <img src="https://picsum.photos/300?random=1" />
      <img src="https://picsum.photos/300?random=2" />
      <img src="https://picsum.photos/300?random=3" />
      <img src="https://picsum.photos/300?random=4" />
      <img src="https://picsum.photos/300?random=5" />
      <img src="https://picsum.photos/300?random=6" />
    </div>
    <button class="btn">Load More</button>

    <script src="index.js"></script>
  </body>
</html>

JS// Related Projects

Keep Building with Similar Projects

Continue your learning journey with these handpicked projects that share similar concepts and technologies

Simple Stopwatch project preview
HTMLCSSJavaScript

Simple Stopwatch

Welcome to the Stopwatch Project! We will create a timer displayed at the top, along with three buttons - start, stop, and reset. Clicking the START button will begin the timer. The STOP button will pause the timer using a JavaScript method called SetInterval, which can be cleared using clearInterval. The RESET button will reset the timer to zero. If you click STOP and then START again, the timer will continue from the previously elapsed time. We'll start by installing CSS for the buttons' design and hover effects, then use JavaScript to get the browser time, manipulate the content, replace it with the calculated time, and provide the start, stop, and reset functionality.

View project
Tip Calculator project preview
HTMLCSSJavaScript

Tip Calculator

In this project, our aim is to build a modern tip calculator. The project's primary interface comprises a container labeled "Tip Calculator" with two input fields: one for the bill amount and the other for the tip percentage. The tip calculator has a modern design that is styled using CSS. We utilized JavaScript to obtain the values of the two input fields and calculate the total amount based on these values.

View project
Dice Roll Simulator project preview
HTMLCSSJavaScript

Dice Roll Simulator

Welcome to the Dice Roll Simulator project. The final version of the project features a dice at the center of the screen and a "Roll dice" button. The button triggers an animation and generates a random number, which is displayed in the center of the dice when clicked, t. Additionally, the number is added to a history list. To achieve this, we used modern CSS to style the dice and added a JavaScript event listener to the button. The listener generates a random number, saves it to an array, and updates the history list.

View project
{ }View All Projects