Create a web page and images. include plugins for displaying images in light Box and...
- Create a web page and images. include plugins for displaying images in light Box and Color Box.
- Create data validation form and include the following HTML 5 controls for input data: email, url, date. Your data validation will include name, email, date of birth and website.
Homework Answers
Qo.
ANS:
1) Webpage with images and jQuery LightBox
HTML/JQ/CSS Code:
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>Basic WebPage with JS
Lightbox Gallery Example</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
type="text/css" href="lightbox.css">
<script src="lightbox.js"
type="text/javascript"></script>
</head>
<body>
<h2>Webpage with Gallery
Lightbox</h2>
<div class="myrow">
<div class="mycolumn">
<img src="images/1.jpg"
onclick="openModal();currentSlide(1)" class="hover-shadow
cursor">
</div>
<div class="mycolumn">
<img src="images/2.jpg"
onclick="openModal();currentSlide(2)" class="hover-shadow
cursor">
</div>
<div class="mycolumn">
<img src="images/3.jpg"
onclick="openModal();currentSlide(3)" class="hover-shadow
cursor">
</div>
<div class="mycolumn">
<img src="images/4.jpg"
onclick="openModal();currentSlide(4)" class="hover-shadow
cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor"
onclick="closeModal()">×</span>
<div class="modal-content">
<div class="slides">
<div class="subslides">1 of
4</div>
<img
src="images/1.jpg"/>
</div>
<div class="slides">
<div class="subslides">2 of
4</div>
<img
src="images/2.jpg"/>
</div>
<div class="slides">
<div class="subslides">3 of
4</div>
<img
src="images/3.jpg"/>
</div>
<div class="slides">
<div class="subslides">4 of
4</div>
<img
src="images/4.jpg"/>
</div>
<a class="previous"
onclick="changeSlides(-1)">❮</a>
<a class="next"
onclick="changeSlides(1)">❯</a>
<div class="mycolumn">
<img class="check cursor"
src="images/1.jpg" onclick="currentSlide(1)" >
</div>
<div class="mycolumn">
<img class="check cursor"
src="images/2.jpg" onclick="currentSlide(2)" >
</div>
<div class="mycolumn">
<img class="check cursor"
src="images/3.jpg" onclick="currentSlide(3)" >
</div>
<div class="mycolumn">
<img class="check cursor"
src="images/4.jpg" onclick="currentSlide(4)" >
</div>
</div>
</div>
</body>
</html>
CSS CODE:
img{
width: 100%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.myrow:after {
content: "";
display: table;
clear: both;
}
.myrow > .mycolumn {
padding: 50px 5px;
}
.mycolumn {
float: left;
width: 25%;
}
.mycolumn img{
height: 100px;
}
.slides img{
height: 300px;
border: 2px solid #000;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.slides {
display: none;
}
.cursor {
cursor: pointer;
}
.previous,
.next {
cursor: pointer;
user-select: none;
position: absolute;
top: 50%;
width: auto;
padding: 10px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 25px;
-webkit-user-select: none;
}
.next {
right: 0;
}
.previous:hover,
.next:hover {
background-color: #0000ff;
}
.subslides {
font-size: 20px;
padding: 10px 12px;
position: absolute;
top: 0;
}
.check {
opacity: 0.6;
}
.active,
.check:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.5s;
}
.hover-shadow:hover {
box-shadow: 2px 4px 8px 0 #c0c0c0, 2px 6px 20px 0 #408080;
}
JS CODE:
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
var slideIndex = 1;
mySlides(slideIndex);
function changeSlides(n) {
mySlides(slideIndex += n);
}
function currentSlide(n) {
mySlides(slideIndex = n);
}
function mySlides(n) {
var i;
var slides = document.getElementsByClassName("slides");
var dots = document.getElementsByClassName("check");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
Output Image:
IMG2:
2) SImple Js Validation with required input fields
HTML/JS CODE:
<html>
<head>
<title> form validation </title>
<script>
var x=true;
function form_validate()
{
z1.innerHTML="";
z2.innerHTML="";
z3.innerHTML="";
if(!user.value)
{
z1.innerHTML="Enter the User Name";
return false;
}
if(!email.value)
{
z2.innerHTML="Please Enter The Email";
return false;
}
if(!dob.value)
{
var dob = dob.value;
var pattern = /^([0-9]{2})-([0-9]{2})-([0-9]{4})$/;
if (dob == null|| dob=="" || !pattern.test(dob)) {
z3.innerHTML= "Invalid date of birth\n";
return false;
}
}
if(!url.value)
{
regexp =
/^(?:(?:https?|ftp):\/\/)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/\S*)?$/;
if (regexp.test(url.value))
{
return true;
}
else
{
return false;
}
}
else
{
return true;
}
}
</script>
</head>
<body>
<form action="" method="post" onsubmit="return
form_validate()">
<label for="name">Name</label>
<input type="text" placeholder="User Name" id="user"><span
id="z1" style="color:Red;">
</span><br/><br/>
<label for="email">Email</label>
<input type="email" placeholder="Enter Email"
id="email"><span id="z2"
style="color:Red;"></span><br/><br/>
<label for="dob">Date Of Birth</label>
<input type="date" id="dob"><span id="z3"
style="color:Red;"></span><br/><br/>
<label for="website">Website URL</label>
<input type="url" id="webUrl"><span id="z4"
style="color:Red;"></span><br/><br/>
<button> Submit </button>
</body></html>
Ouput Image:
-------------------------------------------------------------------------------------------------------------------------------------------------------------------
THANKS!!
Add Answer to:
Create a web page and images. include plugins for displaying
images in light Box and...
Create two web pages as follows: Page 1: An html page with a form that will...
Create two web pages as follows: Page 1: An html page with a form that will allow the user to enter their name and gender <m/f> Page 2: A Php document that will process the data from the html form to display a welcome message of either ‘Welcome Mr. <submitted name>’ or ‘Welcome Ms. <submitted name>’ The <submitted name> is what the user submitted in the HTML form.
HTML/HTML5 script: Create a form as shown below: Present it as close as you see it...
HTML/HTML5 script: Create a form as shown below:
Present it as close as you see it on here.
Use the HTML5 attributes such as autocomplete, autofocus,
required, patter, email, url, text, input, formtarget and add more
as needed for this web form.
Aapply the proper attributes to validate the form on your
page.
Habitat for Humanity Learn more Registration Form Habitat for Humanity needs volunteers. Do you want to help? Complete the registration form and join our worldwide fight against...
HTML Web Page project: Need help to create a web page exactly as the example below...
HTML Web Page project:
Need help to create a web page exactly as the example below
using HTML. I need the source code.
Page 1 of CA272 Midterm Welcome to your name's CA272 Midterm Text In this class, I learned how to... 1. create an X)HTML web page, where I can 2. change the size of my font, 3. change the color of my fonts, 4. change my font style, 5. and change the background color of my web page....
i need help with this web page project and i need the code too for this web page Include two or three HTML features that...
i need help with this web page project and i need the code too for this web page Include two or three HTML features that make the website more robust, dynamic, and professional. Which features you opt to add can be discussed in the discussions. Some ideas might be to have all three types of links (internal to the page, links to your other pages, or links to other websites). Complete a Contact Us page which includes a form. Try...
a company. needs you to create an HTML5 page that contains a form with the following...
a company. needs you to create an HTML5 page that contains a form with the following requirements: Appropriate input types and labels for: Full name Email Address Website Check box fields to determine their level of “Epicness” (include a heading that precedes the checkboxes that says “Check boxes that apply to your items:”) Pretty common Emerald Holiday Blue Barney Purple A Submit button (the form doesn’t have to include a valid action attribute) Styles Create an external CSS file with...
You are planning to build a Web Site for a fictitious local organization or charity. The...
You are planning to build a Web Site for a fictitious local organization or charity. The website should allow the visitor to subscribe to a newsletter (simulated), present past newsletters, and view images related to the organization or efforts. You need to complete the entire design phase and then implement the Web application. Please create the Word document and answer the following questions: Identify the goal of the website: Who are the end users? Why do you need to have...
Create web pages for your database using PHP. You should have one page that will return...
Create web pages for your database using PHP. You should have one page that will return all the information from the database. You should create additional pages that will allow you to do various queries of your database. You should be able to retrieve and insert data; also include functionality to delete data from your database. Create an html form that will allow you to enter in new information for the database. The information should be handled by a PHP...
Create a CSS-styled Table Page For this Assignment you will first read the appropriate chapters in...
Create a CSS-styled Table Page For this Assignment you will first read the appropriate chapters in the textbook and then a create web page, for example called table.html, in your ubunix.buffalo.eduaccount just as you did in Home Page Assignment. Assignment Requirements Your new web page should utilize the following HTML tags and include the following: A <body> tag that uses an appropriate style value to change the background color of the web page. Appropriate <table>, <tr>, <th>, and <td> tags...
Place an e-iall k t0 yuIJU 6. Create a web page about your favorite sports team...
Place an e-iall k t0 yuIJU 6. Create a web page about your favorite sports team with a two-column table that list the positions and starting players. Use embedded CSS to style the table border, back ground color, and center the table on the web page. Place an e-mail link to yourself n the web page. Save the file as sport8.html. 7. Create a web page about your favorite movie that uses a two-column table contain- ing details about the...
HTML 5 and w3 validated with no errors Please ! 1. Create a Web page like...
HTML 5 and w3 validated with no errors Please !
1. Create a Web page like the following. You can use any set of images, but try to preserve the relative positioning of all items as shown below. Address Favorites CST 6305- Welome to the classhOpen To G Google INDEX Home Pag Instructor: Christo Dichev relative Lab Exercise: Positioning absolite What to turn in: Please submit your images together with the html file to Canvas
HTML/HTML5 script: Create a form as shown below:
Present it as close as you see it on here.
Use the HTML5 attributes such as autocomplete, autofocus,
required, patter, email, url, text, input, formtarget and add more
as needed for this web form.
Aapply the proper attributes to validate the form on your
page.
Habitat for Humanity Learn more Registration Form Habitat for Humanity needs volunteers. Do you want to help? Complete the registration form and join our worldwide fight against...
HTML Web Page project:
Need help to create a web page exactly as the example below
using HTML. I need the source code.
Page 1 of CA272 Midterm Welcome to your name's CA272 Midterm Text In this class, I learned how to... 1. create an X)HTML web page, where I can 2. change the size of my font, 3. change the color of my fonts, 4. change my font style, 5. and change the background color of my web page....
Place an e-iall k t0 yuIJU 6. Create a web page about your favorite sports team with a two-column table that list the positions and starting players. Use embedded CSS to style the table border, back ground color, and center the table on the web page. Place an e-mail link to yourself n the web page. Save the file as sport8.html. 7. Create a web page about your favorite movie that uses a two-column table contain- ing details about the...
HTML 5 and w3 validated with no errors Please !
1. Create a Web page like the following. You can use any set of images, but try to preserve the relative positioning of all items as shown below. Address Favorites CST 6305- Welome to the classhOpen To G Google INDEX Home Pag Instructor: Christo Dichev relative Lab Exercise: Positioning absolite What to turn in: Please submit your images together with the html file to Canvas
Most questions answered within 3 hours.
-
JBeats produce and sell a product that has variable costs of $33
and a selling price...
asked 3 seconds from now -
A 1500 kg elevator is used to transport people in a
building. What was the work...
asked 22 seconds ago -
For all questions inputs are given. User Input is not
required.
For all output: Print using...
asked 10 minutes ago -
describe each of Porter’s 5 forces Model. Also, indicate how and
which of the forces are...
asked 11 minutes ago -
Math Problem Generator
Your job will be to write a C++ program to
teach math to...
asked 19 minutes ago -
how many atoms are sp3 hybridized in C5H8O2?
asked 19 minutes ago -
A random sample of people was classified as given below.
Prominent
wrinkles
Wrinkles not
prominent
Heavy...
asked 32 minutes ago -
A die is rolled. Find the probability of the given event.
Write your answers as whole...
asked 36 minutes ago -
61
60
65
68
65
61
61
68
69
60
64
61
61
66
61
65...
asked 36 minutes ago -
According to the five-step model of bystander intervention, what
is the first thing you must do...
asked 22 minutes ago -
Draw a program on the rungs below that uses a timer function.
When a NO contact...
asked 30 minutes ago -
DNA fragments cut by most restriction enzymes have:
double-stranded complementary ends.
either only sequences of Gs...
asked 35 minutes ago