can you do this js and html question. ill give you the html and js and css files just fix my error use if and else like what i did dont use switch just fix my erorr.
<!DOCTYPE html>
<!-- Webpage HTML document for Lab 4.
Authors: Amirhossein Chinaei, Andriy Pavlovych
For: EECS 1012, York University, Lassonde School of Engineering -->
<html lang="En">
<head>
<meta charset="UTF-8">
<!-- title for web page -->
<title> EECS1012: Lab 4 - Computational Thinking </title>
<link rel="stylesheet" type="text/css" href="ct.css" title="style" />
<!--in Ex1 to Ex5, link your html file to your js file, here-->
<script src="ct_Ex5.js"></script>
</head>
<body>
<header>
<!-- in Ex2 to Ex5 change this header properly-->
<h1> mapping a numerical grade to a letter grade </h1>
</header>
<div class="column1">
<!--in Ex2, change the following divisions to have labels a and b
instead of one side and another side; change the min and
max to 1 and 100; also, add a new division and label it c, and
make sure its id is num3-->
<!--in Ex 3, change the min and max to what we had in Ex1-->
<!--in Ex 5, keep the first input and change its label to input,
remove the other two inputs-->
<div class="input">
a: <input id="num1" type="number" min="-32768" max="32767"/>
</div>
<div class="input">
<!--in Ex1, define an onclick event for button; the event is
handled by function perimeter() that is defined in your js file-->
<!-- in Ex2 to Ex5, you need to change the name of the
event handler properly-->
<button onclick="mapping()"> enter </button>
</div>
<strong><p id="output"> </p></strong>
</div>
<footer>© Author: <span>Andriy Pavlovych<!--in Ex1, add your name here!--> Hassan Hassan</span> </footer>
</body>
</html>
function mapping() {
/* in Ex1, change the following two lines such that
the sum of number num1 and num2 are parsed to an integer
before be assigned to w and h, respectively. */
/* in Ex 2, rename w and h to a and b, respectively. */
var a= parseInt(document.getElementById("num1").value);
/* in Ex2, write a similar code to the above line
to capture the value for c*/
/* in Ex2 to Ex4, you need to replace the following line
with some other formulas */
if(a>90){
document.getElementById("output").innerHTML="A+";
}
else if(a>80 & a<90){
document.getElementById("output").innerHTML="A";
}
else if(a>75 & a<80){
document.getElementById("output").innerHTML="B+";
}
else if(a>70 & a<75){
document.getElementById("output").innerHTML="B";
}
else if(a>65 & a<70){
document.getElementById("output").innerHTML="C+";
}
else if(a>60 & a<65){
document.getElementById("output").innerHTML="C";
}
else if(a>55 & a<60)
document.getElementById("output").innerHTML="D+";
}
else if(a>50 & a<55){
document.getElementById("output").innerHTML="D";
}
else if(a>40 & a<50){
document.getElementById("output").innerHTML="E";
}
else {
document.getElementById("output").innerHTML="F";
}
/* in Ex2 to Ex5, you need to rename "perimeter" to make it
appropriate
for those problems, you may also need to rename p to a better
variable that you might have in your formulas above */
}
* {
box-sizing: border-box;
background-color:LightGrey;
}
body {
font-family: NimbusSanL, Arial, sans-serif;
text-align: center;
color:#202020;
background-color:Silver;
}
div {
border:1px solid SlateGrey;
border-radius:5px;
margin: 20px;
}
.input {
border:none;
text-align:right;
}
p {
text-align:right;
padding: 20px;}
input, button {
font:inherit;
color:Blue;
width:100px;
padding-left: 5px;
}
button {
color:DarkSlateGrey;
}
strong {
font-family: NimbusSanL, Arial, sans-serif;
font-size:1.2em;
color:Green;
text-decoration:bold;
}
footer{
padding-top:10px;
text-align:center;
font-size:10px;
color:LightSlateGrey;
}
/* Responsive layout - makes the columns stack on
top of each other instead of next to each other
*/
[class*="column"] {
width: 80%;
display:inline-block;
height:60vh;
font-size:1.5em;
}
@media screen and (min-width:600px) {
[class*="column"] {
width:50%;
}
}
Homework Answers
Dear Student ,
As per the requirement submitted above , kindly find the below solution.
Here a new web page with name "ct_Ex5.html" is created, which contains following code.
ct_Ex5.html :
<!DOCTYPE html>
<!-- Webpage HTML document for Lab 4.
Authors: Amirhossein Chinaei, Andriy Pavlovych
For: EECS 1012, York University, Lassonde School of Engineering -->
<html lang="En">
<head>
<meta charset="UTF-8">
<!-- title for web page -->
<title> EECS1012: Lab 4 - Computational Thinking </title>
<!-- <link> used to refer to external style sheet -->
<link rel="stylesheet" type="text/css" href="ct.css" title="style" />
<!--in Ex1 to Ex5, link your html file to your js file, here-->
<script src="ct_Ex5.js"></script>
</head>
<body>
<header>
<!-- in Ex2 to Ex5 change this header properly-->
<h1> mapping a numerical grade to a letter grade </h1>
</header>
<div class="column1">
<!--in Ex2, change the following divisions to have labels a and b
instead of one side and another side; change the min and
max to 1 and 100; also, add a new division and label it c, and
make sure its id is num3-->
<!--in Ex 3, change the min and max to what we had in Ex1-->
<!--in Ex 5, keep the first input and change its label to input,
remove the other two inputs-->
<div class="input">
a: <input id="num1" type="number" min="-32768" max="32767"/>
</div>
<div class="input">
<!--in Ex1, define an onclick event for button; the event is
handled by function perimeter() that is defined in your js file-->
<!-- in Ex2 to Ex5, you need to change the name of the
event handler properly-->
<button onclick="mapping()"> enter </button>
</div>
<strong><p id="output"> </p></strong>
</div>
<footer>© Author: <span>Andriy Pavlovych<!--in Ex1, add your name here!--> Hassan Hassan</span> </footer>
</body>
</html>
************************
ct_Ex5.js :
function mapping() {
/* in Ex1, change the following two lines such that
the sum of number num1 and num2 are parsed to an integer
before be assigned to w and h, respectively. */
/* in Ex 2, rename w and h to a and b, respectively. */
var a = parseInt(document.getElementById("num1").value);
/* in Ex2, write a similar code to the above line
to capture the value for c*/
/* in Ex2 to Ex4, you need to replace the following line
with some other formulas */
//checking value of a
if (a >=90) {
document.getElementById("output").innerHTML = "A+";//set grade
}
else if (a >=80 && a <90) {
document.getElementById("output").innerHTML = "A";//set grade
}
else if (a >=75 && a <80) {
document.getElementById("output").innerHTML = "B+";//set grade
}
else if (a >=70 && a <75) {
document.getElementById("output").innerHTML = "B";//set grade
}
else if (a >=65 && a <70) {
document.getElementById("output").innerHTML = "C+";//set grade
}
else if (a >=60 && a <65) {
document.getElementById("output").innerHTML = "C";//set grade
}
else if (a >=55 && a <60){
document.getElementById("output").innerHTML = "D+";//set grade
}
else if (a >=50 && a <55) {
document.getElementById("output").innerHTML = "D";//set grade
}
else if (a >=40 & a <50) {
document.getElementById("output").innerHTML = "E";//set grade
}
else {
document.getElementById("output").innerHTML = "F";//set grade
}
/* in Ex2 to Ex5, you need to rename "perimeter" to make it appropriate
for those problems, you may also need to rename p to a better
variable that you might have in your formulas above */
}
======================================================
Output : Open web page ct_Ex5.html in the browser and will get the screen as shown below
Screen 1 :ct_Ex5.html
Screen 2:Enter marks and click on enter to get the screen as shown below
Screen 3:Enter marks and click on enter to get the screen as shown below
NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.
Add Answer to:
can you do this js and html question. ill give you the html and
js and...
I have the code buts its not working as this below instruction can anyone help Use...
I have the code buts its not working as this below instruction can anyone help Use the requirements from the pizza part of Assignment 6 and do the following using CSS and an internal style sheet: 1. Your Javascript function should be in an external file (don’t forget to move it up to studentweb too) 2. Put a red border of 300px in width around the form 3. There should be three Div sections: header, main_body, and footer. 4. Center the name of your...
<!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Da...
<!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Date: Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hands-on Project 4-3</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 4-3 </h1> </header> <article> <div id="results"> <p id="resultsExpl"></p> <ul> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> </ul> </div> <form> <fieldset> <label for="placeBox" id="placeLabel"> Type the name of a place, then click Submit: </label> <input type="text" id="placeBox"...
I created an Html with tabs, then how do I import the constant character content of...
I created an Html with tabs, then how do I import the constant character content of a JS into one of these tabs without editing that JS file? here is my page： <!DOCTYPE html> <html> <body> <div id="main"> <span class="tab"> <button class="current">News</button> <button>Create</button> <button onclick="about()">About</button> <button>Login</button> </span> <div class="con" style="display: block"> For news content</div> <div class="con">For create content</div> <div class="con" id="about">For about content</div> </div> </body> <script type="text/javascript" src='strings.js'></script> <script> var box = document.getElementById('main'); var btns = document.getElementsByTagName('button'); var divs =...
How can I connect the html forms to php --> mysql database <!DOCTYPE html> <html lang="en">...
How can I connect the html forms to php --> mysql database <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2> <center> Average: </h2> <h3> <center> Rate the following: </h2> <h3> <center> Rating Criteria: <br> Developing (0-5), Competent (6-10), Accomplished (10-15); </h3> <center> Judge Name: <input type="text" id="judge"> <br> <br> <center> 1. Articulate requirements and design of the project: <input type="text" id="num1"> <br> <br> 2. Plan the solution and implement the project: <input type="text" id="num2"> <br> <br> 3....
Hello, this is my code. moest of the things works but when select the price, i...
Hello, this is my code. moest of the things works but when select the price, i just dont get my total. can someone help me out . thank you My queshion is also here The page will simulate the site for a Chicago-based small bus line that travels to St Louis, Milwaukee, and Detroit. Here are the requirements: The home page (i.e. the main page) should simply be the heading, image, and slogan of the site. The home page should NOT...
HTML Canvas: I have given my small html + js mix code below. By this program-...
HTML Canvas: I have given my small html + js mix code below. By this program- I can just draw line, but after drawing any image I want to save the "image " on my desktop. I understand, I have to make a "button" to SAVE it and later if I want to load the picture, then I have to make a button on the webpage to "LOAD". But I am unable to understand the function I should write for...
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 =...
How do i make my html show 10 results per page, and how do i make...
How do i make my html show 10 results per page, and how do i make the books clickable to show results about them? <!DOCTYPE html> <html> <head> <title>Google Books Search</title> <script src="https://code.jquery.com/jquery-2.1.4.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <style> body{ background:lightblue } .wrap{ max-width:400px; margin:auto; margin-top:10px; } .pagination, pagination-last{ float:left; } a{ text-decoration:none; padding:15px 20px; border:1px solid black; border-right:none; background:#f2f2f2; font-size:18px; font-weight:bold; } .pagination-last a{ border-right:1px solid black; } a:hover { background:orange; color;white; } </style> <!-- <script src="js/main.js"></script> --> <script> function B_Search()...
finished the web page ********************************************************* .js // I've added a span with the id "count" which...
finished the web page ********************************************************* .js // I've added a span with the id "count" which you can use to modify // the number of clicks on the page // you can do this by getting the value; incrementing it and then // modifying the value of the span function changeColor(){ const colors = ['red', 'green', 'blue', 'cyan', 'yellow', 'black', 'silver', 'tan']; // Choose a random float from [0, 1) the multiply by length to get random index // Math.floor()...
Must be car Themed My first JS-DOM color:red; text node!'); //creates 'This is a text node!'...
Must be car Themed
My first JS-DOM
color:red;
text node!'); //creates 'This is a text node!'
color:blue; font-family: arial;
Clicker Counter: 0
Interface should look something like this, but does not have to
be one for one like this picture
One of JavaScript's powers is to be able to interact with the DOM directly. You've seen this when using commands such as document.getElementById("idName'). This document allows you to search HTML for certain elements. It turns out that you can also...
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 =...
Must be car Themed
My first JS-DOM
color:red;
text node!'); //creates 'This is a text node!'
color:blue; font-family: arial;
Clicker Counter: 0
Interface should look something like this, but does not have to
be one for one like this picture
One of JavaScript's powers is to be able to interact with the DOM directly. You've seen this when using commands such as document.getElementById("idName'). This document allows you to search HTML for certain elements. It turns out that you can also...
Most questions answered within 3 hours.
-
The Problem: The Case of the Harmonizing Vacations
Your CEO is exploring partnering with a European...
asked 1 hour ago -
A chemical equation is balanced by adding coefficients in front
of some formulas so that the...
asked 1 hour ago -
From the literature (reference your sources): What are the
lattice parameters of calcite and aragonite? Why...
asked 1 hour ago -
Your system is rejecting the question am asking which is
preceded by a case study. It...
asked 2 hours ago -
3. On January 2, 2000, Larry creates a trust with himself as
trustee. Larry as trustee...
asked 1 hour ago -
A member of the volleyball team spikes the ball. During this
process, she changes the velocity...
asked 2 hours ago -
Are adult gamers less likely to use a gaming console (Xbox,
PlayStation, Wii, etc...) than teen...
asked 2 hours ago -
The University of
Texas recently reported that 43% of college students aged 18-24
would spend their...
asked 3 hours ago -
The length of stay at a specific emergency department in
Phoenix, Arizona, in 2009 had a...
asked 2 hours ago -
. Please give the mechanism for this type of problem. Step by
Step
The toxin that...
asked 2 hours ago -
If you have a 1M stock solution and you want to dilute 1 :10
with water,...
asked 2 hours ago -
In a load instruction, the effective address is obtained by
A) Retriving the address from a...
asked 2 hours ago