민병수 / Voicoding

Go to a project
Toggle navigation Toggle navigation pinning
민병수
ce227947 1 parent ed3a7596

Manual update and UI modify

Inline Side-by-side
Showing 5 changed files with 271 additions and 16 deletions
1.
2.
3.
\ No newline at end of file
Voicoding을 사용하시려면 몇 가지 주의사항이 있습니다.
먼저, 모든 선언 혹은 사용에는 조금의 텀을 주시고 말씀해주세요.
영어를 사용하게 되는 부분에는 자신이 영어 원어민이 된 것처럼 말씀해주세요.
Baisc Func usage에는 Python의 내장함수인 input, split, print, len, sum, min, max 그리고 수식에 대한 사용법이 적혀 있습니다. 이 중, input과 split, 그리고 수식을 제외한 나머지 함수를 사용할 때에는 Assertion Parameters를 참고해 사용해주셔야 합니다.
Assertion Variables에는 변수 선언의 사용법이 적혀있습니다. 변수 선언을 하는 방식에는 문자, 숫자, 리스트, 함수의 방법이 있습니다.
Loop statements에는 반복문(for, while)의 사용법이 적혀있습니다. 타겟 변수를 말씀하실 때에는 Assertion Parameters를 참고해 사용해주세요.
IF statements에는 조건문(if, elif, else)의 사용법이 적혀있습니다. 조건문의 조건식을 사용하시는 방법은 Bool logic 을 참고해 사용해주세요.
User Define Func usage에는 사용자 정의 함수, def에 대한 사용법이 적혀있습니다. 함수에 사용되는 파라미터를 선언하실 때에는 Assertion Parameters를 참고해주세요.
Assertion Parameters에는 함수 혹은 문장에서 변수가 호출될 때 쓰이는 Parameter의 사용법이 적혀있습니다.
Bool logic에는 부울 논리식, 조건문의 조건식을 사용하는 방법이 적혀있습니다.
\ No newline at end of file
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manual</title>
</head>
<body>
</body>
</html>
\ No newline at end of file
:root{
--text-color:#fffde7;
--background-color:#ff94c2;
--accent-color:#ba2d65;
--output-color:#ff7043;
--output-accent-color:#c63f17;
}
body{
margin : 0;
font-family: 'Source Sans Pro';
}
a{
text-decoration:none;
color:var(--text-color);
}
.voi_menu{
display:flex;
justify-content:space-between;
align-items:center;
background-color:var(--background-color);
padding: 8px 12px;
}
.menu_bar_content li:hover{
background-color:var(--accent-color);
border-radius: 4px;
color:var(--text-color);
}
.menu_bar_icons li:hover{
background-color:var(--accent-color);
border-radius: 4px;
color:var(--text-color);
}
.menu_bar_logo{
font-size: 20px;
}
.menu_bar_logo i{
color:var(--accent-color);
}
.basic:hover{
color:var(--text-color);
}
.menu_bar_content{
display:flex;
list-style: none;
padding-left: 0;
}
.menu_bar_content li{
padding: 8px 12px;
}
.menu_bar_icons{
list-style: none;
display: flex;
padding-left:0;
}
.menu_bar_icons li{
padding: 8px 12px;
}
.menu_toggle{
color:var(--text-color);
display: none;
position: absolute;
right:32px;
font-size: 24px;
}
.menu_toggle:hover{
color:var(--text-color);
}
@media screen and (max-width: 500px) {
.voi_menu{
flex-direction: column;
align-items: flex-start;
padding: 8px 24px;
}
.menu_bar_content{
display:none;
flex-direction:column;
align-items:center;
width: 100%;
}
.menu_bar_content li{
width: 100%;
text-align: center;
}
.menu_bar_icons{
display:none;
justify-content: center;
width: 100%;
}
.menu_toggle{
display: block;
color:var(--text-color);
}
.menu_bar_content.active,
.menu_bar_icons.active{
display:flex;
}
}
.basic{
color:var(--text-color);
font-size:13px;
font-weight: bold;
font-family: 'Noto Sans KR';
}
.content{
margin:100px 20px 20px 20px;
display:block;
background-color:var(--background-color);
align-items:center;
text-align:center;
font-family: 'Noto Sans KR';
}
.overall_usage{
display:none;
align-items:flex-start;
flex-direction: row;
flex-wrap: nowrap;
}
.basic_func{
display:none;
}
.variables{
display:none;
}
.for{
display:none;
}
.if{
display:none;
}
.def{
display:none;
}
.parameter{
display:none;
}
.bool{
display:none;
}
.overall_usage.active,
.basic_func.active,
.variables.active,
.for.active,
.if.active,
.def.active,
.parameter.active,
.bool.active{
display:block;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manual</title>
<link href="Voico_Manual.css" rel="stylesheet" type="text/css">
<script src="https://kit.fontawesome.com/a5f26fa106.js" crossorigin="anonymous"></script>
<script src="menu.js" defer></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR&family=Raleway:wght@200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap" rel="stylesheet">
</head>
<body>
<nav class="voi_menu">
<div class="menu_bar_logo">
<i class="fas fa-microphone-alt"></i>
</div>
<ul class="menu_bar_content">
<a class="basic" href="#"><li>How to use</li></a>
<a class="basic" href="#"><li>Assertion Variables</li></a>
<a class="basic" href="#"><li>Assertion Parameters</li></a>
<a class="basic" href="#"><li>Basic Func usage</li></a>
<a class="basic" href="#"><li>Loop statements</li></a>
<a class="basic" href="#"><li>IF statements</li></a>
<a class="basic" href="#"><li>User Define Func usage</li></a>
<a class="basic" href="#"><li>Bool logic</li></a>
</ul>
<ul class="menu_bar_icons">
<a class="basic" href="Voico_Menu.html" style ="font-size: 17px;"><li><i class="fas fa-home"></i></li></a>
</ul>
<a href="#" class="menu_toggle"><i class="fas fa-bars"></i></a>
</nav>
<div class="content">
<div class="overall_usage">
<h1>Voicoding을 사용하시려면 몇 가지 주의사항이 있습니다.<br></h1>
<h2>먼저, 모든 선언 혹은 사용에는 조금의 텀을 주시고 말씀해주세요.<br>
영어를 사용하게 되는 부분에는 자신이 영어 원어민이 된 것처럼 말씀해주세요.<br></h2>
<p>Basic Func usage에는 Python의 내장함수인 input, split, print, len, sum, min, max 그리고 수식에 대한 사용법이 적혀 있습니다.<br> 이 중, input과 split, 그리고 수식을 제외한 나머지 함수를 사용할 때에는 Assertion Parameters를 참고해 사용해주셔야 합니다.<br>
Assertion Variables에는 변수 선언의 사용법이 적혀있습니다. <br>변수 선언을 하는 방식에는 문자, 숫자, 리스트, 함수의 방법이 있습니다.<br>
Loop statements에는 반복문(for, while)의 사용법이 적혀있습니다. <br>타겟 변수를 말씀하실 때에는 Assertion Parameters를 참고해 사용해주세요.<br>
IF statements에는 조건문(if, elif, else)의 사용법이 적혀있습니다. <br>조건문의 조건식을 사용하시는 방법은 Bool logic 을 참고해 사용해주세요.<br>
User Define Func usage에는 사용자 정의 함수, def에 대한 사용법이 적혀있습니다. <br>함수에 사용되는 파라미터를 선언하실 때에는 Assertion Parameters를 참고해주세요.<br>
Assertion Parameters에는 함수 혹은 문장에서 변수가 호출될 때 쓰이는 Parameter의 사용법이 적혀있습니다.<br>
Bool logic에는 부울 논리식, 조건문의 조건식을 사용하는 방법이 적혀있습니다.</p>
</div>
<div class="variables"></div>
<div class="parameter"></div>
<div class="basic_func"></div>
<div class="for"></div>
<div class="if"></div>
<div class="def"></div>
<div class="bool"></div>
</div>
</body>
</html>
\ No newline at end of file
const toggleBtn = document.querySelector('.menu_toggle');
const menu = document.querySelector('.menu_bar_content');
const icons = document.querySelector('.menu_bar_icons');
const content1 = document.querySelector('.overall_usage');
const content2 = document.querySelector('.basic_func');
const content3 = document.querySelector('.variables');
const content4 = document.querySelector('.for');
const content5 = document.querySelector('.if');
const content6 = document.querySelector('.def');
const content7 = document.querySelector('.parameter');
const content8 = document.querySelector('.bool');
toggleBtn.addEventListener('click', () => {
menu.classList.toggle('active');
icons.classList.toggle('active');
})
\ No newline at end of file
})
menu.addEventListener('click', () =>{
content1.classList.toggle('active');
})
menu.addEventListener('click', () =>{
content2.classList.toggle('active');
})
menu.addEventListener('click', () =>{
content3.classList.toggle('active');
})
menu.addEventListener('click', () =>{
content4.classList.toggle('active');
})
menu.addEventListener('click', () =>{
content5.classList.toggle('active');
})
menu.addEventListener('click', () =>{
content6.classList.toggle('active');
})
menu.addEventListener('click', () =>{
content7.classList.toggle('active');
})
menu.addEventListener('click', () =>{
content8.classList.toggle('active');
})
......