Scribd
Upload
11 views2 pages

JavaScript Data Entry Project Guide

This document provides instructions for a JavaScript project involving modifying a form's CSS and adding JavaScript functionality like displaying the date, printing the page, and showing hidden text. The instructions include changing the background color, adding a welcome paragraph with a border, adding buttons to display the date and print the screen, and using scripts to show hidden text.

Uploaded by

Raviar Ismail
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views2 pages

JavaScript Data Entry Project Guide

This document provides instructions for a JavaScript project involving modifying a form's CSS and adding JavaScript functionality like displaying the date, printing the page, and showing hidden text. The instructions include changing the background color, adding a welcome paragraph with a border, adding buttons to display the date and print the screen, and using scripts to show hidden text.

Uploaded by

Raviar Ismail
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

JavaScript Project:

This Project is about Data Entry, You will need to change few things in the CSS form and to follow the
listed Java Script format.

1) Change the background color in the Body of the page to any light color.
2) Add a paragraph to the page as to welcome the student to submit the form, use a Border
around the paragraph 3PX.
3) Add a button to show the current Date and Time.
4) Add a button to print the Screen or result.
5) Use a script to show the hidden Text ( use the information below)
6) Use a big size header with border in the Center of the Form ( BISK registration)
7) Contact US (use any email/fake address)

A) Welcome message: Dear Students:

Welcome all of you to the new academic year! We are thrilled to be partnering with you as you participate in an

exciting educational journey of discovery. Whether you are a returning, first-year, or transfer student, you will find

unlimited opportunities to enjoy campus life by learning, exploring, and engaging together.

B) Hidden Text : Student Information System is one of the key systems for facilitating


the management and development of Higher Education Institutions. Its use for
academic decision-making purposes as well as other academic tasks is crucial.

Useful Tags as examples:

1) <body style="background-color:powderblue;">
2) <h1 style="background-color:powderblue;">This is a heading</h1
3) <p style="background-color:tomato;">This is a paragraph.</p>
4) <p style="color:red;">I am red</p>
5) <p style="font-size:50px;">I am big</p>
6) <h1 style="background-color:powderblue;">This is a heading</h1>
7) <h1 style="text-align:center;">Centered Heading</h1>
8) <a href="[Link] Us</a>
<!DOCTYPE html>
<html>
<body>
// Date & Time
<h2>My First JavaScript</h2>
<button type="button"
onclick="[Link]('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>

<!DOCTYPE html>
// Window print
<html>
<body>
<button onclick="[Link]()">Print this page</button>
</body>
</html>

// show hidden text

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button"
onclick="[Link]('demo').[Link]='block'">Click Me!</button>

</body>
</html>

Common questions

Powered by AI

A paragraph element can be styled inline to stand out using CSS properties like `style="color:red; font-size:50px; background-color:tomato;"`. This adds both color and size emphasis, making the text more visually prominent against the page's background and aiding in catching user attention without requiring external style sheets .

Centered headings with borders in form design provide visual balance and focus, making the form look more organized and professional. The centered alignment ensures the heading stands out as a central element of the form, while the border adds definition and separates the heading from surrounding elements, enhancing clarity and user navigation through the form .

Changing the background color of a webpage to a lighter color can enhance user experience by improving readability and making the interface more visually appealing. It sets a calm and inviting tone, which can help reduce eye strain and improve focus, especially important in a data entry setting where users spend a prolonged time on the page .

When designing a contact section with email links on a website, considerations should include ensuring the format is user-friendly and easily accessible. The link should use a `mailto:` protocol to allow users to directly open their email client with a pre-filled address. It is also important to make the contact information visible and intuitive, ensuring users can easily find and use the contact section without navigation issues .

Hidden text in a web application can be beneficial for decluttering the interface and for initially concealing information that may not be needed immediately by the user. It can be revealed using JavaScript by changing the CSS 'display' property from 'none' to 'block'. For example, `document.getElementById('demo').style.display='block'` will show an element previously hidden in the HTML .

JavaScript can be used to dynamically display the current date and time by embedding a script with a button that triggers a function to update the HTML content. For instance, using `document.getElementById('demo').innerHTML = Date()` within the onclick event of a button will insert the current date and time into the element with the ID 'demo' when the button is clicked .

The `document.getElementById` method is crucial for DOM manipulation in JavaScript, as it allows the script to access and alter the content or style of specific HTML elements identified by a unique ID. This method is fundamental for dynamic webpage behavior, enabling direct interaction and changes based on user actions or predefined conditions .

Including a welcoming message on an educational institution's webpage is important as it sets a positive and engaging tone for new and returning students. It can foster a sense of community and belonging. This can be effectively implemented by placing a clear and inviting message within a prominent section of the page, potentially highlighted with visual elements like borders or distinct background colors to ensure it catches the user's attention .

Using a border around a paragraph can improve information presentation by visually distinguishing the paragraph from other page elements. It helps in grabbing the user's attention and clearly defines the area, enhancing the overall readability and aesthetic appeal of the webpage .

A print function can be implemented on a webpage by including a JavaScript `window.print()` method. This function can be linked to a button, allowing users to print the current page when the button is clicked. The implementation involves adding an HTML button element with an onclick attribute that calls the `window.print()` method .

You might also like