'분류 전체보기' 카테고리의 글 목록 (120 Page)

SMALL

https://www.namoham.com/zxcv/

수학 퀴즈

www.namoham.com

[ ] 한 자리 수 두자리수 버튼 만들고 둘 다 되게 만들기->o
[ ] 정답 맞추면 빵빠레나 화려하게 이펙트주기->o
[ ] 이미지 가져오기->o

-> 처음부터 코드를 최적화해야지 나중에 코딩을 덧붙이거나 새로운 기능을 넣을때 더 효율적이라는것을 깨달았다.

LIST

저작자표시 (새창열림)

'일반' 카테고리의 다른 글

자바스크립트 fetch,callback,promise,async 게시글 (0)	2022.01.10
카카오 책검색 api 사용하기 (0)	2022.01.08
사칙연산 사이트 만들기 (0)	2022.01.05
간단한 계산기 (0)	2022.01.03
투두리스트 html,css,js (0)	2022.01.03

SMALL

내용

사칙연산

단순한 두자리 연산 - 연산자 a와 b 의 연산 후 결과 출력

문제와 답을 박스형식으로 만들고 예시로 [11]+[19]=[30] [확인]

확인 누르면 (맞았습니다. 틀렸습니다. 알려주기)

사칙연산 사이트 레퍼런스 - 일일수학

11math.com

누르면 맞았습니다. 틀렸습니다

https://www.11math.com/calc#72CE6769

입력한 시간 날짜

<!DOCTYPE html>
<html lang="ko">
  <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>사칙연산 공부하기</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>사칙연산 연습</h1>

    <p>숫자를 입력하세요</p>
    <div id="center">
      <input type="text" size="3" id="num1" class="intext11" />
      <span id="opr"></span>
      <input type="text" size="3" id="num2" class="intext11" />
    </div>

    <span id="res"></span>

    <!-- text input -->
    <br />

    <p>연산을 선택하세요</p>
    <div id="moem">
      <button class="op" type="button" onclick="fnPlus()">+</button>
      <button class="op" type="button" onclick="fnMinus()">-</button>
      <button class="op" type="button" onclick="fnMulti()">X</button>
      <button class="op" type="button" onclick="fnDiv()">/</button>
    </div>

    <div id="wrap">
      <span>값을 입력하세요</span>
      <div class="box2">
        <input tpye="text" id="intext2" />
      </div>
      <script src="main.js"></script>
      <!-- button -->
      <div class="box2">
        <button class="btn" onclick="Answer()">확인해보기</button>
        <button class="btn" onclick="re()">다시하기</button>
      </div>
    </div>
    <p>정답확인</p>
    <div class="show-anwser"><span id="ans"></span></div>
  </body>
</html>

#wrap {
  width: 400px;
  margin: 50px auto;
  text-align: center;
  background-color: rgb(238, 214, 214);
  border-radius: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px;
}

body {
  background-color: #000000;
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: roboto;
}

h1 {
  width: 400px;
  margin: 100px auto;
  text-align: center;
  color: rgb(255, 255, 255);
}
p {
  margin: 10px auto;
  text-align: center;
  color: #fff;
}

button {
  margin: 10px 3px;
  color: rgb(0, 0, 0);
  border: 1px solid #aaa;
  cursor: pointer;
}
button:hover {
  color: #fff;
  background-color: rgb(255, 0, 98);
}
#res {
  font-size: 20px;
  color: rgb(255, 0, 98);
  font-weight: bold;
  display: none;
}
input {
  text-align: center;
}

.box1 {
  display: flex;
}

#intext2 {
  width: 300px;
  height: 35px;
  margin: 10px 0px;
  padding: 0px 15px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  border: none;
}

.btn {
  padding: 8px 20px;
  border: none;
  font-size: 16px;
  color: #fff;
  background: #fb6868;
  box-shadow: 1px 1px 0px #999, 2px 2px 0px #999, 3px 2px 0px #999,
    4px 4px 0px #999, 5px 5px 0px #999;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.intext11 {
  width: 76px;
  margin: 5px;
  font-size: 20px;
  font-weight: 600;
  height: 55px;
  padding: 0px 10px;
  text-align: center;
  border: none;
  background: #fff;
  box-shadow: 1px 1px 0px #999, 2px 2px 0px #999, 3px 2px 0px #999,
    4px 4px 0px #999, 5px 5px 0px #999;
}

.op {
  width: 76px;
  font-size: 20px;
  font-weight: 600;
  height: 55px;
  padding: 0px 10px;
  text-align: center;
  border: none;
  background: rgb(255, 255, 255);
  border-radius: 10px;
}

