itsgratien/gratian-pascal-s-triangle.markdown

## gratian-pascal-s-triangle.markdown

      
    Raw
  

              gratian-pascal-s-triangle.markdown
            
          
    Gratian: Pascal's Triangle

Pascal's triangle using HTML-CSS and Vanila Javascript
A Pen by itsgracian on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width-device=width initial-scale=1.0">
    <meta name="author" content="gratian tuyishimire">
    <title>Gratian: Pascal's Triangle</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" href="https://ibb.co/PwcFzcs">
  </head>
  <body>
    <section class="tr-content">
      <div class="some1">
        <div class="logo">
         <a href="https://imgbb.com/"><img src="https://i.ibb.co/YTddwKg/logv.png" alt="logv" border="0"></a>
        </div>
      </div>
      <div class="tr-all">
        <h1>Pascal's Triangle</h1>
        <div class="form-based">
          <form autocomplete="off">
            <div class="form-groups">
              <label for="">Your Number</label>
              <input type="text" name="number" value=""
              placeholder="your number must be here" class="number">
            </div>
            <button type="button" name="button" class="btn-submit">Submit</button>
          </form>
        </div>
      </div>
    </section>
    <section class="errorDisp">

    </section>
    <section class="overlay">
      <h1>Pascal's triangle Output result below:</h1>
      <div class="dataStore">
      </div>
      <div class="closeDv">X</div>
    </section>
    <!--footer!-->
    <footer>
        <h5>gratian tuyishimire &copy; <span class="fullyear"></span></h5>
    </footer>


    <!-- external javascript include!-->
    <script type="text/javascript" src="js/index.js"></script>
  </body>
</html>

## script.js
//# Hey my name is gratian tuyishimire, this is my work
//@thank you.

//@beginning of my code
//@footer add current year to footer
let footerYear=document.querySelector(".fullyear");
//@add footerYear to index.html
footerYear.textContent=new Date().getFullYear();
//so after footer stuff
//@ getform assignment
const getForm=document.querySelector(".btn-submit");

//@ now i am going to deal with number that comes from input value
//@and validation before pascal's triangle
//@but before that let's create element that will be envoked when there is
//error in validation method ;
//@element creation start

const divisionError=document.createElement('div');
const h5=document.createElement('h5');
const closeError=document.createElement('div');
//set textContent
closeError.innerHTML='<p>X</p>';
//set attribute
divisionError.setAttribute('class','errors');
closeError.setAttribute('class','closeError');
divisionError.appendChild(h5);
divisionError.appendChild(closeError);

const validation=number=>{
  //@validation
  //check if input data is number and is not empty
  if (number=="") {
    //@set error when input is empty
  h5.textContent='please input field is required.';
    //append divisionError to errorDisp
    const errorDisp=document.querySelector(".errorDisp");
    divisionError.style.display='block';
    errorDisp.appendChild(divisionError);
  }
  else if (isNaN(number)) {
  h5.textContent='please input field must only be a number.';
    //append divisionError to errorDisp
    divisionError.style.display='block';
    const errorDisp=document.querySelector(".errorDisp");
    errorDisp.appendChild(divisionError);
  }else {
    return true;
  }
}
//@add event listener when btn is clicked
//on getForm variable
getForm.addEventListener('click',pascalTriangle);

function pascalTriangle(e){
  e.preventDefault();
  //validation of input data
   let number=document.querySelector(".number").value;
   //@check for validation
   if (validation(number)==true) {
     //make divisionError invisible
     divisionError.style.display='none';
     //@time to start pascal triangles
     var triangle=[
       [1]
     ];
     var rep;

     for(var i=0; i<number-1;i++)
       {
         rep=[1];
         //@for
         for(var j=1; j < triangle[i].length; j++ ){
           rep[j]=triangle[i][j]+triangle[i][j-1];
         }
         rep.push(1);
         triangle.push(rep);
       }
       //create new element and append to the body of html document
       const overlay=document.querySelector(".overlay");
       const dataStore=document.querySelector('.dataStore');
       //@set attribute

       let output="";
      //@loop through
      for(var i in triangle){
         output +="<p>"+triangle[i]+"</p>";
      }
      //append
      dataStore.innerHTML="<p>"+output+"</p>";
      overlay.style.display='block';
   }
}


/*hide error displays*/
closeError.addEventListener('click',()=>{
  divisionError.style.display='none';
});
//closing overlay
close=document.querySelector(".closeDv");
close.addEventListener('click',()=>{
  document.querySelector(".overlay").style.display='none';
})

