august_breeze

Javascript Certification

Sat, 10 Jun 2023 18:42:06 GMT

노마드코더 - 바닐라 JS 초급 단계 수강을 완료했습니다!

ReactJS Day7

Sat, 10 Jun 2023 17:29:50 GMT

오늘은 ReactJS 스터디 일곱 번째 날입니다..새벽 2시반..일찍일찍 강의를 들읍시다..

#7.0~7.1 (To do List)

creating a list of to-dos in the console

import { useState, useEffect } from "react";

function App(){
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange =(event) => setToDo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    //if toDo is empty, will kill the function
    //else add toDo and empty the input (will call setToDo again and empty the input as settoDo modifies the toDo value)
    if(toDo===""){
      return;
    }
    //we don't modify the state directly, we always use the modifier function
    setToDo("");
    //we make a function and we receive the current array, then we want to return a new array, the new array will have the toDo + all the previous toDos
    // we do [something you want to add, ...the previous array]
    //will receive the empty arrary [] for the very first time so it will be just toDo, ...[]
    setToDos(currentArray =>[toDo, ...currentArray]);
  };
  console.log(toDos);
  //need to add {} inside  for javascript or javascript will understand it only as a string
  return 
    My To Dos ({toDos.length})
    
    
    
    
  ;
  //button inside the form will submit the form so we will prevent default 
}

export default App;

using map function to display the list

import { useState, useEffect } from "react";

function App(){
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange =(event) => setToDo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    if(toDo===""){
      return;
    }
    //(1) if setToDo is called with an empty string, then toDo will be an empty string
    setToDo("");
    //(2) we send a function instead of value
    //will receive the empty arrary [] for the very first time so it will be just toDo, ...[]
    setToDos(currentArray =>[toDo, ...currentArray]);
  };
  return 
    My To Dos ({toDos.length})
    
    
    
    
    
    
    {toDos.map((item, index)=>{item})}
    
  ;
  //function in map() will be run for every item in the array and return a new array (wiil transform and put in the new array) 
  //first argument of the map function is the value (item) and the second argument is the index, key should be unique 
}

export default App;

#7.2 (Coin Tracker)

extracting json from response and setting the value with the json (coins)

import { useState, useEffect } from "react";

function App(){
  const [loading, setLoading] = useState(true);
  //default values which is empty but not undefined
  const [coins, setCoins] = useState([])
  //will be watching nothing so the code will only run once
  //extract the json from the response of tickers, so we fetch and then get the response and want to return response.json and want to take that json
  //when we get the json which is the coins, we will setCoins to the value of the json  (will have array of coins)
  useEffect(()=>{
    fetch("https://api.coinpaprika.com/v1/tickers").then((respone)=>
    respone.json()
    ).then(json => setCoins(json));
    setLoading(false);
  },[])
  return(
    
    The Coins! ({coins.length})
    {loading ? Loading... : null}
    
      {coins.map((coin)=> {coin.name} ({coin.symbol}): ${coin.quotes.USD.price} USD)}
    
  
  //we don't need the index for the coin as the coin has the id which we can use as the key
  );
}
export default App;

using select and option instead of ul and li

import { useState, useEffect } from "react";

function App(){
  const [loading, setLoading] = useState(true);
  //default values which is empty but not undefined
  const [coins, setCoins] = useState([])
  //will be watching nothing so the code will only run once
  //extract the json from the response of tickers, so we fetch and then get the response and want to return response.json and want to take that json
  //when we get the json which is the coins, we will setCoins to the value of the json  (will have array of coins)
  useEffect(()=>{
    fetch("https://api.coinpaprika.com/v1/tickers").then((respone)=>
    respone.json()
    ).then(json => setCoins(json));
    setLoading(false);
  },[])
  return(
    
    The Coins! {loading ? "" :`(${coins.length})`}
    {loading ? Loading... : ()}
  
  //we don't need the index for the coin as the coin has the id which we can use as the key
  );
}
export default App;

the challenge (converting how many coins you can get from investing dollars)

import { useState, useEffect } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [coins,setCoins] = useState([]); 
  const [cost,setCost] = useState(1);
  const [need, setNeed] = useState(1);
  const onChange = (event) => {
    setCost(event.target.value);
    setNeed(1);
  }
  const handleInput = (event) => {
    setNeed(event.target.value);
  } 
  useEffect(()=>{
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setLoading(false);
      });
  },[]);
  return (
  
    The coins!{loading ? "" :` Here are..${coins.length} coins`}
    {loading ? loading... : }
    Please enter the amount (in dollars)
    
      
    
    You can get {need/cost}
  );
}
export default App;

ReactJS Day6

Sat, 03 Jun 2023 09:22:09 GMT

오늘은 ReactJS 스터디 여섯 번째 날입니다. 오늘도 화이탱구리구리!

#6.0 (Introduction)

when we change the state, the whole code renders again but with the new value however, there are sometimes you don't want to call the whole function again (e.g., when you have an API to call and you have to call the API every time it renders) -> you want some codes in the component only runs one time but never again

import {useState} from "react";

function App() {
  const [counter, setValue] = useState(0);
  //counter is set to default and onclick it increments from the previous counter +1
  const onClick = () => setValue((prev) => prev+1);
  return (
   {counter}
   

  
  );
}

export default App;

#6.1 (useEffect)

using useEffect to make sure the code only runs one time

import {useState, useEffect} from "react";
//useEffect takes two argument which is the code we want to run only once, and magical argument

function App() {
  const [counter, setValue] = useState(0);
  //counter is set to default and onclick it increments from the previous counter +1
  const onClick = () => setValue((prev) => prev+1);
  console.log("i run all the time");
  const iRunOnlyOnce = () => {
    console.log("i run only once");
  };
  useEffect(iRunOnlyOnce, []);
  return (
   
    {counter}
   

  
  );
}

export default App;

another way of writing the code

import {useState, useEffect} from "react";
//useEffect takes two argument which is the code we want to run only once, and the dependencies (it is what react.js needs to watch, and if they change react.js will run the code)

function App() {
  const [counter, setValue] = useState(0);
  //counter is set to default and onclick it increments from the previous counter +1
  const onClick = () => setValue((prev) => prev+1);
  console.log("i run all the time");
  useEffect(()=> {
    console.log("i run only once - call the api");
  },[]);
  return (
   
    {counter}
   

  
  );
}

export default App;

#6.2 (Deps)

search for the movie that the user wants only when the movie (the specific component) changes

import { useState, useEffect } from "react";

function App() {
    const [counter, setValue] = useState(0);
    const [keyword, setKeyword] = useState("");
    const onClick = () => setValue((prev) => prev +1);
    const onChange = (event) => setKeyword(event.target.value);
    console.log("I run all the time");
    useEffect(() => {
        console.log("CALL THE API...");
    }, []);
    useEffect(() => {
      if (keyword !== "" && keyword.length > 5) {
          console.log("SEARCH FOR", keyword);
      }  
  }, [keyword]);
    return (
        
            
            {counter}
            
        
    );
};
export default App;

the output

making the change for only counter and for only keyword

import { useState, useEffect } from "react";

function App() {
    const [counter, setValue] = useState(0);
  //keyword is being modified by setKeyword function
    const [keyword, setKeyword] = useState("");
    const onClick = () => setValue((prev) => prev +1);
    const onChange = (event) => setKeyword(event.target.value);
  //will run only one time as we are not watching anybody in [] -> the second argument
    useEffect(() => {
        console.log("I run only once");
    }, []);
  //will run when keyword changes (of the second argument)
    useEffect(() => {
      console.log("I run when keyword changes");
  }, [keyword]);
  useEffect(() => {
    console.log("I run when counter changes");
}, [counter]);
  //run when either one of it changes (i.e., keyword or counter)
  useEffect(() => {
    console.log("I run when keyword & counter changes");
}, [keyword, counter]);
    return (
        
            
            {counter}
            
        
    );
};
export default App;

the output

#6.4 (Cleanup)

displaying and hiding certain component

import { useState, useEffect } from "react";

function Hello (){
  useEffect (() => {
    //when we show the component this function runs and shows the console.log line
    console.log("I'm here!");
  },[]);
  return Hello;
}
function App() {
  const [showing, setShowing] =useState(false);
  //display the opposite of the previous state
  const onClick = () => setShowing((prev)=>!prev);
  return 
    {showing ?  : null}
    
  ;
}
export default App;

know when the component was created and destroyed -> cleanup cleanup is not used very often -> Code can be run even when a component is destroyed

import { useState, useEffect } from "react";

function Hello (){
  useEffect (() => {
    //allows you to know when the component was created and destroyed
    console.log("created:)");
    return () => console.log("destroyed :(");
  },[]);
  return Hello;
}
function App() {
  const [showing, setShowing] =useState(false);
  //display the opposite of the previous state
  const onClick = () => setShowing((prev)=>!prev);
  return 
    {showing ?  : null}
    
  ;
}
export default App;

another example of using cleanup with using functions

import { useState, useEffect } from "react";

function Hello() {
  function byeFn() {
      console.log("bye :(");
  }
  function hiFn() {
    //run the hiFn and return byeFn when the component is destroyed
      console.log("created :)");
      return byeFn;
  }
  useEffect(hiFn, []);
  return Hello;
}

function App() {
  const [showing, setShowing] =useState(false);
  //display the opposite of the previous state
  const onClick = () => setShowing((prev)=>!prev);
  return 
    {showing ?  : null}
    
  ;
}
export default App;

another way of writing the previous code with function inside of useEffect

import { useState, useEffect } from "react";

function Hello() {
  useEffect(() => {
    console.log("hi :)");
    return () => {
        console.log("bye :(");
    }
}, []);
  return Hello;
}

function App() {
  const [showing, setShowing] =useState(false);
  //display the opposite of the previous state
  const onClick = () => setShowing((prev)=>!prev);
  return 
    {showing ?  : null}
    
  ;
}
export default App;

컴포넌트가 destroy될 때도 코드를 실행할 수 있다 -> return으로 함수를 만들어주면 됨 useEffect는 함수를 받고, 이 함수는 dependency가 변화할 때 호출됨 현재는 dependency가 비어있으니 컴포넌트가 처음 생성될 때 함수가 호출된 후 다시 호출 되지 않음 그래서 컴포넌트가 파괴될 때도 함수를 실행하고 싶으면 useEffect 함수가 새로운 함수를 return해야 함 -> 왜냐면 deps가 비어있으면 자동으로 컴포넌트가 파괴될 때 cleanup함수가 실행되는데 그 과정이 리렌더링으로 useEffect함수가 실행되고 클린업하면서 이전에 있던 이펙트인 console.log(“created :) )가 삭제되고 새로운 이펙트 함수인 return함수가 실행되기 때문이다. 리렌더링 -> 이전 이펙트 클린업 -> 이펙트 실행

ReactJS Day5

Thu, 18 May 2023 14:43:01 GMT

오늘은 노마드코더 ReactJS 스터디 다섯 번째 날입니다! 오늘도 화이탱!

#4.0 (Props)

props is a way of sending data from a parent component to a child component not a good way - as you are copying and pasting the same thing, better to have the same component and change only the text in the button

use the same function but configure only the text rending would mean Btn({banana:"Save Changes"})

don't use props that much --> following is the same code from above without using props as an argument

we can add more argument in the object

#4.1 (Memo)

using React.useState to change the content of the button

we don't want to re-render if the prop doesn't change

output change from to

#4.2 (Prop Types)

using 'propTypes' to define the proptypes

output : we see an error in the console as fontSize for the second Btn is not a number and banana is not a string (UI works find) giving values to the ones that are not defined

#5.0 (Create React App Introduction)

