Summary Work 2023

<html>

<head>

// https://www.bls.gov/news.release/wkyeng.t01.htm

function run()

{

cleanData();

processData();

}

function cleanData() // cleans data in originalInput and sends results to modifiedInput

{

// https://www3.ntu.edu.sg/home/ehchua/programming/howto/Regexe.html

const regex = /20\d\d\n/ig;

var txt = document.getElementById("originalInput").value;

txt = txt.replaceAll(regex,"");

txt = txt.replaceAll("\n","");

txt = txt.replaceAll("1st ","");

txt = txt.replaceAll("2nd ","");

txt = txt.replaceAll("3rd ","");

txt = txt.replaceAll("4th ","");

txt = txt.replaceAll(",","");

txt = txt.replaceAll("quarter","\n");

txt = txt.substring(0, txt.indexOf('NOTE:') );

document.getElementById("modifiedInput").value = txt;

}

function processData() // processes data in modifiedInput and sends results to output

{

var workersT = [];

var workersM = [];

var workersW = [];

var moneyT = [];

var moneyM = [];

var moneyW = [];

var money1984T = [];

var money1984M = [];

var money1984W = [];

var txt = document.getElementById("modifiedInput").value;

var rowData = txt.split("\n");

for (var rep = 0; rep < rowData.length; rep++)

{

data = rowData[rep].split("\t");

workersT.push( data[0] );

workersM.push( data[1] );

workersW.push( data[2] );

moneyT.push( data[3] );

moneyM.push( data[4] );

moneyW.push( data[5] );

money1984T.push( data[6] );

money1984M.push( data[7] );

money1984W.push( data[8] );

}

// printLine(workersT);

printLine( "Men 1984 Average of 2012 - 2020: " + mean(money1984M) ) ;

printLine( "Women 1984 Average of 2012 - 2020: " + mean(money1984W) );

printLine( "Men 1984 Max of 2012 - 2020: " + Math.max(...money1984M) ) ;

printLine( "Women 1984 Max of 2012 - 2020: " + Math.max(...money1984W) );

printLine( "Men 1984 Min of 2012 - 2020: " + Math. min(...money1984M) ) ;

printLine( "Women 1984 Min of 2012 - 2020: " + Math.min(...money1984W) );

}

function print(content)

{

document.getElementById("output").innerHTML += content;

}

function printLine(content)

{

document.getElementById("output").innerHTML += content + "<br />";

}

function mean(list)

{

var total = 0.0;

for (var rep = 0; rep < list.length; rep++)

{

total += eval(list[rep]);

}

return total/list.length;

}

</script>

</head>

<body>

</body>

</html>

Raw Data: https://www.bls.gov/news.release/wkyeng.t01.htm

Table 1. Median usual weekly earnings of full-time wage and salary workers by sex, quarterly averages, seasonally adjusted

Year and quarter Number of workers

(in thousands) Median weekly earnings

Total Men Women In current dollars In constant (1982-84) dollars

Total

$ Men

$ Women

$ Total

$ Men

$ Women

$

2015

2nd quarter

108,541 60,386 48,154 803 890 725 339 376 306

3rd quarter

109,315 61,004 48,311 809 896 727 340 377 306

4th quarter

110,060 61,292 48,768 821 904 729 345 380 307

2016

1st quarter

110,323 61,559 48,764 823 904 744 346 380 313

2nd quarter

110,921 61,770 49,152 828 913 746 345 381 311

3rd quarter

111,789 62,239 49,550 834 918 748 347 381 311

4th quarter

111,357 62,182 49,175 845 924 759 349 381 313

2017

1st quarter

111,838 62,363 49,475 858 941 760 352 386 312

2nd quarter

113,140 62,963 50,177 863 937 782 354 384 321

3rd quarter

113,854 63,319 50,535 864 944 769 352 385 313

4th quarter

114,286 63,315 50,971 854 943 770 345 382 312

2018

1st quarter

114,418 63,802 50,616 875 956 779 351 384 312

2nd quarter

115,529 64,194 51,336 881 963 783 351 384 313

3rd quarter

116,256 64,448 51,808 891 979 796 354 389 316

4th quarter

116,087 64,154 51,932 897 992 795 355 392 315

2019

1st quarter

117,111 64,772 52,338 899 996 803 355 393 317

2nd quarter

117,299 65,071 52,228 914 1,003 818 358 393 320

