When someone asks me what programming language they should learn, I don't simply pick my favorite. I play matchmaker! Web frontend? JavaScript is the heartthrob. Backend? Still JavaScript steals the show. Mobile apps? JavaScript saves the day. Games? Yup, JavaScript's got game. AI? Guess what? JavaScript to the rescue again! So, no matter the path, JavaScript's the hot pick for a programmer's heart.
Follow the linked tutorial to code along and create a booklist app using HTML, CSS and Js. No need to submit the output, this is just for you to understand.
https://youtu.be/JaMCxVWtW58
Extend your knowledge of Js by building a bookmarker application.
https://youtu.be/DIVfDZZeGxM
Follow the linked tutorial to code along and create a booklist app using HTML, CSS and Js. No need to submit the output, this is just for you to understand.
https://youtu.be/NYq9J-Eur9U
Finally, create a webpage as the following (Fig 1) containing the student's name in tabular form with the provision to view marks. The user must be able to enter the student's name and add in to the table.
Fig: 1
Then, one must be able to view marks of individual students in the form of pop-up modal. Initially, there will be no marks shown. Then the user must be able to enter as much as any subjects along with thier 3 internal term examination marks with thier total as shown below. display the CGPA score in form percentage or out of 10.
Fig: 2
The file structure should look like the following or you can have your own.
📂 Task7
├── index.html #It contains students list
└── studentsmarks.html #It contains students marks displayed
In index.html
there contains an input field, value in the input field should be able to fetched and play with it inside the array, refer the resources below. The input field must be validated for any empty strings and an error message must be displayed ragarding it.
On clicking View marks button one should navigate to the new page using the Window/Document object containing the student id. The student id should be read from the URL and display yhe respective students marks in the studentsmarks.html
.
For persistant storage use localStorage
to never lose the data on refreshing the web page. To Know more about the Web Storage API, visit https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API.
Submit the link to your hosted static website Here.
https://forms.gle/DdKFebZgZK5sgREFA
- Bootstrap Modal
https://getbootstrap.com/docs/4.0/components/modal/ - Read text input value
https://www.tutorialrepublic.com/faq/how-to-get-the-value-of-text-input-field-using-javascript.php - JavaScript redirect URL with parameters
https://www.tutorialandexample.com/javascript-redirect-url-with-parameters - Web Storage API
https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API.