Commit ada14e4b authored by cc201010's avatar cc201010
Browse files

Advanced Js Project , 1st Version

parent 879e6e8f
// babel.config.js
module.exports = {
presets: [['@babel/preset-env', { targets: { node: 'current' } }]],
};
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
<meta charset="UTF-8"/>
<link rel="icon" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Vite App</title>
</head>
<body>
<div id="app">
<!-- use the router-link component for navigation. -->
<!-- specify the link by passing the `to` prop. -->
<!-- `<router-link>` will render an `<a>` tag with the correct `href` attribute -->
<router-link to="/">Home</router-link>
<router-link to="/pokedex">Pokedex</router-link>
<router-link to="/calculator">Calculator</router-link>
<router-link to="/guesser">Guesser</router-link>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</head>
<body>
<div id="app" class="nav-container">
<nav class="">
<div class="max-w-6xl mx-auto px-4 h-16">
<div class="flex justify-center content-center h-16">
<div class="flex space-x-7">
<!-- Primary Navbar items -->
<div class="hidden md:flex items-center space-x-1">
<a href="#"
class="inline-flex text-lg py-4 px-4 text-sm font-medium text-center text-white rounded-t-lg border-b-2 border-transparent hover:text-black hover:border-black dark:text-gray-400 dark:hover:text-gray-300 group">
<!-- use the router-link component for navigation. -->
<!-- specify the link by passing the `to` prop. -->
<router-link to="/">Home</router-link>
</a>
<a href="#"
class="inline-flex text-lg py-4 px-4 text-sm font-medium text-center text-white rounded-t-lg border-b-2 border-transparent hover:text-black hover:border-black dark:text-gray-400 dark:hover:text-gray-300 group">
<router-link to="/pokedex">Pokedex</router-link>
</a>
<a href="#"
class="inline-flex text-lg py-4 px-4 text-sm font-medium text-center text-white rounded-t-lg border-b-2 border-transparent hover:text-black hover:border-black dark:text-gray-400 dark:hover:text-gray-300 group">
<router-link to="/calculator">Calculator</router-link>
</a>
<a href="#"
class="inline-flex text-lg py-4 px-4 text-sm font-medium text-center text-white rounded-t-lg border-b-2 border-transparent hover:text-black hover:border-black dark:text-gray-400 dark:hover:text-gray-300 group">
<router-link to="/guesser">Guesser</router-link>
</a>
<a href="#"
class="inline-flex text-lg py-4 px-4 text-sm font-medium text-center text-white rounded-t-lg border-b-2 border-transparent hover:text-black hover:border-black dark:text-gray-400 dark:hover:text-gray-300 group">
<router-link to="/blackjack">Black Jack</router-link>
</a>
</div>
</div>
<!-- Mobile menu button -->
<div class="md:hidden flex items-center">
<button class="outline-none mobile-menu-button">
<svg class=" w-6 h-6 text-white hover:text-black "
x-show="!showMenu"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- mobile menu -->
<div class="md:hidden mobile-menu">
<ul class="text-center">
<li><a href="#"
class="block text-base px-2 py-4 text-white hover:text-black hover:bg-gray-200 transition duration-300">
<router-link class="navItem hover:text-black fs-5 w-full" to="/">Home</router-link>
</a></li>
<li><a href="#"
class="block text-base px-2 py-4 text-white hover:text-black hover:bg-gray-200 transition duration-300">
<router-link class="navItem hover:text-black fs-5 w-full" to="/pokedex">Pokedex</router-link>
</a></li>
<li><a href="#"
class="block text-base px-2 py-4 text-white hover:text-black hover:bg-gray-200 transition duration-300">
<router-link class="navItem hover:text-black fs-5 w-full" to="/calculator">Calculator
</router-link>
</a></li>
<li><a href="#"
class="block text-base px-2 py-4 text-white hover:text-black hover:bg-gray-200 transition duration-300">
<router-link class="navItem hover:text-black fs-5 w-full" to="/guesser">Guesser</router-link>
</a></li>
<li><a href="#"
class="block text-sm px-2 py-4 text-white hover:text-black hover:bg-gray-200 transition duration-300">
<router-link class="navItem hover:text-black fs-5 w-full" to="/blackjack">Black Jack</router-link>
</a></li>
</ul>
</div>
</nav>
<!-- <div>-->
<!-- <ul class="flex flex-wrap -mb-px items-center justify-center">-->
<!-- <li class="mr-2 font-sans">-->
<!-- <a href="#" class="inline-flex py-4 px-4 text-sm font-medium text-center text-white rounded-t-lg border-b-2 border-transparent hover:text-black hover:border-black dark:text-gray-400 dark:hover:text-gray-300 group">-->
<!-- &lt;!&ndash; use the router-link component for navigation. &ndash;&gt;-->
<!-- &lt;!&ndash; specify the link by passing the `to` prop. &ndash;&gt;-->
<!-- <router-link to="/">Home</router-link>-->
<!-- </a>-->
<!-- </li>-->
<!-- <li class="mr-2">-->
<!-- <a href="#" class="inline-flex py-4 px-4 text-sm font-medium text-center text-white rounded-t-lg border-b-2 border-transparent hover:text-black hover:border-black dark:text-gray-400 dark:hover:text-gray-300 group">-->
<!-- <router-link to="/pokedex">Pokedex</router-link>-->
<!-- </a>-->
<!-- </li>-->
<!-- <li class="mr-2">-->
<!-- <a href="#" class="inline-flex py-4 px-4 text-sm font-medium text-center text-white rounded-t-lg border-b-2 border-transparent hover:text-black hover:border-black dark:text-gray-400 dark:hover:text-gray-300 group">-->
<!-- <router-link to="/calculator">Calculator</router-link>-->
<!-- </a>-->
<!-- </li>-->
<!-- <li class="mr-2">-->
<!-- <a href="#" class="inline-flex py-4 px-4 text-sm font-medium text-center text-white rounded-t-lg border-b-2 border-transparent hover:text-black hover:border-black dark:text-gray-400 dark:hover:text-gray-300 group">-->
<!-- <router-link to="/guesser">Guesser</router-link>-->
<!-- </a>-->
<!-- </li>-->
<!-- <li class="mr-2">-->
<!-- <a href="#" class="inline-flex py-4 px-4 text-sm font-medium text-center text-white rounded-t-lg border-b-2 border-transparent hover:text-black hover:border-black dark:text-gray-400 dark:hover:text-gray-300 group">-->
<!-- <router-link to="/blackjack">Black Jack</router-link>-->
<!-- </a>-->
<!-- </li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
// jest.config.js
module.exports = {
moduleFileExtensions: ['js', 'json', 'vue'],
transform: {
'^.+\\.js$': 'babel-jest',
'^.+\\.vue$': 'vue-jest',
},
};
\ No newline at end of file
This diff is collapsed.
......@@ -7,12 +7,23 @@
"serve": "vite preview"
},
"dependencies": {
"@kyvg/vue3-notification": "^2.3.4",
"vue": "^3.2.23",
"vue-router": "^4.0.12",
"vuex": "^4.0.2"
},
"devDependencies": {
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.4",
"@vitejs/plugin-vue": "^1.9.3",
"vite": "^2.6.4"
"@vue/test-utils": "^2.0.0-rc.17",
"autoprefixer": "^10.4.0",
"babel-jest": "^26.6.3",
"jest": "^26.6.3",
"postcss": "^8.4.4",
"tailwindcss": "^2.2.19",
"vite": "^2.6.4",
"vue-jest": "^5.0.0-alpha.10",
"vue-sweetalert2": "^5.0.2"
}
}
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + FH + Vite" />
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Courier New", Courier, monospace;
}
body{
background-color: #42b983;
}
main {
font-family: "Poppins", sans-serif;
display: flex;
align-items: center;
justify-content: center;
}
/*.container{*/
/* padding: 0 40px;*/
/* width: 100%;*/
/*}*/
section{
display: flex;
}
.glass {
background: white;
min-height: 80vh;
background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
border-radius: 2rem;
z-index: 2;
backdrop-filter: blur(2rem);
display: flex;
}
.home-text , .home-img{
width: 50%;
padding: 15px;
}
.home-img .img-box {
max-width: 360px;
border-radius: 50%;
margin: auto;
}
.img-box img{
width: 100%;
border-radius: 50%;
}
<script setup>
import { ref } from 'vue'
defineProps({
msg: String
})
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<p>
Recommended IDE setup:
<a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
</p>
<p>
<a href="https://vitejs.dev/guide/features.html" target="_blank">
Vite Documentation
</a>
|
<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
</p>
<button type="button" @click="count++">count is: {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test hot module replacement.
</p>
</template>
<style scoped>
a {
color: #42b983;
}
</style>
<template>
<div class="container">
<h1>Calculator with VueJs</h1>
<div class="calculator">
<div id="screen">{{current || 0 }}</div>
<table>
<tr>
<td @click="restResult"><button class="btn">C</button></td>
<td v-for="op in operatorsSet" @click="setModifier(op)"><button class="btn">{{op}}</button></td>
</tr>
<tr>
<td v-for="no1 in operatorPlusKey1" @click="setModifier(no1)"><button class="btn">{{no1}}</button></td>
</tr>
<tr>
<td v-for="no2 in operatorPlusKey2" @click="setModifier(no2)"><button class="btn">{{no2}}</button></td>
</tr>
<tr>
<td v-for="no3 in operatorPlusKey3" @click="setModifier(no3)"><button class="btn">{{no3}}</button></td>
</tr>
<tr>
<td v-for="no4 in operatorPlusKey4" @click="setModifier(no4)"><button class="btn">{{no4}}</button></td>
<td @click="showResult"><button class="btn">=</button></td>
</tr>
<main class="mt-5">
<section class="glass w-10/12 mb-3 md:w-7/12">
<div class="container">
<h1>Calculator with VueJs</h1>
<div class="calculator mt-2 mb-3 w-4/5 md:w-3/5">
<div id="screen">{{current || 0 }}</div>
<table class="border w-full">
<tr>
<td @click="restResult"><button class="btn text-2xl md:text-3xl">C</button></td>
<td v-for="op in operatorsSet" @click="setModifier(op)"><button class="btn text-2xl md:text-3xl">{{op}}</button></td>
</tr>
<tr>
<td v-for="no1 in operatorPlusKey1" @click="setModifier(no1)"><button class="btn text-2xl md:text-3xl">{{no1}}</button></td>
</tr>
<tr>
<td v-for="no2 in operatorPlusKey2" @click="setModifier(no2)"><button class="btn text-2xl md:text-3xl">{{no2}}</button></td>
</tr>
<tr>
<td v-for="no3 in operatorPlusKey3" @click="setModifier(no3)"><button class="btn text-2xl md:text-3xl">{{no3}}</button></td>
</tr>
<tr>
<td v-for="no4 in operatorPlusKey4" @click="setModifier(no4)"><button class="btn text-2xl md:text-3xl">{{no4}}</button></td>
<td @click="showResult"><button class="btn">=</button></td>
</tr>
</table>
</div>
</div>
</section>
</main>
</table>
</div>
</div>
</template>
<script>
......@@ -73,10 +82,9 @@ table {
#screen {
border-radius: 21px;
border: 5px solid #244624;
border: 4px solid gray;
font-size: 34px;
height: 65px;
width: 456px;
padding: 5px;
display: flex;
align-items: center;
......@@ -86,16 +94,15 @@ table {
.btn {
border-radius: 20px;
font-size: 40px;
background: #d6cbd3;
width: 102px;
width: 80%;
height: 65px;
margin: 6px;
}
.calculator {
border: 4px solid #13695d;
background-color: #eca1a6;
border: 4px solid gray;
background-color: black;
padding: 23px;
border-radius: 53px;
display: inline-block;
......
<template>
<button @click="fetchPokemon">Catch Pokemon</button>
<ul>
<li v-for="(pokeman,index) in list" :key="index">
<p> {{pokeman.name}}</p>
<img :src="`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${ index + 1}.png`" :alt="pokeman.name">
</li>
</ul>
<div class="text-center p-2">
<div class="bg-gray-200 hover:bg-green-200 rounded-md hover:shadow-xl transition-shadow duration-100">
<img :src="imgString" alt="" class="inline" />
<h2 class="capitalize text-2xl">{{ name }}</h2>
</div>
</div>
</template>
<script>
export default{
name:'pokemonTag',
data(){
return{
list:[]
}
},
async mounted(){
const localData = localStorage.getItem('pokemon')
if(localData){
this.list = JSON.parse(localData)
return console.log("from storage")
}
const url = 'https://pokeapi.co/api/v2/pokemon?limit=151';
const data = await fetch(url);
const pokemon = await data.json();
localStorage.setItem('pokemon',JSON.stringify(pokemon.results))
console.log('from fetch')
this.list = pokemon.results;
export default {
name: 'Pokeman',
props: {
name: String,
index: Number,
},
// async fetchPokemon(){
// const url = 'https://pokeapi.co/api/v2/pokemon?limit=151'
//
// const data = await fetch(url);
// const pokemon = await data.json();
// this.list = await pokemon.results;
// }
computed: {
imgString() {
return `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${
this.index + 1
}.png`;
},
},
};
</script>
}
</script>
\ No newline at end of file
......@@ -4,12 +4,17 @@ import Home from '@/pages/Home.vue';
import Pokedex from '@/pages/Pokedex.vue';
import Calculator from '@/pages/Calculator.vue'
import Guesser from '@/pages/Guesser.vue';
import BlackJack from '@/pages/BlackJack.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/pokedex', component: Pokedex },
{ path: '/calculator', component: Calculator },
{ path: '/guesser', component: Guesser },
{ path: '/blackjack', component: BlackJack },
];
// Here we create our own Vue Router Instance
......
......@@ -21,6 +21,8 @@ export default {
);
const card = cards[0];
state.guesser.gussed = false;
console.log(state.guesser.gussed)
// +1 the guess counter
commit('incrementGuesses');
......
......@@ -11,6 +11,8 @@ const store = createStore({
points: 0,
guesses: 0,
nextGuess: undefined,
gussed:false,
},
};
},
......
......@@ -10,8 +10,11 @@ export default {
},
setNextGuess(state, color) {
state.guesser.nextGuess = color;
state.guesser.gussed = true;
console.log(state.guesser.gussed)
},
pushNewCard(state, newCard) {
state.guesser.cards.pop();
state.guesser.cards.push(newCard);
},
};
import { createApp } from 'vue';
import router from './lib/router';
import store from './lib/store';
import './assets/index.css';
import Notifications from '@kyvg/vue3-notification';
import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';
const app = createApp({});
app.use(router);
app.use(store);
app.use(Notifications)
app.use(VueSweetalert2)
app.mount('#app');
const btn = document.querySelector("button.mobile-menu-button");
const menu = document.querySelector(".mobile-menu");
btn.addEventListener("click", () => {
menu.classList.toggle("hidden");
});
\ No newline at end of file
<script>
const API = 'https://deckofcardsapi.com/api/deck';
export default {
data() {
return {
isGameRunning: false,
isGameEnded: false,
msgBoard: 'Make your move ...',
deck: [],
playerPoints: 0,
dealerPoints: 0,
playerHand: [],
dealerHand: [],
cardSwitch: [],
}
},
beforeMount() {
this.deck = this.generateCard();
this.cardSwitch = new Array(52).fill(false)
},
methods: {
// Generated Initial cards , 2 for player , 1 for dealer
startNewGame() {
this.isGameRunning = true;
for (let i = 0; i < 2; i++) {
this.playerHand.push(this.dealCard());
this.dealerHand.push(this.dealCard());
}
this.playerPoints = this.checkHandValue(this.playerHand)
this.dealerPoints = this.checkHandValue(this.dealerHand)
},
// Play new card
hit() {
this.playerHand.push(this.dealCard())