diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..dfe0770 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +# Auto detect text files and perform LF normalization +* text=auto diff --git a/README.md b/README.md new file mode 100644 index 0000000..6ac8710 --- /dev/null +++ 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 new file mode 100644 index 0000000..55c1eab --- /dev/null +++ b/index.html @@ -0,0 +1,51 @@ + + + + + + + ONE + + + + + + +
+

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.

+
+
+
+
+ +
+
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..dfca0e0 --- /dev/null +++ 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 += `
+ ... +
+
${ + fetchData[items].name + }
+
+

Start-time: ${ + fetchData[items].start_time + }

+

End-time: ${ + fetchData[items].end_time + }

+

Duration: ${Math.floor( + fetchData[items].duration + )}

+
+
+ Visit Contest +
+
+
`; + } + cardsData.innerHTML = enterData; +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..d32753d --- /dev/null +++ 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; +} \ No newline at end of file