Merge pull request #11 from vihan85/develop

Develop
vihan85 · Sep 11, 2022 · 21e9d4f · 21e9d4f
2 parents cfe47b3 + 40f4e3c
commit 21e9d4f
Show file tree

Hide file tree

Showing 792 changed files with 22,420 additions and 408 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+json-server/node_modules
diff --git a/ES6/import/app.js b/ES6/import/app.js
@@ -0,0 +1,7 @@
+import case1 from './case1.js'
+import { case2 as loc, type3 } from './case2.js'
+
+console.log('case2: ', loc);
+console.log('type3: ', type3);
+
+case1('test logger')
diff --git a/ES6/import/case1.js b/ES6/import/case1.js
@@ -0,0 +1,6 @@
+export default function case1(value) {
+    console.log(value)
+}
+
+// cach 2
+// export default logger
diff --git a/ES6/import/case2.js b/ES6/import/case2.js
@@ -0,0 +1,6 @@
+export function case2(value) {
+    console.log(value)
+}
+export const type1 = 'type1';
+export const type2 = 'type2';
+export const type3 = 'type3';
diff --git a/test/index.html → ES6/import/index.html b/test/index.html → ES6/import/index.html
@@ -5,10 +5,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
-    <script src="./test.js"></script>
 </head>
 <body>
-    <h1>This is page Test javascript</h1> test git
-    edit footer
+    TEST IMPORT
+    <script type="module" src="./app.js"></script>
 </body>
 </html>
diff --git a/ES6/import/logger.js b/ES6/import/logger.js
@@ -0,0 +1,6 @@
+export function logger(value) {
+    console.log(value)
+}
+export const type1 = 'type1';
+export const type2 = 'type2';
+export const type3 = 'type3';
diff --git a/F8-Musicplayer/app.css b/F8-Musicplayer/app.css
@@ -0,0 +1,199 @@
+:root {
+    --primary-color: #ec1f55;
+    --text-color: #333;
+  }
+
+  * {
+    padding: 0;
+    margin: 0;
+    box-sizing: inherit;
+  }
+
+  body {
+    background-color: #f5f5f5;
+  }
+
+  html {
+    box-sizing: border-box;
+    font-family: "Poppins", sans-serif;
+  }
+
+  .player {
+    position: relative;
+    max-width: 480px;
+    margin: 0 auto;
+  }
+
+  .player .icon-pause {
+    display: none;
+  }
+
+  .player.playing .icon-pause {
+    display: inline-block;
+  }
+
+  .player.playing .icon-play {
+    display: none;
+  }
+
+  .dashboard {
+    padding: 16px 16px 14px;
+    background-color: #fff;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    max-width: 480px;
+    border-bottom: 1px solid #ebebeb;
+  }
+
+  /* HEADER */
+  header {
+    text-align: center;
+    margin-bottom: 10px;
+  }
+
+  header h4 {
+    color: var(--primary-color);
+    font-size: 12px;
+  }
+
+  header h2 {
+    color: var(--text-color);
+    font-size: 20px;
+  }
+
+  /* CD */
+  .cd {
+    display: flex;
+    margin: auto;
+    width: 200px;
+  }
+
+  .cd-thumb {
+    width: 100%;
+    padding-top: 100%;
+    border-radius: 50%;
+    background-color: #333;
+    background-size: cover;
+    margin: auto;
+    animation: rotate linear;
+    animation-duration: 5s;
+  }
+  @keyframes rotate {
+    50% {transform: rotate(var(--change));}
+  }
+  /* CONTROL */
+  .control {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding: 18px 0 8px 0;
+  }
+  .stop-animation{
+    animation-play-state: paused
+  }
+  .control .btn {
+    color: #666;
+    padding: 18px;
+    font-size: 18px;
+  }
+
+  .control .btn-random--acctive{
+    color: purple;
+  }
+
+  .control .btn.active {
+    color: var(--primary-color);
+  }
+
+  .control .btn-toggle-play {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    font-size: 24px;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--primary-color);
+  }
+
+  .progress {
+    width: 100%;
+    -webkit-appearance: none;
+    height: 6px;
+    background: #d3d3d3;
+    outline: none;
+    opacity: 0.7;
+    -webkit-transition: 0.2s;
+    transition: opacity 0.2s;
+  }
+
+  .progress::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 12px;
+    height: 6px;
+    background-color: var(--primary-color);
+    cursor: pointer;
+  }
+
+  /* PLAYLIST */
+  .playlist {
+    margin-top: 408px;
+    padding: 12px;
+  }
+
+  .song {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+    background-color: #fff;
+    padding: 8px 16px;
+    border-radius: 5px;
+    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
+  }
+
+  .song.active {
+    background-color: var(--primary-color);
+  }
+
+  .song:active {
+    opacity: 0.8;
+  }
+
+  .song.active .option,
+  .song.active .author,
+  .song.active .title {
+    color: #fff;
+  }
+
+  .song .thumb {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background-size: cover;
+    margin: 0 8px;
+  }
+
+  .song .body {
+    flex: 1;
+    padding: 0 16px;
+  }
+
+  .song .title {
+    font-size: 18px;
+    color: var(--text-color);
+  }
+
+  .song .author {
+    font-size: 12px;
+    color: #999;
+  }
+
+  .song .option {
+    padding: 16px 8px;
+    color: #999;
+    font-size: 18px;
+  }
+