diff --git a/.eslintrc.js b/.eslintrc.js index d189a75..038baa3 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -12,5 +12,6 @@ module.exports = { "sourceType": "module" }, "rules": { + "no-unused-vars": "off", } } diff --git a/client/data/data.js b/client/data/data.js new file mode 100644 index 0000000..12e4ea0 --- /dev/null +++ b/client/data/data.js @@ -0,0 +1,14 @@ +export function jujeobData(nickName){ + return [ + `대한민국 ${nickName} 보유국`, + `나 몰랐는데 ${nickName} 좋아하네`, + `${nickName} MBTI 검사하면 Cute나온다며`, + `${nickName}? 솔직히 거품 아닌가요? 언빌리 '버블'`, + `${nickName} 사진 보다가 심장 녹을까봐 냉동실에서 사진 보는 중이에요`, + `${nickName} 넌 뭐랄까.. 마치 베를린 같아. 왜냐하면 치명적인 독일 수도.`, + `${nickName} 그거 기억나요? 사람들 한테 ${nickName} 좋아하는 사람 손 접어 했더니 지구가 반으로 접힌거\n그거 겨우겨우 되돌렸잖아요 나 그 때 내 눈 앞에 브라질 있어서 깜짝 놀랐잖아`, + `${nickName}씨 예민한 질문일 수 도 있지만 너무 궁금해서 물어봅니다.\n${nickName}씨는 천국에서 쫓겨난 건가요 자발적으로 내려온 건가요\n아님 추락 사고 였나요?`, + `짜장면한테 ${nickName} 음악을 들려 줬더니 짜장면이 저절로 비벼졌습니다.` + ] +} +// 배열로 리턴한다. \ No newline at end of file diff --git a/client/index.html b/client/index.html index 565bbe4..e800430 100644 --- a/client/index.html +++ b/client/index.html @@ -5,13 +5,36 @@ - - Document + + + jujeob Generator -

- hello - world -

+
제대로된 이름을 입력해주세요 !
+
클립보드에 복사 되었습니다 !
+ +
+

🤣 주접 생성기

+

주접 생성기를 통해 사랑을 전하세요