3rd quarter

117,501 65,010 52,491 921 1,007 825 360 393 322

4th quarter

118,450 65,202 53,248 934 1,022 842 362 396 327

2020

1st quarter

116,829 64,162 52,667 951 1,059 853 367 409 330

2nd quarter

104,222 57,716 46,506 1,008 1,090 919 393 425 359

3rd quarter

108,903 60,146 48,757 995 1,108 900 384 427 347

4th quarter

111,671 61,678 49,994 983 1,072 893 376 410 342

2021

1st quarter

112,893 61,940 50,952 983 1,082 897 373 410 340

2nd quarter

113,300 62,178 51,122 996 1,098 905 371 409 337

3rd quarter

114,607 63,229 51,379 1,002 1,104 915 367 404 335

4th quarter

116,525 64,429 52,096 1,009 1,103 928 362 396 333

2022

1st quarter

118,307 65,294 53,013 1,032 1,121 936 362 394 329

2nd quarter

118,514 65,089 53,424 1,048 1,148 950 359 394 326

3rd quarter

119,507 65,866 53,641 1,071 1,168 970 362 395 328

4th quarter

119,204 66,025 53,179 1,083 1,175 973 363 394 326

2023

1st quarter

120,010 66,306 53,704 1,095 1,179 992 363 391 329

2nd quarter

121,029 66,807 54,222 1,107 1,185 999 365 390 329

3rd quarter

121,376 66,726 54,650 1,119 1,212 1,006 366 396 329

4th quarter

121,257 67,010 54,247 1,142 1,230 1,027 371 399 333

2024

1st quarter

120,317 65,917 54,400 1,136 1,221 1,026 365 393 330

2nd quarter

119,726 65,785 53,941 1,151 1,256 1,026 368 401 328

NOTE: Updated population controls are introduced annually with the release of January data.

Cleaned Data:

Table 1. Median usual weekly earnings of full-time wage and salary workers by sex

ly averages seasonally adjustedYear and

Number of workers(in thousands) Median weekly earningsTotal Men Women In current dollars In constant (1982-84) dollarsTotal$ Men$ Women$ Total$ Men$ Women$

108541 60386 48154 803 890 725 339 376 306

109315 61004 48311 809 896 727 340 377 306

110060 61292 48768 821 904 729 345 380 307

110323 61559 48764 823 904 744 346 380 313

110921 61770 49152 828 913 746 345 381 311

111789 62239 49550 834 918 748 347 381 311

111357 62182 49175 845 924 759 349 381 313

111838 62363 49475 858 941 760 352 386 312

113140 62963 50177 863 937 782 354 384 321

113854 63319 50535 864 944 769 352 385 313

114286 63315 50971 854 943 770 345 382 312

114418 63802 50616 875 956 779 351 384 312

115529 64194 51336 881 963 783 351 384 313

116256 64448 51808 891 979 796 354 389 316

116087 64154 51932 897 992 795 355 392 315

117111 64772 52338 899 996 803 355 393 317

117299 65071 52228 914 1003 818 358 393 320

117501 65010 52491 921 1007 825 360 393 322

118450 65202 53248 934 1022 842 362 396 327

116829 64162 52667 951 1059 853 367 409 330

104222 57716 46506 1008 1090 919 393 425 359

108903 60146 48757 995 1108 900 384 427 347

111671 61678 49994 983 1072 893 376 410 342

112893 61940 50952 983 1082 897 373 410 340

113300 62178 51122 996 1098 905 371 409 337

114607 63229 51379 1002 1104 915 367 404 335

116525 64429 52096 1009 1103 928 362 396 333

118307 65294 53013 1032 1121 936 362 394 329

118514 65089 53424 1048 1148 950 359 394 326

119507 65866 53641 1071 1168 970 362 395 328

119204 66025 53179 1083 1175 973 363 394 326

120010 66306 53704 1095 1179 992 363 391 329

121029 66807 54222 1107 1185 999 365 390 329

121376 66726 54650 1119 1212 1006 366 396 329

121257 67010 54247 1142 1230 1027 371 399 333

120317 65917 54400 1136 1221 1026 365 393 330

119726 65785 53941 1151 1256 1026 368 401 328

Barrera

https://docs.google.com/document/d/1Tqqt6lpFjjgFJDdnTYQGyb4mlWvYn1UDj5N8tZH_GL4/edit#heading=h.sc7b1yy2w7yf

