03_studentfile_cookies.html: DOM Project One CS206 Introduction to JavaScript Name of Cookie: Value of Cookie: Days to Expire: Create Name of Cookie: Collect Cookie to Delete:

03_studentfile_cookies.html:

href="https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap"

rel="stylesheet"

/>

CS206 Introduction to JavaScript

Name of Cookie:

Value of Cookie:

Days to Expire:

---

Name of Cookie:

---

Cookie to Delete:

Article three content

Copyright © 2021 Mikima Trails, LLC All International Rights

Reserved

03_studentfile_storage.html:

href="https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap"

rel="stylesheet"

/>

CS206 Introduction to JavaScript

Name of Storage:

Value of Storage:

---

Name of Storage:

---

Storage to Delete:

Article three content

Copyright © 2021 Mikima Trails, LLC All International Rights

Reserved

template.css:

* {

box-sizing: border-box;

content: '';

}

body {

font: 16px/1.2 Verdana;

max-width: 100vw;

}

header {

background-color: #333;

margin: 0;

padding: 10px;

}

header h1 {

font: 48px/1.4 'Raleway';

text-align: center;

color: ivory;

text-shadow: 1px 1px 3px rgb(212, 198, 198);

}

section {

margin: 2rem 0;

}

footer {

background-color: #444;

color: ivory;

min-height: 10vh;

display: flex;

justify-content: center;

align-items: center;

}

footer p {

font-size: 0.8rem;

text-align: center;

}

br::after {

content: '\0200B';

}

/* ************ Classes ************************ */

.container {

max-width: 100vw;

min-height: 80vh;

background-color: rgb(100, 80, 80);

display: flex;

flex-direction: row;

justify-content: center;

}

.lefter {

width: 45vw;

min-height: 500px;

background-color: lightblue;

padding: 1.5rem;

}

.righter {

/* same as ralph, for example use */

width: 45vw;

min-height: 500px;

margin-left: 1.5rem;

background-color: lightblue;

padding: 1.5rem;

}

.ralph {

min-width: 35vw;

max-height: 500px;

margin-left: 1.5rem;

background-color: lightblue;

padding: 1.5rem;

}

.full {

min-height: 99%;

}

.eighty {

min-height: 80%;

background-color: bisque;

padding: 0.8rem;

margin-bottom: 0.8rem;

}

.twenty {

min-height: 20%;

background-color: bisque;

padding: 0.8rem;

margin-bottom: 0.8rem;

}

.border {

border: 1px solid #0004;

border-radius: 0.8rem;

}

.game {

min-height: 15%;

padding: 0.8rem;

border: 1px solid black;

border-radius: 5px;

box-shadow: 2px 2px 4px #0004;

margin-bottom: 0.8rem;

}

.gameImg {

margin-right: 10px;

margin-bottom: 20px;

}

.trans {

transition: all 0.4s;

}

.hide {

display: none;

}

.show {

display: block;

}

.center {

text-align: center;

}

.myPara {

font: 22px/1.4 'Raleway';

text-align: center;

color: ivory;

text-shadow: 1px 1px 3px rgb(212, 198, 198);

}

/* ************* Form Related ********************** */

input[type='text'],

input[type='email'],

input[type='tel'],

input[type='time'],

textarea {

font: 0.8rem Verdana;

letter-spacing: 1px;

padding: 10px;

line-height: 1.5;

border-radius: 5px;

border: 1px solid #ccc;

box-shadow: 1px 1px 1px #999;

margin-left: 15px;

margin-top: 5px;

width: 300px;

}

input[type='text']#zip {

width: 70px;

}

select {

font: 0.8rem Verdana;

letter-spacing: 1px;

padding: 10px;

line-height: 1.5;

border-radius: 5px;

border: 1px solid #ccc;

box-shadow: 1px 1px 1px #999;

margin-left: 15px;

margin-top: 5px;

}

input + span {

padding-right: 30px;

padding-left: 0px;

}

input:invalid + span:after {

position: absolute;

content: '*'; /* content: ''; '\2716' */

padding-left: 3px;

color: #8b0000;

font-size: 2rem;

}

span.pattern {

font-size: 0.8rem;

color: rgba(0, 0, 0, 0.6);

}

input:valid + span:after {

position: absolute;

content: '\2713'; /* content: ''; */

padding-left: 5px;

color: #009000;

font-size: 1.5rem;

font-weight: bolder;

}

label {

font-weight: bold;

color: black;

}

.formBtn {

padding: 10px 25px;

background-color: brown;

color: bisque;

border-radius: 10px;

border-width: 0;

margin: 10px;

}

.formBtn:hover {

background-color: bisque;

color: brown;

box-shadow: 2px 2px 4px #0006;

transition: all 0.3s;

outline: none;

}

.formBtn:focus {

background-color: #123f81;

color: rgb(238, 223, 223);

outline: none;

box-shadow: 2px 2px 4px #0006;

}

fieldset {

border: 1px solid brown;

padding: 10px;

}

fieldset:not(:first-child) {

margin-top: 20px;

}

legend {

margin-left: 25px;

font: 18px 'Raleway';

color: brown;

font-weight: bold;

text-shadow: 2px 2px 4px #0004;

}

#frmBox {

padding: 30px;

}

#btnSubmit:disabled {

background-color: darkgrey;

color: darkslategray;

font-style: italic;

}

ul.rad {

max-width: 50%;

}

ul.check {

max-width: 70%;

}

.flex-inner {

display: flex;

flex-wrap: wrap;

align-items: center;

padding: 0 8px;

justify-content: space-between;

flex: 1 0 220px;

list-style: none;

}

.label::after {

content: '\A';

white-space: pre;

}

.lblColor {

color: brown;

}

/* ***************** ID Selectors ********************** */

#dataDisplay h2 {

background-color: #333;

color: ivory;

padding: 1.2rem;

text-align: center;

border-radius: 0.8rem;

font: 34px/1.3 'Raleway';

}

#dataDisplay h3 {

color: brown;

font: 28px 'Raleway';

font-weight: bolder;

text-shadow: 2px 2px 4px #0003;

}

INSTRUCTIONS:

Locate the form for creating and deleting cookies. Note the names/ids of the elements.

Create event handlers for each event trigger on the form.

Create code that will accept the information from the form and set a cookie

Create code that will accept the name of the cookie and display it in the right pane of the page.

Create code that will delete the cookie.

Demonstrate that the cookie has been deleted.

Locate the form for creating, recalling, and deleting storage.

Create event handlers for each button on the form.

Repeat steps 5 through 8 for a local storage name and value.