Skip to content

Commit 1a71d48

Browse files
solygambassolygambas
committed
add random image generator
1 parent 9811864 commit 1a71d48

File tree

5 files changed

+75
-13
lines changed

5 files changed

+75
-13
lines changed

‎46-quiz app/index.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,23 @@
99
<body>
1010
<div class="quiz-container" id="quiz">
1111
<div class="quiz-header">
12-
<h2 id="question">Question</h2>
12+
<h2 id="question">Question is loading...</h2>
1313
<ul>
1414
<li>
1515
<input type="radio" name="answer" id="a" class="answer" />
16-
<label for="a" id="a_text">Question</label>
16+
<label for="a" id="a_text">Answer...</label>
1717
</li>
1818
<li>
1919
<input type="radio" name="answer" id="b" class="answer" />
20-
<label for="b" id="b_text">Question</label>
20+
<label for="b" id="b_text">Answer...</label>
2121
</li>
2222
<li>
2323
<input type="radio" name="answer" id="c" class="answer" />
24-
<label for="c" id="c_text">Question</label>
24+
<label for="c" id="c_text">Answer...</label>
2525
</li>
2626
<li>
2727
<input type="radio" name="answer" id="d" class="answer" />
28-
<label for="d" id="d_text">Question</label>
28+
<label for="d" id="d_text">Answer...</label>
2929
</li>
3030
</ul>
3131
</div>

‎48-random image generator/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Random Image Feed</title>
8+
</head>
9+
<body>
10+
<h1>Random Image Feed</h1>
11+
<div class="container"></div>
12+
<script src="script.js"></script>
13+
</body>
14+
</html>

‎48-random image generator/script.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const container = document.querySelector(".container");
2+
const unsplashURL = "https://source.unsplash.com/random/";
3+
const rows = 5;
4+
5+
const getRandomNumber = () => Math.floor(Math.random() * 10) + 300;
6+
const getRandomSize = () => `${getRandomNumber()}x${getRandomNumber()}`;
7+
8+
for (let i = 0; i < rows * 3; i++) {
9+
const image = document.createElement("img");
10+
image.src = `${unsplashURL}${getRandomSize()}`;
11+
container.appendChild(image);
12+
}

‎48-random image generator/style.css

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: "Roboto", sans-serif;
9+
display: flex;
10+
flex-direction: column;
11+
align-items: center;
12+
justify-content: center;
13+
min-height: 100vh;
14+
margin: 0;
15+
}
16+
17+
.title {
18+
margin: 10px 0 0;
19+
text-align: center;
20+
}
21+
22+
.container {
23+
display: flex;
24+
align-items: center;
25+
justify-content: center;
26+
flex-wrap: wrap;
27+
max-width: 1000px;
28+
}
29+
30+
.container img {
31+
object-fit: cover;
32+
margin: 10px;
33+
height: 300px;
34+
width: 300px;
35+
max-width: 100%;
36+
}

‎README.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
50+ mini web projects using HTML, CSS and JavaScript.
44

5-
[See all projects on CodePen](https://codepen.io/solygambas)
5+
[See all projects on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=item_created_at)
66

77
| # | Project | Live Demo |
88
| :-: | ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
@@ -49,12 +49,12 @@
4949
| 41 | [Verify Account UI](https://github.com/solygambas/html-css-fifty-projects/tree/master/41-verify%20account%20UI) | [Live Demo](https://codepen.io/solygambas/full/KKgYZWR) |
5050
| 42 | [Live User Filter](https://github.com/solygambas/html-css-fifty-projects/tree/master/42-live%20user%20filter) | [Live Demo](https://codepen.io/solygambas/full/OJRGzjg) |
5151
| 43 | [Feedback UI Design](https://github.com/solygambas/html-css-fifty-projects/tree/master/43-feedback%20UI%20design) | [Live Demo](https://codepen.io/solygambas/full/PoGgEOm) |
52-
| 44 | [Custom Range Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/44-custom%20range%20slider) | [Live Demo](/custom-range-slider/) |
53-
| 45 | [Netflix Mobile Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/45-netflix%20mobile%20navigation) | [Live Demo](/netflix-mobile-navigation/) |
54-
| 46 | [Quiz App](https://github.com/solygambas/html-css-fifty-projects/tree/master/46-quiz%20app) | [Live Demo](/quiz-app/) |
55-
| 47 | [Testimonial Box Switcher](https://github.com/solygambas/html-css-fifty-projects/tree/master/47-testimonial%20box%20switcher) | [Live Demo](/testimonial-box-switcher/) |
56-
| 48 | [Random Image Feed](https://github.com/solygambas/html-css-fifty-projects/tree/master/48-random%20image%20generator) | [Live Demo](/random-image-feed/) |
57-
| 49 | [Todo List](https://github.com/solygambas/html-css-fifty-projects/tree/master/49-todo%20list) | [Live Demo](/todo-list/) |
58-
| 50 | [Insect Catch Game](https://github.com/solygambas/html-css-fifty-projects/tree/master/50-insect%20catch%20game) | [Live Demo](/insect-catch-game/) |
52+
| 44 | [Custom Range Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/44-custom%20range%20slider) | [Live Demo](https://codepen.io/solygambas/full/WNGBrjZ) |
53+
| 45 | [Netflix Mobile Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/45-netflix%20mobile%20navigation) | [Live Demo](https://codepen.io/solygambas/full/NWRVxgv) |
54+
| 46 | [Quiz App](https://github.com/solygambas/html-css-fifty-projects/tree/master/46-quiz%20app) | [Live Demo](https://codepen.io/solygambas/full/PoGvZEW) |
55+
| 47 | [Testimonial Box Switcher](https://github.com/solygambas/html-css-fifty-projects/tree/master/47-testimonial%20box%20switcher) | [Live Demo](https://codepen.io/solygambas/full/ExgzPRz) |
56+
| 48 | [Random Image Feed](https://github.com/solygambas/html-css-fifty-projects/tree/master/48-random%20image%20generator) | [Live Demo](https://codepen.io/solygambas/full/eYdaJQx) |
57+
| 49 | [Todo List](https://github.com/solygambas/html-css-fifty-projects/tree/master/49-todo%20list) | [Live Demo](https://codepen.io/solygambas/full/eYdaJoo) |
58+
| 50 | [Insect Catch Game](https://github.com/solygambas/html-css-fifty-projects/tree/master/50-insect%20catch%20game) | [Live Demo](https://codepen.io/solygambas/full/oNzRbKx) |
5959

6060
Based on [50 Projects In 50 Days - HTML, CSS & JavaScript](https://www.udemy.com/course/50-projects-50-days/) by Brad Traversy (2020).

0 commit comments

Comments
 (0)