Marcus

https://new-sandbox-program-68-7039924.codehs.me/index.html

Rodriguez

https://docs.google.com/document/d/1jaB6ynAa4xC9phub_SOubXfxCjHxMBtjeHvfQvW50iU/edit

Peter Rohn

https://docs.google.com/document/d/1360vAP1oIb_3Axzkc5ivB1ARzZq407lyE3zh5-PpCDU/edit

Scott

https://docs.google.com/document/d/1riHTqJrEWhJx5SkfmTzQsN5JTl4XpnU6i5mIvJHTKR8/edit

Mueller

https://docs.google.com/document/d/1eMHxy7XjDt_G9dJrAoHCINVC3Q3FsrXUE8NoEj_KzKo/edit

Benitez

https://docs.google.com/document/d/1uaRbV8vOaFQ4I1mUZ0d6QKUQw_7tjrBK9FAXquTYMIU/edit

Mendoza

https://docs.google.com/document/d/1Xz-k76vNpyoXrBbSDnlOs1mTvdSBS2XKtzDYgRPjHrA/edit

Chris Bryant

https://docs.google.com/document/d/1r3B3aNo0pIdwm2phgPPyIcv2071SRNxrkzlZ6gQRiBc/edit

Evonne Carter

https://docs.google.com/document/d/10ITzDSUoUgNjhkAJyRUkS9ivs3kRUF47FK3MXix7-mE/edit

Rewers

https://docs.google.com/document/d/1yUNRdnoah-QBNvo0LVwNzwzNQavsdys1U9kud9LJvok/edit

Wen

https://docs.google.com/document/d/1u8Z3pVT-xL9uzSVlV0GnQwrRl6dOkolf5LFE3WF4NQU/edit

<html>

<head>

<style>

h1{

color:crimson;

font-size: 36.0px;

font-weight: bold;

font-family: "courier new";

}

#two{

color:Green;

font-size: 20.0px;

font-weight: bold;

font-family: "courier new";

}

body{

color:blue;

font-size: 18.0px;

font-weight: normal;

font-family: "Helvetica";

}

hr.rounded {

border-top: 8px solid #bbb;

border-radius: 5px;

}

.button1 {

background-color: #0000FF;

border: none;

color: #FFFFFF;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

border-radius: 12px;

font-size: 18px;

margin: 4px 2px;

cursor: pointer;

float: center;

}

.button2 {

background-color: #F70B0B;

border: none;

color: #FFFFFF;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

border-radius: 12px;

font-size: 18px;

margin: 4px 2px;

cursor: pointer;

float: center;

}

.button3 {

background-color: #F70B0B;

color: #FFFFFF;

padding: 15px 32px;

text-align: center;

text-decoration: none;

height: 50px;

width: 250px;

background-color: red; /* For browsers that do not support gradients */

background-image: radial-gradient(red,blue,red);

display: center-block;

border-radius: 12px;

font-size: 18px;

margin: 4px 2px;

cursor: pointer;

float: center;

}

</style>

var setting = " ";

var character = " ";

var climax = " ";

var resolution = " ";

function print(str)

{

document.getElementById("outputFirstDraft").innerHTML += str + "<br />";

}

function asksetting()

{

setting = prompt("Please write a setting that is at least 3 sentences. Ms. B loves it if you write more.");

}

function askcharacter()

{

character = prompt("Please desribe the characters for your story. Remember your S.T.E.A.L. to create them. Ms. B loves it if you write more than 3 sentences.");

}

function askclimax()

{

climax = prompt("Please write the climax moment for a character. Remember that a climax is a turning point for the character. Ask yourself 'How do they change?'. Ms. B loves it if you write more than 3 sentences.");

}

function askresolution()

{

resolution = prompt("Please write a resolution for a problem of a character. After the climax changed them, explain where a character will end their story. Ms. B loves it if you write more than 3 sentences.");

}

function FirstDraft()

{

document.getElementById("box").value =setting +" "+character+ " "+climax +" "+resolution;

}

</script>

</head>

<body>

<h1>

<center> Creative Writing Collaboration and Revision</center>

</h1>

<center> <i> “How do I create something out of nothing? And how do I create my own life? I think it is by questioning, and saying to myself that there are no absolute truths.”

— Amy Tan </i></center>