#moem {
  width: 400px;
  margin: 0px auto;
  text-align: center;
  background-color: rgb(202, 162, 162);
  border-radius: 50px;
}

#opr {
  width: 100%;
  height: 55px;
  background: #fb6868;
  margin: 0px 0px 60px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  width: 100px;
  margin: 10px auto;
}

.show-anwser {
  width: 100%;
  height: 55px;
  background: #f8f8f8;
  margin: 0px 0px 60px 0px;

  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  width: 400px;
  margin: 10px auto;
}

#center {
  width: 10px;

  background: #fb6868;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  width: 400px;
  margin: 10px auto;
}

#ans {
  font-weight: bold;
}

let num1;
let num2;
let opr = document.querySelector("#opr");
let res = document.querySelector("#res");

function fnPlus() {
  num1 = Number(document.querySelector("#num1").value);
  num2 = Number(document.querySelector("#num2").value);
  opr.innerText = "+";
  res.innerText = num1 + num2;

  if (isNaN(num1 + num2)) {
    alert("숫자만 입력해주세요");
    res.innerText = "";
    opr.innerText = "";
  }
}

function fnMinus() {
  num1 = Number(document.querySelector("#num1").value);
  num2 = Number(document.querySelector("#num2").value);
  opr.innerText = "-";
  res.innerText = num1 - num2;

  if (isNaN(num1 - num2)) {
    alert("숫자만 입력해주세요");
    res.innerText = "";
    opr.innerText = "";
  }
}

function fnMulti() {
  num1 = Number(document.querySelector("#num1").value);
  num2 = Number(document.querySelector("#num2").value);
  opr.innerText = "X";
  res.innerText = num1 * num2;

  if (isNaN(num1 * num2)) {
    alert("숫자만 입력해주세요");
    res.innerText = "";
    opr.innerText = "";
  }
}

function fnDiv() {
  num1 = Number(document.querySelector("#num1").value);
  num2 = Number(document.querySelector("#num2").value);
  opr.innerText = "/";
  res.innerText = num1 / num2;

  if (isNaN(num1 * num2)) {
    alert("숫자만 입력해주세요");
    res.innerText = "";
    opr.innerText = "";
  }
}

function Answer() {
  let user = document.getElementById("intext2").value;

  if (user == Number(res.innerHTML)) {
    document.getElementById("ans").innerHTML = "맞았습니다!";
    document.getElementById("ans").style.color = "blue";
  } else {
    document.getElementById("ans").innerHTML =
      "정답은 " + Number(res.innerHTML) + " . 틀렸습니다";
    document.getElementById("ans").style.color = "red";
  }
}

const input = document.getElementById("intext2");
input.addEventListener("keyup", (event) => {
  if (event.keyCode === 13) {
    Answer();
  }
});

function re() {
  const re = document.getElementById("intext2");
  const re2 = document.getElementById("ans");
  re.value = null;
  re2.value = null;
}

LIST

저작자표시 (새창열림)

'일반' 카테고리의 다른 글

카카오 책검색 api 사용하기 (0)	2022.01.08
사칙연산 연습문제 만들기 (0)	2022.01.07
간단한 계산기 (0)	2022.01.03
투두리스트 html,css,js (0)	2022.01.03
DOM은 무엇인가 (0)	2022.01.02

SMALL

* {
  font-size: 40px;
}

h1 {
  color: #ffffff;
}

