dalodanielmesa
diff --git a/‎41. Random Images Feed/app.js‎
Lines changed: 17 additions & 0 deletions b/‎41. Random Images Feed/app.js‎
Lines changed: 17 additions & 0 deletions
diff --git a/‎41. Random Images Feed/index.html‎
Lines changed: 15 additions & 0 deletions b/‎41. Random Images Feed/index.html‎
Lines changed: 15 additions & 0 deletions
diff --git a/‎41. Random Images Feed/style.css‎
Lines changed: 29 additions & 0 deletions b/‎41. Random Images Feed/style.css‎
Lines changed: 29 additions & 0 deletions
@@ -0,0 +1,17 @@
+const container = document.querySelector(".content");
+const baseURL = "https://source.unsplash.com/random/";
+const rows = 7;
+
+for (let i = 0; i < rows * 3; i++) {
+ const img = document.createElement("img");
+ img.src = `${baseURL}${randomSize()}`;
+ container.appendChild(img);
+}
+
+function randomSize() {
+ return `${randomNumber()}x${randomNumber()}`;
+}
+
+function randomNumber() {
+ return Math.floor(Math.random() * 10) + 300;
+}
@@ -0,0 +1,15 @@
+<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 Image Feed</title>
+ <link rel="stylesheet" href="style.css" />
+ </head>
+ <body>
+ <h1>Random Image Feed</h1>
+ <div class="content"></div>
+
+ <script src="app.js"></script>
+ </body>
+</html>
@@ -0,0 +1,29 @@
+* {
+ box-sizing: border-box;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ margin: 0;
+ font-family: sans-serif;
+}
+
+.content {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+ max-width: 1000px;
+}
+
+.content img {
+ object-fit: cover;
+ margin: 10px;
+ height: 300px;
+ width: 300px;
+ max-width: 100%;
+}