Upda Intern Report 5
Upda Intern Report 5
Internship Program
The problem statement is to create a interactive online resume using HTML, CSS
and JavaScript. An interactive resume is a way to showcase our skills and
experience. The interactive resume should include animations, interactive
elements and engaging visuals. Interactive Resume should be responsive and look
good on various screen.
Why this problem statement is there?
Linked CSS file to HTML file in head tag using <link> tag. Linked JavaScript file to
HTML file using script tag in body tag. First we implemented navigation menu
using <nav> tag. Inside <nav> element, an unordered list <ul> is used to structure
the navigation items. Inside which <li> is contained. Each list item contain an
anchor <a> element. Using <a> element we ensure navigation to different section
of resume. Added profile image using <img> tag. Created different section for
Personal Information, Education, Skills, Work Experience and Projects using
<section> tag.
Project 1: Interactive Resume
The first line of JavaScript code ensure that inside event listener will only run when
entire HTML document is fully loaded. ‘myButton1’ is the button when clicked will
display the popup. An event listener is added to ‘myButton1’ . Website is
responsive.
Project 1: Interactive Resume, Screenshot of Result
Project 1: Interactive Resume, Screenshot of Result
Problem Statement
The problem statement is to create a interactive quiz using HTML, CSS and
JavaScript. An interactive quiz contain multiple choice question and it should
display the score at the end. Create a quiz that can handle a dynamic number of
questions and answer choices.
Why this problem statement is there?
HTML file is used to structure the quiz. Such as submit button using <button> tag.
In CSS file, .question-image is used to size the image used in questions. In
selecting a option, cursor is used as pointer using command cursor: pointer. In
JavaScript file, questions and answers are stored as JavaScript object.
Implemented shuffle function which randomly shuffle the elements of the array.
Implemented a 10-second countdown timer that updates an HTML element with
the remaining time every second. loadQuestion() function updates the content of
an HTML page to display a specific question, its image, and its answer options
dynamically.
Project 2: Interactive Quiz, Screenshot of Result
Project 2: Interactive Quiz, Screenshot of Result
Problem Statement
The problem statement is to create a blog website using HTML, CSS and
JavaScript. Implement a navigation menu that allow user to navigate between
different blog. We need to add comments to each blog post. Blog website should
be responsive and look good on various screen.
Why this problem statement is there?
It helps in learning the basics of web development. HTML structures the content,
CSS styles it, and JavaScript adds interactivity, forming the foundation of web
development.
Project 3: Blog Website
First we implemented navigation menu using <nav> tag. Added social media
sharing icons and added them functionality using anchor tag. Added three Blog
post in HTML file using three <div> tag. Each Blog post is linked to separate HTML
file using anchor tag. Added background color to each <div> class in CSS.
Decorated the navigation menu. Added font size, margin to the post date and post
description. Implemented smooth scrolling using JavaScript. searchPosts()
function filters and displays posts based on whether the search query matches the
content in the post's title or description. Each blog post also have single HTML file
where description about each Blog post is given.
Project 3: Blog Website
Also each Blog post has comment section. Comment section is implemented
using <form> tag. The submit button is handled to add new comment. The
comments_arr array is intialized as an empty array. Comments does not disappear
after refreshing page. Website is responsive.
Project 3: Blog Website, Screenshot of Result
Project 3: Blog Website, Screenshot of Result
Project 3: Blog Website, Screenshot of Result
Project 3: Blog Website, Screenshot of Result
Project 3: Blog Website, Screenshot of Result
Project 3: Blog Website, Screenshot of Result
Project 3: Blog Website, Screenshot of Result
Project 3: Blog Website, Screenshot of Result
Project 3: Blog Website, Screenshot of Result