body {
  background-color: #000000;
}
article {
  display: flex;
  flex-direction: column;
}
.center {
  text-align: center;
}
.calculator {
  width: 287px;
  border: 6px solid rgb(33, 182, 58);
  background-color: #ffffff;
  padding: 6px;
  display: inline-block;
}
.calculator form {
  display: grid;
  grid-template-columns: repeat(4, 65px);
  grid-auto-rows: 65px;
  grid-gap: 5px;
}
.calculator form input {
  border: 2px solid #333;
  cursor: pointer;
}
.calculator form input:hover {
  box-shadow: 1px 1px 2px #333;
}
.calculator form .clear {
  background-color: #ed8848;
}
.calculator form .operator {
  background-color: #f65;
}
.calculator form .dot {
  background-color: lightgreen;
}
.calculator form input[type="text"] {
  grid-column: span 4;
  text-align: right;
  padding: 0 10px;
}
.calculator form .clear {
  grid-column: span 3;
}
.calculator form .result {
  grid-column: span 2;
}

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>계산기</title>
    <meta name="description" content="간단한 계산을 위한 웹 계산기입니다." />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="center">
      <h1>계산기</h1>
      <div class="calculator">
        <form name="forms">
          <input type="text" name="output" readonly />
          <input
            type="button"
            class="clear"
            value="지우기"
            onclick="document.forms.output.value=''"
          />
          <input type=button class=operator value=/
          onclick="document.forms.output.value+='/'">
          <input
            type="button"
            value="1"
            onclick="document.forms.output.value+='1'"
          />
          <input
            type="button"
            value="2"
            onclick="document.forms.output.value+='2'"
          />
          <input
            type="button"
            value="3"
            onclick="document.forms.output.value+='3'"
          />
          <input
            type="button"
            class="operator"
            value="*"
            onclick="document.forms.output.value+='*'"
          />
          <input
            type="button"
            value="4"
            onclick="document.forms.output.value+='4'"
          />
          <input
            type="button"
            value="5"
            onclick="document.forms.output.value+='5'"
          />
          <input
            type="button"
            value="6"
            onclick="document.forms.output.value+='6'"
          />
          <input
            type="button"
            class="operator"
            value="+"
            onclick="document.forms.output.value+='+'"
          />
          <input
            type="button"
            value="7"
            onclick="document.forms.output.value+='7'"
          />
          <input
            type="button"
            value="8"
            onclick="document.forms.output.value+='8'"
          />
          <input
            type="button"
            value="9"
            onclick="document.forms.output.value+='9'"
          />
          <input
            type="button"
            class="operator"
            value="-"
            onclick="document.forms.output.value+='-'"
          />
          <input
            type="button"
            class="dot"
            value="."
            onclick="document.forms.output.value+='.'"
          />
          <input
            type="button"
            value="0"
            onclick="document.forms.output.value+='0'"
          />
          <input
            type="button"
            class="operator_result"
            value="="
            onclick="document.forms.output.value=eval(document.forms.output.value)"
          />
        </form>
      </div>
    </div>
  </body>
</html>

LIST

저작자표시 (새창열림)

'일반' 카테고리의 다른 글

사칙연산 연습문제 만들기 (0)	2022.01.07
사칙연산 사이트 만들기 (0)	2022.01.05
투두리스트 html,css,js (0)	2022.01.03
DOM은 무엇인가 (0)	2022.01.02
자바스크립트 객체 (0)	2022.01.01

SMALL

<!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>Document</title>
    <link rel="stylesheet" href="style.css" />
    <script src="main.js"></script>
  </head>
  <body></body>
</html>

* {
  box-sizing: border-box;
  margin: 10px;
  justify-content: center;
}

body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
}

button {
  cursor: pointer;

  padding: 10;
}

