Initial commit

HasnatHaider · Oct 24, 2023 · 99d602b · 99d602b
commit 99d602b
Show file tree

Hide file tree

Showing 5 changed files with 192 additions and 0 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/README.md b/README.md
@@ -0,0 +1,2 @@
+# Fetch-API-Code-Competition
+ This website is a perfect example how data get fetched from API. This API fetch code competition sites and show start/end time.
diff --git a/index.html b/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ONE</title>
+    <link href="style.css" rel="stylesheet" type="text/css" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
+</head>
+
+<body>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark py-0 order-lg-0 fixed-top">
+        <div class="container px-4">
+            <h2
+                class="text-uppercase px-5 navbarbtn mx-auto text-center text-white d-flex justify-content-center align-items-center">
+                concurso</h2>
+        </div>
+        </div>
+    </nav>
+    <div class="paraSection container">
+        <p class="text-center text-dark">This exciting event is a platform to showcase your coding skills and innovative
+            thinking. Whether you're a
+            seasoned coder or just starting your journey, this competition welcomes all levels of expertise. Join fellow
+            coding enthusiasts as you tackle real-world challenges, develop creative solutions, and dive into the world
+            of algorithms and logic. Sharpen your programming abilities, collaborate with like-minded individuals, and
+            vie for recognition as you take on the thrilling Coding Program competition.</p>
+    </div>
+    <section class="cardList">
+        <div class="container">
+            <div id="cardsData" class="row justify-content-center">
+
+            </div>
+        </div>
+    </section>
+
+    <footer class="custom-footer mt-4 navbar-dark bg-dark">
+        <p>&copy; 2023 ONE. All rights reserved by HH</p>
+    </footer>
+
+
+
+    <script src="script.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
+        crossorigin="anonymous"></script>
+
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,55 @@
+let arr = [
+  "https://images.wallpaperscraft.com/image/single/code_text_programming_192795_1920x1080.jpg",
+  "https://images8.alphacoders.com/559/thumb-1920-559128.jpg",
+  "https://wallpaperaccess.com/full/2875430.png",
+  "https://images.wallpaperscraft.com/image/single/code_text_programming_146694_1920x1080.jpg",
+  "https://wallpapers.com/images/hd/python-program-coding-6kx47hfzock0lrhe.jpg",
+  "https://wallpapersmug.com/download/1920x1080/73a637/coding-characters-the-matrix-minimal.jpg",
+  "https://wallpaperaccess.com/full/5277906.jpg",
+  "https://uploads-ssl.webflow.com/61f7efd44d01cc87c88dc6f3/6318e2916ddc28d60d89d319_Coding%20Vs.%20Programming%2002.jpg",
+  "https://wallpapercave.com/wp/wp2234539.jpg",
+  "https://mimo.org/static/96e2fdac4b0715d6118cd00bf6fe2766/e018d/coding-motivation%402x.png",
+  "https://fronty.com/static/uploads/free%20tools/coding_while_designing.png",
+  "https://livecodestream.dev/post/how-to-prepare-for-the-coding-interview/featured.jpg",
+  "https://www.genome.gov/sites/default/files/media/images/tg/cDNA.jpg",
+  "https://dlh.lu/wp-content/uploads/2022/05/coding-1.jpg",
+];
+
+let url = "https://kontests.net/api/v1/all";
+let a = fetch(url);
+a.then((b) => {
+  return b.json();
+}).then((fetchData) => {
+  console.log(fetchData);
+  enterData = "";
+  for (let items in fetchData) {
+    console.log(fetchData[items]);
+    enterData += `<div class="card mx-4 my-4 p-0" style="width: 18rem;">
+                            <img src="${
+                              arr[Math.floor(Math.random() * arr.length)]
+                            }" class="card-img-top " alt="...">
+                            <div class="card-body">
+                                <h5 class="card-title">${
+                                  fetchData[items].name
+                                }</h5>
+                                <div class = "cardInside">
+                                <p class="card-text">Start-time: ${
+                                  fetchData[items].start_time
+                                }</p>
+                                <p class="card-text">End-time: ${
+                                  fetchData[items].end_time
+                                }</p>
+                                <p class="card-text">Duration: ${Math.floor(
+                                  fetchData[items].duration
+                                )}</p>
+                                </div>
+                                <div class = "buttonSet">
+                                <a href="${
+                                  fetchData[items].url
+                                }" class="btn btn-primary"><i>Visit Contest</i></a>
+                                </div>
+                            </div>
+                        </div>`;
+  }
+  cardsData.innerHTML = enterData;
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,82 @@
+@import url('https://fonts.googleapis.com/css2?family=Abel&family=Black+Ops+One&family=Dancing+Script:wght@500&family=Dosis:wght@500&family=Handjet&family=Josefin+Sans:wght@300&family=PT+Sans+Narrow&family=Poppins:wght@300;400;500&family=Roboto:wght@900&display=swap');
+
+html {
+    height: 100%;
+    width: 100%;
+}
+
+body {
+    font-family: 'PT Sans Narrow', sans-serif !important;
+    letter-spacing: 0.05rem !important;
+    background-color: #E9F7EF !important;
+}
+
+.cardInside {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding-top: 15px;
+    padding-bottom: 20px;
+}
+
+.buttonSet {
+    margin-top: 20px;
+}
+
+.navbarbtn {
+    padding-top: 10px;
+    padding-bottom: 5px;
+    letter-spacing: 1.0rem !important;
+    font-weight: bold;
+}
+
+.cardList {
+    padding-top: 4%;
+}
+
+.btn {
+    border-radius: 20px !important;
+    background-color: orangered !important;
+    border: none !important;
+}
+
+.btn:hover {
+    background-color: #c23400 !important;
+    transition: all 0.3s ease 0s;
+}
+
+.card {
+    border: none !important;
+    border-radius: 15px !important;
+    transition: transform 0.30s;
+}
+
+.card-img-top {
+    border: none !important;
+    border-top-left-radius: 15px !important;
+    border-top-right-radius: 15px !important;
+}
+
+.card:hover {
+    transform: translateY(-1.0rem);
+    box-shadow: 0 1rem 1rem 0 #85929e8a;
+}
+
+.paraSection {
+    padding-top: 9%!important;
+    width: 60% !important;
+    font-size: 19px;
+}
+
+.custom-footer {
+    color: #fff;
+    text-align: center;
+    padding: 10px;
+    bottom: 0;
+    width: 100%;
+}
+
+.custom-footer p {
+    margin: 0;
+}