본문 바로가기
WINK-(Web & App)/HTML & CSS & JS 스터디

[2023 신입부원 기초 스터디] 최종은 #8주차 - 배우긴했으니예제를만들어보자

최종은04 2023. 6. 30. 15:09
반응형

JS기초기에 HTML, CSS 부분은 강사분이 깃허브에 올려주셨다

사랑합니다🤸🏻‍♂️

 

1.모달 만들기

 

우선 모달이란? 기존의 브라우저 페이지 위에 새로운 레이어를 까는것이다

이를 HTML, CSS, JS로 만들어보게따

학습목표: HTML요소를 선택하여 JS에서 처리하긔 -> 버튼을 클릭하면 모달창이 나오게 만들긔

<!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="style.css" />
    <title>Document</title>
  </head>
  <body>
    <button class="open">👉눌러보라우</button>

    <div class="container">
      <div class="modal">
        <h2>🕺🕺🕺🕺🕺</h2>
        <p>둠칫둠칫</p>
        <button class="close">Close</button>
      </div>
    </div>

    <script src="./index.js"></script>
  </body>
</html>

이건 HTML

 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  display: flex;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

button {
  height: 50px;
  border-radius: 15px;
  border: none;
  width: 200px;
  color: white;
  background-color: #3498db;
  cursor: pointer;
  font-size: 1rem;
}

button:hover {
  background-color: #2980b9;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.modal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 80%;
  row-gap: 15px;
  padding: 30px;
  border: 1px solid lightgray;
  border-radius: 7px;
  box-shadow: 3px 5px 15px rgba(0, 0, 0, 0.2);
}

이건 CSS

 

const openButton = document.querySelector('.open');
const container = document.querySelector('.container');
const closeButton = document.querySelector('.close');
//먼저 사용할 요소들을 먼저 가지고온다


openButton.addEventListener('click', () => {
  container.style.display = 'flex';
  openButton.style.display = 'none';
});
//눌러보라우 버튼을 누르면 CSS에서 display 를 flex로 바꾸고 버튼은 안보이게함

closeButton.addEventListener('click', () => {
  container.style.display = 'none';
  openButton.style.display = 'block';
});
//close 버튼을 누르면 CSS에서 display 를 none로 바꾸고 버튼을 다시 보이게함

//EventListener을 이용해 해당 버튼을 누르면 지정된 이벤트(모달창이 보이게/안보이게)를 실행하게 해준다

그리고 마지막으로 JS

 

 

2.할 일 앱 만들기

 

학습목표: input위젯에 쓴 글을 등록 버튼을 누르면 ul에 등록함

 

 

 

<!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="style.css" />
    <title>Document</title>
  </head>
  <body>
    <form>
      <input type="text" placeholder="할 일을 입력하세요." />
      <button>등록</button>
    </form>

    <ul></ul>

    <script src="./index.js"></script>
  </body>
</html>

이건 HTML

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  padding: 30px;
}

form {
  width: 100%;
  height: 50px;
  display: flex;
  column-gap: 10px;
}

input,
button {
  border: 1px solid lightgrey;
  border-radius: 8px;
}

input {
  width: 100%;
  padding: 0 15px;
  outline: none;
}

button {
  width: 100px;
  background-color: #3498db;
  color: white;
}

button:hover {
  background-color: #2980b9;
}

ul {
  list-style: none;
  margin: 20px 10px;
}

li {
  border-bottom: 1px dotted lightgray;
  padding-bottom: 7px;
  margin-bottom: 7px;
}

이건 CSS

const form = document.querySelector('form');
const input = document.querySelector('input');
const ul = document.querySelector('ul');
//사용할 요소를 가져오고

form.addEventListener('submit', (event) => {
  event.preventDefault();
//버튼을 부르고
  if (input.value !== '')
  //input값이 뭐라도 있으면?
  {
    const li = document.createElement('li');
    li.innerText = input.value;
    ul.appendChild(li);
    input.value = '';
    ul에 등록하고 input을 초기화함
  }
});