div {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

input {
  border-radius: 10px;
}

form {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

#testID {
  color: #4646b4;
  background: #aba8f4;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

#checkbox {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin-right: 5px;
}

document.addEventListener("DOMContentLoaded", () => {
  const addTodo = () => {
    if (input.value !== "") {
      const div = document.createElement("div");
      document.body.appendChild(div);

      const checkbox = document.createElement("input");
      checkbox.type = "checkbox";
      checkbox.id = "checkbox";
      checkbox.addEventListener("change", () => {
        if (checkbox.checked) {
          div.style.textDecoration = "line-through";
        } else {
          div.style.textDecoration = "";
        }
      });
      div.appendChild(checkbox);

      const span = document.createElement("span");
      span.textContent = input.value;
      input.value = "";
      div.appendChild(span);

      const today = new Date();

      const p = document.createElement("p");
      p.textContent =
        today.getHours() +
        "시" +
        today.getMinutes() +
        "분" +
        today.getSeconds() +
        "초";
      input.value = "";
      div.appendChild(p);

      const deleteButton = document.createElement("button");
      deleteButton.textContent = "제거하기";
      deleteButton.addEventListener("click", () => {
        div.parentNode.removeChild(div);
      });
      div.appendChild(deleteButton);
    }
  };

  const title = document.createElement("div");
  document.body.appendChild(title);
  title.id = "testID";

  const h1 = document.createElement("h1");
  h1.textContent = "할 일 목록";

  title.appendChild(h1);

  const form = document.createElement("div");
  document.body.appendChild(form);

  const input = document.createElement("input");
  input.addEventListener("keyup", (event) => {
    if (event.keyCode === 13) {
      addTodo();
    }
  });
  form.appendChild(input);

  const addButton = document.createElement("button");
  addButton.textContent = "추가하기";
  form.appendChild(addButton);

  addButton.addEventListener("click", () => {
    if (input.value !== "") {
      addTodo();
    }
  });
});

LIST

저작자표시 (새창열림)

'일반' 카테고리의 다른 글

사칙연산 사이트 만들기 (0)	2022.01.05
간단한 계산기 (0)	2022.01.03
DOM은 무엇인가 (0)	2022.01.02
자바스크립트 객체 (0)	2022.01.01
[자바스크립트] 알림창코드, 함수연습코드 (0)	2021.12.31

SMALL

Dom은 한마디로 무엇인가

-> html이나 xml문서를 실체로 나타내는 api

dom을 알아보기 전에

웹브라우저는html문서를 해석하고 화면을 통해 해석된 결과를 보여준다.
해석한 html 코드를 화면을 통해 보여주는 과정을 렌더링이라고한다.

렌더링의 세부 과정
브라우저는 html코드를 해석해서 요소들을 트리형태로 구조화해 표현하는 문서(객체)를 생성한다. 이를 dom이라 하며, 브라우저는 dom을 통해 화면에 웹 콘텐츠들을 렌더링한다.

dom의 존재 목적

dom은 자바스크립트를 사용해서 웹 콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의할 수 있도록 제공되는 프로그래밍 인터페이스이다.

-> 내용정리

Document(Document Object Model)

JS를 이용해 엘리먼트의 속성 값을 다루는 방법 이라고 할 수 도 있고

HTML문서의 구조와 관계를 객체로 표현한 모델 이라고 할 수 도 있겠다

DOM은 DOCUMENT OBJECT MODEL 의 약자이다.

웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용 될 수 있게 연결시켜주는 역할을 담당한다.

DOM은 DOCUMENT라는 전역변수로 접근이 가능하다

DOM을 가지고 있는 언어 중의 하나에 자바스크립트가 있는 것이고 다른 언어도 DOM을 가지고 있지만 자바스크립트의 DOM이 전통적으로 오래 쓰여왔고 안정적이다.

JS를 통해 HTML의 구조 관계인

DOM 구조에 접근할 수 있을 뿐이지 DOM은 자바스크립트가 아니다.

DOM은 Tree 구조로 되어있다.

HTML은 그 자체로 트리구조를 가지고 있다.

트리구조는 쉽게 말해 부모자식을 갖는 관계인데 html. 안에 body 그 안에 div 등 html은 트리구조로 작성을 한다.

저버스크립트도 객체라는 개념이 있기 때문에 부모 자식 관계를 가질 수 있는 언어이다.

[DOM]
html코드를 해석해서 요소들을 트리형태로 구조화해 표현하는 형식
dom은 자바스크립트를 사용해서 웹 화면의 콘텐츠를 추가 수정, 삭제하거나 이벤트르 처리할 수 있도록 프로그래밍 인터페이스르 제공한다.
실제 dom은 무거우니까 가상dom으로 잘 배치한다

LIST

저작자표시 (새창열림)

'일반' 카테고리의 다른 글

간단한 계산기 (0)	2022.01.03
투두리스트 html,css,js (0)	2022.01.03
자바스크립트 객체 (0)	2022.01.01
[자바스크립트] 알림창코드, 함수연습코드 (0)	2021.12.31
[자바스크립트]반복문,배열,객체 (0)	2021.12.29

SMALL

// 객체의 키와 값을 정적으로 생성한다
const pet = {
  name: "구름",
  age: 8,
};

// 객체의 키와 값을 동적으로 생성한다
pet.color = "brown";
// 객체의 키와 값을 동적으로 제거한다!
delete pet.color;

// 출력
console.log(pet);

const object = {
  ko: "빵",
  en: "bread",
  ja: "ㄹㄹ",
  fr: "pain",
  es: "pan",
  lang: {
    ko: "한국어",
    en: `영어`,
    ja: "일본어",
    fr: "프랑스어",
    es: "스페인어",
  },
  print: function (lang) {
    console.log(`${this.ko}는 ${this.lang[lang]}로 ${this[lang]}입니다.`);
  },
};

object.print("es");

LIST

저작자표시 (새창열림)

'일반' 카테고리의 다른 글

투두리스트 html,css,js (0)	2022.01.03
DOM은 무엇인가 (0)	2022.01.02
[자바스크립트] 알림창코드, 함수연습코드 (0)	2021.12.31
[자바스크립트]반복문,배열,객체 (0)	2021.12.29
[자바스크립트]변수,타입,함수,조건문,문자열 (0)	2021.12.29

개발 노트