Question: Hi I've got a coding task I need to work on. It includes html, js and css I'll include the instructions as well as my
Hi I've got a coding task I need to work on. It includes html, js and css
I'll include the instructions as well as my code so far. Don't give generic answers, Your answer should solve this task not have me doing more research. I've started some of them but all functions don't seem to be working.
Within the entirety of your site, you should have the following JavaScript functionality: Create a functional Save for later page for your website, where users can earmark articles, images, recipes, etc. in a personal folder to be able to go back and see them later. Each item/recipe/image, etc. must have the option to Save for later. When an item is added, an alert should tell the user how many items are in their Save for later folder. Create a new HTML page for the Save for later section, which allows the user to see what is in their folder. Create a form which allows a user to leave comments. Create forms to allow a user to like an item/article/etc. Create forms for if a person would like to contact you. Within the entirety of your site, you should have at least the following jQuery functionality: A function which contains hiding/showing. A drop-down menu. Animation effects. A function with chained effects.
HTML
-
- About Me
- Click Here!
All About My Passion: Swimming
Intro
swimming, in recreation and sports, the propulsion of the body through water by combined arm and leg motions and the natural flotation of the body.
Swimming as an exercise is popular as an all-around body developer and is particularly useful in therapy and as exercise for physically handicapped persons.
It is also taught for lifesaving purposes.
To Learn more About Me Click Here!
What are the benefits of swimming?
- As well as being fun, swimming is a great way to keep fit and make friends.
- Swimming is a healthy activity that you can continue for a lifetime.
- Swimming is a low-impact activity that has many physical and mental health benefits.
- Make sure you know how to swim and do so in a safe environment.
To Learn more about the benefits of Swimming Click Here!
How Swimming competitions work
Swimmers are grouped into heats based upon their seeded times, and heats for each event progress from slowest to fastest.
At larger meets, men and women swim in separate heats. At smaller meets, they may simply be grouped together based upon their seeded times.
You also get long course and short course events (in the US you get Short Course Yards as well), in this case your fastest time
will always be converted to the length of the pool you are swimming in.
For more info on converted times Click Here!
Choose your favorite Meet Length:
Leave a comment on your favourite Meet Memory:
JS
// Add an event listener to the form
$('#comment-form').submit(function(e) {
e.preventDefault();
// Get the value of the comment
let comment = $('#comment').val();
// Add the comment to the comments section
$('#comments').append(`
${comment}
`);
});
//Function to hide elements
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
//Dropdown list
$(document).ready(function () {
$('#menu-icon').click(function () {
$('.sub-nav').toggleClass('visible');
});
});
CSS
body {
margin-left: 20px;
margin-right: 20px;
background-color: aquamarine;
}
h1 {
color: black;
font-family: Arial;
font-size: 20pt;
text-align: center;
}
h2 {
color: black;
font-family: Arial;
font-size: 18pt;
text-align: center;
}
p {
color: black;
font-family: Arial;
font-size: 14pt;
text-align: center;
}
ul {
color: black;
font-family: Arial;
font-size: 14pt;
text-align: center;
}
li {
color: black;
font-family: Arial;
font-size: 14pt;
text-align: center;
}
table, th, td {
color: black;
font-family: Arial;
font-size: 14pt;
text-align: center;
vertical-align: top;
column-width: 500px;
border: 2px solid black;
}
#sideNote {
color: blue;
font-family: Arial;
font-size: 14pt;
text-align: center;
background-color: white;
}
#sideNoteHead {
color: blue;
font-family: Arial;
font-size: 16pt;
text-align: center;
background-color: white;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
form {
color: black;
font-family: Arial;
font-size: 14pt;
text-align: center;
}
nav ul {
list-style:none;
}
nav ul li ul {
display:none;
}
.visible {
display:block;
}
#menu-icon:before {
content: "Menu";
display: inline-block;
width: 50px;
}
#menu-icon:after {
content: "\2261";
display: inline-block;
width: 50px;
}
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
Study Help