+ +
+ + + + + + +
이름 작성 후 주접 떨기 버튼을 눌러주세요.
+ + 👆 클릭시 클립보드에 복사됩니다! 👆 +
+
diff --git a/client/lib/dom/attr.js b/client/lib/dom/attr.js new file mode 100644 index 0000000..846c95b --- /dev/null +++ b/client/lib/dom/attr.js @@ -0,0 +1,116 @@ +import { getNode } from "./getNode.js"; +import { typeError, syntaxError } from "../error" + +/* + +// IIFE 패턴 + +const attr = (function(){ + function getAttr(node,prop){ + // node = '.first' + // prop = 'class' + + if(typeof node === 'string'){ + node = getNode(node); + } + + return node.getAttribute(prop); + + } + + + + // computed property + function setAttr(node,prop,value){ + // validation : 확인 + if(typeof node === 'string') node = getNode(node); + if(typeof prop !== 'string') throw new TypeError('setAttr 함수의 두 번째 인자는 문자 타입 이어야 합니다.') + + if(prop.includes('data')){ + let rest = prop.slice(5); + node.dataset[rest] = value; + } + + if(!value) throw new SyntaxError('setAttr 함수의 세 번째 인자는 필수값입니다.') + + node.setAttribute(prop,value); + + } + + + + + // const attr = (node,prop,value) => !value ? getAttr(node,prop) : setAttr(node,prop,value); + + function attr(node,prop,value){ + + // if(!value){ + // return getAttr(node,prop); + // }else{ + // setAttr(node,prop,value); + // } + + return !value ? getAttr(node,prop) : setAttr(node,prop,value); + + + } + + // incapsulation // 캡슐화 + // 정보 은닉 + + + return attr + +})() + + +// incapsulation // 캡슐화 +// 정보 은닉 + + +attr() + + */ + +function getAttr(node, prop) { + // node = '.first' + // prop = 'class' + + if (typeof node === 'string') { + node = getNode(node); + } + + return node.getAttribute(prop); +} + +// computed property +function setAttr(node, prop, value) { + // validation : 확인 + if (typeof node === 'string') node = getNode(node); + if (typeof prop !== 'string') + throw new TypeError( + 'setAttr 함수의 두 번째 인자는 문자 타입 이어야 합니다.' + ); + + if (prop.includes('data')) { + let rest = prop.slice(5); + node.dataset[rest] = value; + } + + if (!value) + throw new SyntaxError('setAttr 함수의 세 번째 인자는 필수값입니다.'); + + node.setAttribute(prop, value); +} + +// const attr = (node,prop,value) => !value ? getAttr(node,prop) : setAttr(node,prop,value); + +export function attr(node, prop, value) { + // if(!value){ + // return getAttr(node,prop); + // }else{ + // setAttr(node,prop,value); + // } + + return !value ? getAttr(node, prop) : setAttr(node, prop, value); +} diff --git a/client/lib/dom/bindEvent.js b/client/lib/dom/bindEvent.js new file mode 100644 index 0000000..efc73b7 --- /dev/null +++ b/client/lib/dom/bindEvent.js @@ -0,0 +1,19 @@ +import { getNode } from "./getNode.js"; +import { typeError, syntaxError } from "../error" + + +export function bindEvent(node,type,handler){ + if(typeof node === 'string'){ + node = getNode(node); + } + + if(!(/mouseenter|click|mousemove|mouseleave/g.test(type))){ + typeError('bindEvent 함수의 두 번째 인자는 유효한 이벤트 타입 이어야 합니다.') + } + + + node.addEventListener(type,handler); + + return ()=> node.removeEventListener(type,handler); + +} diff --git a/client/lib/dom/clearContents.js b/client/lib/dom/clearContents.js new file mode 100644 index 0000000..74f4fcc --- /dev/null +++ b/client/lib/dom/clearContents.js @@ -0,0 +1,6 @@ +import { getNode } from "./getNode.js"; + +export function clearContents(node){ + if(typeof node === 'string') node = getNode(node); + node.textContent = ''; +} diff --git a/client/lib/dom/css.js b/client/lib/dom/css.js new file mode 100644 index 0000000..d10dc15 --- /dev/null +++ b/client/lib/dom/css.js @@ -0,0 +1,88 @@ +import { getNode } from "./getNode.js"; +import { typeError, syntaxError } from "../error" + + + +export function addClass(node,className){ + + if(typeof node === 'string') node = getNode(node); + + if(typeof className !== 'string'){ + typeError('addClass 함수의 두 번째 인자는 문자 타입 이어야 합니다.'); + } + + node.classList.add(className) + +} + +// 변경하기 : 대상의 클래스를 지운다. +export function removeClass(node,className){ + if(typeof node === 'string') node = getNode(node); + + if(!className){ + node.className = '' + return; + } + + if(typeof className !== 'string'){ + typeError('removeClass 함수의 두 번째 인자는 문자 타입 이어야 합니다.'); + } + + node.classList.remove(className) +} + + +export function toggleClass(node,className){ + if(typeof node === 'string') node = getNode(node); + if(typeof className !== 'string'){ + typeError('toggleClass 함수의 두 번째 인자는 문자 타입 이어야 합니다.'); + } + + node.classList.toggle(className) +} + + + + + + +function getCss(node,prop){ + if(typeof node === 'string'){ + node = getNode(node); + } + + if(!(prop in document.body.style)){ + syntaxError('getCSS 함수의 두 번째 인자인 prop은 유효한 css 속성이 아닙니다.') + } + return getComputedStyle(node)[prop] +} + + +// jQuery + +// 대상에게 원하는 css 속성을 추가 = set +function setCss(node,prop,value){ + if(typeof node === 'string'){ + node = getNode(node); + } + if(!(prop in document.body.style)){ + syntaxError('setCSS 함수의 두 번째 인자인 prop은 유효한 css 속성이 아닙니다.') + } + if(!value){ + syntaxError('setCSS 함수의 세 번째 인자는 필수값 입니다.') + } + + // if(value.replace(/\s+/g,'') === ''){ + + // } + + node.style[prop] = value; + +} + + +export const css = (node,prop,value) => { + return !value ? getCss(node,prop) : setCss(node,prop,value) +} + + \ No newline at end of file diff --git a/client/lib/dom/getInputValue.js b/client/lib/dom/getInputValue.js new file mode 100644 index 0000000..0224234 --- /dev/null +++ b/client/lib/dom/getInputValue.js @@ -0,0 +1,9 @@ +import { getNode } from "./getNode.js"; +import { typeError, syntaxError, refError} from "../error" + + +export function getInputValue(node){ + if(typeof node === 'string') node = getNode(node); + if(node.tagName !== 'INPUT') refError('getInputValue 함수는 INPUT ELEMENT만 허용합니다.') + return node.value +} diff --git a/client/lib/dom/getNode.js b/client/lib/dom/getNode.js new file mode 100644 index 0000000..4907aec --- /dev/null +++ b/client/lib/dom/getNode.js @@ -0,0 +1,22 @@ + +export function getNode(node){ + if(typeof node !== 'string'){ + throw new Error('getNode 함수의 인자는 문자 타입 이여야 합니다.'); + } + + // if(!isString(node)) typeError('에러가 발생했습니다.'); + + return document.querySelector(node) +} + + +function getNodes(node){ + if(typeof node !== 'string'){ + throw new Error('getNode 함수의 인자는 문자 타입 이여야 합니다.'); + } + + return document.querySelectorAll(node) +} + + + diff --git a/client/lib/dom/index.js b/client/lib/dom/index.js new file mode 100644 index 0000000..3eac07c --- /dev/null +++ b/client/lib/dom/index.js @@ -0,0 +1,11 @@ + +// re-export + + +export * from './css.js' +export * from './attr.js' +export * from './insert.js' +export * from './getNode.js' +export * from './bindEvent.js' +export * from './getInputValue.js' +export * from './clearContents.js' \ No newline at end of file diff --git a/client/lib/dom/insert.js b/client/lib/dom/insert.js new file mode 100644 index 0000000..d05e77e --- /dev/null +++ b/client/lib/dom/insert.js @@ -0,0 +1,36 @@ +import { getNode } from "./getNode.js"; +import { typeError, syntaxError, refError } from "../error" + + +export function insertBefore(node, text) { + if (typeof node === 'string') node = getNode(node); + + if (node.nodeType !== document.ELEMENT_NODE) { + typeError('insertBefore 함수의 첫 번째 인자는 ELEMENT 노드여야 합니다.'); + } + + node.insertAdjacentHTML('beforebegin', text); +} + +export function insertFirst(node, text) { + if (typeof node === 'string') node = getNode(node); + if (node.nodeType !== document.ELEMENT_NODE) typeError('insertFirst 함수의 첫 번째 인자는 ELEMENT 노드여야 합니다.'); + node.insertAdjacentHTML('afterbegin', text); +} + + +export function insertLast(node, text) { + if (typeof node === 'string') node = getNode(node); + if (node.nodeType !== document.ELEMENT_NODE) { + refError('insertLast 함수의 첫 번째 인자는 ELEMENT 노드여야 합니다.'); + } + node.insertAdjacentHTML('beforeend', text); +} + +export function insertAfter(node, text) { + if (typeof node === 'string') node = getNode(node); + if (node.nodeType !== document.ELEMENT_NODE) { + refError('insertAfter 함수의 첫 번째 인자는 ELEMENT 노드여야 합니다.'); + } + node.insertAdjacentHTML('afterend', text); +} diff --git a/client/lib/dom/showAlert.js b/client/lib/dom/showAlert.js new file mode 100644 index 0000000..d3c3ce9 --- /dev/null +++ b/client/lib/dom/showAlert.js @@ -0,0 +1,18 @@ +import { getNode } from './getNode.js'; +import { addClass, removeClass } from './css.js'; + +export function showAlert(node, text , timeout) { + + if(typeof node === 'string') { + node = getNode(node); + node.textContext = "text"; + + + addClass(node, 'is-active'); + setTimeout(() => { + removeClass(node, 'is-active'); + }, timeout); + + } + +} \ No newline at end of file diff --git a/client/lib/error/index.js b/client/lib/error/index.js new file mode 100644 index 0000000..6803976 --- /dev/null +++ b/client/lib/error/index.js @@ -0,0 +1,5 @@ + + +export * from './refError.js' +export * from './typeError.js' +export * from './syntaxError.js' \ No newline at end of file diff --git a/client/lib/error/refError.js b/client/lib/error/refError.js new file mode 100644 index 0000000..4cc4cc9 --- /dev/null +++ b/client/lib/error/refError.js @@ -0,0 +1,4 @@ +// 📂 refError.js +export function refError(message){ + throw new ReferenceError( message ); +} diff --git a/client/lib/error/syntaxError.js b/client/lib/error/syntaxError.js new file mode 100644 index 0000000..308399d --- /dev/null +++ b/client/lib/error/syntaxError.js @@ -0,0 +1,4 @@ +// 📂 syntaxError.js +export function syntaxError(message){ + throw new SyntaxError( message ); +} diff --git a/client/lib/error/typeError.js b/client/lib/error/typeError.js new file mode 100644 index 0000000..4686853 --- /dev/null +++ b/client/lib/error/typeError.js @@ -0,0 +1,14 @@ + +// 📂 typeError.js +export function typeError(message){ + throw new TypeError( message ); +} + + + + + + + + + diff --git a/client/lib/index.js b/client/lib/index.js new file mode 100644 index 0000000..5f90d69 --- /dev/null +++ b/client/lib/index.js @@ -0,0 +1,5 @@ + +// re-export +export * from './dom/index.js' +export * from './error/index.js' +export * from './math/index.js' \ No newline at end of file diff --git a/client/lib/math/getRandom.js b/client/lib/math/getRandom.js new file mode 100644 index 0000000..eeb9f16 --- /dev/null +++ b/client/lib/math/getRandom.js @@ -0,0 +1,15 @@ +import { typeError} from '../error/typeError.js'; + +export function getRandom(n) { + + if(!n ) { + typeError("매개변수 1개 받아라 !! ") + } + + if( typeof n !== 'number') { + typeError("숫자로 입력하세요"); + } + + + return Math.round(Math.random() * n); +} \ No newline at end of file diff --git a/client/lib/math/index.js b/client/lib/math/index.js new file mode 100644 index 0000000..e338007 --- /dev/null +++ b/client/lib/math/index.js @@ -0,0 +1,3 @@ + + +export * from './sum.js' \ No newline at end of file diff --git a/client/lib/math/sum.js b/client/lib/math/sum.js new file mode 100644 index 0000000..578a46d --- /dev/null +++ b/client/lib/math/sum.js @@ -0,0 +1,3 @@ +export function sum(valueA,valueB){ + return valueA + valueB; +} diff --git a/client/lib/utils/typeOf.js b/client/lib/utils/typeOf.js new file mode 100644 index 0000000..18785cb --- /dev/null +++ b/client/lib/utils/typeOf.js @@ -0,0 +1,6 @@ +export +function isNumericString(data) { + data = Number(data); // asd123 + + return (!(isNaN(data))); //숫자면 false //문자와 숫자 true +} \ No newline at end of file diff --git a/client/main.js b/client/main.js index 3fff1d8..ce6f2ed 100644 --- a/client/main.js +++ b/client/main.js @@ -1,2 +1,49 @@ +import {getNode} from './lib/dom/getNode.js'; +import {jujeobData} from './data/data.js'; +import { getRandom } from './lib/math/getRandom.js'; +import { isNumericString } from './lib/utils/typeOf.js'; +import { showAlert } from './lib/dom/showAlert.js'; -console.log("hello") +const submit = getNode('#submit'); +const nameField = getNode('#nameField'); +const result = getNode('.result'); + + +console.log ( isNumericString('as123') ); + + +function clickSubmitHandler(e) { + e.preventDefault(); + let name = nameField.value; + + //리턴 값이 배열이니깐 !! + let list = jujeobData(name); + //console.log(list); + + if(!name) { + + showAlert('.alert', '올바른 정보를 입력해주세요', 3000); + } + if(isNumericString(name)) { + console.log("숫자야!"); + showAlert('.alert', "에러입니다", 2000); + } + + let pick = list[getRandom(list.length-1)]; + console.log(pick); + + // console.log(list); + + // console.log( name); + + //화면에 보여주는 역할!!!~~ 화면에 보여주자 ~ + + + result.textContent=""; + result.insertAdjacentHTML('afterbegin', pick); + + + +} + +submit.addEventListener('click', clickSubmitHandler); \ No newline at end of file diff --git a/client/style.css b/client/style.css index 0f4eafd..5680e17 100644 --- a/client/style.css +++ b/client/style.css @@ -1,11 +1,116 @@ -h1 { - height: 100vh; - display: flex; - align-items: center; - justify-content: center; - /* margin: 0; +body { + background: #fefefe; +} + +.container { position: absolute; left: 50%; - top: 50%; - transform: translate(-50%, -50%); */ -} \ No newline at end of file + transform: translateX(-50%); + top: 5vh; + text-align: center; + min-width: 350px; +} + +h2 { + font-size: 3rem; +} + +form { + position: relative; +} + +input[type="text"] { + font-size: 1rem; + padding: 0.5rem 1rem; + margin: 2rem 1rem 3rem 1rem; +} + +input[type="text"]::placeholder { + color: rgb(204, 204, 204); +} + +input[type="submit"] { + font-size: 1.1rem; + padding: 0.5rem; + cursor: pointer; + background: hsl(42, 100%, 50%); + border: none; + border-radius: 0.3rem; +} + +.result { + max-width: 90vw; + padding: 1.3rem; + font-size: 1.3rem; + background: gray; + color: white; + border-radius: 0.5rem; + /* white-space: nowrap; */ + margin-bottom: 1rem; + cursor: pointer; + overflow: hidden; + transition: background 0.3s; +} + +.result:hover { + background: rgb(77, 77, 77); +} + +.alert { + padding: 2rem; + + position: fixed; + font-weight: bold; + color: white; + transition: all 0.3s; +} + +.alert-success { + border-radius: 1rem 0 0 1rem; + background: rgb(0, 219, 230); + right: 0; + top: 0; + transform: translateX(100%); +} + +.alert-error { + border-radius: 0 1rem 1rem 0; + background: rgb(222, 0, 137); + left: 0; + top: 0; + transform: translateX(-100%); +} + +.alert.is-active { + transform: translateX(0); +} + +.shake { + animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; + transform: translate3d(0, 0, 0); + backface-visibility: hidden; + perspective: 1000px; +} + +@keyframes shake { + 10%, + 90% { + transform: translate3d(-1px, 0, 0); + } + + 20%, + 80% { + transform: translate3d(2px, 0, 0); + } + + 30%, + 50%, + 70% { + transform: translate3d(-4px, 0, 0); + } + + 40%, + 60% { + transform: translate3d(4px, 0, 0); + } +}