node js 사용자 버전 설치
윈도우키 + R 누르면 실행창 뜸 3 .열기 칸에 cmd 라고 입력하고 확인 (혹은 command prompt 열기)
나오는 창에 node -v 입력해서 잘 설치됐는지 확인
vscode 상단 메뉴에서 Terminal - New Terminal 클릭
npm start하면 window에 새로운 창이 자동으로 뜸
자동으로 설치되었던 src 폴더에 모든 파일을 저장할 것 --> 가장 중요한 것은 index.js

#5.1 (Tour of CRA)

first option of applying button color is making a css file and importing that css file in index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import "./styles.css";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
  
);

style.css file

button {
    color: white;
    background-color: tomato;
}

if we import the css that will be applied to all the buttons in every file option 2 - we cound manually include the style in javascript code

import PropTypes from "prop-types";

function Button({text}) {
    return ; 
}

Button.propTypes= {
    text: PropTypes.string.isRequired,
};

export default Button;

option 3 - the best option is to make a module.css and import styles in the javacript, create a class, and apply the style

import PropTypes from "prop-types";
import styles from "./Button.module.css";

function Button({text}) {
    return ; 
}

Button.propTypes= {
    text: PropTypes.string.isRequired,
};

export default Button;

css file would have a class and the css file name will be Button.module.css

.btn {
    color: white;
    background-color: tomato;
}

making another css file named App.module.css (the name doesn't matter however needs to end with .module.css)

.title{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 18px;
}

App.js would contain the classname as styles.whateverclassname

import Button from "./Button";
import styles from "./App.module.css"; 

function App() {
  return (
   Welcome back!!!
        
  );
}

export default App;

the output

ReactJS Day4

Sat, 06 May 2023 10:19:54 GMT

오늘은 노마드코더로 ReactJS를 공부하는 네 번째 날입니다. 오늘도 화이탱입니다!

#3.5 (Inputs and State)

the output

#3.6~3.8 (State Practice)

converting the minutes into hours and making a reset button

flipping to also convert hours into minutes

#3.9 (Final State Practice)

making a menu for the user to choose which units to convert

the output

ReactJS Day3

Sun, 30 Apr 2023 01:46:47 GMT

오늘은 노마드코더 스터디 세 번째 시간입니다. 오늘도 화이탱!

#3.0 (Understanding State)

• data that changes is the state (e.g., increasing the counter) • reactJS only changes the only component that needs to be changed and changes only the thing that is updated (e.g., only the number of clicks changes not the whole button - vanilla js changes the whole span of button with click numbers) • The following way is having the initial value and rerendering everytime we click the button --> not a good way

#3.1~3.2 (setState)

ways to match each elements with the corresponding item

const food=["tomato","potato"]
const [myFavFood, mySecondFavFood]=food;
//console에 myFavFood를 치면 tomato가 나옴

const x = [1,2,3]
const [a,b,c]=x;
/console에 a를 치면 1이 나옴

code before making a modifier function

code after making the setCounter (=modifier) function • when you use the setCounter function, the whole component will be rendered again with the modified value • the setCounter function will give data to the counter and trigger the render function

#3.4 (State Functions)

first way of changing the state is to give a fixed value

 const root = document.getElementById("root");
        function App(){
            const [counter, setCounter] =React.useState(0);
            const onClick = () => {
                setCounter(987);
            };
            return(
                
                    Total Clicks: {counter}
                    
                
            );
        };
        ReactDOM.render(, root);

output:

second way of changing the state is to utilize a function with 'current'

const root = document.getElementById("root");
        function App(){
            const [counter, setCounter] =React.useState(0);
            const onClick = () => {
                //setCounter(counter + 1);
                //if you want to calculate the next state based on the current state, then you need to use the function
                setCounter((current) => current +1);
            };
            return(
                
                    Total Clicks: {counter}
                    
                
            );
        };
        ReactDOM.render(, root);

ReactJS Day2

Sun, 23 Apr 2023 13:30:39 GMT

오늘은 노마드코더 ReactJS 수강 두 번째 날입니다! 내일 출근 전까지 화이탱구리구리

#2.2 (Our First React Element)

writing the code (e.g., making a span in html) in a hard way using ReactJS

#2.3 (Events in React)

creating an eventlistener using ReactJS

#2.5~2.6 (JSX)

using JSX to shorten the lines JSX is a syntax expanded from JavaScript -> makes a React element and looks similar to HTML

making a function and rendering it to html

function can be wrote in the following two ways

const Button = () => ()
function Button() { return }

ReactJS Day1

Sat, 15 Apr 2023 03:44:04 GMT

노마드코더 강의로 ReactJS 스터디를 시작하였습니다! 새로운 언어를 배우는 만큼 큰 설렘을 가지고 한 번 열심히 수강해보도록 하겠습니다! 화이탱..구리구리

#1.1~1.3 (Why React)

누가 이 기술을 사용하는지, 기술의 규모는 어떤지를 파악하는 것이 중요 --> 상위 1만 개의 웹사이트 중 44.76%는 ReactJS를 사용함 (e.g., Airbnb, Facebook, Instagram, Netflix)
페이스북이 ReactJS를 만들었으며, 그들의 웹사이트도 ReactJS로 작업하였으며, 이를 개선하기 위해 자금을 투자하고 있음
큰 커뮤니티를 가지고 있음. ReactJS는 Javascript와 비슷하기 때문에 Javascript의 커뮤니티를 함께 빌려왔기 때문에 커뮤니티가 아주 거대함

#2.0~2.1 (Introduction/Before React)

ReactJS makes the UI more interactive --> makes interactivity in the website very simple

Building vanillaJS to compare it with ReactJS

Vanilla JS using only html - making the button

Vanilla JS only using html - displaying clicks



    
        
    
    
    Total clicks: 0

importing react and react-dom into html

Javascript Day7

Sat, 25 Mar 2023 03:02:18 GMT

오늘은 노마드코더 자바스크립트 마지막 스터디입니다! 드디어 '바닐라 JS로 크롬 앱 만들기' 강의도 끝이 났네요!

#7.6~7.8 (Deleting To Dos)

saving objects with text and id, able to delete based on the ids (adding item to the array by using push)

코드를 const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY ="todos";

let toDos = [];

function saveToDos(){
    localStorage.setItem(TODOS_KEY,JSON.stringify(toDos));
}


function deleteToDo(event){
    const li = event.target.parentElement;
      //before deleting li from the screen we can get the id of the li
      console.log(li.id);
    li.remove();

}

function paintToDo(newToDo){
    const li = document.createElement("li");
    // will be in the html
    li.id=newToDo.id;
    const span = document.createElement("span");
    //display only the text from the object
    span.innerText = newToDo.text;
    const button = document.createElement("button");
    button.innerText ="X";
    button.addEventListener("click",deleteToDo);
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}


function handleToDoSubmit(event){
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value="";
    //instead of pushing just the text, now I want to push the object (id and text)
    const newTodoObj = {
        text:newToDo,
        //generate random numbers for the id (identity each item with the item)
        id:Date.now(),
    }
    toDos.push(newTodoObj);
    //called by the object
    paintToDo(newTodoObj);
    saveToDos();
}

toDoForm.addEventListener("submit",handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);

if(savedToDos !==null){
    const parsedToDos = JSON.parse(savedToDos);
    toDos=parsedToDos;
    parsedToDos.forEach(paintToDo);
}

how to use filter function

//old array stays but we are creating the new array excluding the item we want to delete
function sexyFilter(){

}
//filter will can sexyFilter() for 1,2,3,4 (similar to foreach)
[1,2,3,4].filter(sexyfilter)
//sexyFilter() should return true if you want to keep the items in the array, if false that item will not be included in the new array
//the new array will keep only the items that is true

function sexyFilter(){return true}
[1,2,3,4].filter(sexyFilter)
//then the output will be [1,2,3,4]

function sexyFilter(){return true}
[1,2,3,4].filter(sexyFilter)
//then the output will be []

function sexyFilter(item){return item !==3}
[1,2,3,4].filter(sexyFilter)
//return if the item is not 3, the output will be [1,2,4]
//1 is returned because the item is not equaled to 3 (true)

const todos = [{text:"lala"},{text:"lolo"}]
function sexyFilter(todo){return todo.text !=="lala"}
todos.filter(sexyFilter)
//the output will be {text:"lolo"}

const todos = [{text:"lalalala"}, {text:"lolololo"}];
todos.filter(item => item.text !== "lolololo");
//using arrow

deleting item from the array

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY ="todos";

let toDos = [];

function saveToDos(){
    localStorage.setItem(TODOS_KEY,JSON.stringify(toDos));
}


function deleteToDo(event){
    const li = event.target.parentElement;
    li.remove();
    //filter doesn't modify the original array but keeps making new arrays
    //calling for every toDo in the database
    //keep the toDo that does not have the id same with the ones we clicked to delete
    //toDo.id is a number and li.id is a string
    toDos=toDos.filter(toDo => toDo.id !== parseInt(li.id));
    saveToDos();
}

function paintToDo(newToDo){
    const li = document.createElement("li");
    // will be in the html
    li.id=newToDo.id;
    const span = document.createElement("span");
    //display only the text from the object
    span.innerText = newToDo.text;
    const button = document.createElement("button");
    button.innerText ="X";
    button.addEventListener("click",deleteToDo);
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}


function handleToDoSubmit(event){
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value="";
    //instead of pushing just the text, now I want to push the object (id and text)
    const newTodoObj = {
        text:newToDo,
        //generate random numbers for the id (identity each item with the item)
        id:Date.now(),
    }
    toDos.push(newTodoObj);
    //called by the object
    paintToDo(newTodoObj);
    saveToDos();
}

toDoForm.addEventListener("submit",handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);

if(savedToDos !==null){
    const parsedToDos = JSON.parse(savedToDos);
    toDos=parsedToDos;
    //forEach function is executing the painToDo function for each item (object) on the aray parsedToDos
    parsedToDos.forEach(paintToDo);
}

the output when we enter 1,2,3 and delete 2,3

#8.0 (Geolocation)

making the new weather.js

getting the location of the user

function onGeoOk(position){
    const lat = position.coords.latitude;
    const lng = position.coords.longitude;
    console.log("You live in",lat,lng);
}

function onGeoError(){
    alert("Can't find you. No weather for you.");
}

navigator.geolocation.getCurrentPosition(onGeoOk,onGeoError);

#8.1 (Weather API)

creating the span for html

getting the weather API to display the city and the weather (temperature)

const API_KEY ="bf6a290229ac2c9da9a4ca900b69d269";

function onGeoOk(position){
    const lat = position.coords.latitude;
    const lon = position.coords.longitude;
    console.log("You live in",lat,lon);
    const url =`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`;
    //calling the url
    fetch(url)
    .then((response) => response.json())
    .then((data)=>{
        //getting the first span for weather
        const weatherContainer = document.querySelector("#weather span:first-child");
        //getting the second span in the html for city
        const cityContainer = document.querySelector("#weather span:last-child");
        //filling the span with city name
        city.innerText= data.name; 
        //filling the span with weather (and temperature from the main)
        weather.innerText =  `${data.weather[0].main} / ${data.main.temp}`;
    });
}

function onGeoError(){
    alert("Can't find you. No weather for you.");
}

navigator.geolocation.getCurrentPosition(onGeoOk,onGeoError);

Javascript Day6

Mon, 13 Mar 2023 13:51:30 GMT

오늘은 노마드코더 강의를 수강한지 벌써 여섯 번째 날입니다.

#7.0 (Setup) & #7.1 (Adding ToDos)

html code

javascript code (we are able to write new todos but we are not able to delete them)

const toDoForm = document.getElementById("todo-form");
//const toDoInput = document.getElementById("#todo-form input");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

function paintToDo(newToDo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    //li has a child called span, we want to put  inside the 
    li.appendChild(span);
      //inside  will be the text of newToDo
    span.innerText = newToDo;
      //put the  and  inside the 
    toDoList.appendChild(li);
}

//javascript will give the first event that happend as an argument
function handleToDoSubmit(event){
    event.preventDefault();
    //newToDo represents the value of the input before we empty the input
    const newToDo = toDoInput.value;
    toDoInput.value="";
      //call the function painToDo will the value of the input
    paintToDo(newToDo);
}

toDoForm.addEventListener("submit",handleToDoSubmit);

#7.2 (Deleting To Dos)

javascript code to delete the todos

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

//when clicked the button, delete todo
function deleteToDo(event){
      //we don't know which button was clicked so we are specifying to see which button was clicked
    const li = event.target.parentElement;
    li.remove();

}

/*we want to do

    
         todo1 
        
    
 */

function paintToDo(newToDo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    span.innerText = newToDo;
      //create a button shaped X
    const button = document.createElement("button");
    button.innerText ="X";
    button.addEventListener("click",deleteToDo);
    li.appendChild(span);
      //want to add the button inside the 
    li.appendChild(button);
    toDoList.appendChild(li);
}


function handleToDoSubmit(event){
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value="";
    paintToDo(newToDo);
}

toDoForm.addEventListener("submit",handleToDoSubmit);

#7.3 (Saving To Dos)

how to save todos in the local storage - javascript code

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

//creating an array
const toDos = [];

function saveToDos(){
      //local storage does not allow saving arrays, but only strings
      //JSON.stringify will take whatever javascript code and turn that into a string
    localStorage.setItem("todos",JSON.stringify(toDos));
}


function deleteToDo(event){
    const li = event.target.parentElement;
    li.remove();

}

function paintToDo(newToDo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    span.innerText = newToDo;
    const button = document.createElement("button");
    button.innerText ="X";
    button.addEventListener("click",deleteToDo);
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}


function handleToDoSubmit(event){
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value="";
      //push the newToDo (the input) to the array toDos
    toDos.push(newToDo);
      //disply on the screen
    paintToDo(newToDo);
    saveToDos();
}

toDoForm.addEventListener("submit",handleToDoSubmit);

#7.4~7.5 (Loading To Dos)

first way of writing a javascript code to load todos

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");
//make the key to not make mistakes
const TODOS_KEY ="todos";

const toDos = [];

function saveToDos(){
    localStorage.setItem(TODOS_KEY,JSON.stringify(toDos));
}


function deleteToDo(event){
    const li = event.target.parentElement;
    li.remove();

}

function paintToDo(newToDo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    span.innerText = newToDo;
    const button = document.createElement("button");
    button.innerText ="X";
    button.addEventListener("click",deleteToDo);
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}


function handleToDoSubmit(event){
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value="";
    toDos.push(newToDo);
    paintToDo(newToDo);
    saveToDos();
}

toDoForm.addEventListener("submit",handleToDoSubmit);

function sayHello(item){
      // if i write a, b, c, then it will display this is the turn of a, this is the turn of be, this is the turn of c
    console.log("this is the turn of", item);
}


const savedToDos = localStorage.getItem(TODOS_KEY);

//savedToDos could be null if there is nothing in the local storage
if(savedToDos !==null){
      //turn the strings to an array
    const parsedToDos = JSON.parse(savedToDos);
      //for each items in the array Todos we will run the function sayHello
    parsedToDos.forEach(sayHello);
}

shorter way to write the javascript code

if(savedToDos !==null){
    const parsedToDos = JSON.parse(savedToDos);
    parsedToDos.forEach((item)=> console.log("this is the turn of",item));
}

when we refresh the page, the todos in saved in the local storage is also refreshed, so we want to keep them

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY ="todos";

//change the const to let so the array can be accumulative
let toDos = [];

function saveToDos(){
    localStorage.setItem(TODOS_KEY,JSON.stringify(toDos));
}


function deleteToDo(event){
    const li = event.target.parentElement;
    li.remove();

}

function paintToDo(newToDo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    span.innerText = newToDo;
    const button = document.createElement("button");
    button.innerText ="X";
    button.addEventListener("click",deleteToDo);
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}


function handleToDoSubmit(event){
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value="";
    toDos.push(newToDo);
    paintToDo(newToDo);
    saveToDos();
}

toDoForm.addEventListener("submit",handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);

if(savedToDos !==null){
    const parsedToDos = JSON.parse(savedToDos);
      //restore the previous todos
    toDos=parsedToDos;
      //call the function painToDo for each input in the local storage, displaying everything inside the local storage
    parsedToDos.forEach(paintToDo);
}

Javascript Day5

Sat, 04 Mar 2023 10:30:19 GMT

오늘은 노마드코더 스터디를 시작한지 벌써 다섯 번째 날입니다. 이제 두 번만 더 들으면 자바스크립트에서 새로운 언어로 넘어갈 수 있답니다. 그럼..화이탱!

#6.0 (Quotes)

const quotes =[ 
{
    quote: "Be yourself; everyone else is already taken.",
    author:"Oscar Wilde",
},
{
    quote:"I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best.",
    author:"Marilyn Monroe",
},
{
    quote:"Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.",
    author:"Albert Einstein",
},
{
    quote:"So many books, so little time.",
    author:"Frank Zappa",
},
{
    quote:"A room without books is like a body without a soul.",
    author:"Marcus Tullius Cicero",
},
{
    quote:"Be who you are and say what you feel, because those who mind don't matter, and those who matter don't mind.",
    author:"Bernard M. Baruch",
},
{
    quote:"You know you're in love when you can't fall asleep because reality is finally better than your dreams.",
    author:"Dr. Seuss",
},
{
    quote:"You only live once, but if you do it right, once is enough.",
    author:"Mae West",
},
{
    quote:"Be the change that you wish to see in the world.",
    author:"Mahatma Gandhi",
},
{
    quote:"In three words I can sum up everything I've learned about life: it goes on.",
    author:"Robert Frost",
}
]

const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");

//we need a fucntion that gives a number between 0 and 9 (to get the item in the array, you need to do -1)
//Math.random gives a random number (float) between 0 and 1, so if we multiply it by 10, it gives a random number between 0 and 10
//Math.round rounds the float to integer
//Math.ceil will round to the top
//Math.floor will round to the bottom
console.log(quotes[Math.floor(Math.random()*10)]);

however there can be more than 10 quotes, so we just the following code (get the length of the array)

console.log(quotes[Math.floor(Math.random()*quotes.length)]);

html code

we put the quote and the author in each 'span'

const quotes =[ 

]

const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");

const todaysQuote = quotes[Math.floor(Math.random()*quotes.length)];

quote.innerText = todaysQuote.quote;
author.innerText =todaysQuote.author;

#6.1 (Background)

how to put a random background in the website javascript code

const images = ["0.jpg","1.jpg","2.jpg"];

const chosenImage = images[Math.floor(Math.random()*images.length)];

const bgImage = document.createElement("img");
//same thing as doing  in html, instead of writing html first, javascript will do that for us
bgImage.src= `img/${chosenImage}`;

//appendChild will add the line to the html
document.body.appendChild(bgImage);

html code

how to put the image behind the text and change the font - css code

.hidden{
    display:none;
}

img {
    position:absolute;
    width:100%;
    height:100%;
    left: 0px;
    top: 0px;
    right:0px;
    bottom:0px;
    z-index: -1;
    opacity:80%;
    }

body{
font-family: 'Aclonica';
}

#quote{margin-top:50px;
font-size: 40px;
display: grid;
color:rgb(9, 6, 47);
font-weight: 300;
place-items: center;
text-shadow: 2px 2px 2px rgb(189, 187, 187);
z-index: 2;
text-align:center;
}

