Produce a web application using Javascript that contains each of the following elements. The application doesn't...
Produce a web application using Javascript that contains each of the following elements. The application doesn't need to be picture-perfect -- rather, use this as your opportunity to show off the skills you've acquired in the last several weeks. Think of simple applications that you may find useful -- a sign up form, a checklist, etc.
Your project can be submitted in one of two ways:
- a zipped file consisting of an HTML5 doc, JS document, and other assets
- a Codepen link
The final project file should at minimum include:
- Include at least two event handler(s)
- Use at least one custom type
- Add methods to the custom type using its prototype property
- AVOID inline event handlers
- AVOID global scope whenever possible
- All code must be your own
There is an effort component to this project as well. I need to see a significant amount of code in order to assess your knowledge of topics covered. At the very least, include 100 lines of Javascript code.
Homework Answers
The code below is a JavaScript base Online Test System. The required files are given below.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"
/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<meta
http-equiv="X-UA-Compatible" content="ie=edge" />
<title>JavaScript Based Quiz
System</title>
<link rel="stylesheet"
href="style.css" />
</head>
<body>
<h1 id="headerSplash">Online
Quiz System</h1>
<div id="beginTest">
<button
class="startbtn" id="startbtn" onclick="onStartClicked()">
Start Test
</button>
</div>
</body>
<script src="app.js"></script>
</html>
style.css
#headerSplash {
color: aliceblue;
text-align: center;
font-weight: 900;
font-size: 50px;
}
body {
background: rgb(31, 27, 27);
}
.visible {
display: block;
}
.hide {
display: none;
}
.nextbtn {
display: none;
}
.startbtn {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 50px;
color: white;
border: 2px solid white;
background: rgba(255, 255, 255, 0);
font-size: 20px;
transition: all ease-in-out 0.15s;
}
.startbtn:hover {
transition: all ease-in-out 0.15s;
color: rgb(0, 0, 0);
background: white;
}
#beginTest {
padding: 30px;
width: 90%;
height: 80%;
background: rgba(255, 255, 255, 0.801);
margin: 10px auto;
border: 3px solid rgb(255, 80, 80);
}
#beginTest input[type="radio"] {
padding: 50px;
color: black;
}
.btn {
margin-top: 50px;
margin-left: 40%;
width: 100px;
height: 40px;
color: white;
border: 2px solid rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.822);
font-size: 18px;
transition: all ease-in-out 0.15s;
}
#beginTest label {
margin: 5px;
font-size: 20px;
}
app.js
var correct = 0;
var totalque = 10;
var wrong = 0;
var counter = Math.floor(Math.random() * 10);
const questions = [
{
id: 1,
que: "What is Full Form Of
Html",
options: [
"HyperText
Markup Language",
"HyperBeast
Language Protocol",
"Text transfer
Protocol",
"HyperText
Transfer Protocol"
],
Corr: "A"
},
{
id: 2,
que: "What is Full Form Of
CSS",
options: [
"Cascading
StyleSheets",
"Sheets ",
"Google
Sheets",
"Styling
Sheets"
],
Corr: "A"
},
{
id: 3,
que: "What is fullform of js
?",
options: [
"Java Scripting
Language",
"JavaScript",
"Markup
Language",
"Java
Prograamming Language"
],
Corr: "B"
},
{
id: 4,
que:
"A light
sensitive device that converts text, printed text and other images
to digital form ?",
options: ["Keyboard", "Plotter",
"Scanner", "Printer"],
Corr: "C"
},
{
id: 5,
que: "which Protocol provides
e-mail facility among different hosts ?",
options: ["SMTP", "HTTP", "FTP",
"TELNET"],
Corr: "A"
},
{
id: 6,
que: "The basic architecture of
Computer was developed by _______ ?",
options: [
"Charles
Babbage",
"John Von
Neumann",
"Blaise
Pascal",
"Garden
Moore"
],
Corr: "B"
},
{
id: 7,
que: "In how many generations
computers can be classified ?",
options: ["3", "4", "5",
"6"],
Corr: "C"
},
{
id: 8,
que: "What is fullform of HTTP
?",
options: [
"HyperText
Transmission Protocol",
"Hypertext
Transfer Protocol",
"Hypertext
Transreciever Protocol",
"None Of the
Above"
],
Corr: "B"
},
{
id: 9,
que: "Fifth Generation of Computers
are based on which Technology ?",
options: ["Artificial
Intelligence", "LSI", "VLSI", "Vaccum Tubes"],
Corr: "A"
},
{
id: 10,
que: "First Generation of Computers
are based on which Technology ?",
options: ["Artificial
Intelligence", "LSI", "VLSI", "Vaccum Tubes"],
Corr: "D"
},
{
id: 11,
que: "Second Generation of
Computers are based on which Technology ?",
options: ["Transistors", "LSI",
"VLSI", "Vaccum Tubes"],
Corr: "A"
},
{
id: 12,
que: "Which of the following is
non-volatile ?",
options: ["SRAM", "DRAM", "ROM",
"None of the above."],
Corr: "C"
},
{
id: 13,
que: "GUI Stands for ?",
options: [
"Graphical User
Interface",
"Graphical Union
Interface",
"Graphs using
Interfaces",
"None of the
above."
],
Corr: "A"
}
];
const getNext = () => {
const test =
document.getElementById("beginTest");
test.innerHTML = "";
const main_paper = document.createElement("h1");
main_paper.innerHTML = questions[counter].que;
main_paper.setAttribute("class", "question");
test.appendChild(main_paper);
for (var i = 0; i < 4; i++) {
const a =
document.createElement("input");
a.setAttribute("type",
"radio");
a.setAttribute("name",
questions[counter].id);
a.setAttribute("value", i);
test.appendChild(a);
const p1 =
document.createElement("label");
p1.innerHTML =
questions[counter].options[i] + "<br>";
test.appendChild(p1);
}
var btn = document.createElement("BUTTON");
btn.setAttribute("class", "btn");
btn.innerHTML = "Next";
btn.addEventListener("click", () => {
onNextClicked();
});
test.appendChild(btn);
};
const max = questions.length;
const onNextClicked = () => {
const opt =
document.getElementsByTagName("input");
var corr = questions[opt[0].name - 1].Corr;
var out = 5;
var res;
for (var i = 0; i < 4; i++) {
if (opt[i].checked) {
out = i;
}
}
//validating atleast one checked
if (out === 5) {
alert("Please Select atleast one
Answer.");
} else {
console.log(out);
if (out === 0) {
res = "A";
} else if (out === 1) {
res = "B";
} else if (out === 2) {
res = "C";
} else if (out === 3) {
res = "D";
}
if (corr === res) {
correct +=
1;
} else {
wrong +=
1;
}
console.log(correct + " " +
wrong);
if (counter < max - 1) counter
+= 1;
else {
counter =
0;
}
totalque -= 1;
if (totalque > 0)
getNext();
else {
const test =
document.getElementById("beginTest");
test.innerHTML
=
"<B>Thank You <B> For Giving the
test <br/>You Scored " +
correct +
" Out of 10.";
}
}
};
function onStartClicked() {
const test =
document.getElementById("beginTest");
const start =
document.getElementsByClassName("startbtn");
start[0].style.display = "none";
const main_paper = document.createElement("h1");
main_paper.innerHTML = questions[counter].que;
main_paper.setAttribute("class", "question");
test.appendChild(main_paper);
for (var i = 0; i < 4; i++) {
const a =
document.createElement("input");
a.setAttribute("type",
"radio");
a.setAttribute("name",
questions[counter].id);
a.setAttribute("value", i);
test.appendChild(a);
const p1 =
document.createElement("label");
p1.innerHTML =
questions[counter].options[i] + "<br>";
test.appendChild(p1);
}
var btn = document.createElement("BUTTON");
btn.setAttribute("class", "btn");
btn.innerHTML = "Next";
btn.addEventListener("click", () => {
onNextClicked();
});
test.appendChild(btn);
}
Output
Add Answer to:
Produce a web application using Javascript that contains each of
the following elements. The application doesn't...
Please Help!!! Requirements: Use an external CSS & JS file, no internal or inline styles &...
Please Help!!! Requirements: Use an external CSS & JS file, no internal or inline styles & scripts Please comment your JS to demonstrate your understanding of what is happening Create a form with at least 2 inputs and a submit button A good example would be First Name, Last Name, and Age. Use JS to provide the user with some feedback on the values they enter or choose with your inputs To do this you will need create a function...
5. ///////////////////////////////////////////////// Using javascript Create a paragraph on your page that says “This isn’t even my...
5. ///////////////////////////////////////////////// Using javascript Create a paragraph on your page that says “This isn’t even my final form!” ( This isn’t even my final form! ). Add a JS mouseover event to that paragraph. When the paragraph has a mouse hovering over it, the text inside should change to “This is my second form!” ( This is my second form! ). Add one more event handler so that when that paragraph is double-clicked, the text will say “THIS is my...
javascript
In this project you will write the JavaScript code to create a calculator. Good thing is that everyone knows how the calculator works. It is a challenging project, give yourself lots of time to complete it.1. You are provided with an HTML, and CSS files.. Look at these files to understandhow to use them and modify them if needed based on your code. (Note: You can adddifferent selector (id, class) in HTML ONLY and cannot make any changes to CSS.)Create...
I need help with my javascript project, I've started on it but I can't seem to...
I need help with my javascript project, I've started on it but I can't seem to get ym java scripts to work with my index.html. Can someone please help me fix my code? I need the main.js & scratchpad.js to work with my index.html .Thank you Directions: Go to the following link: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics On that page, scroll down to "A 'hello world' example". Follow the step-by-step instructions to download their code and edit it in your text editor of choice....
Develop the Change Calculator application In this exercise, you’ll create an application that displays the minimum...
Develop the Change Calculator application In this exercise, you’ll create an application that displays the minimum number of quarters, dimes, nickels, and pennies that make up the number of cents specified by the user. Without the use of a JavaScript Library (for coins). 1. Open the HTML and JavaScript files below: 2. In the JavaScript file, note that three functions are supplied. The $ function. The start of a calculateChange function. And an onload event handler that attaches the calculateChange...
(Assignment 1 : Question 1) C Mini Project is a mini application that could be developed...
(Assignment 1 : Question 1) C Mini Project is a mini application that could be developed using C language that involves the concepts of arrays, functions, read and write data techniques. Based on your creativity, you are required to plan, design and develop a mini application for an organisation. You may choose to from the list below or propose your own mini application: 1. Appointment Management System (I prefer to choose this) Your responsibility is to ensure that this project...
Complete a SIX webpage using notepad or notepad++ about your favorite hobby that contains the following:...
Complete a SIX webpage using notepad or notepad++ about your favorite hobby that contains the following: The project should include the following pages: home page form page 4 or more additional pages to render complete coverage a site map – three levels or more (not included in the page count) The pages should contain: a two- or three-column layout CSS must be used for layout one external CSS file will contain formatting for the site (the bulk of css goes...
NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...
NEED HELP with HTML with Javascript embedding
for form validation project below. I have my code
below but I'm stuck with validation. If anyone can fix it, I'd
really appreciate.
******************************************************************************
CODE:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project
Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Nice</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<script>
var textFromTextArea;
function getWords(){
var text =...
Create an HTML5 page that contains a form to collect the following data. The text in...
Create an HTML5 page that contains a form to collect the following data. The text in bold indicates the id value that should be assigned to each html control: Product (drop down list) product – iPad, iPhone 6S, Galaxy 5S, Moto X, and so on Quantity (number) quantity Unit price (number) unit_price Discount (%)(number) discount_rate Date (date) order_date First Name (text box) first_name Last Name (text box) last_name Payment type (drop down list) payment_type – Visa, Master, Discover, Amex, and...
given below are the project description and their Html and css files i need javascript according...
given below are the project description and their Html and css
files i need javascript according to the project and other
files!
WEB230 - JavaScript 1 Assignment 6b - Event Delegation Before starting, study the HTML and open it in a browser so that you understand the structure of the document. You will add functionality to perform several tasks in our shopping list app. Clicking the red "X" at the right of an item will delete that item. Clicking on...
NEED HELP with HTML with Javascript embedding
for form validation project below. I have my code
below but I'm stuck with validation. If anyone can fix it, I'd
really appreciate.
******************************************************************************
CODE:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project
Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Nice</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<script>
var textFromTextArea;
function getWords(){
var text =...
given below are the project description and their Html and css
files i need javascript according to the project and other
files!
WEB230 - JavaScript 1 Assignment 6b - Event Delegation Before starting, study the HTML and open it in a browser so that you understand the structure of the document. You will add functionality to perform several tasks in our shopping list app. Clicking the red "X" at the right of an item will delete that item. Clicking on...
Most questions answered within 3 hours.
-
Little’s Law: Val d’Costa is a world famous ski village in the
French Alps. Because of...
asked 24 minutes ago -
Find the absolute error D for the calculation if A + B/C=D A=
9.4 +/- 0.4...
asked 37 minutes ago -
New Air Heating and Cooling, manufactures furnaces and central
air units. The company pride itself on...
asked 50 minutes ago -
A coach uses a new technique to train gymnasts. Seven
gymnasts were randomly selected and their...
asked 2 hours ago -
While rotating the tires on your car you notice a rock [mass =
0.1 Kg] stuck...
asked 4 hours ago -
Using MARS simulator, write MIPS programs according to
the following scenarios: Receive a positive integer number...
asked 6 hours ago -
An object in front of a concave mirror has a real image that is
11.5 cm...
asked 6 hours ago -
Consider the reaction, C3 H8 + O2 --> CO2 + H2O. How many
moles of O2...
asked 8 hours ago -
You and your opponent both roll a fair die. If you both roll the
same number,...
asked 8 hours ago -
In a study of the accuracy of fast food drive-through orders,
Restaurant A had 257 accurate...
asked 8 hours ago -
Identify and describe in detail the four categories of
institutions that could be included in a...
asked 8 hours ago -
In python
class Customer:
def __init__(self, customer_id, last_name, first_name, phone_number, address):
self._customer_id = int(customer_id)
self._last_name =...
asked 9 hours ago