</h1>

Directions:

<ol>

<li>Your teacher will assign you a section of story to write: Setting, Characters, Climax, Resolution</li>

<li>Each group partner will take the computer and enter their story idea for their section. Remember: write your section as if you are writing the story.</li>

<li>As a class, we will collaborate to edit the website output of the different parts to produce a more coherent story.</li>

</ol>

<br />

<input type="button" class="button1" onclick="asksetting()"

value="Setting" />

<input type="button" class="button2" onclick="askcharacter()"

value="Characters" />

<input type="button" class="button1" onclick="askclimax()"

value="Climax" />

<input type="button" class="button2" onclick="askresolution()"

value="Resolution" />

<input type="button" class="button3" onclick="FirstDraft()"

value="Let's put it together!" />

</center>

</body>

</html>

<html>

<head>

<title>First Page</title>

<style>

body{

background-color: rgb(197, 202, 233);

color: crimson;

font-size: 24.0px;

font-weight: bold;

font-family: "courier new";

text-align:center;

}

header{

text-align: center;

margin:50px;

background-color:azure;

line-height: 100px;

box-shadow: 2px 2px 5px rgb(40, 53, 147);

}

#watchLeft{

float:left;

}

#watchRight{

float:right;

}

#output{

text-align:center;

font-family:"Cambria";

}

p{

text-align:center;

}

#popUpBG {

width:100%;

height:100%;

opacity:.95;

top:0;

left:0;

display:none;

position:fixed;

background-color:#313131;

overflow:auto

}

img#close {

position:absolute;

width:10%;

right:-14px;

top:-14px;

cursor:pointer

}

div#popupReport {

position: relative;

font-family:sans-serif;

}

form {

position:relative;

text-align:center;

max-width:300px;

min-width:250px;

padding:10px 50px;

border:2px solid gray;

border-radius:10px;

font-family:sans-serif;

background-color:#fff;

top: 250px;

left: 50%;

-webkit-transform: translateY(-50%) translateX(-50%);

-ms-transform: translateY(-50%) translate(-50%);

transform: translateY(-50%) translate(-50%);

}

p {

margin-top:30px

}

h2 {

background-color:#FEFFED;

padding:20px 35px;

margin:-10px -50px;

text-align:center;

border-radius:10px 10px 0 0

}

h1 {

text-align:center;

}

.reportHeading{

border:2px dotted #000000;

}

hr {

margin:10px -50px;

border:0;

border-top:1px solid #ccc

}

input[type=text] {

width:82%;

padding:10px;

margin-top:30px;

border:1px solid #ccc;

padding-left:40px;

font-size:16px;

font-family:fantasy;

}

input[type=date] {

width:82%;

padding:10px;

margin-top:30px;

border:1px solid #ccc;

padding-left:40px;

font-size:16px;

font-family:fantasy;

}

textarea {

background-image:url(../images/msg.png);

background-repeat:no-repeat;

background-position:5px 7px;

width:82%;

height:95px;

padding:10px;

resize:none;

margin-top:30px;

border:1px solid #ccc;

padding-left:40px;

font-size:16px;

font-family:raleway;

margin-bottom:30px;

}

#submit {

text-decoration:none;

width:100%;

text-align:center;

display:block;

background-color:#FFBC00;

color:#fff;

border:1px solid #FFCB00;

padding:10px 0;

font-size:20px;

cursor:pointer;

border-radius:5px;

}

span {

color:red;

font-weight:700;

}

button {

width:25%;

height:45px;

border-radius:3px;

background-color:#cd853f;

color:#fff;

font-family:sans-serif;

font-size:18px;

cursor:pointer;

}

.outputStyle{

border-style:solid;

border-width:5px;

border-radius:100px;

background-color:white;

}

hr{

border: 3px solid red;

border-radius: 5px;

}

</style>

function print(str)

{

document.getElementById("output").innerHTML += str + "<br/>";

}

function changePageColor(pageColor)

{

document.body.style.background = pageColor;

}

function choosePageColor(pgColor)

{

document.body.style.background = pgColor;

}

// Validating Empty Field

