Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

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"

/>

DOM Project One

CS206 Introduction to JavaScript



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"

/>

DOM Project One

CS206 Introduction to JavaScript



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.

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Big Data Fundamentals Concepts, Drivers & Techniques

Authors: Thomas Erl, Wajid Khattak, Paul Buhler

1st Edition

0134291204, 9780134291208

More Books

Students also viewed these Databases questions

Question

Describe the two major categories of tax services.

Answered: 1 week ago

Question

What laws were probably being violated?

Answered: 1 week ago