#clock{
    text-align:center;
}

the output

Javascript Day4

Mon, 27 Feb 2023 12:39:27 GMT

오늘은 노마드코더 강의 수강 4일차입니다.

#5.0 (Intervals)

create a new file called clock.js and put that into the folder called 'js', then import them into html

interval is something that you want to happen every certain time

function sayHello (){
    console.log("hello");
}

//you need a function and the time that you want things to happen, the time should be inputted in milliseconds so 5000 milliseconds = 5 seconds
setInterval(sayHello, 5000);

#5.1 (Timeouts and Dates)

interval : repeat after a certain amount of time (ex. console.log every 5 seconds) timeout : certain event once at a certain amount of time (ex. console.log once after 5 seconds)

function sayHello (){
    console.log("hello");
}

setTimeout(sayHello, 5000);

javascript code to make a clock

const clock = document.querySelector("h2#clock");

function getClock (){
    const date = new Date();
    clock.innerText =(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`)
}

//we immediately call the function when we first open the window
getClock ()
//and it keeps going
setInterval(getClock, 1000);

the output

#5.2 (PadStart)

however the second is displayed as 1,2,3 not 01, 02, 03 because they are just getting seconds from 0 to 59, so we need to format the seconds to look like 01,02,03

//if we have a string that is 1 string long which is "1", then we make it two characters long, and we add 0 infront of them (because it is padStart, we also have padEnd, that puts the certain character in the end), then the output of the following code will be "01"
"1".padStart(2,"0")

another example of padStart would be

the final javascript code using padStart

const clock = document.querySelector("h2#clock");

function getClock (){
    const date = new Date();
  //we get numbers so we want them to be converted to strings
    const hours = String(date.getHours()).padStart(2,"0");
    const minutes = String(date.getMinutes()).padStart(2,"0");
    const seconds = String(date.getSeconds()).padStart(2,"0");
    clock.innerText =(`${hours}:${minutes}:${seconds}`)
}

//we immediately call the function when we first open the window
getClock ()
//and it keeps going, we want to call the function every second over and over again so we are using the interval
setInterval(getClock, 1000);

the output

Python Project #1

Wed, 22 Feb 2023 13:19:06 GMT

야구장 좌석 추천 및 승률 계산 Python 프로젝트

#
# 야구장 좌석 추천 및 승률 계산 Python 프로젝트
#
print ("이 프로그램은 야구 관람이 서툰 분들을 위해 제작되었습니다.")
print ("여러분들에게 가장 적합한 좌석을 추천해드리며, 여러분들이 응원하는 팀이 승리할 확률을 구해줍니다.")

print ("먼저, 여러분들에게 가장 적합한 좌석을 추천해드리겠습니다.")


stadium_list = ( \
    (1,'잠실 야구장(두산)'), \
    (2,'잠실 야구장(엘지)'), \
    (3,'부산 사직 야구장'), \
    (4,'인천 SK 행복 드림 구장'), \
    (5,'창원 NC 파크'), \
    (6,'광주 챔피언스 필드'), \
    (7,'고척 스카이돔'), \
    (8,'삼성 라이온즈 파크'), \
    (9,'한화 생명 이글스 파크'), \
    (10,'수원 KT 위즈 파크') \
    )

seat_q_list = ( \
    (1, "당신은 치어리더와 함께 응원 열기를 즐기면서 경기를 관람하고 싶나요?", 6,5,2,4,1,3 ), \
    (2, "당신은 넓은 시야에서 전체적으로 야구 경기를 관람하고 싶나요?", 2,3,6,1,5,4 ), \
    (3, "내야 수비진과 투수진들을 가까이에서 보고 싶나요?", 4,6,2,5,1,3), \
    (4, "편하게 음식을 먹으면서 경기를 관람하고 싶나요?", 1,4,4,2,4,6), \
    (5, "직접 선수들과 함께 경기를 뛰는 느낌을 체험하고 싶나요?", 5,4,2,6,3,1), \
    (6, "외야 수비진들을 가까이에서 보고 싶나요?", 3,5,1,2,6,4) \
    )

#
# 구장 선택
#
for stad_id, stad_name in stadium_list :
    print(f'({stad_id}) {stad_name}')

ans = input ("오늘 방문하는 구장이 어디인가요 (1~10)?")
print(ans)

#
# 선택한 구장 출력
#
for stad_id, stad_name in stadium_list :
    # print(f'{ans} {stad_id} {stad_name}')
    if str(ans) == str(stad_id) :
        print(f'{stad_name}')
        break
# stad_id
# stad_name

#
# 선호 좌석 유형 질문
#
cheer = 0.1
ilban = 0.2
center = 0.3
exciting = 0.4
outside = 0.5
table = 0.6

for q_id, q_seat, s1,s2,s3,s4,s5,s6 in seat_q_list :
    print(q_seat, end='(y/n)')
    ans = input(': ')
    if str(ans) == 'y' :
        cheer = cheer + s1
        ilban = ilban + s2
        center = center + s3
        exciting = exciting + s4
        outside = outside + s5
        table = table + s6
    elif str(ans) == 'n' :
        cheer = cheer - s1
        ilban = ilban - s2
        center = center - s3
        exciting = exciting - s4
        outside = outside - s5
        table = table - s6

#
# 각 구장마다 좌석이름
#
seat_name_list = ( \
    (1, "레드석", "블루석", "중앙네이비석", "익사이팅존", "외야자유석", "테이블석"), \
    (2, "레드석", "블루석", "중앙네이비석", "익사이팅존", "외야자유석", "테이블석"), \
    (3, "내야필드석", "내야상단석" , "중앙상단석", "익사이팅존", "외야자유석", "탁자석"), \
    (4, "응원지정석", "의자지정석" , "중앙일반석", "프렌들리존", "외야일반석&그린존", "탁자지정석"), \
    (5, "응원석", "내야지정석" , "필드,중앙테이블", "다이나믹존", "외야지정석", "테이블석"), \
    (6, "K5", "K7" , "중앙K3", "서프라이즈석", "외야석", "피크닉석,페이코석"), \
    (7, "버건디석", "다크버건디석" , "중앙지정석", "로얄다이아몬드클럽", "외야(비)지정석", "테이블석"), \
    (8, "블루존", "내야지정석" , "중앙스카이지정석", "익사이팅석", "외야석", "테이블석"), \
    (9, "내야응원단석", "내야지정석" , "한화다이렉트,페이코존", "익사이팅존", "외야지정석", "탁자석"), \
    (10, "내야지정석(응원석)", "내야지정석(일반관람석)" , "스카이존", "익사이팅석", "외야자유석", "테이블석") \
    )

for stad_i, cheer_seat, ilban_seat, center_seat, exciting_seat, outside_seat, table_seat in seat_name_list :
    if stad_id == stad_i :
        break

#
# key 값이 동일하면 앞에 정의한 것이 지워져서
# 제일 처음 각 변수의 초기값을 소숫점에서 다르게 정했음.
#
dlist = { \
    cheer : cheer_seat, \
    ilban : ilban_seat, \
    center : center_seat, \
    exciting : exciting_seat, \
    outside : outside_seat, \
    table : table_seat \
    }    
dlist.keys()
dlist_keys = list(dlist.keys())
dlist_keys.sort(reverse=True)

print("당신에게 가장 적합한 좌석은 다음 순서와 같습니다. : \n", list(dlist.values()))

#
# 응원팀 승리확률(보너스)
#

import random

print('\n이번에는랜덤으로 질문을 뽑아 오늘 당신이 응원하는 팀이 승리할 확률을 구해드리겠습니다. y 또는 n로 대답해주세요.\n')

team = input ("당신이 가장 응원하는 팀은 어디인가요?")

q_all_list = ( \
    (f'{team}의 상대팀에 대한 승률이 6할 이상입니까?','y',30,'n',5), \
    (f'{team}의 선발투수가 지난 시즌 10승 이상을 기록하고 있습니까?','y',30,'n',5), \
    (f'{team}의 4번 타자 시즌 장타율이 5할 이상입니까?','y',20,'n',5), \
    (f'{team}의 9번 타자 시즌 타율이 2할 이상입니까?','y',30,'n',10), \
    (f'{team}의 1번타자의 시즌 출루율이 3할 6푼 이상입니까?','y',40,'n',5), \
    (f'{team}의 포수의 시즌 도루저지율이 2할 5푼 이상입니까?','y',60,'n',10), \
    (f'{team}의 외야수 세 명의 수비율이 모두 9할 8푼 이상입니까?','y',5,'n',0), \
    (f'{team}의 내야수 네 명의 수비율이 모두 9할 5푼 이상입니까?','y',30,'n',5), \
    (f'{team}의 선발투수의 평균자책점이 3점 이하입니까?','y',20,'n',10), \
    (f'{team}의 선발투수 시즌 승률/ 지난 시즌 승률이 7할 5푼 이상입니까?','y',50,'n',10), \
    (f'{team}의 선발투수의 지난 시즌 WAR이 3.5 이상입니까?','y',40,'n',20), \
    (f'{team}의 5회까지 팀 실책이 하나 이상입니까?','y',40,'n',10), \
    (f'{team}의 안타율이 지난 시즌 평균 이상입니까?','y',30,'n',10), \
    (f'{team}의 장타율이 지난 시즌 평균 이상입니까?','y',50,'n',10), \
    (f'{team}의 중간 계투진의 피안타율이 모두 2할 이하입니까?','y',20,'n',5), \
    (f'{team}의 중간 계투진의 평균 자책점이 모두 5.5점 이하입니까?','y',20,'n',5), \
    (f'{team}의 2번 타자의 OPS가 8할 5푼 이상입니까?','y',50,'n',10), \
    (f'{team}의 3번 타자의 OPS가 8할 5푼 이상입니까?','y',30,'n',0), \
    (f'{team}의 4번 타자의 지난 시즌 홈런 개수가 20개 이상입니까?','y',40,'n',20), \
    (f'{team}의 지명타자의 지난 시즌 안타 개수가 160개 이상입니까?','y',20,'n',5), \
    )
q_list = random.sample(q_all_list, 12)




total_score = 0
my_score = 0
for q, a, w, a2, w2 in q_list :
    q_colon = q + ' : '
    my_ans = input(q_colon)
    if w < w2 :
        total_score = total_score + w2
    else :
        total_score = total_score + w
    if my_ans == a :
        my_score = my_score + w
    elif my_ans == a2 :
        my_score = my_score + w2
print('Total score = ', total_score)
print('My score = ', my_score)
percentage = round(my_score * 100)/total_score
print(f'오늘 {team}이/가 승리할 확률은 ',percentage,'입니다')

Javascript Day3

Sun, 19 Feb 2023 12:42:34 GMT

오늘은 nomadcoders 강의를 통한 javascript 공부 세 번째 날입니다.

#4.0 (Input Values)

html (make input and a button)

javascript (get the input and the button)

//search for the id
const loginForm=document.getElementById("login-form");
//inside of the id-form we search for the input and the button
const loginInput=loginForm.querySelector("input");
const loginButton=loginForm.querySelector("button");
//the same thing is
const loginInput2=document.querySelector("#login-form input");
const loginButton2=document.querySelector("#login-form button");

display "clicked" when the login button is clicked

//search for the id
const loginForm=document.getElementById("login-form");
//inside of the id-form we search for the input and the button
const loginInput=loginForm.querySelector("input");
const loginButton=loginForm.querySelector("button");


function onLoginBtnClick() {
    console.log("clicked")
}
loginButton.addEventListener("click",onLoginBtnClick);

the output

get the value when pressed the button

//search for the id
const loginForm=document.getElementById("login-form");
//inside of the id-form we search for the input and the button
const loginInput=loginForm.querySelector("input");
const loginButton=loginForm.querySelector("button");


function onLoginBtnClick() {
    console.log(loginInput.value)
    }
loginButton.addEventListener("click",onLoginBtnClick);

the output

#4.1 (Form Submission)

using if statement for conditionals (alert when the value is empty or too long)

//search for the id
const loginForm=document.getElementById("login-form");
//inside of the id-form we search for the input and the button
const loginInput=loginForm.querySelector("input");
const loginButton=loginForm.querySelector("button");

function onLoginBtnClick() {
    const username=loginInput.value;
    if (username===""){
        alert("Please write your name");
    }else if(username.length>15){
        alert("Your name is too long");
    }
    }
loginButton.addEventListener("click",onLoginBtnClick);

can set conditionals with html

however everytime I press login button or press enter, the form will be submitted and the page will be refreshed -> we don't get to focus on clicking the button anymore and all we care is about submitting the form (value)

#4.2~4.3 (Events)

we don't need the button anymore as we are focusing on the submit action

//search for the id
const loginForm=document.getElementById("login-form");
//inside of the id-form we search for the input and the button
const loginInput=loginForm.querySelector("input");


function onLoginSubmit() {
    const username=loginInput.value;
    console.log(username);
    }

loginForm.addEventListener("submit",onLoginSubmit);

stopping the page refresh from happening

//search for the id
const loginForm=document.getElementById("login-form");
//inside of the id-form we search for the input and the button
const loginInput=loginForm.querySelector("input");


function onLoginSubmit(event) {
      //stops the default behavior of the window such as refreshing the page
    event.preventDefault();
    console.log(loginInput.value);
    }

loginForm.addEventListener("submit",onLoginSubmit);

you are creating a function (onLoginSubmit) and giving that function one argument (event), when somebody submits the form, javascript will call the function with the event object, and the object has the function called preventDefault which will stop the default behaviors from happening

preventDefault 함수는 EventListener 함수의 '첫 번째 argument' 안에 있는 함수인데, 첫 argument는 지금 막 벌어진 event들에 대한 정보를 갖고 있다. JS는(기본적으로)argument를 담아서 함수를 호출하는데, 이 argument가 기본 정보들을 제공하고 있다. ex) 누가 submit주체인지, 몇 시에 submit을 했는지 등등 콘솔에 출력해보면 알 수 있음

another example with clicking link and moving on to a new website


 
Go to courses

javascript to set alert when the link is clicked (however does move on to the website when the alert is closed - default)

const link=document.querySelector("a");

function handleLinkClick(){
    alert("clicked");
}

link.addEventListener("click",handleLinkClick);

more about the object in the function

//search for the id
const loginForm=document.getElementById("login-form");
//inside of the id-form we search for the input and the button
const loginInput=loginForm.querySelector("input");

function onLoginSubmit(event) {
    event.preventDefault();
    console.log(loginInput.value);
    }

loginForm.addEventListener("submit",onLoginSubmit);

const link=document.querySelector("a");

function handleLinkClick(event){
    console.log(event);
    alert("clicked");
}

link.addEventListener("click",handleLinkClick);

//the first object(event) in the function(handleLinkClick) will the be information about the event(link being click) that just happened
//when console.log(event), there are many information that I can get, because it is a "click", this event is regarded as a pointerevent

the output the browser will not lead us to the new website because we prevented the default action

onst link=document.querySelector("a");

function handleLinkClick(event){
    event.preventDefault();
}

link.addEventListener("click",handleLinkClick);

#4.4 (Getting Username)

step 1 (the user submits the username and the form disappears) html script

css script (make a class called hidden)

.hidden{
    display:none;
}

javascript (css is triggered when the user inputs their username)

//search for the id
const loginForm=document.getElementById("login-form");
//inside of the id-form we search for the input and the button
const loginInput=loginForm.querySelector("input");

function onLoginSubmit(event) {
    event.preventDefault();
    const username=loginInput.value;
    loginForm.classList.add("hidden");
    console.log(username);
    }

loginForm.addEventListener("submit",onLoginSubmit);

step 2 (make the username appear) html script (add ID called "greeting")

javascript

//search for the id
const loginForm=document.getElementById("login-form");
//inside of the id-form we search for the input and the button
const loginInput=loginForm.querySelector("input");
//grabbing the id from the html script
const greeting = document.querySelector("#greeting");

//uppercase variables are variables that are regarded to contain only strings
const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event) {
    //prevent the default event from happening
    event.preventDefault();
    //hide the form by adding the hidden classname
    loginForm.classList.add(HIDDEN_CLASSNAME);
    //save the username in a variable
    const username=loginInput.value;
     //put some text inside the h1(greeting)
    greeting.innerText = "Hello " + username;
      //h1 has the text but we need to remove the hidden class
    greeting.classList.remove(HIDDEN_CLASSNAME);
    }

loginForm.addEventListener("submit",onLoginSubmit);

displaying the username with different code ('는 숫자 1옆에 있는 물결표시와 함께 사용되는 자판을 이용할 것)

//search for the id
const loginForm=document.getElementById("login-form");
//inside of the id-form we search for the input and the button
const loginInput=loginForm.querySelector("input");

const greeting = document.querySelector("#greeting");

//uppercase variables are variables that are regarded to contain only strings
const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event) {
    //prevent the default event from happening
    event.preventDefault();
    //hide the form by adding the hidden classname
    loginForm.classList.add(HIDDEN_CLASSNAME);
    //save the username in a variable
    const username=loginInput.value;
    greeting.innerText = `Hello ${username} keep writing`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
    }

loginForm.addEventListener("submit",onLoginSubmit);

#4.5 (Saving Username)

there is an API (local storage) that has the program to remember values in the browser -> go to developer tools -> application and you can find the local storage

the first one is regarded as key and the second is regarded as value

localStorage.setItem("username","jisu")

the output get the value

localStorage.getItem("username")

remove the value

localStorage.removeItem("username")

javascript to save the value

//search for the id
const loginForm=document.getElementById("login-form");
//inside of the id-form we search for the input and the button
const loginInput=loginForm.querySelector("input");

const greeting = document.querySelector("#greeting");

//uppercase variables are variables that are regarded to contain only strings
const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event) {
    //prevent the default event from happening
    event.preventDefault();
    //hide the form by adding the hidden classname
    loginForm.classList.add(HIDDEN_CLASSNAME);
    //save the username in a variable
    const username=loginInput.value;
      //save the value in the local storage
    localStorage.setItem("username",username);
    //we take the empty h1 and fill it with username
    greeting.innerText = `Hello ${username} keep writing`;
    //remove the clasname named "hidden"
    greeting.classList.remove(HIDDEN_CLASSNAME);
    }

loginForm.addEventListener("submit",onLoginSubmit);

#4.6(Loading Username)

check if the user already exists in the local storage when there is no username in the local storgae, the following code displays "null"

localStorage.getItem("username")

add a "hidden" class to the form so the browser displays nothing at first

if statement --> when the local storage is null, then the hidden class in the form is removed and the login form is displayed (onLoginSubmit function is executed), once it is saved then afterwards the browser keeps displaying "hello username"

//search for the id
const loginForm=document.getElementById("login-form");
//inside of the id-form we search for the input and the button
const loginInput=loginForm.querySelector("input");

const greeting = document.querySelector("#greeting");

//uppercase variables are variables that are regarded to contain only strings
const HIDDEN_CLASSNAME = "hidden";
//when you are repeating strings, it is better to save them as constant variables 
const USERNAME_KEY = "username";

function onLoginSubmit(event) {
    //prevent the default event from happening
    event.preventDefault();
    //hide the form by adding the hidden classname
    loginForm.classList.add(HIDDEN_CLASSNAME);
    //save the username in a variable
    const username=loginInput.value;
    localStorage.setItem(USERNAME_KEY,username);
    //we take the empty h1 and fill it with username
    greeting.innerText = `Hello ${username}`;
    //remove the clasname named "hidden"
    greeting.classList.remove(HIDDEN_CLASSNAME);
    }

const savedUsername=localStorage.getItem(USERNAME_KEY);
if (savedUsername===null){
    //show the form
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit",onLoginSubmit);
}else{
    //show the greeting comments
    greeting.innerText = `Hello ${savedUsername}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

removing the same lines of code with a function called "paintGreetings"

//search for the id
const loginForm=document.getElementById("login-form");
//inside of the id-form we search for the input and the button
const loginInput=loginForm.querySelector("input");

const greeting = document.querySelector("#greeting");

//uppercase variables are variables that are regarded to contain only strings
const HIDDEN_CLASSNAME = "hidden";
//when you are repeating strings, it is better to save them as constant variables 
const USERNAME_KEY = "username";

function onLoginSubmit(event) {
    //prevent the default event from happening
    event.preventDefault();
    //hide the form by adding the hidden classname
    loginForm.classList.add(HIDDEN_CLASSNAME);
    //save the username in a variable
    const username=loginInput.value;
    localStorage.setItem(USERNAME_KEY,username);
      //the username is coming from the loginInput.value
    paintGreetings(username);
    }

function paintGreetings(username){
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

const savedUsername=localStorage.getItem(USERNAME_KEY);
if (savedUsername===null){
    //show the form
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit",onLoginSubmit);
}else{
    //show the greeting comments
      //the username is comming from the local storage
    paintGreetings(savedUsername);
}

paintGreetings() really don't have to receive anything, because we know there is a user in the local storage, however this way we search for the username two times with the code (localStorage.getItem(USERNAME_KEY);)

//search for the id
const loginForm=document.getElementById("login-form");
//inside of the id-form we search for the input and the button
const loginInput=loginForm.querySelector("input");

const greeting = document.querySelector("#greeting");

//uppercase variables are variables that are regarded to contain only strings
const HIDDEN_CLASSNAME = "hidden";
//when you are repeating strings, it is better to save them as constant variables 
const USERNAME_KEY = "username";

function onLoginSubmit(event) {
    //prevent the default event from happening
    event.preventDefault();
    //hide the form by adding the hidden classname
    loginForm.classList.add(HIDDEN_CLASSNAME);
    //save something on the local storage
    localStorage.setItem(USERNAME_KEY,username);
    //the moment we call the function, that username will already be saved on the local storage
    paintGreetings();
    }

function paintGreetings(){
      //look for the username in the local storage
    const username= localStorage.getItem(USERNAME_KEY);
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

const savedUsername=localStorage.getItem(USERNAME_KEY);
if (savedUsername===null){
    //show the form
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit",onLoginSubmit);
}else{
    //show the greeting comments
    paintGreetings();
}

Javascript Day2

Thu, 09 Feb 2023 12:23:16 GMT

Javascript 스터디 두번째 시간입니다. 오늘은 nomadcoders 강의를 3강까지 들었습니다. 벌써 50%나 완료했네용.

#3.0 (The Document Object)

• when you type 'document' in the console, it displays the html script, this means that 'document' is an object already built in the browser • document.title : you can get the title written in the html script

 Title

• when you type document.title="Hi", then the title changes to 'Title' • you are able to read html from javacript, but you are also able to change html in javacript (refresh? then changed to the original value)

#3.1 (HTML in Javascript)

add a new line in html script


 Grab me!

to see the data of the object 'title'

const title = document.getElementById("title");
console.dir(title);

change and check html using javascript

//we've created an element in the html which is
Grab me!
//grabbed it here
const title = document.getElementById("title");
//changed the name of the title
title.innerText="Got you";
//you can check the id 
console.log(title.id);
//you can check the class
console.log(title.className);

#3.2 (Searching for Elements)

html code with 5 lines of h1


 Grab me!
 Grab me!
 Grab me!
 Grab me!
 Grab me!

javascript code to display them

const hellos = document.getElementsByClassName("hello");

console.log(hellos);

//hellos is an array so it doesn't have hellos.something
//it is get Element's', be careful of the s

the output

you try something new by changing the html code using div


 
    Grab me!

getElementsByTagName in javascript

const title = document.getElementsByTagName("h1");
console.log(title);
//still title is an array, it can't do title.something

the output

document.querySelector (grab something using the css selector)

const title = document.querySelector(".hello h1");
console.log(title);
//inside the class "hello" get me the h1
//.hello because it is a css selector

the output

you only get the first element when using document.querySelector even though you repeat it in the html script


 
    Grab me1
 
 
    Grab me2
 
 
    Grab me3

javascript with .querySelector

const title = document.querySelector(".hello h1");
console.log(title);

the output is still

change to querySelectorAll and it gives you an array of 3 h1

const title = document.querySelectorAll(".hello h1");
console.log(title);

the output

the two codes are the same thing

//in querySelector you don't know what you are searching for so you add # to indicate it is an ID
const title = document.querySelector("#hello");
const title = document.getElementById("hello");

everything using javascript on html is possible because we have

#3.3~3.5 (Events)

the following code will display "Grab Me 1"

const title = document.querySelector("div.hello:first-child h1");
console.log(title);

change color

title.style.color="blue";

event : when I click, when I press enter, when my mouse hovers over..

addEventListener(type, listener) type: a case-sensitive string representing the event type to listen for listener : the object that receives a notification (an object that implements the event interface) when an event of the specified type occures, this must be null, an object with a handleEvent() method, or a JavaScript function.

const title = document.querySelector("div.hello:first-child h1");

function handleTitleClick(){
    console.log("title was clicked");
}

title.addEventListener("click", handleTitleClick);
//javacript will look when someone clicks on the title and they will press play of the function for me
//so do not do handleTitleClick() because the javascript will play for us

change the color whenever we press the sentence

const title = document.querySelector("div.hello:first-child h1");

function handleTitleClick(){
    title.style.color="blue";
}

title.addEventListener("click", handleTitleClick);

to search for what events javascript can listen you can search for "h1 html element mdn -web api" click on the link and search for "events"

mouse hover over and displays comments

const title = document.querySelector("div.hello:first-child h1");
function handleMouseEnter(){
   console.log("mouse is here");
}
title.addEventListener("mouseenter", handleMouseEnter)

when the mouse hovers then the text is changed, when the mouse is gone the text is also changed

const title = document.querySelector("div.hello:first-child h1");

function handleMouseEnter(){
    title.innerText="Mouse is here!";
}

function handleMouseLeave(){
    title.innerText="Mouse is gone!";
 }

title.addEventListener("mouseenter", handleMouseEnter)
title.addEventListener("mouseleave",handleMouseLeave)

another way of listening to the events

title.addEventListener=("mouseenter", handleMouseEnter)
title.onmouseenter=handleMouseEnter
//they are the same
//the reason we use .addEventListener is that later we can do .removeEventListener

resize window to change background color

function handleWindowResize(){
   document.body.style.backgroundColor="tomato";
}

window.addEventListener("resize",handleWindowResize)

copy then show alert message

function handleWindowCopy(){
    alert("copier!");
 }
window.addEventListener("copy",handleWindowCopy)

check wifi

function handleWindowOffline(){
    alert("SOS NO WIFI!");
 }
window.addEventListener("offline",handleWindowOffline)

function handleWindowOnline(){
    alert("WIFI CONNECTED!");
 }
window.addEventListener("online",handleWindowOnline)

#3.6~3.8 (CSS in Javascript)

get and set color

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {
    //get
    console.log(h1.style.color);
    //set
    h1.style.color="blue";
    //get
    console.log(h1.style.color);
}

h1.addEventListener("click", handleTitleClick);

change color using if statement

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {
    if(h1.style.color==="blue"){
        h1.style.color="tomato";
    } else {
        h1.style.color="blue";
    }
}

h1.addEventListener("click", handleTitleClick);

using const and let to change color

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {
    const currentColor = h1.style.color;
    let newColor;
    if(currentColor==="blue"){
        newColor="tomato";
    } else {
        newColor="blue";
    }
    h1.style.color=newColor;
}

h1.addEventListener("click", handleTitleClick);

change style using css css script

body{
    background-color:beige;
}

h1 {
    color: cornflowerblue;
}

.active{
    color:tomato;
}

javascript code

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {
    h1.className="active"
}
//javascript will modify html and css will be looking at the html

h1.addEventListener("click", handleTitleClick);

if not active then the original color, when the class name is set to active then change the color indicated in css

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {
    if(h1.className ==="active"){
        h1.className="";
    } else {
        h1.className="active";
    }
}

h1.addEventListener("click", handleTitleClick);

transition in css - the color fades in and fades out when you click on it

h1 {
    color: cornflowerblue;
    transition: color .5s ease-in-out;
}

to prevent making mistakes when using id names we can use const to make a variable to repeat

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {
    const activeClass = "active";
    if(h1.className ===activeClass){
        h1.className="";
    } else {
        h1.className=activeClass;
    }
}

h1.addEventListener("click", handleTitleClick);

classList helps you work with the list of classes

if I want to add a new css but wants them to stay

.sexy-font{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

I can use classList so that the sexy-font would stay and the active would be added or removed everytime I click

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {
    const activeClass = "active";
    if(h1.classList.contains(activeClass)){
        h1.classList.remove(activeClass)="";
    } else {
        h1.classList.add(activeClass);
    }
}

h1.addEventListener("click", handleTitleClick);

toggle does the same thing with the whole if statement in javascript if "active" is in the classList, toggle will remove "active" and if "active" is not in the classList, toggle will add "active" to the classList

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {
    h1.classList.toggle("active");
}

h1.addEventListener("click", handleTitleClick);

C#-Assignment5

Fri, 03 Feb 2023 18:07:14 GMT

다섯 번째 작고 소듕한 과제(Petting Zoo)입니다.

첫 번째로는 main.cs 코드입니다.

using System;

class Program {
  public static void Main (string[] args) {
    Zoo BtownZoo = new Zoo("Happy Pets", "Bloomingon", 8);

    Animal[] arr = new Animal[] {
      new Goat("Goatee", 3, false, false, false),
      new Goat("Jeni", 4, true, true, true),
      new Goat("Jumper", 2, true, true, false),
      new Goat("Kid", 1, true, true, true),
      new Goat("Pete", 2, false, false, true),
      new Pony("Bolt", 3, false, 50, 5, true, false),
      new Pony("Colt", 4, true, 30, 10, true, true)
    };

    foreach (Animal a in arr) BtownZoo.AddAnimal(a);

    ZooOperations ZooInc = new ZooOperations(BtownZoo);
    ZooInc.Run();

  }
}

다음으로는 zoo.cs 코드입니다.

using System;
using System.Collections.Generic;

public class Zoo
{
  public string Name { get; set; }
  public string City { get; set; }
  public int Capacity { get; set; }
  public List Animals {get; set; }

  public Zoo (string name, string city, int capacity)
  {
    Name = name;
    City = city;
    Capacity = capacity;
    Animals = new List();
  }

  public void AddAnimal(Animal animal)
  {
    // ***** [CODE] *****
    // Only if there is capacity add the given animal.
    // Otherwise print a warning that the given animal is not added.
    // Hint: Use the ToString of the animal object.
    if (Animals.Count < 8) Animals.Add(animal);
    else Console.WriteLine("Zoo is at capacity. Cannot add animal" + " " + animal.GetType().Name + " " + animal.Name + " (" + animal.Age + "/" + animal.Female + ")");
  }

  public void RemoveAnimal(string name) 
  {
    // ***** [CODE] *****
    // Look for the name of the animal and if found, 
    // remove it from the Animals list.
    var item = Animals.Find(x=>x.Name == name);
    Animals.Remove(item);
  }

  public void ListAnimals()
  {
    string heading = String.Format("{0} in {1} (Capacity {2}/{3})", 
      Name, City, Animals.Count, Capacity);
    Console.WriteLine(heading);
    Console.WriteLine("".PadRight(heading.Length, '-'));

    // ***** [CODE] *****
    // Print the Animals list.
    foreach(Animal animal in Animals)
    {
    Console.WriteLine(animal);
    }
  }

  public void FeedAnimals()
  {
    // ***** [CODE] *****
    // Feed all the animals.
    foreach(Animal animal in Animals)
    {
      Console.WriteLine(animal.GetType().Name + " " + animal.Name + " is fed");
    }
    Console.WriteLine("All animals are fed.");
  }

  public void ClearAnimals()
  {
    // ***** [CODE] *****
    // Clear the animals.
    ClearAnimals();
  } 
}

다음은 animal.cs입니다.

using System;

public abstract class Animal
{
  public string Name { get; set; }
  public int Age { get; set; }
  public bool Female { get; set; }
  public Animal(string name, int age, bool female)
  {
    Name = name;
    Age = age;
    Female = female;    
  }

  public override string ToString()
  {
    return String.Format("{0} {1} ({2}/{3})", this.GetType(), Name, Age, 
                         Female ? "F" : "M"); 
  }  

  public abstract void Eat();
}

interface Pet
{
  bool Playful { get; set; }
  bool Adoptable { get; set; }
}

interface Riding
{
  int MaxRiderWeight { get; set; }
  int RestBetweenRides { get; set; }
}

interface Cost
{
  double FeedCost { get; set; }
}

class Goat : Animal, Pet
{
  public bool Playful { get; set; }
  public bool Adoptable { get; set; }

  public override string ToString()
  {
    return String.Format("{0} {1}{2}",
                         base.ToString(), 
                         Playful ? " Playful" : "", 
                         Adoptable ? " Adoptable" : "");
  }

  public Goat(string name, int age, bool female) : base(name, age, female)
  {
  }

  public Goat(string name, int age, bool female, bool playful, bool adoptable) :
    base(name, age, female)
  {
    // ***** [CODE] *****
    // Set properties that are specific to this class.
    Playful = playful;
    Adoptable = adoptable;
  }

  public override void Eat()
  {
    Console.WriteLine("{0} {1} is fed.", this.GetType(), Name);
  }
}

class Pony : Animal, Pet, Riding
{
  public bool Playful { get; set; }
  public bool Adoptable { get; set; }

  private int maxWeight; 
  public int MaxRiderWeight { 
    get { return maxWeight; }
    set { 
      // ***** [CODE] *****
      // Do not allow more than 100 pounds or negative values. 
      // Default max is 100.
      maxWeight = 100;
      if (value>100 || value<0) Console.WriteLine("Not allowed value.");
      else maxWeight = value;
    }
  }

  private int restMinutes;
  public int RestBetweenRides { 
    get { return restMinutes; }
    set { 
      // ***** [CODE] *****
      // Do not less than 5 minutes rest
      // Default minimum is 5.
      restMinutes = 5;
      if (value<5) Console.WriteLine("Not allowed value.");
      else restMinutes = value; 
    }
  }

  public override string ToString()
  {
    return String.Format("{0} {1}{2}{3}{4}",
                         base.ToString(), 
                         "[max "+ MaxRiderWeight + " lbs] ",
                         "[rest "+ RestBetweenRides + " mins]",
                         Playful ? " Playful" : "", 
                         Adoptable ? " Adoptable" : "");
  }

  public Pony(string name, int age, bool female) : base(name, age, female)
  {
  }

  public Pony(string name, int age, bool female, int maxriderweight, int restbetweenrides, bool playful, bool adoptable) :
    base(name, age, female)
  {
    // ***** [CODE] *****
    // Set properties that are specific to this class.
    MaxRiderWeight = maxriderweight;
    RestBetweenRides = restbetweenrides;
    Playful = playful;
    Adoptable = adoptable;
  }

  public override void Eat()
  {
    Console.WriteLine("{0} {1} is fed.", this.GetType(), Name);
  }
}

// ***** [CODE] *****
// Code all there additional animal classes. They should implement the 
// required interfaces and provide ToString overrides as in Goat and Pony.
//
// class Peacock : Animal
class Peacock : Animal
{
  public Peacock(string name, int age, bool female) :
    base(name, age, female)
  {
  }
  public override void Eat()
  {
    Console.WriteLine("{0} {1} is fed.", this.GetType(), Name);
  }
}
// 
// class Pig : Animal, Pet
// Hint: Copy from Goat
class Pig : Animal, Pet
{
  public bool Playful { get; set; }
  public bool Adoptable { get; set; }

  public override string ToString()
  {
    return String.Format("{0} {1}{2}",
                         base.ToString(),
                         Playful ? " Playful" : "", 
                         Adoptable ? " Adoptable" : "");
  }

  public Pig(string name, int age, bool female) : base(name, age, female)
  {
  }

  public Pig(string name, int age, bool female, bool playful, bool adoptable) :
    base(name, age, female)
  {
    // ***** [CODE] *****
    // Set properties that are specific to this class.
    Playful = playful;
    Adoptable = adoptable;
  }

  public override void Eat()
  {
    Console.WriteLine("{0} {1} is fed.", this.GetType(), Name);
  }
}

// 
// class Donkey : Animal, Pet, Riding
// Hint: Copy from Pony
class Donkey : Animal, Pet, Riding
{
  public bool Playful { get; set; }
  public bool Adoptable { get; set; }

  private int maxWeight; 
  public int MaxRiderWeight { 
    get { return maxWeight; }
    set { 
      // ***** [CODE] *****
      // Do not allow more than 100 pounds or negative values. 
      // Default max is 100.
      maxWeight = 100;
      if (value>100 || value<0) Console.WriteLine("Not allowed value.");
      else maxWeight = value;
    }
  }

  private int restMinutes;
  public int RestBetweenRides { 
    get { return restMinutes; }
    set { 
      // ***** [CODE] *****
      // Do not less than 5 minutes rest
      // Default minimum is 5.
      restMinutes = 5;
      if (value<5) Console.WriteLine("Not allowed value.");
      else restMinutes = value; 
    }
  }

  public override string ToString()
  {
    return String.Format("{0} {1}{2}{3}{4}",
                         base.ToString(), 
                         "[max "+ MaxRiderWeight + " lbs] ",
                         "[rest "+ RestBetweenRides + " mins]",
                         Playful ? " Playful" : "", 
                         Adoptable ? " Adoptable" : "");
  }

  public Donkey(string name, int age, bool female) : base(name, age, female)
  {
  }

  public Donkey(string name, int age, bool female, int maxriderweight, int restbetweenrides, bool playful, bool adoptable) :
    base(name, age, female)
  {
    // ***** [CODE] *****
    // Set properties that are specific to this class.
    MaxRiderWeight = maxriderweight;
    RestBetweenRides = restbetweenrides;
    Playful = playful;
    Adoptable = adoptable;
  }

  public override void Eat()
  {
    Console.WriteLine("{0} {1} is fed.", this.GetType(), Name);
  }
}

마지막으로 ZooOperations.cs 코드입니다.

using System;
using System.IO;
using System.Collections.Generic;

public class ZooOperations
{
  private Zoo zoo { get; set; }

  public ZooOperations(Zoo z)
  {
    zoo = z;
  }

  public void Run()
  {
    string[] line;
    string input, command;
    do {
      Console.Write("Zoo Op > ");
      input = Console.ReadLine();
      line = input.Split(',');
      if (line.Length == 0) continue;
      command = line[0].ToLower();
      switch (command) {
        case "help":
          Console.WriteLine("Commands: add clear feed help list remove quit");
          Console.WriteLine("Command line arguments are comma separated.");
          break;
        case "exit":
        case "quit":
        case "q": 
          return;
        case "add":
          AddAnimal(line);
          break;
        case "clear":
          zoo.ClearAnimals();
          break;
        case "feed":
          zoo.FeedAnimals();
          break;
        case "list":
          zoo.ListAnimals();
          break;
        case "remove":
          RemoveAnimal(line);
          break;
        default:
          Console.WriteLine("Error in Command");
          break;
      }
    } while(true);
  }

  private void AddAnimal(string[] cmd)
  {
    if (cmd.Length < 4) { 
      Console.WriteLine("Error: Missing required arguments");
      return;
    }
    string kind = cmd[1].ToLower();
    string name = cmd[2];
    int age;
    int.TryParse(cmd[3], out age);
    bool female = Array.IndexOf(cmd, "female") > 0;
    bool playful = Array.IndexOf(cmd, "playful") > 0;
    bool adoptable = Array.IndexOf(cmd, "adoptable") > 0;
    switch (kind) {
      case "peacock":
        // ***** [CODE] *****
        // Add code to create a new peacock and add it to the zoo.
        Animal peacock = new Peacock(name, age, female);
        zoo.AddAnimal(peacock);
        break;
      case "goat":
        Animal goat = new Goat(name, age, female, playful, adoptable);
        zoo.AddAnimal(goat);
        break;
      case "pig":
        // ***** [CODE] *****
        // Add code to create a new pig and add it to the zoo.
        // Hint: See how "goat" is done above.
        Animal pig = new Pig(name, age, female);
        zoo.AddAnimal(pig);
        break;
      case "pony":
        if (cmd.Length < 7) Console.WriteLine("Error: Missing arguments");
        else {
          int load, rest;
          int.TryParse(cmd[5], out load);
          int.TryParse(cmd[6], out rest);
          Animal pony = new Pony(name, age, female, load, rest, playful, adoptable);
          zoo.AddAnimal(pony);
        }
        break;
      case "donkey":
        // ***** [CODE] *****
        // Add code to create a new donkey and add it to the zoo.
        // Hint: See how "donkey" is done above.
        Animal donkey = new Donkey(name, age, female);
        zoo.AddAnimal(donkey);
        break;        
      default:
        Console.WriteLine("Error in command");
        break;
    }
  }

  private void RemoveAnimal(string[] cmd)
  {
    if (cmd.Length < 2) { 
      Console.WriteLine("Error: Remove needs an argument");
      return;
    }
    string name = cmd[1];
    zoo.RemoveAnimal(name);
  }

}

최종 결과입니다.

Javascript Day1

Fri, 03 Feb 2023 17:40:04 GMT

Javascript 스터디를 시작하였습니다. 두근두근거리는 마음으로 nomadcoders 강의를 수강하기로 하였습니다. Lecture 1과 Lecture 2 기록용 필기입니다.

#2.1~2.3 (Data Types)

let a = 5;
const b = 2;

const myName = "jisu";
let veryLongVariableName ="this is how it works";

console.log(a+b);
console.log(a*b);
console.log("hello "+ myName);
console.log(veryLongVariableName);

veryLongVariableName = "let can be changed";

console.log(veryLongVariableName);


/* const and let is similar, variables don't change in const, but let is for creating someone, you can update it later
we will never change 'const' but we can update 'let' variables
always use const, sometimes use let, never use var */

#2.4 (Booleans)

const amIFAT = true;
console.log(amIFAT);

const amISLIM = null;
console.log(amISLIM);
/*the output is null, has value the value is null*/

let something;
console.log(something);
/*the output would be undefined, does not have a value*/

#2.5 (Arrays)

const mon = "mon";
const tue ="tue";

const dayOfWeek = mon + tue;

console.log(dayOfWeek);
/* just a whole chunk of strings*/

const dayOfWeek2 = [mon, tue]; /*creating array of week*/
console.log(dayOfWeek2);
/* the output is "mon", "tue"*/

/* or to create an array we could do*/
const dayOfWeek3 = ["mon", "tue", "wed", "thu", "fri", "sat"];
console.log(dayOfWeek3[5]);
dayOfWeek3[5];
/*get the fifth of the array, starting with 0*/

dayOfWeek3[5]="saturday" /*to change what's in the array*/

//Add one more day to the array
dayOfWeek3.push("sun");
console.log(dayOfWeek3);

#2.6 (Objects)

const player = {
    name: "jisu",
    points: 10,
    fat: true,
};

console.log(player);
console.log(player.name);
console.log(player["name"]);

player.fat=false;
//the property gets updated

player.lastName="potato";
//add new property

player.points = player.points + 15;
//get something from the object and update

//console is also an object just like player.name, console.log looks similar

#2.7~2.8 (Functions)

function sayHello(nameOfPerson, age){
    console.log("Hello my name is "+ nameOfPerson + " and I'm " + age+ "years old.");
}


sayHello("jisu", 22);
sayHello("nico", 23);
sayHello("jennings", 24);

//sayHello function takes two arguments, the name of the player and their age

function을 활용한 간단한 계산기 만들기

function plus(firstNumber,secondNumber){
    console.log(firstNumber+secondNumber);
}

plus(2,3)

function divide(a,b){
    console.log(a/b);
}
divide(12,3);

function을 property 취급하기

const player = {
    name: "jisu",
    sayHello: function(otherPersonName){
        console.log("hello " + otherPersonName + " nice to meet you!");
    },
};

console.log(player.name);
player.sayHello("lynn");

#2.11 (Functions)

const age = 96;
function calculateKrAge(ageOfForeigner){
    return ageOfForeigner+2;
}

const krAge = calculateKrAge(age);
//by using return, we replace the line that recalled the final result of the function

console.log(krAge);

console.log 대신 return을 사용한 계산기

const calculator = {
    plus: function (a,b){
        return a+b;
    },
    minus: function (a,b){
        return a-b;
    },
    times: function (a,b){
          return a*b;
    },
      divide: function (a,b){
          return a/b;
    },
      power: function (a,b){
          console.log("hell0");
          return a**b;
          console.log("bye bye");
          //the output returns hello and a**b but does not return bye bye as the function finishes its job at 'return'
    },
};


const plusResult = calculator.plus(2,3);
const minusResult = calculator.minus(plusResult,10);
console.log(plusResult);
console.log(minusResult);

#2.13~2.15 (Conditionals)

const age = prompt("How old are you?"); 
//does not use this anymore because we cannot modify this message box, pause the javascript execution until the user inputs something
console.log(age);

console.log(typeof age);
//looks like a number but it is actually a string

console.log(typeof age, typeof parseInt (age));
//change the string into a number, we use parseInt
//if we try to take a string and put it into parseInt the output would be NaN (not a number)

isNaN as condition (using if statement)

const age = parseInt(prompt("How old are you?")); 

console.log(isNaN(age));
//will return boolean, false=age is a number, true=age is NaN

if(isNaN(age)){
   console.log("Please write a number");
} else{
    console.log("Thank you for writing your age");
}

using elseif for more conditions

const age = parseInt(prompt("How old are you?")); 


if(isNaN(age) || age<0){
   console.log("Please write a positive number");
} else if(age<18){
    console.log("You are too young.");
} else if(age>=18 && age <= 50){
    console.log("You can drink");
} else if(age > 50 && age <=80){
    console.log("You should exercise");
} else if (age ===100){
    console.log("wow you are wise");
} else {
    console.log("Do whatever you want");
}

//and operator is &&, or operator is ||, equal is ===, not equal is !==

C#-Assignment4

Thu, 03 Nov 2022 02:00:47 GMT

저의 작고 소중한 네 번째 과제(Mortgages)입니다. 이번에는 새롭게 배운 class와 object를 기반으로 코드를 짜보았습니다.

using System;

// Create Mortgage Class
public class Mortgage
{
   // Declare properties for Loan, Rate & Term
   public double Loan { get; set; }
   public double Rate { get; set; }
   public int Term {get; set;}

   // Create overload method for validation (double)
   public static double GetDouble(string prompt, double min, double max)
   {
     double number = 0.0;
        string input;
        bool valid;
      do
      {
         Console.Write("{0} ({1} <= range <= {2}) : ", prompt, min, max);
input = Console.ReadLine();
            valid = double.TryParse(input, out number) && number >= min & number <= max;
            if (!valid) Console.WriteLine("Please enter a number in the correct range");
        } while (!valid);
        return number;

   }

   // Create overload method for validation (integer)
   public static int GetInt(string prompt, int min, int max)
   {
      string input;
      int number;
     bool valid;
      do
      {
         Console.Write("{0} ({1} <= range <= {2}) : ", prompt, min, max);
        input = Console.ReadLine();
            valid = Int32.TryParse(input, out number) && number >= min & number <= max;
            if (!valid) Console.WriteLine("Please enter a number in the correct range");
        } while (!valid);
        return number;
   }

   // Setup read-only property for Payment
   private double _Payment;
   public double Payment 
   {
      get
      { 
         if (_Payment == 0) _Payment = CalcPayment(Loan, Rate, Term);
         return _Payment;
      }
   }

   // Setup read-only property for TotalCost
   private double _TotalCost;
   public double TotalCost 
   {
      get
      { 
         if (_TotalCost == 0) _TotalCost = CalcTotalCost(Payment, Term);
         return _TotalCost;
      }
   }

   // Setup read-only property for TotalInterest
   private double _TotalInterest;
   public double TotalInterest 
   {
      get
      { 
         if (_TotalInterest == 0) _TotalInterest = CalcTotalInterest(TotalCost, Loan);
         return _TotalInterest;
      }
   }

   // Create method to calculate the monthly payment amount
   public double CalcPayment(double principal, double annualRate, int months)
   {
      double output = 0;
      double Monthrate = annualRate / 12;
      output = (principal * (Monthrate * Math.Pow(1 + Monthrate,months))) / (Math.Pow(1 + Monthrate, months) - 1);
      return output;
   }

   // Create method to calculate the total cost
   public double CalcTotalCost(double payment, int months)
   {
      double output = 0;
      output = payment * months;
      return output;
   }

   // Create method to calculate the total interest
   public double CalcTotalInterest(double cost, double principal)
   {
      double output = 0;
      output = cost - principal;
      return output;
   }

   // Convert all values to a single string
   public override string ToString()
   {
      string output = "";
      output = Loan.ToString("C2") + ";" + 
              Rate.ToString("P") + ";" +
              Term.ToString() + ";" +
              Payment.ToString("C2") + ";" +
              TotalCost.ToString("C2") + ";" +
              TotalInterest.ToString("C2");
      return output;
   }
}

public class Program
{
  public static void Main (string[] args) 
  {
     // Create values for the header and the separator
    int[] field = new int[] {16,10,8,15,16,16};

        string Header = "Loan".PadLeft(field[0]) +   "Rate".PadRight(field[1]) + "Months".PadRight(field[2]) + "Payment".PadRight(field[3]) + "Total Cost".PadRight(field[4]) + "Interest".PadRight(field[5]);

        string Separator = " ".PadLeft(field[0], '=') + " ".PadLeft(field[1], '=') + " ".PadLeft(field[2], '=') +" ".PadLeft(field[3], '=') +" ".PadLeft(field[4], '=') +" ".PadLeft(field[5], '=');


      //Ask for the user to input the mortgage product amount    
     string s;
     int i;
     bool IsInt = false;
     do
     {
        Console.WriteLine("How many mortgage products would you like to compare? (0 to 10)");
        s = Console.ReadLine();
        IsInt = Int32.TryParse(s, out i);
     } while (i<0 || i>10 || !IsInt);

     Mortgage[] m = new Mortgage[i];
     string[] CompileInfo = new string[i];
     int j;


    //Continue the loop for the amount of mortgage products the user inputted
     for(j = 0; j < i; j++)
     {
        m[j] = new Mortgage();
        Console.WriteLine("Mortgage Product #{0}", j+1);
        m[j].Loan = Mortgage.GetDouble("Loan $", 10000, 1000000);
        m[j].Rate = Mortgage.GetDouble("Rate %", 0.1, 25) / 100;
        m[j].Term = Mortgage.GetInt("Term mo", 60, 360);
        CompileInfo[j] = m[j].ToString();
     }

    //Create header and the top separator
        Console.WriteLine(Header);
     Console.WriteLine(Separator);

    //Fill in the table by seperating the information that was stored in a single string
     for (int k=0; k < i; k++)
      {
        string[] SeparateInfo = CompileInfo[k].Split(';');
        Console.WriteLine(SeparateInfo[0].PadRight(field[0]) +
                        SeparateInfo[1].PadRight(field[1]) +
                        SeparateInfo[2].PadRight(field[2]) +
                        SeparateInfo[3].PadRight(field[3]) +
                        SeparateInfo[4].PadRight(field[4]) +
                        SeparateInfo[5].PadRight(field[5]));
      }

    //Create bottom separator
     string Separator2 = " ".PadLeft((81), '=');
  Console.WriteLine(Separator2);
  }
}

집을 사기 위해 받는 대출(모기지-mortgage) 상품의 개수를 입력하면 그만큼의 loop를 형성하게 됩니다. 이후 loan (대출금액), rate(이자율), term month(상환하는 달 수)를 입력하면 매달 상환해야 하는 금액, 총 금액 및 이자와 함께 테이블에 저장하게 됩니다.

다음은 결과값입니다.

C#-Assignment 3

Thu, 03 Nov 2022 01:52:53 GMT

세 번째 작고 소듕한 과제(Class Roster)입니다. 다음은 main.cs의 코드입니다.

using System;

public class Program
{
   public static void Main()
   {

    // set capacity
    const int Capacity = 40;

    // define arrays
    string[] LastName = new string[Capacity];
    string[] FirstName = new string[Capacity];
    string[] MiddleName = new string[Capacity];
    string[] PhoneNumber = new string[Capacity];
    string[] Email = new string[Capacity];
    string[] GPA = new string[Capacity];

    // define variables 
    string strLastName ="";
    string strFirstName ="";
    string strMiddleName ="";
    string strPhone = "";
    string Phone10digits = "";
    string strphone1;
        string strphone2;
        string strphone3;
    string strEmail;
    string strGPA;
    double dblGPA;
    bool HasNumericDigits;
    bool IsValidPhoneNumber;

   // get user's lastname
        int size = 0;
    do 
    {
      do
      {
        Console.WriteLine ("Last Name = ");
        strLastName = Console.ReadLine();
      }
      while (Validate.HasNumericDigits(strLastName)&&strLastName!="");

      if (strLastName=="") continue;

      LastName[size] = strLastName;


   // get user's firstname 
                  for (int y = 0; y < Capacity; y++)
            {
                 Console.WriteLine ("First Name = ");
           strFirstName = Console.ReadLine();
                int firstLength = strFirstName.Length;

HasNumericDigits = Validate.HasNumericDigits(strFirstName);
                if (HasNumericDigits == true || firstLength == 0)
                {
                    continue;
                }
                else
        {
           FirstName[size] = strFirstName;
        }
break;
            }

   // get user's middlename
      do
      {
        Console.WriteLine ("Middle Name = ");
        strMiddleName = Console.ReadLine();
      }
      while (Validate.HasNumericDigits(strMiddleName));

      MiddleName[size] = strMiddleName;



   // get user's PhoneNumber
                  for (int a = 0; a < Capacity; a++)
            {
            Console.WriteLine ("Phone Number = ");
            strPhone = Console.ReadLine();
IsValidPhoneNumber = Validate.IsValidPhoneNumber(strPhone, out Phone10digits);

                    if (strPhone == "")
             {
                    PhoneNumber[size] = strPhone;
                }
          else if (IsValidPhoneNumber == false)
            {
                            continue;
                        }
                        else
                        {
                            strphone1 = Phone10digits.Insert(0, "(");
                            strphone2 = strphone1.Insert(4, ") ");
                            strphone3 = strphone2.Insert(9, "-");
                            PhoneNumber[size] = strphone3;
                        }
break;
                }

      // get user's email
      do
      {
        Console.WriteLine ("Email = ");
        strEmail = Console.ReadLine();
        if (strEmail == "")
             {
                    Email[size] = strEmail;
                }
          else if (!Validate.IsValidEmail(strEmail) == true)
            {
                            continue;
                        }
                        else
                        {
                            Email[size] = strEmail;
                        }break;     
      }
      while (!Validate.IsValidEmail(strEmail));

      Email[size] = strEmail;


  // get user's GPA
         do
      {
        Console.WriteLine("GPA = ");
        strGPA = Console.ReadLine();
        dblGPA = Convert.ToDouble(strGPA);
      } 
      while (0>dblGPA && dblGPA>4);
      if(strGPA=="")continue;

      string strGpa = Convert.ToString(dblGPA);

      GPA[size] = strGPA;

   //big do while loop
      size++;
    }
    while (size< Capacity && strLastName !="");

  //Print student table
  int[] field = new int[] {20,18,25,4};

    string Header = "Name".PadRight(field[0]) +   "Phone".PadRight(field[1]) + "Email".PadRight(field[2]) + "GPA".PadRight(field[3]);

    string Separator = " ".PadLeft(field[0], '=') + " ".PadLeft(field[1], '=') + " ".PadLeft(field[2], '=') +" ".PadLeft(field[3], '=');

        Console.WriteLine(Header);
        Console.WriteLine(Separator);

    for (int i =0; i < size; i++)
    {
            Console.WriteLine((LastName[i] + ", " + FirstName[i] + " " + MiddleName[i]).PadRight(field[0]) + PhoneNumber[i].PadRight(field[1])+ Email[i].PadRight(field[2]) + GPA[i].PadRight(field[3]));

    }
    string Separator2 = " ".PadLeft((68), '=');
  Console.WriteLine(Separator2);

//get avg gpa
int z = 0;
double sum=0;
for (z = 0; z < size; z++)
         {
          sum+=double.Parse(GPA[z]);
           }
     Console.Write("There are " + z + " student(s) with an average GPA of {0}",Math.Round(sum/ (z),2));

  }
}

다음은 validation.cs의 코드입니다. 해당 코드들은 위의 main.cs에서 이름, 전화번호, 이메일을 validate하는데 사용됩니다. 위에 Validate.()을 통해서 불러와 validation을 하게 되는 구조입니다.

using System;

public class Validate {

  public static bool IsNumericDigit(char c) {
    return '0' <= c && c <= '9';
  }

  public static bool HasNumericDigits(string s) {
    foreach (char c in s)
      if (IsNumericDigit(c)) return true;

// Same loop written with for
//    for (int i = 0; i < s.Length; i++)
//      if (IsNumericDigit(s[i])) return true;

    return false;
  }

  public static bool IsValidPhoneNumber(string s, out string strPhoneNumber) {
    strPhoneNumber = "";
    for (int i=0; i < s.Length; i++) {
      if (IsNumericDigit(s[i]))
        strPhoneNumber += s[i];
      else switch (s[i]) {
        case '-' :
        case '.' :
        case ' ' :
        case '(' :
        case ')' : 
          break;
        default:
          return false; 
      }
    }
    return strPhoneNumber.Length == 10;
  }

  public static bool IsValidEmail(string s) {
        string[] word;
        // Check the presence of exactly one @ character and non-empty user name
        word = s.Split('@');
        if (word.Length != 2 || word[0] == "")
            return false;

        // Check the presence of exactly one dot character and non-empty domain name
        string domain = word[1];
        word = domain.Split('.');
        if (word.Length != 2 || word[0].Length == 0)
            return false;

        // Check the domain suffix
    string suffix = word[1];
        switch (suffix) {
            case "com":
            case "net":
            case "org":
            case "me":
      case "edu":
                break;
            default:
                return false;
        }
        return true;
    }
}

위 코드들을 통해 다음과 아웃풋을 도출하였습니다. 유저가 입력을 마치면 table에 모든 정보를 저장하고 학생들의 수와 학점 평균을 도출합니다.

C#-Assignment 2

Thu, 03 Nov 2022 01:41:19 GMT

다음은 작고 소중한 두 번째 과제(Blooming Patios)입니다.

class MainClass {
  public static void Main (string[] args) {
    //The user inputs the length, width, and depth into the system
    Console.WriteLine("Enter the dimensions of the patio in feet: ");
    Console.WriteLine("Length: ");
        string strLength = Console.ReadLine();
        Console.WriteLine("Width: ");
        string strWidth = Console.ReadLine();
        Console.WriteLine("Depth: ");
        string strDepth = Console.ReadLine();

    //System displays error if the user doesn't input a number
    double DValid;
    if (!Double.TryParse(strLength,out DValid))
    {
            Console.WriteLine("Patio dimension must be a number!");
            return;
        }

    if (!Double.TryParse(strWidth,out DValid))
    {
            Console.WriteLine("Patio dimension must be a number!");
            return;
        }

    if (!Double.TryParse(strDepth,out DValid))
    {
            Console.WriteLine("Patio dimension must be a number!");
            return;
        }

    //System converts the strings into doubles
    double DLength = Convert.ToDouble(strLength);
        double DWidth = Convert.ToDouble(strWidth);
    double DDepth = Convert.ToDouble(strDepth);

    //System displays error if the user doesn't input a positive number
    bool isSignValid = (DLength > 0 && DWidth >0 && DDepth >0);
        if (isSignValid == false)
        {
            Console.WriteLine("Please enter a positive number");
            return;
        }

    //The user inputs the finish type into the system
    Console.WriteLine("Concrete surface can be Flat, Broomed, Stamped" );
    Console.WriteLine("Finish (enter a valid finish type): ");
        string strFinish = Console.ReadLine();

    //System displays error message if the finish type is invalid
    if (strFinish!="Stamped" && strFinish!="Broomed" && strFinish!="Flat")
    {
            Console.WriteLine("Invalid string type requested");
            return;
        }

    //System calculates the patio, volume, #of buggy trips, pouring time, and the additional time for the project
    double DPatio = DLength*DWidth;
    double DVolume = DLength*DWidth*DDepth;
    double DBuggy_Trips = Math.Ceiling(DVolume/9);
    double DPouring_Time = DBuggy_Trips*5;
    double DAdditional_Time=70;

    //Assign different additional time for each finish types
    double DFinish_Time=0;

        if (strFinish=="Stamped")
        {
            DFinish_Time=0.2;
        }
        else if (strFinish=="Broomed")
        {
            DFinish_Time=0.1;
        }
        else if (strFinish=="Flat")
        {
            DFinish_Time=0;
        }

    //System calculates the total time of the project
    double DTotal_Time=DPouring_Time+ DFinish_Time*DPatio+ DAdditional_Time;

    //Output of the system
    Console.WriteLine("BloomingPatios Project Estimate");
    Console.WriteLine("---------------------------------------");
    Console.WriteLine("Patio Dimensions (L,W,D) : " +DLength+", "+DWidth+", "+DDepth);
    Console.WriteLine("Concrete Finish : "+strFinish);
    Console.WriteLine("Patio Area: " +DPatio+ " sqft");
    Console.WriteLine("Concrete Needed: " +DVolume+ " cubic ft");
    Console.WriteLine("Number of Buggy Trips: " +DBuggy_Trips);
    Console.WriteLine("Total Project Time: " +DTotal_Time+ " minutes");

    }
}

결과값은 다음과 같습니다. 사용자가 폭, 넓이, 깊이를 입력하고 concrete surface의 종류를 입력하면 전체 면적과 콘크리트가 필요한 넓이 및 전체 프로젝트 시간을 도출합니다. 숫자가 아닌 string 혹은 공백이 입력되면 오류 문구를 나타내기도 합니다. 지정된 string이 아닌 다른 값을 입력했을 때도 오류를 띄웁니다.