function check_empty() {

if (document.getElementById('name').value == "" || document.getElementById('report').value == "" || document.getElementById('description').value == "") {

alert("Fill All Fields !");

} else {

alert("Form Submitted Successfully...");

}

//Function To Display Popup

function div_show() {

document.getElementById('popUpBG').style.display = "block";

}

//Function to Hide Popup

function div_hide(){

document.getElementById('popUpBG').style.display = "none";

}

//Take user input and display on page

function getUserInput(){

var nameOutput = "";

var reportOutput = "";

var descriptionOutput = "";

var dateOutput = "";

nameOutput = document.getElementById("name").value;

reportOutput = document.getElementById("report").value;

descriptionOutput = document.getElementById("description").value;

dateOutput = document.getElementById("date").value;

localStorage.setItem("name", nameOutput);

localStorage.setItem("report", reportOutput);

localStorage.setItem("description", descriptionOutput);

localStorage.setItem("date", dateOutput);

document.getElementById("output").innerHTML += "<h6>" + localStorage.getItem("name") + " <---> " + localStorage.getItem("date") + "</h6>"

+ "<h1 class='reportHeading'>" + localStorage.getItem("report") + "</h1>"

+ "<p>" + localStorage.getItem("description") + "</p><hr>";

}

</script>

</head>

<body>

<h1>Gage Park Neighborhood Watch</h1>

</header>

<p>

Choose a color:

</p>

<h2>What are your reporting?</h2>

<button onclick="getUserInput();div_hide();" type="button">Submit</button>

</form>

</div>

</div>

<h1>Click Button To Add A Report</h1>

<button id="popup" onclick="div_show()">Report!</button>

</body>

</body>

</html>

<html>

<head>

<title>COMPUTER CRITERIA QUIZZY-QUIZ!</title>

<style>

body{

background-color: lightgray;

font-family: arial;

margin: 0;

}

header{

background-color: dodgerblue;

color: white;

text-shadow: 1px 1px 2px navy;

padding: 15px;

width: 75%;

margin-left: auto;

margin-right: auto;

text-align: center;

}

h2{

font-weight: normal;

font-style: italic;

}

article{

background-color: white;

padding: 15px;

width: 75%;

height: 100%;

margin-left: auto;

margin-right: auto;

}

figure{

width: 50%;

margin-left: auto;

margin-right: auto;

}

footer{

background-color: dodgerblue;

color: white;

text-shadow: 1px 1px 2px navy;

padding: 15px;

width: 75%;

margin-left: auto;

margin-right: auto;

}

</style>

function stuResponse()

{

var ans = document.getElementById("box").value;

checkAns(ans);

}

var answers = [0,0,0,0];

var criteria = ["input", "output", "storage", "processing"];

function checkIfAllCorrect()

{

var count = 0;

for (var rep = 0; rep < answers.length; rep++)

{

if (answers[rep] > 0)

count++;

}

var temp = "Outstanding!!!"

if (count == 4)

temp += " You answered all 4 correctly!!!";

alert(temp);

}

function checkAns(inputText)

{

var whichIsCorrect = -1;

for (var rep = 0; rep < answers.length; rep++)

{

if ( criteria[rep] == inputText.toLowerCase() )

{

whichIsCorrect = rep;

rep = answers.length;

}

if (whichIsCorrect == -1)

{

alert("Try again.");

}

else

{

answers[whichIsCorrect]++;

if (answers[whichIsCorrect] > 1)

{

alert("Good, but that response was already given.");

}

else

{

checkIfAllCorrect();

}

</script>

</head>

<body>

<h2>Identify <mark>one</mark> of the four criteria describing a computer (as discussed in class).</h2>

</header>

<p><b>Type your answer within the text area below.</b></p>

<button onclick="stuResponse()">Check your answer!</button>

</figure>

</article>

<p>2023 L.A.S. Vegas</p>

</footer>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>First Page</title>

<style>

header {

display: flex;

background-color: lightblue;

height: 200px;

justify-content: center;

align-items: center;

}

footer {

display: block;

background-color: lightblue;

height: 160px;

padding: 10px;

}

.grid-container-main {

background-color: lightblue;

display: grid;

grid-template-columns: auto auto;

padding: 10px;

}

.grid-container-main>div {

background-color: lightblue;

border: 1px solid black;

padding: 10px;

font-size: 15px;

}

.grid-container-footer {

display: grid;

grid-template-columns: auto auto;

padding: 10px;

}

.grid-container-footer>div {

background-color: lightblue;

height: 100px; padding: 15px;

font-size: 15px;

}

table {

border: solid black;

border-spacing: 1px;

padding: 2px;

}

th,

td {

border: solid gray;

border-width: 1px;

}

</style>

const term = [0, 0];

function random() {

term[0] = Math.floor(Math.random() * 9) + 1;

term[1] = Math.floor(Math.random() * 9) + 1;

document.getElementById("demo").innerHTML = term[0] + " + " + term[1];

console.log("Hello");

return term;

}

function check() {

if ((term[0] + term[1]) == document.getElementById("summ").value)

document.getElementById("summm").innerHTML = "Right!"

else

document.getElementById("summm").innerHTML = "Wrong!";

}

</script>

</head>

<h2>Mr. Woods</h2>

</header>

<br>

<div>

<h4>My Family members</h4>

<ul>

<li>Wife - Battsengel (Betty)</li>

<li>Son - Vincent</li>

<li>Daughter - Anastasia</li>

</ul>

</div>

<div>

<h4>Ages of Children (in descending order)</h4>

<ol>

<li>Vincent - 32 years old</li>

<li>Bill - 30 years old</li>

<li>Anastasia- 11 years old</li>

</ol>

</div>

<div>

<table>

<h3>My Education</h3>

</caption>

<tr>

<th>Degree</th>

<th>University</th>

<th>Major</th>

</tr>

<tr>

<td>Bachelors</td>

<td>Michigan Technological University</td>

<td>Computer Science</td>

</tr>

<tr>

<td>Masters</td>

<td>Western Michigan University</td>

<td>Mathematics</td>

</tr>

<tr>

<td>Masters</td>

<td>American College of Education</td>

<td>Educational Leadership</td>

</tr>

</table>

</div>

<div>

<h4>A picture of my daughter - Anastasia</h4>

</div>

<p><button onclick="random()" type="button">New Problem</button>What is <span id="demo"></span>? <input type="text" id="summ" name="summ"> <button onclick="check()" type="button">Check</button> <span id="summm">?</span></p>

<div>

<p><a href="mailto:jswoods@cps.edu">My Email</a></p>

</div>

<div>

<p style="text-align:right;">HS - H. H. Dow High School</p>

<p style="text-align:right;">City - Midland, Michigan</p>

<p style="text-align:right;">Class - 1982</p>

</div>

</footer>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Second Page</title>

</head>

<body>

<h2>Dr. Lekkas</h2>

</header>

<br>

<div>

<h4>Family members</h4>

<ul>

<li>Wife - Tina Lekkas</li>

<li>Son - Elias</li>

<li>Daughter - Joanna</li>

</ul>

</div>

<div>

<h4>Ages of Children (in descending order)</h4>

<ol>

<li>Elias - 39 years old</li>

<li>Joanna - 36 years old</li>

<li>Dean - 33 years old</li>

</ol>

</div>

<div>

<table>

<h3>Education</h3>

</caption>

<tr>

<th>Degree</th>

<th>University</th>

<th>Major</th>

</tr>

<tr>

<td>Bachelors</td>

<td>Chicago State University</td>

<td>Education</td>

</tr>

<tr>

<td>Masters</td>

<td>University of Illinois - Chicago</td>

<td>Speech</td>

</tr>

<tr>

<td>Doctorate</td>

<td>Loyola University</td>

<td>Educational Leadership</td>

</tr>

</table>

</div>

<div>

<h4>A picture of Dr. Lekkas</h4>

</div>

<div>

<p><a href="mailto:HLekkas54@yahoo.com">Lekkas Email</a></p>

</div>

<div>

<p style="text-align:right;">HS - Amundsen High School</p>

<p style="text-align:right;">City - Chicago, Illinois</p>

<p style="text-align:right;">Class - 1972</p>

</div>

</footer>

</body>

</html>

<html>

<head>

<title>First Page</title>

<style>

body{

background-color: rgb(197, 202, 233);

color: crimson;

font-size: 24.0px;

font-weight: bold;

font-family: "courier new";

text-align:center;

}

header{

text-align: center;

margin:50px;

background-color:azure;

line-height: 100px;

box-shadow: 2px 2px 5px rgb(40, 53, 147);

}

#watchLeft{

float:left;

}

#watchRight{

float:right;

}

#output{

text-align:center;

font-family:"Cambria";

}

p{

text-align:center;

}

#popUpBG {

width:100%;

height:100%;

opacity:.95;

top:0;

left:0;

display:none;

position:fixed;

background-color:#313131;

overflow:auto

}

