plz help me in this question
Answers
How can I make this program run?
All you have to do is copy the content below of this line and paste it in notepad or whatever text editor you are using and then save that file as .html wherever you want.. and then double click on that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- ignore all of the code between <style>
this is just for decoration
-->
<style>
body {
background: whitesmoke;
}
.wrapper {
display: flex;
flex-direction: column;
max-width: 500px;
margin: 50px auto 0;
}
.form {
display: flex;
}
.form *:first-child {
flex: 2;
}
.form *:last-child {
flex: 1;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="form">
<input type="number" id="input">
<button id="btn">Print it</button>
</div>
<p id="msg"></p>
</div>
<script>
// JAVASCRIPT CODE STARTS FROM HERE
// Here we are capturing element in variables
var input = document.querySelector('#input');
var btn = document.querySelector('#btn');
var msg = document.querySelector('#msg');
// Here I have attached a click event handler on btn
// So when the user will click it function will get executed
btn.addEventListener('click', drawStarsGivenTimes);
// Here I have made function for doing all sort of logic
function drawStarsGivenTimes() {
// In this line we are fetching number from input field
var n_times = input.value;
// Here we are confirming that number should be a positive integer
// logic is simple to check if number is positive or not
// if number is greater than 0 that means it is positive
if (n_times > 0) {
// this variable (line) will store the output
var line = '';
// We have to make two loops, because
// 1. We have to count two things, a) row, b) number of stars
// Below line of loop is for making row
for (var i = 0; i <= n_times; i++) {
// and this one for counting how many stars we have to add
for (var j = 0; j < i; j++) {
// here we are appending stars in line variable.
line += '*';
}
// after appending stars we have to add a line break so we are
// appending a <br> tag in varibale.
line += '<br>';
}
// now we all of the stuff that we need to pring in line varibale
// so now we are putting that info in html
msg.innerHTML = line;
// below (else) code will be executed if we will left the input field empty
// or entred negative integer
} else {
// again if input is not valid like if it is empty
// or is negative integer we have to show the error
// to the user so that they can understand what is going wrong.
msg.innerHTML = '<p style="color: red;">Please enter positive integer</p>';
}
}
</script>
</body>
</html>
Okay.. so I have spent an hour to write some genuine and understandable (I hope so) code for you..
first thing first... I know my code will make afraid you, but I wanted you make you understand what's going on so I have added lots of comments in the program,do not scare the number of lines I have written..
all of the lines which are starting from // is comments okay.. if you will remove them program will still execute.
Also I wanted I wanted to show you how html, CSS and JavaScript work together, that's why I created user interface also ...
Explanation:
How can I make this program run?
All you have to do is copy the content below of this line and paste it in notepad or whatever text editor you are using and then save that file as .html wherever you want.. and then double click on that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- ignore all of the code between <style>
this is just for decoration
-->
<style>
body {
background: whitesmoke;
}
.wrapper {
display: flex;
flex-direction: column;
max-width: 500px;
margin: 50px auto 0;
}
.form {
display: flex;
}
.form *:first-child {
flex: 2;
}
.form *:last-child {
flex: 1;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="form">
<input type="number" id="input">
<button id="btn">Print it</button>
</div>
<p id="msg"></p>
</div>
<script>
// JAVASCRIPT CODE STARTS FROM HERE
// Here we are capturing element in variables
var input = document.querySelector('#input');
var btn = document.querySelector('#btn');
var msg = document.querySelector('#msg');
// Here I have attached a click event handler on btn
// So when the user will click it function will get executed
btn.addEventListener('click', drawStarsGivenTimes);
// Here I have made function for doing all sort of logic
function drawStarsGivenTimes() {
// In this line we are fetching number from input field
var n_times = input.value;
// Here we are confirming that number should be a positive integer
// logic is simple to check if number is positive or not
// if number is greater than 0 that means it is positive
if (n_times > 0) {
// this variable (line) will store the output
var line = '';
// We have to make two loops, because
// 1. We have to count two things, a) row, b) number of stars
// Below line of loop is for making row
for (var i = 0; i <= n_times; i++) {
// and this one for counting how many stars we have to add
for (var j = 0; j < i; j++) {
// here we are appending stars in line variable.
line += '*';
}
// after appending stars we have to add a line break so we are
// appending a <br> tag in varibale.
line += '<br>';
}
// now we all of the stuff that we need to pring in line varibale
// so now we are putting that info in html
msg.innerHTML = line;
// below (else) code will be executed if we will left the input field empty
// or entred negative integer
} else {
// again if input is not valid like if it is empty
// or is negative integer we have to show the error
// to the user so that they can understand what is going wrong.
msg.innerHTML = '<p style="color: red;">Please enter positive integer</p>';
}
}
</script>
</body>
</html>
Okay.. so I have spent an hour to write some genuine and understandable (I hope so) code for you..
first thing first... I know my code will make afraid you, but I wanted you make you understand what's going on so I have added lots of comments in the program,do not scare the number of lines I have written..
all of the lines which are starting from // is comments okay.. if you will remove them program will still execute.
Also I wanted I wanted to show you how html, CSS and JavaScript work together, that's why I created user interface also ...