$29
Outlab 6 : HTML, CSS and Javascript Solution
q1 - HTML-CSS (85 Marks)
Create your own professional webpage. (thats it)
This assignment is for you to explore. The below are the minimum requirements which you should have at the end of the task which will actually be graded. Try and use the following in a meaningful fashion.
1. Table (as a suggestion you can give your timetable)(10)
2. An image(5)
3. A video(5)
4. A form (only the HTML part with frontend validation)(10)
5. 4 Hyperlinks atleast (make these meaningful)(5)
a. Link within same page
b. Link to department homepage
1 of 4 30/09/19, 10:56 pm
Outlab 6 - HTML,CSS and Javascript https://docs.google.com/document/d/e/2PACX-1...
c. External link other than the deparment homepage
d. A link of your choice
6. 2 Lists(ordered and unordered)(5)
7. Use CSS at the following levels(10)
a. Make use of id selectors and class selectors.
b. Inline Internal as well as External CSS.
c. Play around with font sizes and families.(use link)
8. Should have a navbar(10)
9. Should have parallax scrolling. As a very advanced use you can look at this (just for motivation . not even close to this is required). For a starting tutorial you can look at this. Many seniors have used it inside of their website so please have a look at that.(10)
10. Should be responsive. Use BOOTSTRAP. This will be the thing that will be tested the most and please make sure you understand the meaning of responsive. Your site should look “good” on mobile, tablet and a laptop. (15)
Make a README.txt with your CSE LDAP ID (i.e., the id appearing on this page).
The first line of your README.txt file should be your roll number and second line should be your username.
As an example
160050043
sanchit
This is so that the TAs can identify your CSE ID and hence grade you.
The TAs will grade your website after visiting it at the link www.cse.iitb.ac.in/~<username>. As an example www.cse.iitb.ac.in/~sanchit. This will be tested in chrome or mozilla. Instructions to upload your file to the URL:-
• We assume all of you know about your account on cse web server which is the one you actually log into when you log in any of the machines of sl2 or sl1 or cs101.
• When we direct to the website www.cse.iitb.ac.in/~<username> It actually searches for
“index.html” inside of “public_html” folder inside your home folder in the cse web server and renders it. Just do “ssh <username>@mars.cse.iitb.ac.in” and do “ls” you will find a directory named “public_html”. Your files should go here
• There are two ways in which you can go about it
◦ Local Work Directory
▪ Create your local file in the folder say myLocalFolder with a mandatory “index.html”
▪ Shift the contents of this folder to public_html using scp command
▪ scp -r <localpath>/myLocalFolder/* <username>@mars.cse.iitb.ac.in:~/public_html/
◦ Remote Work Directory
▪ Create a directory names myRemoteFolder in your local machine at any place you like
▪ Run “sshfs <username>@mars.cse.iitb.ac.in:/users/ug18/<username> /public_html <local_path>/MyRemoteFolder”
▪ Now work on this MyRemoteFolder and all the changes will be reflected in your remote server automatically. Make sure you have “index.html” file.
• After doing the above setup make an index.html file with the content as
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
2 of 4 30/09/19, 10:56 pm
Outlab 6 - HTML,CSS and Javascript https://docs.google.com/document/d/e/2PACX-1...
</body>
</html>
Now open www.cse.iitb.ac.in/~<username> and check if you have the desired result.
• Note that the first method is preferred in case you do not want anyone else to see your intermediate changes but for the extent of this lab the second method should be preferable and convenient. Also we suggest to work on your personal laptops and set the above workspace inside of the inlab itself so that you can carry it forward to your rooms without any setup barrier.
The websites which your seniors created can be found at https://www.cse.iitb.ac.in/page222 . Select the batch you want to see followed by clicking on the name of the person.
Note that some seniors may have updated their websites in their later years so please don’t be overwhelmed. Instead look for ideas which you can implement/borrow inside of your own webpage.
Some Clarifications:-
• You must complete the bare minimum before trying out something fancy
• This is an open ended task which should be dealt with seriousness as your website will reflect on who you are. SInce your website is hosted on iitb domain it is advisable to maintain high professional standard in your website design.
• Make the website interesting and made by a college sophomore. You can try to add an element of humour but at the same time maintain proper decency for your own sake
• You can make the website more meaningful and informative by including topics such as (just a guideline to fill in content. Do not limit your imaginations to the list below and feel free to include anything and everything you want to tell the world)
◦ Formal
▪ Academic Interests
▪ Academic acheivements
▪ Goals/Aspirations for my future career
▪ Startup(s) that I want to start
▪ Societies of IITB that you are part of
▪ Portfolio/Projects
▪ Technical Skills
▪ Timetable
▪ Contact Info
▪ Everything you want to put in your resume
◦ Informal
▪ Quotes that inspire me
▪ Songs that define me/ I can relate to
▪ My favourite Memes
▪ My Hobbies/Passions
▪ Social Cause that I want to support/Am supporting
▪ My favourite food
▪ Places I want to visit
▪ My role Model
▪ My favourite Memory
▪ TV series/Movies/Anime
q2 - Tic-Tac-Toe (15 Marks + 5 Bonus)
You have to implement the standard 2-player TicTacToe game. These are the exact specifications:
• There should be an interactive 3X3 board. (When we say square, we mean those smallest squares).
• Players have their respective symbol (cross or circle). These symbols will be interchanged after each game (i.e. in the first game, player1 gets cross; in the next game, player 2 gets cross ..). At the start of every game, cross plays first.
• Players play by clicking a square. When one player clicks a free square, their symbol (either a circle or a cross) should appear inside that square. If someone clicks an occupied
3 of 4 30/09/19, 10:56 pm
Outlab 6 - HTML,CSS and Javascript https://docs.google.com/document/d/e/2PACX-1...
square, nothing should happen.
• Players play alternatively. So, the first click should place a cross, second click should place a circle, 3rd-> again a cross and so on.
• A table needs to be maintained. It should have four columns: serial_no, result, cumulative score for player 1, cumulative score for player 2 (you can name them appropriately).
• For each row, serial_no is just the row number (starting with 1). Result is one of the three characters: {1,2,T}. If the match ends up as a tie, put T. If someone wins, then put their number (1 for player 1 and 2 for player 2). Other two columns should track the cumulative scores for both players.
• Scoring: Winner will get 4 points; loser will get no point; and if the game ends up as a tie, both players will get 1 point each.
• After each move, you should check if any player has won or the match has tied. In any case, update the table by appending a new row at its end. Then start a new game after 5 seconds. A countdown should appear to indicate the same with the following message:
<RESULT>! Starting a new game in <t> seconds…
• <RESULT> is one of the 3 things:
◦ Player 1 won
◦ Player 2 won
◦ Match tied
• <t> will go from 5 to 1. Any click on the board during this time must start a new game immediately. Starting a new game should refresh the board, change symbols for players, and the above countdown should vanish. It must NOT refresh the whole page!
Bonus:
After each move, instead of naively checking the current state, mark the game as complete if you detect that no matter who plays what, the outcome won’t change. For example, if at some point it is clear that player 1 will definitely win, declare player 1 as the winner.
Submission Guidelines
DO NOT USE any other method of compressing your folder. Please strictly use this command to tar gzip your submission as -
tar -zcvf outlab6-<roll_no>.tar.gz outlab6-<roll_no>/
We enforce this because it ensures our script can decompress your submission without hiccups.
Submissions that do not follow this will not be graded in this lab
outlab6-<roll_no>
├── q1
• └─── README.txt
•
└── q2
├── file1 ├── file2
└── file3 <as many as you want>
Published by Google Drive – Report Abuse – Updated automatically every 5 minutes
4 of 4 30/09/19, 10:56 pm