img#close {

position:absolute;

width:10%;

right:-14px;

top:-14px;

cursor:pointer

}

div#popupReport {

position: relative;

font-family:sans-serif;

}

form {

position:relative;

text-align:center;

max-width:300px;

min-width:250px;

padding:10px 50px;

border:2px solid gray;

border-radius:10px;

font-family:sans-serif;

background-color:#fff;

top: 250px;

left: 50%;

-webkit-transform: translateY(-50%) translateX(-50%);

-ms-transform: translateY(-50%) translate(-50%);

transform: translateY(-50%) translate(-50%);

}

p {

margin-top:30px

}

h2 {

background-color:#FEFFED;

padding:20px 35px;

margin:-10px -50px;

text-align:center;

border-radius:10px 10px 0 0

}

h1 {

text-align:center;

}

.reportHeading{

border:2px dotted #000000;

}

hr {

margin:10px -50px;

border:0;

border-top:1px solid #ccc

}

input[type=text] {

width:82%;

padding:10px;

margin-top:30px;

border:1px solid #ccc;

padding-left:40px;

font-size:16px;

font-family:fantasy;

}

input[type=date] {

width:82%;

padding:10px;

margin-top:30px;

border:1px solid #ccc;

padding-left:40px;

font-size:16px;

font-family:fantasy;

}