그리고 마지막으로 JS

 

 

 

 

 

3.디지털 시계 만들기

 

학습목표: date 객체를 이용해 현재 시간을 초단위로 표시

 

<!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="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="time hour">00</div>
    <!--시-->
    <div class="divider">:</div>
    <div class="time min">00</div>
    <!--분-->
    <div class="divider">:</div>
    <div class="time sec">00</div>
    <!--초-->

    <script src="./index.js"></script>
  </body>
</html>

HTML

 

 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  column-gap: 10px;
  font-size: 48px;
  font-weight: bold;
}

.time {
  width: 80px;
  text-align: center;
  letter-spacing: 5px;
}

CSS

 

 

const hour = document.querySelector('.hour');
const min = document.querySelector('.min');
const sec = document.querySelector('.sec');
//사용할 요소 가져오기

function clock() {
  const now = new Date();
  //현재 시간 가져오기
  hour.innerText = now.getHours();
  //현재 시
  min.innerText = now.getMinutes();
  //현재 분
  sec.innerText = now.getSeconds();
  //현재 초
}

setInterval(clock, 1000);
//일정 시간마다 동일한 작업 반복하기 위해 사용

JS!

 

 

 

4.가위바위보 게임 만들기

 

학습 목표: random을 사용해 컴퓨터의 값을 설정한 후 이를 이용해 가위바위보 게임 만들기

 

<!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="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="block">
        <h3>컴퓨터 선택 :</h3>
        <p class="computer-choice">??</p>
      </div>
      <div class="block">
        <h3>당신 선택 :</h3>
        <p class="you-choice">??</p>
      </div>
    </div>

    <div class="buttons">
      <button class="red">가위</button>
      <button class="blue">바위</button>
      <button class="green">보</button>
    </div>

    <div class="result">가위바위보!</div>

    <script src="./index.js"></script>
  </body>
</html>

HTML

 

 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  display: flex;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 30px;
}

