So I have been coding for a little bit and decided to try a tutorial that uses VSC (Visual Studios Code). This is my first time using VSC and I made sure that I have added the right extensions, made sure they were the right versions , and wrote the proper code. I even used a online editor to double check my code and it works!
However, Even though I have a working program, I can’t run my code. Therefore , I can’t test the program. All it does it give a notification saying “code not supported or defined”, or it will just start and end the code without anything running. How do I solve this?
Video:
https://www.youtube.com/watch?v=IyDVvGmzTlo&list=PLhEpn9gptQtEjUJOCmVnUx0pB0VquVvnu&index=16&t=0s
Code:
JSTUT.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width = device-width,
initial-scale = 1">
<title>JavaScript Tutorial</title>
<link rel="stylesheet" href="https://
stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/
4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css"
href="mainstyle.css">
<script src="JSTUT.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h3>MadLib Generator</h3>
<form class="form-inline">
<input type="text" class="form-control"
id="i0" value="Person"/>
<input type="text" class="form-control"
id="i1" value="Noun"/>
<input type="text" class="form-control"
id="i2" value="Verb"/>
<input type="text" class="form-control"
id="i3" value="Verb"/>
<input type="text" class="form-control"
id="i4" value="Verb"/>
<input type="text" class="form-control"
id="i5" value="Verb"/>
<input type="text" class="form-control"
id="i6" value="Plural Verb"/>
<input type="text" class="form-control"
id="i7" value="Verb"/>
<input type="text" class="form-control"
id="i8" value="Adjective"/>
<input type="text" class="form-control"
id="i9" value="Noun"/>
<input type="text" class="form-control"
id="i10" value="Event"/>
<input type="text" class="form-control"
id="i11" value="Noun"/>
<input type="text" class="form-control"
id="i12" value="Body Part"/>
<input type="text" class="form-control"
id="i13" value="Noun"/>
</form><br><br>
<button type="submit" class="btn-lg"
onClick="alert('Hello')">Hello</button>
<button type="submit" class="btn-lg"
onClick="calcPI(100000000)">Get PI</button>
<button type="submit" class="btn-lg"
onClick="getFibList()">Get Fibs</button>
<button type="submit" class="btn-lg"
onClick="madLibGenerator()">MadLib
Generate</button><br><br>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Output</span>
</div>
<textarea id="output1" rows="18"
class="form-control"></textarea>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/
libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
</body>
</html>
JSTUT.js:
// Pi = 4/1 - 4/3 + 4/5 - 4/7...
function calcPI(iterations){
let pi = 0, divisor = 1;
for(i = 0; i <= iterations; i++){
pi = pi + (4/divisor) - (4/
(divisor + 2));
divisor += 4;
}
document.getElementById("output1")
.value = pi.toFixed(10);
}
mainstyle.css:
.jumbotron{
background-color:rgb(37,35,124);
color:white;
}
.textarea{height: 200px;}
html{
font-size: 1em;
}
I am at 23:29 in the video. Thanks in advance!