## style.css
@import url('https://fonts.googleapis.com/css?family=Comfortaa');
*{
  margin: 0;
  padding: 0;
}
body{
  margin: 0;
  padding: 0;
  font-family: "Comfortaa",cursive;
  background: /*#f9f9f9;*/#fff;
}
a{
  text-decoration: none;
}
label{
  font-size: 12px;
}
header a{
  color: #333;
  font-weight: bold;
  text-transform: capitalize;
  font-size: 20px;

}
.some1{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.logo{
  width: 60px;
  margin-top: 50px;
}
.logo img{
  width: 100%;
  height: 100%;
}
.tr-content{
  background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.5)),#1f44add1;
  min-height: 88vh;
  color: #fff;
}
.tr-all{
  margin: auto;
  width: 45%;
  padding-top: 80px!important;

}
/*form styling*/
.form-based{
  width: 100%;
  margin-top: 40px;
}
.form-groups input[type="text"]{
  width: 100%;
  height: 40px;
  border: none;
  border-bottom:0.1rem solid #7985f6;
  outline: none;
  box-shadow: none;
  background: none;
  font-family: "Comfortaa",cursive;
  color: #fff;
}
/*placeholder*/
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #f8f8f8;
    opacity: 0.7; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #f8f8f8;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #f8f8f8;
}

