CSS challenges moved from JS

sadanandpai · Jul 14, 2024 · 536165b · 536165b
1 parent b47fdf6
commit 536165b
Show file tree

Hide file tree

Showing 36 changed files with 170 additions and 144 deletions.
diff --git a/apps/angular/package.json b/apps/angular/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "dev": "ng serve --port 6014 --serve-path=/frontend-mini-challenges/angular/",
+    "dev": "ng serve --port 6015 --serve-path=/frontend-mini-challenges/angular/",
     "build": "ng build --c=production --base-href=/frontend-mini-challenges/angular/",
     "build-baseless": "ng build --c=production --base-href=/angular/",
     "watch": "ng build --watch --configuration development",

diff --git a/...cript/src/challenges/accordion/index.html → apps/css/src/challenges/accordion/index.html b/...cript/src/challenges/accordion/index.html → apps/css/src/challenges/accordion/index.html
@@ -1,5 +1,5 @@
 <!-- followed bootstrap css names -->
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <script src="../../helpers/header.js" type="module"></script>

diff --git a/...ascript/src/challenges/accordion/index.js → apps/css/src/challenges/accordion/index.js b/...ascript/src/challenges/accordion/index.js → apps/css/src/challenges/accordion/index.js
diff --git a/...script/src/challenges/accordion/style.css → apps/css/src/challenges/accordion/style.css b/...script/src/challenges/accordion/style.css → apps/css/src/challenges/accordion/style.css
diff --git a/...avascript/src/challenges/blobmaker/app.js → apps/css/src/challenges/blobmaker/app.js b/...avascript/src/challenges/blobmaker/app.js → apps/css/src/challenges/blobmaker/app.js
@@ -23,9 +23,8 @@ function createBlob() {
     100 - radiusThree
   }% ${radiusThree}% / ${radiusFour}% ${radiusTwo}% ${100 - radiusTwo}% ${100 - radiusFour}%`;
 
-  document.getElementById(
-    'blob'
-  ).style.cssText = `border-radius: ${borderRadius}; height: ${blobHeight}px; width: ${blobWidth}px`;
+  document.getElementById('blob').style.cssText =
+    `border-radius: ${borderRadius}; height: ${blobHeight}px; width: ${blobWidth}px`;
 
   outputCode.value = `border-radius: ${borderRadius};`;
 }

diff --git a/...cript/src/challenges/blobmaker/index.html → apps/css/src/challenges/blobmaker/index.html b/...cript/src/challenges/blobmaker/index.html → apps/css/src/challenges/blobmaker/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/...script/src/challenges/blobmaker/style.css → apps/css/src/challenges/blobmaker/style.css b/...script/src/challenges/blobmaker/style.css → apps/css/src/challenges/blobmaker/style.css
diff --git a/...ipt/src/challenges/dialog-popup/index.css → apps/css/src/challenges/dialog/index.css b/...ipt/src/challenges/dialog-popup/index.css → apps/css/src/challenges/dialog/index.css
@@ -5,22 +5,26 @@ button {
   padding: 3px 7px;
   text-align: center;
 }
+
 button:hover {
   cursor: pointer;
   background-color: aqua;
 }
+
 dialog {
   border: 1px solid black;
   border-radius: 3px;
   padding: 10px;
   max-width: 325px;
   width: 80%;
 }
+
 h4 {
   padding: 0px;
   margin: 0px;
   border-bottom: 1px solid black;
 }
+
 .dialogContent {
   padding: 10px;
 }
diff --git a/...pt/src/challenges/dialog-popup/index.html → apps/css/src/challenges/dialog/index.html b/...pt/src/challenges/dialog-popup/index.html → apps/css/src/challenges/dialog/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/...ript/src/challenges/dialog-popup/index.js → apps/css/src/challenges/dialog/index.js b/...ript/src/challenges/dialog-popup/index.js → apps/css/src/challenges/dialog/index.js
@@ -1,6 +1,6 @@
 const showButton = document.getElementById('showDialog');
 const dialogPopup = document.getElementById('dialogPopup');
-const closeButton = document.getElementById('closeDialog')
+const closeButton = document.getElementById('closeDialog');
 
 showButton.addEventListener('click', () => {
   dialogPopup.showModal();

diff --git a/...vascript/src/challenges/Footer/index.html → apps/css/src/challenges/footer/index.html b/...vascript/src/challenges/Footer/index.html → apps/css/src/challenges/footer/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <script src="../../helpers/header.js" type="module"></script>

diff --git a/...javascript/src/challenges/Footer/logo.png → apps/css/src/challenges/footer/logo.png b/...javascript/src/challenges/Footer/logo.png → apps/css/src/challenges/footer/logo.png
diff --git a/...avascript/src/challenges/Footer/style.css → apps/css/src/challenges/footer/style.css b/...avascript/src/challenges/Footer/style.css → apps/css/src/challenges/footer/style.css
diff --git a/.../challenges/gradient-generator/index.html → .../challenges/gradient-generator/index.html b/.../challenges/gradient-generator/index.html → .../challenges/gradient-generator/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/...c/challenges/gradient-generator/script.js → ...c/challenges/gradient-generator/script.js b/...c/challenges/gradient-generator/script.js → ...c/challenges/gradient-generator/script.js
diff --git a/...c/challenges/gradient-generator/style.css → ...c/challenges/gradient-generator/style.css b/...c/challenges/gradient-generator/style.css → ...c/challenges/gradient-generator/style.css
@@ -33,9 +33,14 @@
   height: 30px;
   background-color: white;
   border-radius: 50%;
-  box-shadow: rgba(0, 0, 0, 0.15) 0 0 0 1px, rgba(0, 0, 0, 0.05) 0 10px 10px -5px, inset #fff 0 0 0 6px;
+  box-shadow:
+    rgba(0, 0, 0, 0.15) 0 0 0 1px,
+    rgba(0, 0, 0, 0.05) 0 10px 10px -5px,
+    inset #fff 0 0 0 6px;
   cursor: -webkit-grab;
-  transition: border 0.15s ease, box-shadow 0.15s ease;
+  transition:
+    border 0.15s ease,
+    box-shadow 0.15s ease;
   z-index: 2;
   display: flex;
   align-items: center;
@@ -63,9 +68,14 @@
   height: 30px;
   background-color: white;
   border-radius: 50%;
-  box-shadow: rgba(0, 0, 0, 0.15) 0 0 0 1px, rgba(0, 0, 0, 0.05) 0 10px 10px -5px, inset #fff 0 0 0 6px;
+  box-shadow:
+    rgba(0, 0, 0, 0.15) 0 0 0 1px,
+    rgba(0, 0, 0, 0.05) 0 10px 10px -5px,
+    inset #fff 0 0 0 6px;
   cursor: -webkit-grab;
-  transition: border 0.15s ease, box-shadow 0.15s ease;
+  transition:
+    border 0.15s ease,
+    box-shadow 0.15s ease;
   z-index: 2;
   display: flex;
   align-items: center;
@@ -80,7 +90,10 @@
 }
 
 .active {
-  box-shadow: #0066ff 0 0 0 1px, rgba(0, 0, 0, 0.05) 0 10px 10px -5px, inset #fff 0 0 0 6px;
+  box-shadow:
+    #0066ff 0 0 0 1px,
+    rgba(0, 0, 0, 0.05) 0 10px 10px -5px,
+    inset #fff 0 0 0 6px;
   z-index: 3;
 }
 
@@ -105,7 +118,9 @@
   width: 100%;
   padding: 0px 14px;
   height: 45px;
-  box-shadow: inset #d8d8da 0 0 0 1px, inset white 0 0 0 100px !important;
+  box-shadow:
+    inset #d8d8da 0 0 0 1px,
+    inset white 0 0 0 100px !important;
   border: none;
   font-size: 15px;
   border-radius: 10px;

diff --git a/...src/challenges/light-dark-mode/index.html → ...src/challenges/light-dark-mode/index.html b/...src/challenges/light-dark-mode/index.html → ...src/challenges/light-dark-mode/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/...t/src/challenges/light-dark-mode/index.js → ...s/src/challenges/light-dark-mode/index.js b/...t/src/challenges/light-dark-mode/index.js → ...s/src/challenges/light-dark-mode/index.js
diff --git a/.../src/challenges/light-dark-mode/style.css → .../src/challenges/light-dark-mode/style.css b/.../src/challenges/light-dark-mode/style.css → .../src/challenges/light-dark-mode/style.css
@@ -20,14 +20,14 @@ body.dark .navbar-app a img {
 }
 
 body.dark,
-#innnerThemeSwitch:checked+.inner-container,
-body.dark #innnerThemeSwitch:checked+.inner-container {
+#innnerThemeSwitch:checked + .inner-container,
+body.dark #innnerThemeSwitch:checked + .inner-container {
   color: canvas;
   background-color: canvasText;
 }
 
-#innnerThemeSwitch+.inner-container,
-body.dark #innnerThemeSwitch+.inner-container {
+#innnerThemeSwitch + .inner-container,
+body.dark #innnerThemeSwitch + .inner-container {
   color: canvasText;
   background-color: canvas;
-}
+}
diff --git a/.../src/challenges/navigation-bar/index.html → .../src/challenges/navigation-bar/index.html b/.../src/challenges/navigation-bar/index.html → .../src/challenges/navigation-bar/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/...pt/src/challenges/navigation-bar/index.js → ...ss/src/challenges/navigation-bar/index.js b/...pt/src/challenges/navigation-bar/index.js → ...ss/src/challenges/navigation-bar/index.js
diff --git a/...t/src/challenges/navigation-bar/style.css → ...s/src/challenges/navigation-bar/style.css b/...t/src/challenges/navigation-bar/style.css → ...s/src/challenges/navigation-bar/style.css
diff --git a/...src/challenges/skeleton-loader/index.html → ...src/challenges/skeleton-loader/index.html b/...src/challenges/skeleton-loader/index.html → ...src/challenges/skeleton-loader/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <link rel="icon" type="image/svg+xml" href="../../logo.svg" />

diff --git a/.../src/challenges/skeleton-loader/style.css → .../src/challenges/skeleton-loader/style.css b/.../src/challenges/skeleton-loader/style.css → .../src/challenges/skeleton-loader/style.css
diff --git a/...src/challenges/spinning-loader/index.html → apps/css/src/challenges/spinner/index.html b/...src/challenges/spinning-loader/index.html → apps/css/src/challenges/spinner/index.html
@@ -1,7 +1,7 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <title>Spinning Loader</title>
+    <title>Spinner</title>
     <script src="../../helpers/header.js" type="module"></script>
     <link rel="stylesheet" href="styles.css" />
   </head>

diff --git a/...src/challenges/spinning-loader/styles.css → apps/css/src/challenges/spinner/styles.css b/...src/challenges/spinning-loader/styles.css → apps/css/src/challenges/spinner/styles.css
diff --git a/.../challenges/star-rating-display/helper.js → .../challenges/star-rating-display/helper.js b/.../challenges/star-rating-display/helper.js → .../challenges/star-rating-display/helper.js
diff --git a/...challenges/star-rating-display/index.html → ...challenges/star-rating-display/index.html b/...challenges/star-rating-display/index.html → ...challenges/star-rating-display/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/...c/challenges/star-rating-display/index.js → ...c/challenges/star-rating-display/index.js b/...c/challenges/star-rating-display/index.js → ...c/challenges/star-rating-display/index.js
diff --git a/.../challenges/star-rating-display/style.css → .../challenges/star-rating-display/style.css b/.../challenges/star-rating-display/style.css → .../challenges/star-rating-display/style.css
diff --git a/.../challenges/MadStory_generator/index.html → ...src/challenges/story-generator/index.html b/.../challenges/MadStory_generator/index.html → ...src/challenges/story-generator/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <script src="../../helpers/header.js" type="module"></script>

diff --git a/...rc/challenges/MadStory_generator/index.js → ...t/src/challenges/story-generator/index.js b/...rc/challenges/MadStory_generator/index.js → ...t/src/challenges/story-generator/index.js
diff --git a/...c/challenges/MadStory_generator/style.css → .../src/challenges/story-generator/style.css b/...c/challenges/MadStory_generator/style.css → .../src/challenges/story-generator/style.css
@@ -4,15 +4,19 @@
   padding: 30px;
 
   border-radius: 20px;
-  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
+  box-shadow:
+    rgba(0, 0, 0, 0.3) 0px 19px 38px,
+    rgba(0, 0, 0, 0.22) 0px 15px 12px;
   text-align: center;
 }
 
 .container h1 {
   color: #70068e;
   font-weight: bolder;
   font-size: 2.5rem;
-  text-shadow: 2px 7px 5px rgba(0, 0, 0, 0.3), 0px -4px 10px rgba(255, 255, 255, 0.3);
+  text-shadow:
+    2px 7px 5px rgba(0, 0, 0, 0.3),
+    0px -4px 10px rgba(255, 255, 255, 0.3);
 }
 
 .form {
@@ -42,7 +46,9 @@ button {
   cursor: pointer;
   border-radius: 5px;
   margin: 5px;
-  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+  box-shadow:
+    rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
+    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
 }
 
 button:hover {
@@ -66,7 +72,9 @@ button:hover {
   margin-top: 20px;
   background-color: #70068e;
   color: black;
-  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+  box-shadow:
+    rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
+    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
 }
 .buttons:hover {
   background-color: #b745d6;

diff --git a/apps/vue/vite.config.ts b/apps/vue/vite.config.ts
@@ -11,7 +11,7 @@ export default defineConfig({
     },
   },
   server: {
-    port: 6015,
+    port: 6014,
     strictPort: true,
   },
   base: '/frontend-mini-challenges/vue/',

diff --git a/shared/data/content/css-challenges.ts b/shared/data/content/css-challenges.ts
@@ -12,6 +12,114 @@ const challenges: Map<string, IChallenge> = new Map([
       tags: [],
     },
   ],
+  [
+    'spinner',
+    {
+      title: 'Spinner',
+      link: 'spinner/',
+      difficulty: EDifficulty.Easy,
+      developer: 'DhanushNehru',
+      tags: [],
+    },
+  ],
+  [
+    'dialog',
+    {
+      title: 'Dialog',
+      link: 'dialog/',
+      difficulty: EDifficulty.Easy,
+      developer: 'sahankatta',
+      youtube: 'https://youtu.be/aIzyEDi6zgU',
+      tags: [],
+    },
+  ],
+  [
+    'light-dark-mode',
+    {
+      title: 'Light & Dark mode',
+      link: 'light-dark-mode/',
+      difficulty: EDifficulty.Easy,
+      developer: 'sadanandpai',
+      youtube: 'https://youtu.be/hxcGGhjYNFE',
+      tags: [],
+    },
+  ],
+  [
+    'skeleton-loader',
+    {
+      title: 'Skeleton Loader',
+      link: 'skeleton-loader/',
+      difficulty: EDifficulty.Easy,
+      developer: 'sahankatta',
+      youtube: 'https://youtu.be/FEtTRjq1P6I',
+      tags: [],
+    },
+  ],
+  [
+    'accordion',
+    {
+      title: 'Accordion',
+      link: 'accordion/',
+      difficulty: EDifficulty.Easy,
+      developer: 'rashidtvmr',
+      youtube: 'https://youtu.be/03KFXudVaoo',
+      tags: [],
+    },
+  ],
+  [
+    'navigation-bar',
+    {
+      title: 'Navigation Bar',
+      link: 'navigation-bar/',
+      difficulty: EDifficulty.Easy,
+      developer: 'christian-lee1398',
+      youtube: 'https://youtu.be/urA5ogzG0L0',
+      tags: [],
+    },
+  ],
+  [
+    'footer',
+    {
+      title: 'Footer',
+      link: 'footer/',
+      difficulty: EDifficulty.Easy,
+      developer: 'AbhineshJha',
+      youtube: 'https://youtu.be/FRRlFLfdvBE?si=HWn88BwJGTJvEBUD',
+      tags: [],
+      isNew: true,
+    },
+  ],
+  [
+    'blobmaker',
+    {
+      title: 'Blob Maker',
+      link: 'blobmaker/',
+      difficulty: EDifficulty.Easy,
+      developer: 'AbhineshJha',
+      tags: [],
+    },
+  ],
+  [
+    'star-rating-display',
+    {
+      title: 'Star Rating Display',
+      link: 'star-rating-display/',
+      difficulty: EDifficulty.Medium,
+      developer: 'sadanandpai',
+      tags: [],
+    },
+  ],
+  [
+    'gradient-generator',
+    {
+      title: 'Gradient Generator',
+      link: 'gradient-generator/',
+      difficulty: EDifficulty.Medium,
+      developer: 'Sukomal07',
+      tags: [],
+      isNew: true,
+    },
+  ],
 ]);
 
 export const cssChallenges = sortChallengesByDifficulty(challenges);