prgrms-web-devcourse · Yeewon · Sep 6, 2021 · Sep 7, 2021 · Sep 14, 2021 · Sep 15, 2021
diff --git a/Colors/index.css b/Colors/index.css
@@ -0,0 +1,33 @@
+body {
+    box-sizing: border-box;
+    margin: 0px;
+}
+.container {
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.btn {
+    background-color: transparent;
+    color: #343a40;
+    text-align: center;
+    vertical-align: center;
+    cursor: pointer;
+    font-weight: 400px;
+    font-size: 1rem;
+    line-height: 1.5;
+    border-radius: 5px;
+    padding: 10px;
+    display: inline-block;
+}
+
+.btn:focus {
+    box-shadow: 0 0 0 0.2rem rgb(52 58 64 / 50%);
+}
+
+.btn:hover {
+    background-color: #343a40;
+    color: white;
+}
diff --git a/Colors/index.html b/Colors/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" type="text/css" href="./index.css" />
+        <title>Colors</title>
+    </head>
+    <body>
+        <div class="container">
+            <div class="item">
+                <button class="btn">Clik Me!</button>
+            </div>
+        </div>
+        <script type="text/javascript" src="./index.js"></script>
+    </body>
+</html>
diff --git a/Colors/index.js b/Colors/index.js
@@ -0,0 +1,4 @@
+document.querySelector('.btn').addEventListener('click', () => {
+    const colorCode = '#' + Math.round(Math.random() * 0xffffff).toString(16)
+    document.querySelector('.container').style = `background-color: ${colorCode}`
+})
diff --git a/Hex colors gradient/index.html b/Hex colors gradient/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="./src/css/style.css" />
+        <title>Hex Colors</title>
+    </head>
+    <body>
+        <main>
+            <div class="container">
+                <div id="hex-colors">
+                    <h1>Click the button bellow to generate a random gradient hex color combination</h1>
+                </div>
+            </div>
+        </main>
+        <script src="/src/main.js" type="module"></script>
+    </body>
+</html>
diff --git a/Hex colors gradient/src/css/style.css b/Hex colors gradient/src/css/style.css
@@ -0,0 +1,74 @@
+body {
+    box-sizing: border-box;
+    font-family: 'Comfortaa', sursive;
+    margin: 0px;
+}
+
+.container {
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+h1 {
+    text-transform: uppercase;
+}
+
+h2 {
+    text-transform: lowercase;
+}
+
+h1,
+h2 {
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    line-height: 1.2;
+    animation: change 5s infinite alternate;
+    padding: 50px;
+}
+
+@keyframes change {
+    0% {
+        color: #ffffff;
+    }
+    20% {
+        color: #cccccc;
+    }
+
+    40% {
+        color: #999999;
+    }
+    60% {
+        color: #666666;
+    }
+    80% {
+        color: #333333;
+    }
+    100% {
+        color: #ffffff;
+    }
+}
+
+.btn {
+    display: inline-block;
+    font-weight: 400;
+    font-size: 1rem;
+    border: 1px solid transparent;
+    border-radius: 0.25rem;
+    padding: 10px 20px;
+    cursor: pointer;
+    background-color: white;
+}
+
+.btn-light {
+    color: #212529;
+    background-color: #e2e6ea;
+    border-color: #dae0e5;
+    box-shadow: 0 0 0 0.2rem rgb(216 217 219 / 50%);
+}
+
+.btn:hover {
+    background-color: #e2e6ea;
+}
diff --git a/Hex colors gradient/src/js/App.js b/Hex colors gradient/src/js/App.js
@@ -0,0 +1,47 @@
+import Button from './Button.js';
+
+export default function App({$target}) {
+    const $background = document.createElement('h2');
+    $target.appendChild($background);
+
+    const selectRandomColor = () => {
+        return '#' + Math.round(Math.random() * 0xffffff).toString(16);
+    };
+
+    this.state = {
+        hexcode1: '#ffffff',
+        hexcode2: '#ffffff',
+    };
+
+    this.setState = (nextState) => {
+        this.state = nextState;
+        this.render();
+    };
+
+    new Button({
+        $target,
+        onClick: () => {
+            const nextHexCode = {
+                hexcode1: selectRandomColor(),
+                hexcode2: selectRandomColor(),
+            };
+            this.setState(nextHexCode);
+        },
+    });
+
+    this.render = () => {
+        const {hexcode1, hexcode2} = this.state;
+
+        $background.innerHTML = `
+            background: linear-gradient(to right,
+            <span id="hexcode1">${hexcode1}</span>
+            ,
+            <span id="hexcode2">${hexcode2}</span>
+            ); 
+        `;
+
+        document.querySelector('main').style = `background: linear-gradient(to right, ${hexcode1} , ${hexcode2}`;
+    };
+
+    this.render();
+}
diff --git a/Hex colors gradient/src/js/Button.js b/Hex colors gradient/src/js/Button.js
@@ -0,0 +1,18 @@
+export default function Button({$target, onClick}) {
+    const $submitButton = document.createElement('button');
+    $submitButton.id = 'submit';
+    $submitButton.className = 'btn';
+    $submitButton.textContent = 'Click Me';
+
+    $target.appendChild($submitButton);
+
+    let isInitialize = true;
+
+    $submitButton.addEventListener('click', (e) => {
+        if (isInitialize) {
+            $submitButton.className += ' btn-light';
+            isInitialize = false;
+        }
+        onClick();
+    });
+}
diff --git a/Hex colors gradient/src/main.js b/Hex colors gradient/src/main.js
@@ -0,0 +1,5 @@
+import App from './js/App.js';
+
+const $target = document.querySelector('#hex-colors');
+
+new App({$target});
diff --git a/README.md b/README.md
@@ -1 +1,14 @@
-# FE-JS-miniproject-study
+# 25 Beginner JavaScript Project Ideas
+## 규칙
+- 브랜치명은 JSmini_lia 형식으로 만들어 주세요.
+- 매주 주어진 양의 project를 완성 후 project 단위로 PR해 주세요!
+    - [Project1/리아] 프로젝트명
+    - 예) [Project1/리아] Colors
+
+## 1회차(~9/12)
+### Project 1 Colors
+![image](https://user-images.githubusercontent.com/64760270/132218819-23e9edb1-9596-4a31-9618-5e7e6adeecb0.png)
+### Project 2 Hex colors gradient
+![image](https://user-images.githubusercontent.com/64760270/132218843-b12f04ef-8259-43da-8a82-4ae9d48446cb.png)
+### Project 3 Random quote generator
+![image](https://user-images.githubusercontent.com/64760270/132218869-39280963-64e9-4ac6-a074-c8cb4b984927.png)
diff --git a/Random quote generator/index.html b/Random quote generator/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Quote Generator</title>
+    <link rel="stylesheet" href="src/css/index.css">
+</head>
+<body>
+    <main>
+        <div class="container">
+            <div class="quotes-container"></div>
+        </div>
+    </main>
+    <script src="/src/main.js" type="module"></script>
+</body>
+</html>
diff --git a/Random quote generator/src/css/index.css b/Random quote generator/src/css/index.css
@@ -0,0 +1,71 @@
+body {
+    box-sizing: border-box;
+    font-family: 'Comfortaa', sursive;
+    margin: 0px;
+}
+
+.container {
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    background: radial-gradient(circle, #5181b0 200px, #605ea6, #6649a0);
+}
+
+.inner-quotes-container {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    min-height: 400px;
+    width: 900px;
+    padding: 0 25px;
+    border-radius: 10px;
+    background-color: #f4edea;
+    border: 10px solid #06bdc1;
+    box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 90%);
+}
+
+.btn {
+    display: inline-block;
+    font-weight: 400;
+    color: #212529;
+    text-align: center;
+    cursor: pointer;
+    vertical-align: middle;
+    background-color: transparent;
+    border: 1px solid transparent;
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    border-radius: 0.25rem;
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.btn-info {
+    margin: 30px;
+    color: #fff;
+    background-color: #17a2b8;
+    border-color: #17a2b8;
+}
+
+.btn-info:hover {
+    color: #fff;
+    background-color: #138496;
+    border-color: #117a8b;
+}
+
+.inner-quotes-container p {
+    font-size: 1.5rem;
+    color: black;
+}
+
+.inner-quotes-container h3 {
+    font-size: 2rem;
+    color: black;
+    font-family: 'Dancing Script', cursive;
+}
diff --git a/Random quote generator/src/js/App.js b/Random quote generator/src/js/App.js
@@ -0,0 +1,32 @@
+import {request} from './api.js';
+import Button from './Button.js';
+import Quote from './Quote.js';
+
+export default function App({$target}) {
+    this.state = {
+        quote: '',
+        author: '',
+    };
+
+    this.setState = (nextState) => {
+        this.state = nextState;
+        this.render();
+    };
+
+    const quote = new Quote({
+        $target,
+        initialState: this.state,
+    });
+
+    new Button({
+        $target,
+        onClick: async () => {
+            const randomQuote = await request('');
+            this.setState(randomQuote);
+        },
+    });
+
+    this.render = () => {
+        quote.setState(this.state);
+    };
+}
diff --git a/Random quote generator/src/js/Button.js b/Random quote generator/src/js/Button.js
@@ -0,0 +1,15 @@
+export default function Button({$target, onClick}) {
+    const $quoteButton = document.createElement('div');
+    $quoteButton.className = 'quote-btn';
+    $target.appendChild($quoteButton);
+
+    this.render = () => {
+        $quoteButton.innerHTML = `
+            <button class="btn btn-info" id="generate">Generator Quote</button>
+        `;
+    };
+
+    this.render();
+
+    $quoteButton.addEventListener('click', onClick);
+}