민병수

How to use Voicoding ?

......@@ -111,6 +111,7 @@ a{
align-items:center;
text-align:center;
font-family: 'Noto Sans KR';
color:var(--text-color);
}
.overall_usage{
display:none;
......
......@@ -20,14 +20,14 @@
<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>
<a class="basic" id = "use" href="#"><li>How to use</li></a>
<a class="basic" id = "Variables" href="#"><li>Assertion Variables</li></a>
<a class="basic" id = "Parameters" href="#"><li>Assertion Parameters</li></a>
<a class="basic" id = "Basic" href="#"><li>Basic Func usage</li></a>
<a class="basic" id = "Loop" href="#"><li>Loop statements</li></a>
<a class="basic" id = "IF" href="#"><li>IF statements</li></a>
<a class="basic" id = "User" href="#"><li>User Define Func usage</li></a>
<a class="basic" id = "Bool" 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>
......@@ -41,25 +41,72 @@
<h2>먼저, 모든 선언 혹은 사용에는 조금의 텀을 주시고 말씀해주세요.<br>
영어를 사용하게 되는 부분에는 자신이 영어 원어민이 된 것처럼 말씀해주세요.<br></h2>
<p>Basic Func usage에는 Python의 내장함수인 input, split, print, len, sum, min, max 그리고 수식에 대한 사용법이 적혀 있습니다.<br> 이 중, input과 split, 그리고 수식을 제외한 나머지 함수를 사용할 때에는 Assertion Parameters를 참고해 사용해주셔야 합니다.<br>
<p><p style="font-size: 25px; display: inline; color:#ba2d65;">Basic Func usage</p>에는 Python의 내장함수인 input, print, len, sum, min, max 그리고 수식에 대한 사용법이 적혀 있습니다.<br> 이 중, input과 수식을 제외한 나머지 함수를 사용할 때에는 <p style="font-size: 20px; display: inline; color:#ba2d65;">Assertion Parameters</p>를 참고해 사용해주셔야 합니다.<br>
Assertion Variables에는 변수 선언의 사용법이 적혀있습니다. <br>변수 선언을 하는 방식에는 문자, 숫자, 리스트, 함수의 방법이 있습니다.<br>
<p style="font-size: 25px; display: inline; color:#ba2d65;">Assertion Variables</p>에는 변수 선언의 사용법이 적혀있습니다. <br>변수 선언을 하는 방식에는 문자, 숫자, 리스트, 함수의 방법이 있습니다.<br>
Loop statements에는 반복문(for, while)의 사용법이 적혀있습니다. <br>타겟 변수를 말씀하실 때에는 Assertion Parameters를 참고해 사용해주세요.<br>
<p style="font-size: 25px; display: inline; color:#ba2d65;">Loop statements</p>에는 반복문(for, while)의 사용법이 적혀있습니다. <br>타겟 변수를 말씀하실 때에는 <p style="font-size: 20px; display: inline; color:#ba2d65;">Assertion Parameters</p>를 참고해 사용해주세요.<br>
IF statements에는 조건문(if, elif, else)의 사용법이 적혀있습니다. <br>조건문의 조건식을 사용하시는 방법은 Bool logic 을 참고해 사용해주세요.<br>
<p style="font-size: 25px; display: inline; color:#ba2d65;">IF statements</p>에는 조건문(if, elif, else)의 사용법이 적혀있습니다. <br>조건문의 조건식을 사용하시는 방법은 <p style="font-size: 20px; display: inline; color:#ba2d65;">Bool logic</p> 을 참고해 사용해주세요.<br>
User Define Func usage에는 사용자 정의 함수, def에 대한 사용법이 적혀있습니다. <br>함수에 사용되는 파라미터를 선언하실 때에는 Assertion Parameters를 참고해주세요.<br>
<p style="font-size: 25px; display: inline; color:#ba2d65;">User Define Func usage</p>에는 사용자 정의 함수, def에 대한 사용법이 적혀있습니다. <br>함수에 사용되는 파라미터를 선언하실 때에는 <p style="font-size: 20px; display: inline; color:#ba2d65;">Assertion Parameters</p>를 참고해주세요.<br>
Assertion Parameters에는 함수 혹은 문장에서 변수가 호출될 때 쓰이는 Parameter의 사용법이 적혀있습니다.<br>
<p style="font-size: 25px; display: inline; color:#ba2d65;">Assertion Parameters</p>에는 함수 혹은 문장에서 변수가 호출될 때 쓰이는 Parameter의 사용법이 적혀있습니다.<br>
Bool logic에는 부울 논리식, 조건문의 조건식을 사용하는 방법이 적혀있습니다.</p>
<p style="font-size: 25px; display: inline; color:#ba2d65;">Bool logic</p>에는 부울 논리식, 조건문의 조건식을 사용하는 방법이 적혀있습니다.</p>
</div>
<div class="variables">
<h1>Assertion variables 사용 방법<br></h1>
<p>변수 선언에는 몇 가지의 큰 틀이 존재합니다.<br>
1. 변수 선언 문자<br>
변수 선언 문자를 하는 것은 a = 'Hello World' 와 같은 경우를 의미합니다. [변수 선언 문자 a = Hello World]와 같이 읽어주시면 됩니다.<br>
2. 변수 선언 숫자<br>
변수 선언 숫자를 하는 것은 a = 4 와 같은 경우를 의미합니다. [변수 선언 숫자 a = 4]와 같이 읽어주시면 됩니다. <br>
3. 변수 선언 리스트<br>
변수 선언 리스트를 하는 것은 a = [], a = [1, 2, 3] 과 같은 경우를 의미합니다. [변수 선언 리스트 a = 빈리스트 , 변수 선언 리스트 a = 1, 2, 3]와 같이 읽어주시면 됩니다.<br>
4. 변수 선언 함수<br>
변수 선언 함수를 하는 것은 a=sum(), a=len() 과 같은 내장함수를 사용하거나 사용자 정의 함수를 사용하는 경우를 의미합니다. [변수 선언 함수 a=, 기본 함수 사용 sum // 변수 선언 함수 a=, 기본 함수 사용 len] 과 같이 읽어주시면 됩니다.<br>
</p>
</div>
<div class="parameter">
<h1>Assertion Parameters 사용 방법<br></h1>
<p>파라미터 선언은 대다수의 함수 선언, 내장함수 사용, 반복문 사용에 있어서 꼭 사용해야 하니 숙지해주세요.<br>
파라미터 선언을 하는 방법은 다음과 같습니다.<br>
만약, 파라미터로 a b c 를 선언하고 싶다면, [파라미터 선언 a, b, c]라고 읽어주시면 해당하는 곳에 파라미터로써 입력됩니다.
</p>
</div>
<div class="basic_func">
<h1>Basic Func 사용 방법<br></h1>
<p>Basic Func에는 파이썬의 내장 함수들이 들어있습니다.<br>
대체적으로 같은 틀을 가지고 있으니 방법을 숙지해주세요.<br>
input의 경우, [변수 선언 함수 a =, 기본 함수 사용 input] --> a = input(); 와 같이 출력됩니다.<br>
print의 경우, [기본 함수 사용 print, 파라미터 선언 a] --> print(a); 와 같이 출력됩니다.<br>
sum, max, min, len의 경우 [기본 함수 사용 sum, 파라미터 선언 a] --> sum(a); 와 같이 출력됩니다.<br>
</p>
</div>
<div class="for">
<h1>Loop statements 사용 방법<br></h1>
<p>Loop statements는 반복문을 사용하는 방법입니다.<br>
반복문에는 for, while이 해당됩니다.<br>
for의 경우 범위가 숫자일 경우엔, [반복문 선언 for a in range, 파라미터 선언 x] --> for a in range(x): 와 같이 출력됩니다.<br>
만약 범위에 숫자를 넣는 것이 아닌, 리스트를 넣는다면 [반복문 선언 for a in, 파라미터 선언 x ] --> for a in x: 와 같이 출력됩니다.<br>
while의 경우, [반복문 선언 while, 논리 식 선언 ] --> while(논리 식): 와 같이 출력됩니다. (논리 식 선언 방법은 Bool logic을 참고해주세요.)<br>
</p>
</div>
<div class="if">
<h1>IF statements 사용 방법<br></h1>
<p>
IF statements에는 조건식을 사용하는 방법이 들어있습니다.<br>
조건식에는 if, elif, else가 포함되며 이를 사용하시려면<br>
if의 경우, [조건문 사용 if, 논리 식 선언 ] --> if(논리 식 선언): 와 같이 출력됩니다. (논리 식 선언 방법은 Bool logic을 참고해주세요.)<br>
elif의 경우, [조건문 사용 else if, 논리 식 선언 ] --> elif(논리 식 선언): 와 같이 출력됩니다. (논리 식 선언 방법은 Bool logic을 참고해주세요.)<br>
else의 경우, [조건문 사용 else, 논리 식 선언 ] --> else(논리 식 선언): 와 같이 출력됩니다. (논리 식 선언 방법은 Bool logic을 참고해주세요.)<br>
</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>
......
const toggleBtn = document.querySelector('.menu_toggle');
const menu = document.querySelector('.menu_bar_content');
const icons = document.querySelector('.menu_bar_icons');
const x1 = document.querySelector('#use');
const x2 = document.querySelector('#Variables');
const x3 = document.querySelector('#Parameters');
const x4 = document.querySelector('#Basic');
const x5 = document.querySelector('#Loop');
const x6 = document.querySelector('#IF');
const x7 = document.querySelector('#User');
const x8 = document.querySelector('#Bool');
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 content2 = document.querySelector('.variables');
const content3 = document.querySelector('.parameter');
const content4 = document.querySelector('.basic_func');
const content5 = document.querySelector('.for');
const content6 = document.querySelector('.if');
const content7 = document.querySelector('.def');
const content8 = document.querySelector('.bool');
......@@ -16,27 +24,27 @@ toggleBtn.addEventListener('click', () => {
icons.classList.toggle('active');
})
menu.addEventListener('click', () =>{
x1.addEventListener('click', () =>{
content1.classList.toggle('active');
})
menu.addEventListener('click', () =>{
x2.addEventListener('click', () =>{
content2.classList.toggle('active');
})
menu.addEventListener('click', () =>{
x3.addEventListener('click', () =>{
content3.classList.toggle('active');
})
menu.addEventListener('click', () =>{
x4.addEventListener('click', () =>{
content4.classList.toggle('active');
})
menu.addEventListener('click', () =>{
x5.addEventListener('click', () =>{
content5.classList.toggle('active');
})
menu.addEventListener('click', () =>{
x6.addEventListener('click', () =>{
content6.classList.toggle('active');
})
menu.addEventListener('click', () =>{
x7.addEventListener('click', () =>{
content7.classList.toggle('active');
})
menu.addEventListener('click', () =>{
x8.addEventListener('click', () =>{
content8.classList.toggle('active');
})
......