mindarc · icyjms · Aug 28, 2024 · Aug 28, 2024 · Aug 28, 2024 · Aug 28, 2024
diff --git a/.gitignore b/.gitignore
@@ -40,5 +40,6 @@ Thumbs.db
 # Custom #
 ######################
 *.sass-cache*
-node_modules
+Exercise-1/node_modules
+Exercise-2/node_modules
 /.idea
diff --git a/Exercise-1/babel.config.js b/Exercise-1/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
diff --git a/data.json → Exercise-1/data.json b/data.json → Exercise-1/data.json
diff --git a/exercise1-desktop.png → Exercise-1/exercise1-desktop.png b/exercise1-desktop.png → Exercise-1/exercise1-desktop.png
diff --git a/exercise1-mobile.png → Exercise-1/exercise1-mobile.png b/exercise1-mobile.png → Exercise-1/exercise1-mobile.png
diff --git a/Exercise-1/package.json b/Exercise-1/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "sample-vue-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "ant-design-vue": "^4.2.3",
+    "core-js": "^3.8.3",
+    "vue": "^3.2.13"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}
diff --git a/Exercise-1/public/favicon.ico b/Exercise-1/public/favicon.ico
diff --git a/Exercise-1/public/index.html b/Exercise-1/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/Exercise-1/src/App.vue b/Exercise-1/src/App.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="header">
+    <img v-if="!isMobile" class="image-container" alt="Vue logo" src="https://via.placeholder.com/1920x650">
+    <img v-if="isMobile" class="image-container" alt="Vue logo" src="https://via.placeholder.com/600x600">
+    <div class="header-text-container">
+      <p class="header-text-greeting">Hello Developer!</p>
+      <h3 class="header-text-centered">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
+    </div>
+    <p class="header-text-bottom-right">Powered by HTML.COM</p>
+  </div>
+  <cardListComponent />
+</template> 
+
+<script>
+import cardListComponent from './components/card-list-component.vue'
+
+export default {
+  name: 'App',
+  components: {
+    cardListComponent
+  },
+  data(){
+    return{
+      screenWidth: '',
+      isMobile: '',
+    }
+  },
+  methods:{
+    checkScreenSize(){
+      this.screenWidth = window.innerWidth;
+      if(this.screenWidth > 768 ){
+        this.isMobile = false;
+      }else{
+        this.isMobile = true;
+      }
+    }
+  },
+   mounted(){
+    this.checkScreenSize();
+    window.addEventListener('resize', this.checkScreenSize);
+  }
+}
+</script>
+
+<style>
+* { 
+ margin: 0; 
+ padding: 0; 
+ box-sizing: border-box; 
+} 
+
+#app {
+  font-family: Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+#app ul {
+  list-style: none;
+}
+
+#app li {
+  text-align: center;
+}
+
+#app button {
+  cursor: pointer;
+  border: 3px solid rgb(68, 68, 68);
+  color: rgb(68, 68, 68);
+  padding: 8px;
+  margin: 5px;
+  border-radius: 18px;
+  /* width: 45%; */
+  font-weight: 800;
+  font-size: 12px;
+  font-family: Arial, Helvetica, sans-serif;
+  letter-spacing: 2px;
+}
+
+body {
+  overflow-x: hidden; /* Hide horizontal scrollbar */
+}
+
+.header{
+  position: relative;
+  text-align: center;
+  color: white;
+  display: flex;
+  justify-content: center;
+}
+
+.header-text-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform:translate(-50%, -50%);
+}
+
+.header-text-greeting {
+  font-size: 50px;
+  font-weight: bold;
+}
+
+.header-text-centered {
+  font-weight: 100;
+  font-size: 28px;
+}
+
+.header-text-bottom-right {
+  position: absolute;
+  bottom: 5px;
+  right: 5px;
+  font-size: 8px;
+  color: rgb(112, 112, 112);
+}
+
+.image-container {
+  width: 100vw;
+}
+
+ @media only screen and (max-width: 700px) {
+
+    .header-text-greeting {
+      font-size: 45px;
+    }
+
+    .header-text-container {
+      width: 100%;
+    }
+  }
+
+  @media only screen and (max-width: 500px) {
+
+    .header-text-greeting {
+      font-size: 55px;
+    }
+
+    .header-text-container {
+      width: 100%;
+    }
+
+    .header-text-centered {
+      font-size: 25px;
+    }
+  }
+</style>
diff --git a/Exercise-1/src/assets/logo.png b/Exercise-1/src/assets/logo.png
diff --git a/Exercise-1/src/components/card-list-component.vue b/Exercise-1/src/components/card-list-component.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="list-container">
+    <template v-for="(imageData, index) in imageDataList" :key="index">
+      <div class="responsive">
+        <div class="image-content">
+          <img src="https://via.placeholder.com/400x300" width="600" height="400">
+          <p class="image-content-text">Powered by HTML.COM</p>
+        </div>
+        <p class="desc">{{imageData.description}}
+        </p>
+        <button>READ MORE</button>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+  export default {
+    data(){
+      return{
+        imageDataList:[
+          {
+            description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+        incididunt ut labore et dolore magna aliqua. Ut enim ad menim veniam, quis nostrud exercitation
+        ullamco laboris nisi ut aliquip ex ea commodo consequat.`
+          },
+          {
+            description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+        incididunt ut labore et dolore magna aliqua.`
+          },
+          {
+            description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+        incididunt ut labore et dolore magna aliqua. Ut enim ad menim veniam, quis nostrud exercitation
+        ullamco.`
+          }
+        ]
+      }
+    },
+    name: 'cardListComponent',
+    props: {
+      msg: String
+    }
+  }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+  img {
+    width: 100%;
+    height: auto;
+    padding: 1rem;
+  }
+
+  .image-content {
+      position: relative;
+  }
+
+  .image-content-text {
+    position: absolute;
+    bottom: 25px;
+    right: 20px;
+    font-size: 5px;
+    color: rgb(165, 165, 165);
+  }
+
+  .desc {
+    padding: 15px;
+    text-align: center;
+    height: 150px;
+    font-size: 15px;
+    padding-top: 0px;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .responsive {
+    float: left;
+    width: 30%;
+    border: 1px solid rgb(223, 223, 223);
+    border-radius: 5px;
+    margin: 20px;
+    padding-bottom: 10px;
+    font-size: 20px;
+  }
+
+  .list-container {
+    margin: 1rem;
+    display: flex;
+    justify-content: center;
+    margin-left: 200px;
+    margin-right: 200px;
+  }
+
+  @media only screen and (max-width: 700px) {
+    .responsive {
+      width: 49.99999%;
+      margin: 6px 0;
+    }
+
+    .list-container {
+      margin: 2rem;
+      display: block;
+    }
+
+    .desc {
+      height: unset;
+    }
+  }
+
+  @media only screen and (max-width: 500px) {
+    .responsive {
+      width: 100%;
+    }
+
+    .list-container {
+      margin: 1rem;
+      display: block;
+    }
+
+    .desc {
+      height: unset;
+      font-size: 18px;
+    }
+
+    .image-content-text {
+      font-size: 8px;
+    }
+  }
+</style>
diff --git a/Exercise-1/src/main.js b/Exercise-1/src/main.js
@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import Antd from "ant-design-vue";
+
+const app = createApp(App);
+app.use(Antd).mount("#app");
diff --git a/Exercise-2/babel.config.js b/Exercise-2/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
diff --git a/Exercise-2/jsconfig.json b/Exercise-2/jsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}