Scribd
Upload
50 views9 pages

WEEK1 Hands On

Uploaded by

favouroseji6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
50 views9 pages

WEEK1 Hands On

Uploaded by

favouroseji6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

Project01

<!DOCTYPE html>
<html>
<head>
<!--
JavaScript 7th Edition
Chapter 1
Hands-on Project 1-1

Author:
Date:

Filename: project01-01.html
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Hands-on Project 1-1</title>
<link rel="stylesheet" href="styles.css" />
</head>

<body>
<header>
<h1>
Hands-on Project 1-1
</h1>
</header>

<article>
<h2>Financial Planning Tips</h2>
<script>
document.write("<ol>");
document.write("<li>Reduce spending on
non-necessities</li>");
document.write("<li>Use extra money to pay off debt</li>");
document.write("<li>Continue paying off debt until you are
debt free</li>");
document.write("<li>Put a fixed percent of your pay
aside</li>");
document.write("</ol>");
</script>

</article>
</body>
</html>
Project02

<!DOCTYPE html>
<html>
<head>
<!--
JavaScript 7th Edition
Chapter 1
Hands-on Project 1-2

Author:
Date:

Filename: project01-02.html
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Hands-on Project 1-2</title>
<link rel="stylesheet" href="styles.css" />
</head>

<body>
<header>
<h1>
Hands-on Project 1-2
</h1>
</header>

<article>
<h2>High-Speed Internet Plans</h2>
<script>
//Initialize variables for names and speeds
var service1Name = "Basic";
var service2Name = "Express";
var service3Name = "Extreme";
var service4Name = "Ultimate";
var service1Speed = 5;
var service2Speed = 25;
var service3Speed = 50;
var service4Speed = 150;

</script>
<table>
<thead>
<tr>
<th>Service</th>
<th>Download Speed (Mbps)</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<script>
document.write(service1Name);
</script>
</td>
<td>
<script>
document.write(service1Speed);
</script>
</td>
</tr>
<tr>
<td>
<script>
document.write(service2Name);
</script>
</td>
<td>
<script>
document.write(service2Speed);
</script>
</td>
</tr>
<tr>
<td>
<script>
document.write(service3Name);
</script>
</td>
<td>
<script>
document.write(service3Speed);
</script>
</td>
</tr>
<tr>
<td>
<script>
document.write(service4Name);
</script>
</td>
<td>
<script>
document.write(service4Speed);
</script>
</td>
</tr>
</tbody>
</table>
</article>
</body>
</html>

Project03

<!DOCTYPE html>
<html>
<head>
<!--
JavaScript 7th Edition
Chapter 1
Hands-on Project 1-3

Author:
Date:

Filename: project01-03.html
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Hands-on Project 1-3</title>
<link rel="stylesheet" href="styles.css" />
</head>

<body>
<header>
<h1>
Hands-on Project 1-3
</h1>
</header>

<article>
<h2>Order Form</h2>
<form>
<fieldset id="contactinfo">
<legend><span>Contact Information</span></legend>
<label for="nameinput">
Name
<input type="text" id="nameinput" name="name" />
</label>
<label for="emailinput">
Email
<input type="email" id="emailinput" name="email" />
</label>
<label for="phoneinput">
Phone
<input type="text" id="phoneinput" name="phone" />
</label>
</fieldset>
<fieldset id="reserveinfo">
<legend><span>Reservation Information</span></legend>
<fieldset id="checkin">
<legend>Pickup date</legend>
<select id="inmonth" name="inmonth">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="indate" name="indate">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="inyear" name="inyear">
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
</select>
</fieldset>
<fieldset id="checkout">
<legend>Dropoff date</legend>
<select id="outmonth" name="outmonth">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="outdate" name="outdate">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="outyear" name="outyear">
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
</select>
</fieldset>
</fieldset>
<fieldset id="submitbutton">
<input type="submit" value="Submit" onclick="alert('Thanks for
your order!');"/>
</fieldset>
</form>
</article>
</body>
</html>

Project05

<!DOCTYPE html>
<html>
<head>
<!--
JavaScript 7th Edition
Chapter 1
Hands-on Project 1-5

Author:
Date:

Filename: project01-05.html
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Hands-on Project 1-5</title>
<link rel="stylesheet" href="styles.css" />
<script>
let reopenDate = "September 8th";
</script>
</head>

<body>
<header>
<h1>
Hands-on Project 1-5
</h1>
</header>

<article>
<script>
//Create a custom reopening message //
document.write("<p>We are closed for the holiday and will reopen
on " + reopenDate + "</p>");
</script>
</article>
</body>
</html>

You might also like