.container {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.block {
  display: flex;
  column-gap: 10px;
  align-items: center;
}

button {
  width: 70px;
  height: 70px;
  border-radius: 15px;
  border: none;
  color: white;
  font-size: 1.5em;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.buttons {
  display: flex;
  column-gap: 15px;
}

.red {
  background-color: #e74c3c;
}

.red:hover {
  background-color: #c0392b;
}

.blue {
  background-color: #3498db;
}

.blue:hover {
  background-color: #2980b9;
}

.green {
  background-color: #1abc9c;
}

.green:hover {
  background-color: #16a085;
}

.result {
  font-size: 2em;
  font-weight: bold;
}

CSS

 

 

 

const buttons = document.querySelectorAll('button');
const computerChoice = document.querySelector('.computer-choice');
const userChoice = document.querySelector('.you-choice');
const winner = document.querySelector('.result');
//사용할 요소를 가져옴


const result = ['가위', '바위', '보'];

function show(user, computer, message) {
  computerChoice.innerText = computer;
  userChoice.innerText = user;
  winner.innerText = message;
}
//내 선택과 컴퓨터의 선택을 보여주고, 게임의 결과를 보여줌

function game(user, computer) {
  let message;

  if (user === computer) 
  {
    message = '무승부';
  } 
  //무승부
  
  else {
    switch (user + computer) {
      case '가위바위':
      case '바위보':
      case '보가위':
        message = '컴퓨터 승리!';
        break;
      //"내선택+컴퓨터의선택" 문자열이 위와 같으면 컴퓨터의 승리

      case '가위보':
      case '바위가위':
      case '보바위':
        message = '당신 승리!';
        break;

      //"내선택+컴퓨터의선택" 문자열이 위와 같음 나의 승리
    }
  }

  show(user, computer, message);
}

function play(event) {
  const user = event.target.innerText;
  const randomIndex = Math.floor(Math.random() * 3);
  const computer = result[randomIndex];
  game(user, computer);
}
//버튼을 누르면 컴퓨터의 선택을 정하고 내 선택을 저장한 후 game으로 넘어가서 비교함

buttons.forEach((button) => {
  button.addEventListener('click', play);
});

JS!!!!

코드가 길어보이지만 별거없다.(game에서 비교하는 부분때문에 길어보임)

 

 

5. 할 일 앱 upgrade

 

2번에 만든 할일앱에 삭제, 저장기능을 추가하기

 

<!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="style.css" />
    <title>Document</title>
  </head>
  <body>
    <form>
      <input type="text" placeholder="할 일을 입력하세요." />
      <button>등록</button>
    </form>

    <ul></ul>

    <script src="./index.js"></script>
  </body>
</html>

HTML

 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  padding: 30px;
}

form {
  width: 100%;
  display: flex;
  column-gap: 10px;
}

input,
button {
  border: 1px solid lightgrey;
  border-radius: 8px;
}

input {
  width: 100%;
  padding: 0 15px;
  outline: none;
}

button {
  width: 100px;
  height: 35px;
  background-color: #3498db;
  color: white;
}

button:hover {
  background-color: #2980b9;
}

ul {
  list-style: none;
  margin: 20px 10px;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dotted lightgray;
  padding-bottom: 7px;
  margin-bottom: 7px;
}

CSS

 

const form = document.querySelector('form');
const input = document.querySelector('input');
const ul = document.querySelector('ul');

let todos = [];

function save() {
  localStorage.setItem('todos', JSON.stringify(todos));
}
//todos에 값들을 저장함

function delItem(event) {
  const target = event.target.parentElement;

  todos = todos.filter((todo) => todo.id !== parseInt(target.id));
  save();
  target.remove();
}
//삭제버튼을 누르면 지워지게

function addItem(todo) {
  if (todo.text !== '') {
    const li = document.createElement('li');
    const button = document.createElement('button');
    const span = document.createElement('span');

    button.innerText = '삭제';
    button.addEventListener('click', delItem);
    span.innerText = todo.text;
    //삭제 버튼 추가

    li.appendChild(span);
    li.appendChild(button);
    //li태그에 span, button을 추가
    ul.appendChild(li);
    li.id = todo.id;
  }
}

function handler(event) {
  event.preventDefault();

  const todo = {
    id: Date.now(),
    text: input.value,
  };

  todos.push(todo);
  addItem(todo);
  save();
  //등록 버튼을 누르면 todo에 추가하고 저장함
  input.value = '';
  //입력칸 초기화
}

function init() {
  const userTodos = JSON.parse(localStorage.getItem('todos'));

  if (userTodos) {
    userTodos.forEach((todo) => addItem(todo));
    todos = userTodos;
  }
  //새로고침을 해도 사라지지 않게
}

init();
form.addEventListener('submit', handler);

JS~~!!!!!

 

 

 

 

 

 

 

 

 

드디어 8주동안의 스터디가 끝났습니다.

웹의 가장 기초를 배운 느낌이어서 이제 시작이다~라는 느낌이 드네요

방학동안 관련 예제들 계속 만져보면서 감을 잡아보고 손에 익숙해지는 시간을 가져보겠습니다

다들 스터디 하느라 수고 많으셨고, 저희를 이끌어주신 King 정명햄 사랑해요

 

모두들 좋은 방학 보내시길

 

반응형
저작자표시 동일조건

'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글

[2023 신입부원 기초 스터디] 조상혁 #8주차 - Js 실습 예제  (0) 2023.06.30
[2023 신입부원 기초 스터디] 김찬중 #7주차 js(보충)  (0) 2023.06.30
[2023 신입부원 기초 스터디] 정찬우 #8주차 - 스터디 끝~  (1) 2023.06.30
[2023 신입부원 기초 스터디] 김찬중 6주차 - JS문법(2)  (0) 2023.06.30
[2023 신입부원 기초 스터디] 박민규 #7주차 - 나태해진 나의 JS 블로깅..  (0) 2023.06.30

'WINK-(Web & App)/HTML & CSS & JS 스터디' Related Articles

티스토리툴바