/**/
.btn-submit{
    margin-top: 50px;
    border: none;
    padding-left: 30px;
    padding-right: 20px;
    background: #6c07ff;
    color: #fff;
    border-radius: 3px;
    text-transform: uppercase;
    height: 50px;
    font-family: "comfortaa",cursive;
    font-size: 12px;
    cursor: pointer;
    outline: none;
    box-shadow: none;
}
/*errors*/
.errors{
  position: fixed;
  width: 100%;
  text-align: center;
  padding: 30px;
  background: #ff62a7eb;
  color: #fff;
  bottom: 0;
}
.closeError,.closeDv{
  width: 35px;
  height: 35px;
  background: #0a0a0e47;
  z-index: 100;
  top: 0;
  position: absolute;
  right: 0;
  margin-right: 70px;
  margin-top: 10px;
  cursor: pointer;
  font-weight: bold;
}
.closeError p{
  padding-top: 9px;
  font-size: 15px;
  font-weight: bold;
  font-family: "Comfortaa",cursive;
}
/**/
.overlay{
position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: #1e2a73d1;
display: none;
right: 0;
box-shadow: 0px 0px 2px 2px #ddd;
padding-top: 100px;
text-align: center;
color: #fff;
}
.overlay h1{
  margin-bottom: 50px;
}
.dataStore{
  text-align: justify;
  width: 20%;
  height: 60vh;
  margin: auto;
  overflow: auto;
}
.dataStore p{
  font-weight:bold;
}
.closeDv{
  background: none!important;
  text-align: center;
  margin: 20px;
  font-size: 30px;
}
/*footer*/
footer{
  padding: 20px;
  border-top: 1px dashed #ddd;
  text-align: center;
}
	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width-device=width initial-scale=1.0">
	<meta name="author" content="gratian tuyishimire">
	<title>Gratian: Pascal's Triangle</title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="shortcut icon" href="https://ibb.co/PwcFzcs">
	</head>
	<body>
	<section class="tr-content">
	<div class="some1">
	<div class="logo">
	<a href="https://imgbb.com/"><img src="https://i.ibb.co/YTddwKg/logv.png" alt="logv" border="0"></a>
	</div>
	</div>
	<div class="tr-all">
	<h1>Pascal's Triangle</h1>
	<div class="form-based">
	<form autocomplete="off">
	<div class="form-groups">
	<label for="">Your Number</label>
	<input type="text" name="number" value=""
	placeholder="your number must be here" class="number">
	</div>
	<button type="button" name="button" class="btn-submit">Submit</button>
	</form>
	</div>
	</div>
	</section>
	<section class="errorDisp">

	</section>
	<section class="overlay">
	<h1>Pascal's triangle Output result below:</h1>
	<div class="dataStore">
	</div>
	<div class="closeDv">X</div>
	</section>
	<!--footer!-->
	<footer>
	<h5>gratian tuyishimire © <span class="fullyear"></span></h5>
	</footer>


	<!-- external javascript include!-->
	<script type="text/javascript" src="js/index.js"></script>
	</body>
	</html>
	//# Hey my name is gratian tuyishimire, this is my work
	//@thank you.

	//@beginning of my code
	//@footer add current year to footer
	let footerYear=document.querySelector(".fullyear");
	//@add footerYear to index.html
	footerYear.textContent=new Date().getFullYear();
	//so after footer stuff
	//@ getform assignment
	const getForm=document.querySelector(".btn-submit");

	//@ now i am going to deal with number that comes from input value
	//@and validation before pascal's triangle
	//@but before that let's create element that will be envoked when there is
	//error in validation method ;
	//@element creation start

	const divisionError=document.createElement('div');
	const h5=document.createElement('h5');
	const closeError=document.createElement('div');
	//set textContent
	closeError.innerHTML='<p>X</p>';
	//set attribute
	divisionError.setAttribute('class','errors');
	closeError.setAttribute('class','closeError');
	divisionError.appendChild(h5);
	divisionError.appendChild(closeError);

	const validation=number=>{
	//@validation
	//check if input data is number and is not empty
	if (number=="") {
	//@set error when input is empty
	h5.textContent='please input field is required.';
	//append divisionError to errorDisp
	const errorDisp=document.querySelector(".errorDisp");
	divisionError.style.display='block';
	errorDisp.appendChild(divisionError);
	}
	else if (isNaN(number)) {
	h5.textContent='please input field must only be a number.';
	//append divisionError to errorDisp
	divisionError.style.display='block';
	const errorDisp=document.querySelector(".errorDisp");
	errorDisp.appendChild(divisionError);
	}else {
	return true;
	}
	}
	//@add event listener when btn is clicked
	//on getForm variable
	getForm.addEventListener('click',pascalTriangle);

	function pascalTriangle(e){
	e.preventDefault();
	//validation of input data
	let number=document.querySelector(".number").value;
	//@check for validation
	if (validation(number)==true) {
	//make divisionError invisible
	divisionError.style.display='none';
	//@time to start pascal triangles
	var triangle=[
	[1]
	];
	var rep;

	for(var i=0; i<number-1;i++)
	{
	rep=[1];
	//@for
	for(var j=1; j < triangle[i].length; j++ ){
	rep[j]=triangle[i][j]+triangle[i][j-1];
	}
	rep.push(1);
	triangle.push(rep);
	}
	//create new element and append to the body of html document
	const overlay=document.querySelector(".overlay");
	const dataStore=document.querySelector('.dataStore');
	//@set attribute

	let output="";
	//@loop through
	for(var i in triangle){
	output +="<p>"+triangle[i]+"</p>";
	}
	//append
	dataStore.innerHTML="<p>"+output+"</p>";
	overlay.style.display='block';
	}
	}





	/hide error displays/
	closeError.addEventListener('click',()=>{
	divisionError.style.display='none';
	});
	//closing overlay
	close=document.querySelector(".closeDv");
	close.addEventListener('click',()=>{
	document.querySelector(".overlay").style.display='none';
	})
	@import url('https://fonts.googleapis.com/css?family=Comfortaa');
	*{
	margin: 0;
	padding: 0;
	}
	body{
	margin: 0;
	padding: 0;
	font-family: "Comfortaa",cursive;
	background: /#f9f9f9;/#fff;
	}
	a{
	text-decoration: none;
	}
	label{
	font-size: 12px;
	}
	header a{
	color: #333;
	font-weight: bold;
	text-transform: capitalize;
	font-size: 20px;

	}
	.some1{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}
	.logo{
	width: 60px;
	margin-top: 50px;
	}
	.logo img{
	width: 100%;
	height: 100%;
	}
	.tr-content{
	background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.5)),#1f44add1;
	min-height: 88vh;
	color: #fff;
	}
	.tr-all{
	margin: auto;
	width: 45%;
	padding-top: 80px!important;

	}
	/form styling/
	.form-based{
	width: 100%;
	margin-top: 40px;
	}
	.form-groups input[type="text"]{
	width: 100%;
	height: 40px;
	border: none;
	border-bottom:0.1rem solid #7985f6;
	outline: none;
	box-shadow: none;
	background: none;
	font-family: "Comfortaa",cursive;
	color: #fff;
	}
	/placeholder/
	::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #f8f8f8;
	opacity: 0.7; /* Firefox */
	}

	:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #f8f8f8;
	}

	::-ms-input-placeholder { /* Microsoft Edge */
	color: #f8f8f8;
	}

	/**/
	.btn-submit{
	margin-top: 50px;
	border: none;
	padding-left: 30px;
	padding-right: 20px;
	background: #6c07ff;
	color: #fff;
	border-radius: 3px;
	text-transform: uppercase;
	height: 50px;
	font-family: "comfortaa",cursive;
	font-size: 12px;
	cursor: pointer;
	outline: none;
	box-shadow: none;
	}
	/errors/
	.errors{
	position: fixed;
	width: 100%;
	text-align: center;
	padding: 30px;
	background: #ff62a7eb;
	color: #fff;
	bottom: 0;
	}
	.closeError,.closeDv{
	width: 35px;
	height: 35px;
	background: #0a0a0e47;
	z-index: 100;
	top: 0;
	position: absolute;
	right: 0;
	margin-right: 70px;
	margin-top: 10px;
	cursor: pointer;
	font-weight: bold;
	}
	.closeError p{
	padding-top: 9px;
	font-size: 15px;
	font-weight: bold;
	font-family: "Comfortaa",cursive;
	}
	/**/
	.overlay{
	position: fixed;
	width: 100%;
	top: 0;
	bottom: 0;
	background: #1e2a73d1;
	display: none;
	right: 0;
	box-shadow: 0px 0px 2px 2px #ddd;
	padding-top: 100px;
	text-align: center;
	color: #fff;
	}
	.overlay h1{
	margin-bottom: 50px;
	}
	.dataStore{
	text-align: justify;
	width: 20%;
	height: 60vh;
	margin: auto;
	overflow: auto;
	}
	.dataStore p{
	font-weight:bold;
	}
	.closeDv{
	background: none!important;
	text-align: center;
	margin: 20px;
	font-size: 30px;
	}
	/footer/
	footer{
	padding: 20px;
	border-top: 1px dashed #ddd;
	text-align: center;
	}