Search & Filtering
Time Converter from hours and minutes to seconds
Time Converter
In this assignment, let's build a Time Converter by applying the concepts we learned till now.
Refer to the below image.
Instructions:
- The HTML input element for entering the number of hours should have the id hoursInput
- The HTML input element for entering the number of minutes should have the id minutesInput
- Add HTML label elements for HTML input elements with ids hoursInput and minutesInput
- The HTML button element should have the id convertBtn
- The HTML p element to display the converted time in seconds should have the id timeInSeconds
- The HTML p element to display the error message should have the id errorMsg
By following the above instructions, achieve the given functionality.
- When values are entered in HTML input elements with ids hoursInput and minutesInput, the HTML button with id convertBtn is clicked
- The converted time in seconds should be displayed in the HTML p element with id timeInSeconds
- The HTML p element with id errorMsg should be empty
- The HTML p element with id errorMsg should display an error message in the following cases
- When the HTML input element with id hoursInput is empty and convertBtn is clicked
- When the HTML input element with id minutesInput is empty and convertBtn is clicked
- When both the HTML input elements hoursInput and minutesInput are empty and convertBtn is clicked
Quick Tip
- timeInSeconds = ((hours) *60 + minutes) * 60
Note
- The values given for the HTML input elements with ids hoursInput and minutesInput should be positive integers.
Resources
Use this Background image:
- https://assets.ccbp.in/frontend/dynamic-webapps/time-converter-bg.png
CSS Colors used:
Text colors Hex code values used:
#f5f7fa
#000000
#ffffff
CSS Font families used:
- Open Sans
Bookmark Maker
In this assignment, let's build a Bookmark maker by applying the concepts we learned till now.
Refer to the below image.
Instructions:
- The page should have HTML form element with id bookmarkForm
- The HTML form element with id bookmarkForm should have HTML input elements with ids siteNameInput and siteUrlInput
- The HTML form element with id bookmarkForm should have HTML button element with id submitBtn
- Add HTML label elements for HTML input elements with ids siteNameInput and siteUrlInput
- The HTML p elements with class name error-message should have ids siteNameErrMsg and siteUrlErrMsg respectively
- The HTML unordered list element with the class name bookmarks-container should have the id bookmarksList
- Each bookmark item should contain a HTML anchor element to navigate to the bookmarked site
Warning
- Please provide valid URL's to the siteUrlInput element
By following the above instructions, achieve the given functionality.
- When the HTML input element with id siteNameInput is empty after changing the value inside the input
- The HTML p element with id siteNameErrMsg should have error message
- When the HTML input element with id siteUrlInput is empty after changing the value inside the input
- The HTML p element with id siteUrlErrMsg should have error message
- When the HTML button element with the id submitBtn is clicked,
- If the values are entered in the HTML input elements with ids siteNameInput and siteUrlInput
- A new bookmark should be added to the bookmarksList container.
- If the siteNameInput value is empty,
- The HTML p element with id siteNameErrMsg should have error message
- If the siteUrlInput value is empty,
- The HTML p element with id siteUrlErrMsg should have error message
- When the visit button of a bookmark is clicked the site URL should open in a new tab.
Favorite Stores Page
In this assignment, let's build a Favorite Stores Page by applying the concepts we learned till now. You can use the Bootstrap concepts as well.
Refer to the below image.
https://assets.ccbp.in/frontend/content/static-website/favourite-stores-output-img.png
Note
Try to achieve the design as close as possible.
Resources
Use the image URLs given below.
- https://assets.ccbp.in/frontend/static-website/stores-img.png
- https://assets.ccbp.in/frontend/static-website/amazon-logo-img.png
- https://assets.ccbp.in/frontend/static-website/ikea-logo-img.png
- https://assets.ccbp.in/frontend/static-website/bewakoof-logo-img.png
- https://assets.ccbp.in/frontend/static-website/flipkart-logo-img.png
CSS Colors used:
Background color Hex Code values:
#894bca
#ffffff
Text color Hex Code values:
#f780c3
#ffffff
#323f4b
#7b8794
CSS Font families used:
- Bree Serif
In terms of content.1. what guidelines will you put out to guide the users on what and how they can contribute to the website ?
2. what mission statement will you use? what about a tagline? will you use one ?3. what section will you include?
4. will you upload forms such as : registration form, calendar of events , and list of artwork ? why or why not ?
Create a simple mashup page that displays both the BBC news (https://www.bbc.com/news) and BBC Pidgin (https://www.bbc.com/pidgin) home pages. Your solution should be in a file p3.html. Note: your solution for this problem does not need to validate.
Difference b/w inline and block element
I need some help creating a modularized JavaScript roll-over function for gallery images that functions correctly and permits additions of images without the need to hard-code the values. I believe the preload is working as it should, but I haven't quite connected all of the dots for the rollover as described below.
Hint: Preloading your images will only work on a hosting server and not your local drive as there’s no load time for your images locally. Once you have preloaded those images, you may want to clear your cache to test your loading of the images again.
Tip: In a smaller JavaScript program such as this one, each function is created for a specific purpose. However, in more complex sites, it is better to build functions that we can apply to multiple situations. For example, rather than specifying an element name or id, we can use a variable that is passed into the function.
Directions
Use the gallery.html and index.html files that you downloaded in the Zip file in Assessment 1. Create functionality using JavaScript on the following pages:
index.html
Preload the gallery images.
Create rollover functionality for each of the thumbnails in your image gallery. Use appropriate images found in the images folder.
Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery.
Make sure to do the following:
Create an onpageload function to preload all of your images.
Create a modularized rollover function for gallery images.
Here is the HTML code I have so far:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Invitation Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="js/galleryImages.js">
//added preload for the js file preload function
preload('images/firefighter.jpg', 'images/work.jpg', 'images/silhouette.jpg', 'images/event.jpg');
</script>
</head>
<body>
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers<span class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li><a href="index.html">Home</a>
</li>
<li><a href="invitation.html">Invitation</a>
</li>
<li><a href="gallery.html" class="active">Gallery</a>
</li>
<li><a href="registration.html">Registration</a>
</li>
</ul>
</nav>
</header>
<section id="gallery">
<div class="gallery">
<a target="_blank" href="images/firefighter.jpg">
<img class="image" src="images/firefighter.jpg" alt="firefighter" width="300" height="200"> <!-- added new class image to identify the roll over event with url of the selected image -->
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="images/work.jpg">
<img class="image" src="images/work.jpg" alt="work" width="300" height="200"> <!-- added new class image to identify the roll over event with url of the selected image -->
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="images/silhouette.jpg">
<img class="image" src="images/silhouette.jpg" alt="silhouette" width="300" height="200"> <!-- added new class image to identify the roll over event with url of the selected image -->
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="images/event.jpg">
<img class="image" src="images/event.jpg" alt="event" width="300" height="200"> <!-- added new class image to identify the roll over event with url of the selected image -->
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div id="fullImage"></div> <!-- added new DIV to display full image dynamically from JS-->
</section>
<footer>This events site is for IT-FP3215 tasks.
</footer>
</body>
</html>
Here is the JS I have:
//Preload function has to be included
var images = [];
//function to preload banner images
function preloadBannerImages() {
// get the src of all banner images in document and then preload them
for (var i = 0; i < images.length; i++) {
var img = new Image();
img.src = images[i].src;
}
console.log('Preloading completed!');
}
/*Example of code from professor for this functionality
function setupRollover('img1') {
theImage.outImage = new Image();
theImage.outImage.src = theImage.src;
theImage.oumouseout = function () {
this.src = this.outImage.src;
};
}*/
//Rollover functionality using modularized code
var imageGallery = function () {
var sliderInd = 0; //defining global index to count slide images.
},
addListeners = function () {
var items = document.getElementsByClassName("image"); //getting img elements by CSS class name to register event
for (let index = 0; index < items.length; index++) {
const element = items[index];
element.addEventListener("mouseover", this.loadFullImage, false);
}
},
loadFullImage = function (event) // mouse over event handler function to load full image
{
console.log(event.target.src);
document.getElementById("fullImage").innerHTML = '<img src="' + event.target.src + '"/>'; //adding full image to DIV
},
retObject = {
//public function in return object will be exposed to other members.
init: function () {
addListeners(); // calling method to register mouse over events
}
};