textarea {

background-image:url(../images/msg.png);

background-repeat:no-repeat;

background-position:5px 7px;

width:82%;

height:95px;

padding:10px;

resize:none;

margin-top:30px;

border:1px solid #ccc;

padding-left:40px;

font-size:16px;

font-family:raleway;

margin-bottom:30px;

}

#submit {

text-decoration:none;

width:100%;

text-align:center;

display:block;

background-color:#FFBC00;

color:#fff;

border:1px solid #FFCB00;

padding:10px 0;

font-size:20px;

cursor:pointer;

border-radius:5px;

}

span {

color:red;

font-weight:700;

}

button {

width:25%;

height:45px;

border-radius:3px;

background-color:#cd853f;

color:#fff;

font-family:sans-serif;

font-size:18px;

cursor:pointer;

}

.outputStyle{

border-style:solid;

border-width:5px;

border-radius:100px;

background-color:white;

}

hr{

border: 3px solid red;

border-radius: 5px;

}

</style>

function print(str)

{

document.getElementById("output").innerHTML += str + "<br/>";

}

function changePageColor(pageColor)

{

document.body.style.background = pageColor;

}

function choosePageColor(pgColor)

{

document.body.style.background = pgColor;

}

// Validating Empty Field

function check_empty() {

if (document.getElementById('name').value == "" || document.getElementById('report').value == "" || document.getElementById('description').value == "") {

alert("Fill All Fields !");

} else {

alert("Form Submitted Successfully...");

}

//Function To Display Popup

function div_show() {

document.getElementById('popUpBG').style.display = "block";

}

//Function to Hide Popup

function div_hide(){

document.getElementById('popUpBG').style.display = "none";

}

//Take user input and display on page

function getUserInput(){

var nameOutput = "";

var reportOutput = "";

var descriptionOutput = "";

var dateOutput = "";

nameOutput = document.getElementById("name").value;

reportOutput = document.getElementById("report").value;

descriptionOutput = document.getElementById("description").value;

dateOutput = document.getElementById("date").value;

localStorage.setItem("name", nameOutput);

localStorage.setItem("report", reportOutput);

localStorage.setItem("description", descriptionOutput);

localStorage.setItem("date", dateOutput);

document.getElementById("output").innerHTML += "<h6>" + localStorage.getItem("name") + " <---> " + localStorage.getItem("date") + "</h6>"

+ "<h1 class='reportHeading'>" + localStorage.getItem("report") + "</h1>"

+ "<p>" + localStorage.getItem("description") + "</p><hr>";

}

</script>

</head>

<body>

<h1>Gage Park Neighborhood Watch</h1>

</header>

<p>

Choose a color:

</p>

<h2>What are your reporting?</h2>

<button onclick="getUserInput();div_hide();" type="button">Submit</button>

</form>

</div>

</div>

<h1>Click Button To Add A Report</h1>

<button id="popup" onclick="div_show()">Report!</button>

</body>

</body>

</html>